/* ═══════════════════════════════════════════════════════════════════
   MusicMuse Design System — Editorial
   Extends the base tokens in index.php :root. Tenant-respecting:
   reuses --gold, --tx*, --sur*, --bor*, --fd, --fb, --r* so any
   tenant theme overrides continue to flow through.
═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing scale (4px base, 8-step rhythm) ────────────────── */
  --mm-s-1:  4px;
  --mm-s-2:  8px;
  --mm-s-3: 12px;
  --mm-s-4: 16px;
  --mm-s-5: 24px;
  --mm-s-6: 32px;
  --mm-s-7: 48px;
  --mm-s-8: 64px;
  --mm-s-9: 96px;
  --mm-s-10: 128px;

  /* ── Type scale (responsive, fluid between mobile and desktop) ── */
  --mm-type-display:  clamp(40px, 7vw,  88px);  /* hero, full-bleed moments  */
  --mm-type-headline: clamp(28px, 4.5vw, 52px); /* page title                */
  --mm-type-title:    clamp(20px, 2.8vw, 30px); /* section title             */
  --mm-type-subtitle: clamp(15px, 1.6vw, 17px); /* lead paragraph below H1   */
  --mm-type-body:     15px;                      /* paragraph                 */
  --mm-type-caption:  13px;                      /* secondary text            */
  --mm-type-eyebrow:  11px;                      /* SECTION LABEL             */
  --mm-type-tiny:     10px;                      /* timestamps, badges        */

  /* ── Motion ──────────────────────────────────────────────────── */
  --mm-ease:    cubic-bezier(.2, .8, .2, 1);
  --mm-ease-in: cubic-bezier(.4, 0, 1, 1);
  --mm-t-quick:  150ms;
  --mm-t-normal: 250ms;
  --mm-t-slow:   400ms;

  /* ── Layer / elevation tokens ─────────────────────────────────── */
  --mm-shadow-sm: 0 4px 12px rgba(0,0,0,.25);
  --mm-shadow-md: 0 8px 24px rgba(0,0,0,.35);
  --mm-shadow-lg: 0 16px 48px rgba(0,0,0,.45);
  --mm-shadow-accent: 0 8px 28px rgba(245,158,11,.22);

  /* ── Accent variants (built from --gold so tenants still win) ── */
  --mm-accent-soft:   color-mix(in srgb, var(--gold) 12%, transparent);
  --mm-accent-border: color-mix(in srgb, var(--gold) 25%, transparent);
}

/* ═════════════════════════════════════════════════════════════════
   TYPOGRAPHY CLASSES
   Each class is self-contained: family, size, weight, leading.
   Composable with utility classes below.
═════════════════════════════════════════════════════════════════ */

.mm-eyebrow {
  font-family: var(--fb);
  font-size: var(--mm-type-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.2;
}

.mm-eyebrow.mm-eyebrow-muted { color: var(--tx3); }

.mm-display {
  font-family: var(--fd);
  font-size: var(--mm-type-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--tx);
}

.mm-headline {
  font-family: var(--fd);
  font-size: var(--mm-type-headline);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.005em;
  color: var(--tx);
}

.mm-title {
  font-family: var(--fd);
  font-size: var(--mm-type-title);
  font-weight: 400;
  line-height: 1.15;
  color: var(--tx);
}

.mm-subtitle {
  font-family: var(--fb);
  font-size: var(--mm-type-subtitle);
  font-weight: 400;
  line-height: 1.55;
  color: var(--tx2);
}

.mm-body {
  font-family: var(--fb);
  font-size: var(--mm-type-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--tx);
}

.mm-body-muted { color: var(--tx2); }

.mm-caption {
  font-family: var(--fb);
  font-size: var(--mm-type-caption);
  font-weight: 400;
  line-height: 1.5;
  color: var(--tx2);
}

.mm-tiny {
  font-family: var(--fb);
  font-size: var(--mm-type-tiny);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx3);
}

/* Italic accent for taglines / quotations */
.mm-italic { font-style: italic; }
/* Cormorant looks beautiful in italic — call it out */
.mm-display.mm-italic,
.mm-headline.mm-italic,
.mm-title.mm-italic { letter-spacing: 0; }

/* ═════════════════════════════════════════════════════════════════
   BUTTONS
═════════════════════════════════════════════════════════════════ */

.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mm-s-2);
  font-family: var(--fb);
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: transform var(--mm-t-quick) var(--mm-ease),
              background var(--mm-t-quick) var(--mm-ease),
              border-color var(--mm-t-quick) var(--mm-ease),
              box-shadow var(--mm-t-quick) var(--mm-ease),
              opacity var(--mm-t-quick) var(--mm-ease);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* Sizes */
.mm-btn-sm { padding: 8px 14px;  font-size: 13px; min-height: 36px; }
.mm-btn-md { padding: 11px 20px; font-size: 14px; min-height: 44px; }
.mm-btn-lg { padding: 14px 28px; font-size: 15px; min-height: 52px; }

/* Variants */
.mm-btn-primary {
  background: var(--gold);
  color: #000;
  box-shadow: var(--mm-shadow-accent);
}
.mm-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(245,158,11,.32);
}

.mm-btn-ghost {
  background: transparent;
  color: var(--tx2);
  border-color: var(--bor2);
}
.mm-btn-ghost:hover:not(:disabled) {
  color: var(--tx);
  border-color: var(--tx3);
  background: var(--sur);
}

.mm-btn-outline {
  background: transparent;
  color: var(--gold);
  border-color: var(--mm-accent-border);
}
.mm-btn-outline:hover:not(:disabled) {
  background: var(--mm-accent-soft);
}

.mm-btn-secondary {
  background: var(--sur);
  color: var(--tx);
  border-color: var(--bor);
}
.mm-btn-secondary:hover:not(:disabled) {
  background: var(--sur2);
  border-color: var(--bor2);
}

.mm-btn:disabled,
.mm-btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ═════════════════════════════════════════════════════════════════
   CARDS
═════════════════════════════════════════════════════════════════ */

.mm-card {
  background: var(--bg2);
  border: 1px solid var(--bor);
  border-radius: var(--r2);
  padding: var(--mm-s-5);
  transition: transform var(--mm-t-normal) var(--mm-ease),
              border-color var(--mm-t-normal) var(--mm-ease);
}

.mm-card-interactive {
  cursor: pointer;
}
.mm-card-interactive:hover {
  transform: translateY(-2px);
  border-color: var(--bor2);
}

.mm-card-tight   { padding: var(--mm-s-4); }
.mm-card-relaxed { padding: var(--mm-s-6); }
.mm-card-roomy   { padding: var(--mm-s-7); }

/* Hero variant — for full-bleed legend portrait or banner */
.mm-card-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r3);
  aspect-ratio: 16 / 9;
}

.mm-card-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mm-card-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5,5,10,0)   0%,
    rgba(5,5,10,.3)  50%,
    rgba(5,5,10,.9) 100%
  );
  pointer-events: none;
}

.mm-card-hero__body {
  position: absolute;
  left: var(--mm-s-5);
  right: var(--mm-s-5);
  bottom: var(--mm-s-5);
  z-index: 1;
}

/* ═════════════════════════════════════════════════════════════════
   STATS — for dashboards, history headers
═════════════════════════════════════════════════════════════════ */

.mm-stat {
  background: var(--bg2);
  border: 1px solid var(--bor);
  border-radius: var(--r);
  padding: var(--mm-s-4);
  text-align: center;
}

.mm-stat__value {
  font-family: var(--fd);
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 400;
  color: var(--tx);
  line-height: 1;
  margin-bottom: var(--mm-s-2);
}

.mm-stat__label {
  font-family: var(--fb);
  font-size: var(--mm-type-eyebrow);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx3);
}

/* ═════════════════════════════════════════════════════════════════
   LAYOUT UTILITIES
═════════════════════════════════════════════════════════════════ */

.mm-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

.mm-container-wide  { max-width: 1280px; }
.mm-container-tight { max-width: 720px; }

.mm-section { padding: var(--mm-s-8) 0; }
.mm-section-sm { padding: var(--mm-s-7) 0; }

.mm-divider {
  height: 1px;
  background: var(--bor);
  border: none;
  margin: var(--mm-s-6) 0;
}

/* Stack: vertical rhythm helper. Children get top margin from --mm-stack-gap. */
.mm-stack > * + * { margin-top: var(--mm-stack-gap, var(--mm-s-4)); }
.mm-stack-sm  { --mm-stack-gap: var(--mm-s-2); }
.mm-stack-md  { --mm-stack-gap: var(--mm-s-4); }
.mm-stack-lg  { --mm-stack-gap: var(--mm-s-6); }
.mm-stack-xl  { --mm-stack-gap: var(--mm-s-8); }

/* Flow: horizontal rhythm helper */
.mm-flow {
  display: flex;
  align-items: center;
  gap: var(--mm-s-3);
  flex-wrap: wrap;
}
.mm-flow-sm { gap: var(--mm-s-2); }
.mm-flow-lg { gap: var(--mm-s-5); }

/* ═════════════════════════════════════════════════════════════════
   FORM FIELDS
═════════════════════════════════════════════════════════════════ */

.mm-input,
.mm-textarea {
  font-family: var(--fb);
  font-size: var(--mm-type-body);
  background: var(--bg2);
  border: 1px solid var(--bor);
  border-radius: var(--r);
  padding: 11px 14px;
  color: var(--tx);
  width: 100%;
  transition: border-color var(--mm-t-quick) var(--mm-ease),
              background  var(--mm-t-quick) var(--mm-ease);
}
.mm-input:focus,
.mm-textarea:focus {
  border-color: var(--gold);
  background: var(--sur);
  outline: none;
}
.mm-textarea { resize: vertical; min-height: 100px; }

.mm-label {
  display: block;
  font-family: var(--fb);
  font-size: var(--mm-type-caption);
  font-weight: 600;
  color: var(--tx2);
  margin-bottom: var(--mm-s-2);
}

/* ═════════════════════════════════════════════════════════════════
   BADGES & PILLS
═════════════════════════════════════════════════════════════════ */

.mm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-s-2);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--fb);
  font-size: var(--mm-type-tiny);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--sur);
  color: var(--tx2);
  border: 1px solid var(--bor);
}
.mm-badge-accent { background: var(--mm-accent-soft); color: var(--gold); border-color: var(--mm-accent-border); }
.mm-badge-success { background: rgba(34,197,94,.12); color: var(--grn); border-color: rgba(34,197,94,.25); }

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE TWEAKS — keep tight on mobile
═════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .mm-section    { padding: var(--mm-s-7) 0; }
  .mm-section-sm { padding: var(--mm-s-6) 0; }
  .mm-card-relaxed,
  .mm-card-roomy { padding: var(--mm-s-5); }
}

/* ICON_ANIM_FIX 2026-05-22: medium-reactive animations for instrument SVGs.
   Float idle (gentle vertical drift) + hover lift (scale + rotate + currentColor glow).
   Targets every .mm-instr-icon site-wide. Respects prefers-reduced-motion. */
.mm-instr-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  transition: transform .35s cubic-bezier(.4,0,.2,1), filter .35s ease;
  animation: mm-instr-float 4s ease-in-out infinite;
  will-change: transform, filter;
}
@keyframes mm-instr-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}
.mm-instr-icon:hover,
*:hover > .mm-instr-icon,
a:hover .mm-instr-icon,
.legend-card:hover .mm-instr-icon,
.region-card:hover .mm-instr-icon,
.lesson-card:hover .mm-instr-icon {
  animation: none;
  transform: scale(1.15) rotate(-4deg);
  filter: drop-shadow(0 0 10px currentColor);
}
/* Stagger the float so a row of icons doesn't pulse in unison */
.mm-instr-icon:nth-child(2n)   { animation-delay: -1s; }
.mm-instr-icon:nth-child(3n)   { animation-delay: -2s; }
.mm-instr-icon:nth-child(5n)   { animation-delay: -3s; }
@media (prefers-reduced-motion: reduce) {
  .mm-instr-icon { animation: none; }
  .mm-instr-icon:hover { transform: none; filter: none; }
}

/* MOTION_PASS3_CSS_FIX 2026-05-22 */
.mm-hero-glow-pulse { animation: mm-glow-breathe 9s ease-in-out infinite; will-change: opacity, transform; }
@keyframes mm-glow-breathe {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
.mm-fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
  transition-delay: var(--mm-fade-delay, 0s);
}
.mm-fade-up.mm-in-view { opacity: 1; transform: translateY(0); }
.mm-track-card { transition: transform .35s cubic-bezier(.4,0,.2,1), border-color .35s ease, box-shadow .35s ease; }
.mm-track-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.18) !important; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
@media (prefers-reduced-motion: reduce) {
  .mm-hero-glow-pulse { animation: none; }
  .mm-fade-up { opacity: 1; transform: none; transition: none; }
  .mm-track-card { transition: none; }
}

/* TAB_TRANSITION_FIX 2026-05-22 — fade-in on tab content load */
.content-area {
  animation: mm-tab-fade-in .65s cubic-bezier(.2,.6,.2,1) both;
}
@keyframes mm-tab-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Tab buttons: smoother active-state transition */
.tab-btn {
  transition: color .35s ease, border-color .35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .content-area { animation: none; }
  .tab-btn { transition: none; }
}

/* FINAL_PASS_FIX 2026-06-01 — hero entrance cascade + sidebar card lift */

/* 1. Legend hero elements cascade in on every page load.
      .content-area handles the tab body; these handle the fixed hero above it. */
@keyframes mm-hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.legend-name     { animation: mm-hero-rise .85s cubic-bezier(.2,.6,.2,1) .08s both; }
.legend-era-line { animation: mm-hero-rise .85s cubic-bezier(.2,.6,.2,1) .22s both; }
.legend-tagline  { animation: mm-hero-rise .85s cubic-bezier(.2,.6,.2,1) .36s both; }

/* 2. Story sidebar cards get a hover lift on desktop. */
.mm-story-card {
  transition: transform .35s cubic-bezier(.4,0,.2,1),
              border-color .35s ease,
              box-shadow .35s ease;
}
.mm-story-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

@media (prefers-reduced-motion: reduce) {
  .legend-name,
  .legend-era-line,
  .legend-tagline { animation: none; }
  .mm-story-card  { transition: none; }
}

/* ============================================================
   MUSICMUSE DESIGN SYSTEM
   Unified card system derived from Legends
   ============================================================ */

.mm-card-unified{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:28px;
  background:rgba(16,18,30,.95);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s,
    border-color .35s;
}

.mm-card-unified:hover{
  transform:translateY(-6px);
  border-color:rgba(255,215,120,.35);
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 0 40px rgba(255,215,120,.12);
}

.mm-card-image{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
}

.mm-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}

.mm-card-unified:hover .mm-card-image img{
  transform:scale(1.05);
}

.mm-card-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,.65) 100%
    );
}

.mm-card-pill{
  position:absolute;
  top:14px;
  left:14px;
  z-index:5;
  padding:8px 14px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  backdrop-filter:blur(10px);
  box-shadow:
    0 0 20px currentColor,
    0 4px 12px rgba(0,0,0,.35);
}

/* .mm-card-body and .mm-card-title moved to the UI.5 single source of
   truth block below (were duplicated here + in 3 appended blocks). */

.mm-card-meta{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}

.mm-card-description{
  font-size:15px;
  line-height:1.6;
  opacity:.85;
}

.mm-card-grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

/* ============================================================
   TYPOGRAPHY SYSTEM
   ============================================================ */

:root{
  --mm-h1:48px;
  --mm-h2:32px;
  --mm-h3:24px;
  --mm-h4:20px;

  --mm-body:16px;
  --mm-small:14px;
  --mm-micro:12px;
}

.mm-h1{
  font-size:var(--mm-h1)!important;
}

.mm-h2{
  font-size:var(--mm-h2)!important;
}

.mm-h3{
  font-size:var(--mm-h3)!important;
}

.mm-h4{
  font-size:var(--mm-h4)!important;
}

.mm-body{
  font-size:var(--mm-body)!important;
}

.mm-small{
  font-size:var(--mm-small)!important;
}

.mm-micro{
  font-size:var(--mm-micro)!important;
}

@media(max-width:768px){

  :root{
    --mm-h1:38px;
    --mm-h2:28px;
    --mm-h3:22px;
    --mm-h4:18px;
  }

}

/* ============================================================
   MUSICMUSE UI.5 — UNIFIED CARD SYSTEM · SINGLE SOURCE OF TRUTH
   Replaces the prior UI.3 + UI.4 + "FINAL OVERRIDES" + "FINAL
   SOURCE OF TRUTH" blocks, which defined .mm-card / .mm-card-title /
   .mm-card-body multiple times in conflict. Derived from the Legends
   page .legend-card design. EDIT CARD STYLES HERE ONLY.
   ============================================================ */

:root{
  --mm-card-radius: 22px;
  --mm-card-radius-sm: 18px;
  --mm-card-border: rgba(255,255,255,.09);
  --mm-card-surface:
    radial-gradient(circle at top left, rgba(245,158,11,.10), transparent 36%),
    linear-gradient(180deg, rgba(20,20,32,.97), rgba(10,10,18,.99));
  --mm-card-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  --mm-card-shadow-hover: 0 22px 60px rgba(0,0,0,.55), 0 0 34px rgba(245,158,11,.10), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---- SHARED SURFACE FAMILY ----
   One surface, radius, border, hover for every card/panel.
   Legacy aliases (.mm-card-unified) map in so older markup keeps working. */
.mm-card,
.mm-card-unified,
.mm-panel,
.mm-hero-card,
.mm-card-interactive,
.mm-practice-panel,
.mm-dashboard-journey-card{
  position: relative;
  overflow: hidden;
  border-radius: var(--mm-card-radius);
  border: 1px solid var(--mm-card-border);
  background: var(--mm-card-surface);
  box-shadow: var(--mm-card-shadow);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.mm-card:hover,
.mm-card-unified:hover,
.mm-panel:hover,
.mm-hero-card:hover,
.mm-card-interactive:hover,
.mm-practice-panel:hover,
.mm-dashboard-journey-card:hover{
  transform: translateY(-4px);
  border-color: rgba(245,158,11,.32);
  box-shadow: var(--mm-card-shadow-hover);
}

/* Stats: same family, compact, no big lift */
.mm-stat{
  position: relative;
  border-radius: var(--mm-card-radius-sm);
  border: 1px solid var(--mm-card-border);
  background: var(--mm-card-surface);
  box-shadow: var(--mm-card-shadow);
  transition: border-color .3s, box-shadow .3s;
}
.mm-stat:hover{ border-color: rgba(245,158,11,.28); }

/* ---- IMAGE-CARD STRUCTURE (matches .legend-card) ---- */
.mm-card-media,
.mm-card-image{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  flex-shrink: 0;
}
.mm-card-media img,
.mm-card-image img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.85);
  transition: filter .4s, transform .6s ease;
}
.mm-card:hover .mm-card-media img,
.mm-card-interactive:hover .mm-card-media img,
.mm-card-unified:hover .mm-card-image img{
  filter: brightness(1);
  transform: scale(1.04);
}

/* Deterministic image fallback — never show a broken-image icon */
.mm-card-media__fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family: var(--fd, serif); font-size: clamp(40px, 9vw, 72px); font-weight:500;
  color: rgba(255,255,255,.92); text-shadow: 0 2px 18px rgba(0,0,0,.6);
  background:
    radial-gradient(circle at 30% 25%, var(--mm-fallback-accent,#F59E0B) 0%, transparent 62%),
    linear-gradient(180deg, rgba(28,28,44,.98), rgba(12,12,20,.99));
}

.mm-card-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%);
}

/* ---- CARD BODY + TYPE (one definition each) ---- */
.mm-card-body{
  padding: 18px 20px 22px;
  display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.mm-card-title{
  font-family: var(--fd, serif);
  font-size: 22px; font-weight: 500; line-height: 1.12; letter-spacing: -.01em;
  margin: 0; color: var(--tx, #fff);
  text-shadow: 0 0 18px currentColor, 0 2px 8px rgba(0,0,0,.6);
}
.mm-card-subtitle{
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin: 0;
}
.mm-card-text{
  font-size: 14px; line-height: 1.55; color: var(--tx2, rgba(255,255,255,.72)); margin: 0;
}
.mm-card-badge{
  position: absolute; top: 12px; left: 12px; z-index: 3;
  padding: 6px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 18px currentColor, 0 4px 12px rgba(0,0,0,.35);
}

/* ---- DASHBOARD / PRACTICE inherit the family (compact tweaks) ---- */
.mm-dashboard-journey-card{ padding: 22px; text-decoration:none; color: inherit; }
.mm-dashboard-journey-card > *{ position: relative; z-index: 1; }
.mm-dashboard-journey-card img{
  width: 64px; height: 64px; border-radius: 18px; object-fit: cover;
  filter: brightness(.9); box-shadow: 0 0 24px rgba(245,158,11,.16);
}
.mm-dashboard-journey-card:hover img{ filter: brightness(1); }

.mm-practice-panel-soft{
  border-radius: var(--mm-card-radius-sm);
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.035);
}
.mm-practice-label{
  color: rgba(255,255,255,.48); font-size: 11px; font-weight: 800;
  letter-spacing: .10em; text-transform: uppercase;
}
.mm-practice-value{
  color: var(--tx,#fff); font-size: 28px; font-family: 'JetBrains Mono', monospace;
}

/* ---- BUTTONS (preserved from prior blocks) ---- */
.mm-btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:14px; background:#FFD778; color:#05050A;
  text-decoration:none; font-size:13px; font-weight:800;
}
.mm-btn-primary:hover{ filter:brightness(1.08); }
.mm-start-lesson-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 13px; border-radius:14px; color:#05050A; font-weight:900; font-size:13px;
  text-decoration:none; box-shadow:0 0 20px rgba(245,158,11,.22);
}

/* ---- MOBILE ---- */
@media (max-width: 720px){
  .mm-card, .mm-card-unified, .mm-panel, .mm-hero-card,
  .mm-card-interactive, .mm-practice-panel, .mm-dashboard-journey-card{
    border-radius: var(--mm-card-radius-sm);
  }
  .mm-card-title{ font-size: 20px; }
  .mm-card-body{ padding: 16px 18px 18px; }
}