/* ═══════════════════════════════════════════════════
   EMS Fluency Path — v4 Design
   Navy blue + warm white. Mobile first. App-like.
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* Navy palette */
  --navy:        #0f1f3d;
  --navy-2:      #162848;
  --navy-3:      #1d3460;
  --navy-light:  #2a4a7f;
  --navy-border: rgba(255,255,255,.1);

  /* Accents */
  --gold:        #e8a020;
  --gold-light:  #f5bb50;
  --gold-g:      rgba(232,160,32,.12);
  --red:         #c0392b;
  --red-g:       rgba(192,57,43,.1);
  --teal:        #1abc9c;
  --teal-g:      rgba(26,188,156,.1);

  /* Surface (pages have white bg) */
  --bg:          #f5f7fa;
  --surface:     #ffffff;
  --surface2:    #f0f4fa;
  --card:        #ffffff;
  --card-border: #e1e8f5;
  --card-shadow: 0 2px 16px rgba(15,31,61,.08);

  /* Text */
  --text:        #1a2540;
  --text2:       #4a5a7a;
  --text3:       #8a9bbb;
  --white:       #ffffff;

  /* Fonts */
  --font-d:  'Playfair Display',Georgia,serif;
  --font-b:  'DM Sans',system-ui,sans-serif;
  --font-m:  'DM Mono',monospace;

  /* Shape */
  --r:   10px;
  --rl:  16px;
  --rxl: 24px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100% }

/* ─── App shell ─── */
#ems-app {
  font-family: var(--font-b);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}
.ems-particles { display: none } /* particles look odd on light bg — hide them */

/* ─── Topbar ─── */
.ems-topbar {
  position: sticky; top: 0; z-index: 200;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 24px; height: 60px;
  background: var(--navy);
  box-shadow: 0 2px 16px rgba(15,31,61,.3);
}
.ems-topbar__brand {
  font-family: var(--font-d);
  font-size: 18px; color: var(--white);
  font-weight: 600; letter-spacing: .02em;
}
.ems-topbar__user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.7) }
.ems-back-link {
  font-size: 14px; color: rgba(255,255,255,.8); text-decoration: none;
  display: flex; align-items: center; gap: 6px; transition: color .2s;
}
.ems-back-link:hover { color: var(--gold) }
.ems-trial-chip {
  background: var(--gold-g); color: var(--gold-light);
  border: 1px solid rgba(232,160,32,.3);
  border-radius: 20px; padding: 3px 10px;
  font-size: 11px; font-family: var(--font-m);
}

/* ─── Auth pages ─── */
.ems-auth-page {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 50%, #0a1628 100%);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ems-auth-card {
  width: 100%; max-width: 440px;
  background: var(--white);
  border-radius: var(--rxl);
  padding: 40px 36px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
.ems-auth-brand { text-align: center; margin-bottom: 28px }
.ems-auth-logo {
  font-family: var(--font-d); font-size: 13px; font-weight: 600;
  color: var(--navy); letter-spacing: .3em; text-transform: uppercase;
  margin-bottom: 16px; display: block;
}
.ems-auth-title { font-family: var(--font-d); font-size: 28px; font-weight: 600; color: var(--text); margin: 0 0 6px }
.ems-auth-sub { color: var(--text2); font-size: 14px; margin: 0 }
.ems-auth-switch { text-align: center; color: var(--text3); font-size: 13px; margin-top: 20px }
.ems-auth-switch a { color: var(--navy-light); text-decoration: none; font-weight: 500 }
.ems-auth-switch a:hover { text-decoration: underline }

/* Trial badge */
.ems-trial-badge {
  background: linear-gradient(135deg, #e8f5f0, #d4f0e8);
  border: 1px solid #a8ddc8;
  border-radius: var(--r); padding: 12px 16px;
  font-size: 13px; color: #1a6b4a;
  text-align: center; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* Register steps */
.ems-reg-steps {
  display: flex; margin-bottom: 24px;
  background: var(--surface2); border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--card-border);
}
.ems-reg-step {
  flex: 1; padding: 10px 6px; text-align: center;
  font-size: 11px; font-family: var(--font-m); color: var(--text3);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.ems-reg-step span {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--card-border); font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ems-reg-step--active { color: var(--navy-light) }
.ems-reg-step--active span { background: var(--navy); color: #fff }
.ems-reg-step--done { color: var(--teal) }
.ems-reg-panel-title { font-family: var(--font-d); font-size: 19px; color: var(--text); margin: 0 0 18px }
.ems-panel-title { font-family: var(--font-d); font-size: 19px; color: var(--text); margin: 0 0 16px }

/* Fields */
.ems-field-group { margin-bottom: 16px }
.ems-field-label { display: block; font-size: 12px; color: var(--text2); font-weight: 500; margin-bottom: 6px }
.ems-field-hint { display: block; font-size: 11px; color: var(--text3); margin-top: 4px }
.ems-input {
  width: 100%; background: var(--surface2);
  border: 1.5px solid var(--card-border);
  border-radius: var(--r); color: var(--text);
  font-family: var(--font-b); font-size: 15px;
  padding: 13px 16px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ems-input:focus { border-color: var(--navy-light); box-shadow: 0 0 0 3px rgba(42,74,127,.1) }
.ems-input::placeholder { color: var(--text3) }
select.ems-input {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a9bbb' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px;
}
.ems-input-wrap { position: relative }
.ems-input-wrap .ems-input { padding-right: 44px }
.ems-input-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text3); font-size: 16px }

/* Notices */
.ems-form-error { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; border-radius: var(--r); padding: 11px 14px; font-size: 13px; margin-bottom: 16px }
.ems-notice-box { padding: 12px 16px; border-radius: var(--r); font-size: 13px; margin-bottom: 16px }
.ems-notice-box--info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af }
.ems-notice-box--success { background: #f0fdf4; border: 1px solid #86efac; color: #166534 }
.ems-step-btns { display: flex; gap: 10px; margin-top: 4px }

/* ─── Buttons ─── */
.ems-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 24px; border-radius: var(--r);
  font-family: var(--font-b); font-size: 15px; font-weight: 600;
  cursor: pointer; border: 1.5px solid transparent;
  text-decoration: none; transition: all .2s; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; letter-spacing: .01em;
}
.ems-btn--primary { background: var(--navy); color: #fff; border-color: var(--navy) }
.ems-btn--primary:hover { background: var(--navy-light); box-shadow: 0 4px 16px rgba(15,31,61,.3) }
.ems-btn--gold { background: var(--gold); color: #fff; border-color: var(--gold) }
.ems-btn--gold:hover { background: var(--gold-light); box-shadow: 0 4px 16px rgba(232,160,32,.35) }
.ems-btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy) }
.ems-btn--secondary:hover { background: rgba(15,31,61,.05) }
.ems-btn--ghost { background: transparent; color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.2) }
.ems-btn--ghost:hover { color: #fff; border-color: rgba(255,255,255,.5) }
.ems-btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.4) }
.ems-btn--outline-white:hover { background: rgba(255,255,255,.1) }
.ems-btn--danger { background: var(--red); color: #fff; border-color: var(--red) }
.ems-btn--record { background: transparent; color: var(--red); border: 2px solid var(--red); border-radius: 50px; padding: 12px 28px }
.ems-btn--record:hover { background: var(--red-g) }
.ems-btn--record.recording { background: var(--red); color: #fff; animation: ems-pulse 1s infinite }
.ems-btn--full { width: 100% }
.ems-btn--lg { padding: 16px 32px; font-size: 16px; border-radius: var(--rl) }
.ems-btn--sm { padding: 7px 14px; font-size: 12px }
.ems-btn:disabled { opacity: .45; cursor: not-allowed }
@keyframes ems-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.4) } 50% { box-shadow: 0 0 0 10px rgba(192,57,43,0) } }

/* ─── Dashboard ─── */
.ems-dashboard { max-width: 840px; margin: 0 auto; padding: 0 20px 80px; }

.ems-hero {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  padding: 32px 0 24px; border-bottom: 1px solid var(--card-border); margin-bottom: 0;
}
.ems-greeting { font-size: 11px; color: var(--text3); margin: 0 0 6px; font-family: var(--font-m); letter-spacing: .06em; text-transform: uppercase }
.ems-greeting strong { color: var(--navy-light) }
.ems-hero__title { font-family: var(--font-d); font-size: clamp(22px,4vw,32px); font-weight: 600; line-height: 1.2; color: var(--text) }
.ems-hero__title em { font-style: italic; color: var(--navy-light) }

/* Ring */
.ems-ring-wrap { position: relative; width: 90px; height: 90px; display: flex; flex-direction: column; align-items: center }
.ems-ring { width: 90px; height: 90px; transform: rotate(-90deg); display: block }
.ems-ring__bg { fill: none; stroke: var(--surface2); stroke-width: 7 }
.ems-ring__fill { fill: none; stroke: var(--navy); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1) }
.ems-ring__pct { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-54%); font-family: var(--font-d); font-size: 18px; font-weight: 700; color: var(--text) }
.ems-ring__label { font-size: 9px; color: var(--text3); font-family: var(--font-m); position: absolute; top: 64%; left: 50%; transform: translateX(-50%); white-space: nowrap }

/* Tabs */
.ems-tabs {
  display: flex;
  border-bottom: 2px solid var(--card-border);
  margin-bottom: 20px;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--bg, #f5f6fa);
  /* Extend background behind status bar on iOS */
  padding-top: 4px;
}
.ems-tabs::-webkit-scrollbar { display: none }
.ems-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 14px 18px; font-family: var(--font-b); font-size: 14px; font-weight: 500; color: var(--text3); cursor: pointer; white-space: nowrap; transition: all .2s; display: flex; align-items: center; gap: 6px }
.ems-tab:hover { color: var(--text2) }
.ems-tab--active { color: var(--navy); border-bottom-color: var(--navy) }
.ems-tab-badge { background: var(--gold); color: #fff; font-size: 10px; font-family: var(--font-m); padding: 1px 6px; border-radius: 10px; font-weight: 600 }
.ems-tab-panel { animation: ems-fadein .25s ease }
@keyframes ems-fadein { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }

/* Today card */
.ems-today-card {
  background: var(--navy);
  border-radius: var(--rxl); padding: 28px;
  margin-bottom: 20px; position: relative; overflow: hidden;
  box-shadow: 0 8px 32px rgba(15,31,61,.25);
}
.ems-today-card::after { content: ''; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(232,160,32,.12), transparent 70%); pointer-events: none }
.ems-today-card__label { font-family: var(--font-m); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 6px }
.ems-today-card__day { font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 8px }
.ems-today-card__title { font-family: var(--font-d); font-size: clamp(18px,3vw,26px); font-weight: 600; color: #fff; margin: 0 0 12px; line-height: 1.25 }
.ems-today-card__meta { display: flex; gap: 14px; font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 20px; flex-wrap: wrap; align-items: center }

/* Pills */
.ems-pills { display: flex; gap: 10px; flex-wrap: wrap }
.ems-pill { background: var(--card); border: 1.5px solid var(--card-border); border-radius: var(--rl); padding: 14px 16px; text-align: center; min-width: 80px; box-shadow: var(--card-shadow) }
.ems-pill__n { display: block; font-family: var(--font-d); font-size: 28px; font-weight: 700; color: var(--text) }
.ems-pill__l { display: block; font-size: 10px; color: var(--text3); font-family: var(--font-m); letter-spacing: .06em; margin-top: 3px }
.ems-pill--amber .ems-pill__n { color: var(--gold) }

/* Section title */
.ems-section-title { font-family: var(--font-d); font-size: 20px; font-weight: 600; color: var(--text); margin: 0 0 16px; display: flex; align-items: center; gap: 8px }
.ems-count-badge { background: var(--surface2); color: var(--text3); font-size: 10px; padding: 2px 8px; border-radius: 10px; font-family: var(--font-m); font-weight: 400; border: 1px solid var(--card-border) }

/* Progress dots */
.ems-dots { display: grid; grid-template-columns: repeat(10,1fr); gap: 6px; margin-top: 14px }
.ems-dot { aspect-ratio: 1; border-radius: 8px; background: var(--card); border: 1.5px solid var(--card-border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: var(--card-shadow) }
.ems-dot__icon { font-size: 11px; line-height: 1 }
.ems-dot__n { font-size: 8px; color: var(--text3); font-family: var(--font-m) }
.ems-dot--completed { background: #e8f5f0; border-color: #86d4b8; color: #1a6b4a }
.ems-dot--in_progress { border-color: var(--navy-light); background: #eff4ff }
.ems-dot--locked { opacity: .35 }

/* Month map */
.ems-month-map { display: flex; flex-direction: column; gap: 8px; margin-top: 14px }
.ems-mmap-row { display: grid; grid-template-columns: 36px 1fr 1fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--card-border) }
.ems-mmap-row--active .ems-mmap-label { color: var(--navy); font-weight: 700 }
.ems-mmap-label { font-family: var(--font-m); font-size: 12px; color: var(--text3) }
.ems-mmap-bar { height: 4px; background: var(--surface2); border-radius: 2px; overflow: hidden }
.ems-mmap-bar__fill { height: 100%; background: var(--navy); border-radius: 2px; transition: width .8s }
.ems-mmap-theme { font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* Submission cards */
.ems-sub-card { background: var(--card); border: 1.5px solid var(--card-border); border-radius: var(--rl); padding: 20px 22px; margin-bottom: 14px; box-shadow: var(--card-shadow) }
.ems-sub-card--reviewed { border-left: 4px solid var(--teal) }
.ems-sub-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; gap: 10px; flex-wrap: wrap }
.ems-sub-card__lesson { font-family: var(--font-d); font-size: 17px; color: var(--text); font-weight: 600 }
.ems-sub-card__act { font-size: 12px; color: var(--text3); margin-top: 3px }
.ems-sub-date { font-size: 11px; color: var(--text3); margin-top: 4px }
.ems-badge--reviewed { background: #f0fdf4; color: #166534; border: 1px solid #86efac; font-size: 11px; padding: 3px 9px; border-radius: 20px; display: inline-block }
.ems-badge--pending { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; font-size: 11px; padding: 3px 9px; border-radius: 20px; display: inline-block }
.ems-feedback-box { background: var(--surface2); border: 1.5px solid #a8ddc8; border-radius: var(--r); padding: 16px 18px; margin-top: 12px }
.ems-feedback-box__label { font-size: 10px; color: #1a6b4a; font-family: var(--font-m); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; display: flex; justify-content: space-between }
.ems-feedback-text { font-size: 14px; color: var(--text2); line-height: 1.75; margin-top: 8px; white-space: pre-line }
.ems-score { color: var(--teal); font-weight: 700 }

/* Plan tab */
.ems-plan-card { background: var(--navy); border-radius: var(--rxl); padding: 32px 28px; text-align: center; box-shadow: 0 8px 32px rgba(15,31,61,.25); margin-bottom: 20px }
.ems-plan-label { font-family: var(--font-m); font-size: 10px; letter-spacing: .2em; color: var(--gold-light); text-transform: uppercase; margin-bottom: 14px }
.ems-plan-status { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap }
.ems-plan-detail { font-size: 13px; color: rgba(255,255,255,.6) }
.ems-plan-price { font-family: var(--font-d); font-size: 44px; font-weight: 700; color: #fff; margin-bottom: 24px; line-height: 1 }
.ems-plan-price span { font-size: 16px; color: rgba(255,255,255,.5) }
.ems-plan-features { list-style: none; padding: 0; margin: 20px 0 24px; text-align: left }
.ems-plan-features li { font-size: 14px; color: rgba(255,255,255,.75); padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: flex-start; gap: 8px }
.ems-plan-features li::before { content: '✓'; color: var(--gold-light); font-weight: 700; flex-shrink: 0 }
.ems-plan-features li:last-child { border-bottom: none }
.ems-plan-note { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 10px }
.ems-account-mini { background: var(--card); border: 1.5px solid var(--card-border); border-radius: var(--r); padding: 16px 18px; font-size: 13px; color: var(--text2); box-shadow: var(--card-shadow) }
.ems-account-mini h4 { font-size: 11px; color: var(--text3); margin: 0 0 8px; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-m) }

/* ─── Lesson page ─── */
.ems-lesson-page { max-width: 820px; margin: 0 auto; padding: 0 20px 80px }

.ems-lesson-hero { padding: 28px 0 24px; border-bottom: 1px solid var(--card-border); margin-bottom: 28px }
.ems-lesson-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px }
.ems-tag { font-family: var(--font-m); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: var(--surface2); border: 1px solid var(--card-border); border-radius: 20px; padding: 4px 11px; color: var(--text2) }
.ems-lesson-title { font-family: var(--font-d); font-size: clamp(24px,5vw,40px); font-weight: 700; color: var(--text); line-height: 1.15; margin: 0 0 8px }
.ems-lesson-focus { color: var(--navy-light); font-size: 15px; margin: 0; font-style: italic; font-family: var(--font-d) }

/* Video */
.ems-video-wrap { margin-bottom: 28px }
.ems-video-label { font-family: var(--font-m); font-size: 10px; color: var(--navy-light); margin-bottom: 8px; letter-spacing: .14em; text-transform: uppercase }
.ems-video-embed { position: relative; padding-bottom: 56.25%; background: var(--navy); border-radius: var(--rl); overflow: hidden; border: 1.5px solid var(--card-border) }
.ems-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none }
.ems-video-native { width: 100%; border-radius: var(--rl) }

/* Core concept */
.ems-concept {
  background: var(--card);
  border: 1.5px solid var(--card-border);
  border-top: 4px solid var(--navy);
  border-radius: var(--rl);
  padding: 28px; margin-bottom: 28px;
  box-shadow: var(--card-shadow);
}
.ems-concept__label { font-family: var(--font-m); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy-light); margin-bottom: 16px; display: flex; align-items: center; gap: 10px }
.ems-dict-hint { font-size: 10px; color: var(--text3); font-family: var(--font-m); letter-spacing: normal }
.ems-concept__body { font-size: 16px; line-height: 1.85; color: var(--text) }
.ems-concept__body p { margin: 0 0 14px }
.ems-concept__body p:last-child { margin-bottom: 0 }
.ems-concept__body strong { color: var(--navy) }
.ems-concept__body h3 { font-family: var(--font-d); font-size: 20px; color: var(--text); margin: 20px 0 10px; font-weight: 600 }
.ems-concept__body em { color: var(--navy-light); font-style: italic }
.ems-concept__body ul, .ems-concept__body ol { padding-left: 22px; margin-bottom: 14px }
.ems-concept__body li { margin-bottom: 8px; line-height: 1.7 }
.ems-concept__body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px }
.ems-concept__body th, .ems-concept__body td { padding: 10px 12px; border: 1px solid var(--card-border); text-align: left; line-height: 1.5 }
.ems-concept__body th { background: var(--surface2); color: var(--navy-light); font-family: var(--font-m); font-size: 11px; letter-spacing: .06em; text-transform: uppercase }

/* Clickable words */
.ems-word { cursor: help; border-radius: 2px; transition: background .12s }
.ems-word:hover { background: rgba(42,74,127,.1); color: var(--navy) }

/* Dictionary popup */
.ems-dict-popup { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,31,61,.6); backdrop-filter: blur(8px) }
.ems-dict-popup__inner { background: var(--card); border: 1.5px solid var(--card-border); border-radius: var(--rxl); padding: 28px; width: 100%; max-width: 480px; max-height: 82vh; overflow-y: auto; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,.3) }
.ems-dict-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--text3); font-size: 22px; cursor: pointer; line-height: 1 }
.ems-dict-loading { text-align: center; color: var(--text3); padding: 20px; font-family: var(--font-m); font-size: 13px }
.ems-dict-word { font-family: var(--font-d); font-size: 32px; font-weight: 600; color: var(--text); margin-bottom: 3px }
.ems-dict-phonetic { font-family: var(--font-m); font-size: 14px; color: var(--navy-light); margin-bottom: 14px }
.ems-dict-img { width: 100%; max-height: 160px; object-fit: cover; border-radius: var(--r); margin-bottom: 14px }
.ems-dict-pos { font-family: var(--font-m); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; margin-top: 14px }
.ems-dict-definition { font-size: 14px; color: var(--text); line-height: 1.7; margin-bottom: 6px }
.ems-dict-example { font-size: 13px; color: var(--text2); font-style: italic; margin-bottom: 5px; padding-left: 12px; border-left: 2px solid var(--card-border) }
.ems-dict-audio-btn { background: #eff4ff; border: 1px solid #bfdbfe; color: var(--navy); border-radius: var(--r); padding: 6px 14px; font-size: 13px; cursor: pointer; margin-top: 10px }
.ems-dict-notfound { color: var(--text3); font-size: 14px; text-align: center; padding: 20px 0 }

/* ─── Activities ─── */
.ems-activities-section { margin-top: 8px }
.ems-activities-gate {
  background: var(--card); border: 1.5px solid var(--card-border);
  border-radius: var(--rxl); padding: 40px 28px; text-align: center;
  box-shadow: var(--card-shadow);
}
.ems-gate-icon { font-size: 48px; margin-bottom: 12px }
.ems-gate-title { font-family: var(--font-d); font-size: 26px; color: var(--text); margin-bottom: 8px; font-weight: 700 }
.ems-gate-sub { font-size: 15px; color: var(--text2); line-height: 1.65; max-width: 380px; margin: 0 auto 24px }
.ems-activities { margin-top: 0 }
.ems-activity-wrap { margin-bottom: 16px }
.ems-activity { background: var(--card); border: 1.5px solid var(--card-border); border-radius: var(--rl); padding: 22px 24px; transition: border-color .25s, box-shadow .25s; box-shadow: var(--card-shadow) }
.ems-activity:hover { border-color: rgba(42,74,127,.25); box-shadow: 0 4px 24px rgba(15,31,61,.1) }
.ems-activity__header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px }
.ems-activity__badge { font-family: var(--font-m); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy-light); background: #eff4ff; border: 1px solid #bfdbfe; border-radius: 20px; padding: 3px 9px }
.ems-activity__title { font-family: var(--font-d); font-size: 19px; font-weight: 600; color: var(--text); margin: 0; flex: 1 }
.ems-activity__type { font-size: 11px; color: var(--text3); font-family: var(--font-m) }
.ems-activity__instructions { font-size: 14px; color: var(--text2); line-height: 1.7; margin-bottom: 18px; padding: 12px 16px; background: #fffbeb; border-radius: var(--r); border-left: 3px solid var(--gold) }
.ems-activity__done { background: #f0fdf4; border: 1px solid #86efac; border-radius: var(--r); padding: 10px 14px; font-size: 13px; color: #166534; margin-bottom: 14px; display: flex; align-items: center; gap: 6px }
.ems-done-badge { display: inline-flex; align-items: center; gap: 5px; background: #f0fdf4; border: 1px solid #86efac; border-radius: 20px; padding: 4px 12px; font-size: 12px; color: #166534; font-family: var(--font-m); margin-bottom: 12px }

/* Progress bar */
.ems-progress-bar-wrap { padding: 20px 0 4px }
.ems-progress-bar { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin-bottom: 8px }
.ems-progress-bar__fill { height: 100%; background: linear-gradient(90deg, var(--navy), var(--navy-light)); border-radius: 3px; transition: width .8s cubic-bezier(.4,0,.2,1) }
.ems-progress-bar__text { font-size: 12px; color: var(--text3); font-family: var(--font-m) }

/* ─── Voice panel ─── */
.ems-voice-panel {
  background: var(--navy);
  border-radius: var(--rxl); padding: 28px; margin: 28px 0;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 32px rgba(15,31,61,.25);
}
.ems-voice-panel::before { content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(232,160,32,.1), transparent 70%); pointer-events: none }
.ems-voice-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px }
.ems-voice-label { font-family: var(--font-m); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 5px }
.ems-voice-title { font-family: var(--font-d); font-size: 22px; font-weight: 600; color: #fff; margin: 0 0 3px }
.ems-voice-sub { font-size: 13px; color: rgba(255,255,255,.55) }
.ems-voice-timer { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1); border-radius: var(--rl); padding: 10px 18px; text-align: center; min-width: 90px; flex-shrink: 0 }
.ems-voice-timer__time { font-family: var(--font-m); font-size: 22px; font-weight: 600; color: var(--gold-light); display: block; line-height: 1 }
.ems-voice-timer__label { font-size: 10px; color: rgba(255,255,255,.35); margin-top: 3px }
.ems-voice-timer--warn .ems-voice-timer__time { color: var(--gold-light) }
.ems-voice-timer--done .ems-voice-timer__time { color: rgba(255,255,255,.35) }
.ems-voice-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.ems-voice-btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 28px; border-radius: 50px; background: var(--gold); color: #fff; border: none; font-family: var(--font-b); font-size: 15px; font-weight: 700; cursor: pointer; transition: all .2s; box-shadow: 0 4px 20px rgba(232,160,32,.4) }
.ems-voice-btn:hover { background: var(--gold-light); box-shadow: 0 6px 28px rgba(232,160,32,.5) }
.ems-voice-btn--active { background: var(--red); box-shadow: 0 4px 20px rgba(192,57,43,.4); animation: ems-pulse-soft 2s ease-in-out infinite }
.ems-voice-btn--active:hover { background: #e04030 }
.ems-voice-btn-icon { font-size: 18px }
.ems-voice-note { font-size: 12px; color: rgba(255,255,255,.4) }
.ems-voice-done { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--rl); padding: 20px; text-align: center }
.ems-voice-done p { font-size: 14px; color: rgba(255,255,255,.6); margin: 4px 0 }
.ems-voice-done p:first-child { font-size: 16px; color: #fff; font-weight: 500; margin-bottom: 6px }
.ems-voice-transcript { margin-top: 16px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); padding: 14px; font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.7; max-height: 200px; overflow-y: auto; display: none }
.ems-voice-transcript.visible { display: block }
@keyframes ems-pulse-soft { 0%,100% { box-shadow: 0 4px 20px rgba(192,57,43,.4) } 50% { box-shadow: 0 4px 32px rgba(192,57,43,.6) } }

/* ─── Quiz / Activities forms ─── */
.ems-q { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--card-border) }
.ems-q:last-of-type { border-bottom: none }
.ems-q__text { font-size: 15px; color: var(--text); line-height: 1.65; margin: 0 0 12px }
.ems-options { display: flex; flex-direction: column; gap: 6px }
.ems-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--surface2); border: 1.5px solid var(--card-border); border-radius: var(--r); cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent }
.ems-option:hover { border-color: var(--navy-light); background: #eff4ff }
.ems-option input { margin-top: 2px; accent-color: var(--navy) }
.ems-option span { font-size: 15px; color: var(--text); line-height: 1.5 }
.ems-option--correct { border-color: #86efac !important; background: #f0fdf4 !important }
.ems-option--wrong { border-color: #fca5a5 !important; background: #fef2f2 !important }
.ems-gap { background: var(--surface2); border: 1.5px solid var(--card-border); border-radius: 6px; color: var(--text); font-size: 15px; padding: 6px 12px; min-width: 120px; transition: border-color .2s }
.ems-gap:focus { border-color: var(--navy-light); outline: none; box-shadow: 0 0 0 3px rgba(42,74,127,.1) }
.ems-gap--wide { width: 100%; display: block; padding: 10px 14px }
.ems-gap--small { width: 80px }
.ems-quiz-feedback { margin-top: 14px; padding: 12px 16px; border-radius: var(--r); font-size: 13px; white-space: pre-line; line-height: 1.6 }
.ems-quiz-feedback--pass { background: #f0fdf4; border: 1px solid #86efac; color: #166534 }
.ems-quiz-feedback--fail { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b }

/* Drag match */
.ems-dm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.ems-dm-item, .ems-draggable { padding: 11px 14px; background: var(--surface2); border: 1.5px solid var(--card-border); border-radius: var(--r); font-size: 14px; color: var(--text); margin-bottom: 6px; user-select: none }
.ems-dm-slot { margin-left: 8px; color: var(--text3); font-size: 12px }
.ems-draggable { cursor: grab; border-style: dashed }

/* Reorder */
.ems-reorder-list { list-style: none; padding: 0; margin: 0 0 16px }
.ems-reorder-item { padding: 12px 14px; background: var(--surface2); border: 1.5px solid var(--card-border); border-radius: var(--r); font-size: 14px; color: var(--text); margin-bottom: 6px; cursor: grab; display: flex; align-items: center; gap: 8px }
.ems-drag-handle { color: var(--text3); font-size: 16px }

/* Stress */
.ems-stress-row { display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0 }
.ems-syl-btn { padding: 8px 16px; background: var(--surface2); border: 1.5px solid var(--card-border); border-radius: var(--r); color: var(--text); font-family: var(--font-d); font-size: 20px; cursor: pointer; transition: all .15s }
.ems-syl-btn:hover { border-color: var(--navy-light) }
.ems-syl-btn.selected { background: #eff4ff; border-color: var(--navy-light); color: var(--navy) }
.ems-syl-btn.correct { background: #f0fdf4 !important; border-color: #86efac !important }
.ems-syl-btn.wrong { background: #fef2f2 !important; border-color: #fca5a5 !important }

/* Written / textarea */
.ems-textarea { width: 100%; background: var(--surface2); border: 1.5px solid var(--card-border); border-radius: var(--r); color: var(--text); font-family: var(--font-b); font-size: 15px; padding: 13px 16px; line-height: 1.7; resize: vertical; transition: border-color .2s }
.ems-textarea:focus { border-color: var(--navy-light); outline: none; box-shadow: 0 0 0 3px rgba(42,74,127,.1) }
.ems-textarea::placeholder { color: var(--text3) }
.ems-textarea--short { min-height: 80px }
.ems-prompt { background: #fffbeb; border-left: 3px solid var(--gold); padding: 14px 18px; border-radius: 0 var(--r) var(--r) 0; font-size: 15px; color: var(--text); line-height: 1.7; margin-bottom: 16px }
.ems-scenario { background: var(--navy); color: #fff; border-radius: var(--r); padding: 16px 20px; margin-bottom: 16px; font-size: 15px; line-height: 1.7 }
.ems-timer { text-align: center; margin-bottom: 16px }
.ems-timer__display { font-family: var(--font-m); font-size: 32px; color: var(--navy); background: var(--surface2); border: 1.5px solid var(--card-border); border-radius: var(--r); padding: 10px 24px; display: inline-block; letter-spacing: .06em }
.ems-shadow-clip { background: var(--surface2); border: 1.5px solid var(--card-border); border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px }
.ems-transcript summary { cursor: pointer; font-size: 12px; color: var(--navy-light) }
.ems-self-assess { margin-top: 14px }
.ems-label { font-size: 13px; color: var(--text2); display: block; margin-bottom: 7px; font-weight: 500 }
.ems-select { background: var(--surface2); border: 1.5px solid var(--card-border); border-radius: var(--r); color: var(--text); padding: 8px 12px; font-size: 14px; outline: none }
.ems-select:focus { border-color: var(--navy-light) }

/* Recorder */
.ems-rec-viz { height: 40px; background: var(--surface2); border-radius: var(--r); margin: 10px 0; overflow: hidden; border: 1px solid var(--card-border) }
.ems-rec-timer { font-family: var(--font-m); color: var(--red); font-size: 18px; text-align: center; height: 24px; line-height: 24px }
.ems-playback { width: 100%; margin-top: 8px; border-radius: var(--r) }
.ems-audio { width: 100%; margin: 10px 0; border-radius: var(--r) }
.ems-inline-audio { margin: 16px 0; padding: 14px 16px; background: rgba(59,130,246,.07); border-left: 3px solid var(--accent); border-radius: var(--r); }
.ems-inline-audio__label { display: block; font-size: .8rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.ems-inline-audio__player { width: 100%; border-radius: 6px; }

/* Complete box */
.ems-complete-box { text-align: center; padding: 52px 28px; background: var(--navy); border-radius: var(--rxl); margin-top: 32px; box-shadow: 0 8px 32px rgba(15,31,61,.25) }
.ems-complete-icon { font-size: 56px; margin-bottom: 14px }
.ems-complete-box h2 { font-family: var(--font-d); font-size: 30px; color: #fff; margin: 0 0 8px }
.ems-complete-box p { color: rgba(255,255,255,.65); margin: 0 0 24px; font-size: 15px }

/* Subscribe */
.ems-subscribe-wrap { max-width: 440px; margin: 60px auto 0; padding: 0 24px; text-align: center }
.ems-subscribe-title { font-family: var(--font-d); font-size: clamp(28px,5vw,44px); font-weight: 700; color: var(--text); margin: 0 0 10px }
.ems-subscribe-sub { color: var(--text2); font-size: 15px; font-style: italic; margin: 0 0 32px }
.ems-pricing-card { background: var(--navy); border-radius: var(--rxl); padding: 36px 28px; box-shadow: 0 8px 40px rgba(15,31,61,.3) }
.ems-pricing-label { font-family: var(--font-m); font-size: 10px; letter-spacing: .2em; color: var(--gold-light); text-transform: uppercase; margin-bottom: 14px }
.ems-pricing-amount { font-family: var(--font-d); font-size: 50px; font-weight: 700; color: #fff; margin-bottom: 24px; line-height: 1 }
.ems-pricing-amount span { font-size: 17px; color: rgba(255,255,255,.5) }
.ems-pricing-features { list-style: none; padding: 0; margin: 0 0 24px; text-align: left }
.ems-pricing-features li { font-size: 14px; color: rgba(255,255,255,.7); padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; gap: 8px }
.ems-pricing-features li::before { content: '✓'; color: var(--gold-light); font-weight: 700 }
.ems-pricing-features li:last-child { border-bottom: none }
.ems-pricing-note { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 10px }

/* Message / empty state */
.ems-msg { background: var(--card); border: 1.5px solid var(--card-border); border-radius: var(--rxl); padding: 52px 36px; text-align: center; max-width: 420px; margin: 60px auto; box-shadow: var(--card-shadow) }
.ems-msg h2 { font-family: var(--font-d); font-size: 26px; color: var(--text); margin: 0 0 10px }
.ems-msg p { color: var(--text2); line-height: 1.7; margin: 0 0 18px; font-size: 15px }
.ems-empty-state { padding: 52px 20px; text-align: center; color: var(--text3); font-style: italic; background: var(--card); border-radius: var(--rl); margin-top: 14px; border: 1.5px solid var(--card-border) }

/* Link / toast */
.ems-link { color: var(--navy-light); text-decoration: none }
.ems-link:hover { text-decoration: underline }
.ems-toast { position: fixed; bottom: 24px; right: 20px; z-index: 99999; background: var(--navy); color: #fff; font-size: 14px; padding: 12px 18px; border-radius: var(--rl); max-width: 320px; transform: translateY(16px); opacity: 0; transition: all .3s; box-shadow: 0 8px 32px rgba(15,31,61,.35) }
.ems-toast--show { transform: translateY(0); opacity: 1 }
.ems-toast--success { background: #166534 }
.ems-toast--error { background: #991b1b }

/* Reveal */
.ems-reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1) }
.ems-reveal.visible { opacity: 1; transform: translateY(0) }

/* ─── Responsive ─── */
@media (max-width: 640px) {
  .ems-auth-card { padding: 28px 20px }
  .ems-dashboard { padding: 0 14px 60px }
  .ems-lesson-page { padding: 0 14px 60px }
  .ems-hero { grid-template-columns: 1fr }
  .ems-ring-wrap { display: none }
  .ems-dots { grid-template-columns: repeat(5,1fr) }
  .ems-dm-cols { grid-template-columns: 1fr }
  .ems-tabs { gap: 0 }
  .ems-tab { padding: 12px 13px; font-size: 13px }
  .ems-today-card { padding: 22px 18px }
  .ems-plan-card { padding: 24px 18px }
  .ems-concept { padding: 20px }
  .ems-activity { padding: 18px }
  .ems-voice-panel { padding: 20px }
  .ems-voice-cta { justify-content: center }
  .ems-btn--lg { padding: 15px 24px; font-size: 15px }
  .ems-topbar { padding: 0 14px }
}

/* ─── Blocked banner ─── */
.ems-blocked-banner {
  background: #fff8e1;
  border: 2px solid var(--gold);
  border-radius: var(--rxl);
  padding: 40px 28px;
  text-align: center;
  margin: 20px 0;
  box-shadow: 0 4px 24px rgba(232,160,32,.15);
}
.ems-blocked-icon { font-size: 48px; margin-bottom: 12px }
.ems-blocked-title { font-family: var(--font-d); font-size: 24px; color: var(--text); margin-bottom: 8px; font-weight: 700 }
.ems-blocked-sub { font-size: 15px; color: var(--text2); line-height: 1.65; max-width: 400px; margin: 0 auto 24px }

/* ─── Dashboard alert banner ─── */
.ems-alert-banner {
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  border: 1.5px solid #f0c040;
  border-left: 5px solid var(--gold);
  border-radius: var(--rl);
  padding: 18px 20px;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ems-alert-banner__icon { font-size: 28px; flex-shrink: 0 }
.ems-alert-banner__body { flex: 1 }
.ems-alert-banner__title { font-weight: 600; color: #7a5000; font-size: 15px; margin-bottom: 3px }
.ems-alert-banner__sub { font-size: 13px; color: #9a6800 }

/* ─── Bottom navigation bar (app-like) ─── */
.ems-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: stretch;
  background: rgba(10,18,40,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 -2px 32px rgba(0,0,0,.35);
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.ems-bottom-nav__item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  text-decoration: none; color: rgba(255,255,255,.38);
  transition: color .18s;
  border-radius: 0; padding: 8px 4px;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.ems-bottom-nav__item:hover { color: rgba(255,255,255,.65); }
.ems-bottom-nav__item--active { color: #fff; }
.ems-bottom-nav__item--active .ems-bottom-nav__icon-wrap {
  background: linear-gradient(135deg, #0d9488, #0891b2);
  box-shadow: 0 4px 14px rgba(13,148,136,.45);
}
.ems-bottom-nav__icon-wrap {
  width: 40px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  transition: background .2s, box-shadow .2s;
}
.ems-bottom-nav__icon { font-size: 19px; line-height: 1; }
.ems-bottom-nav__label {
  font-size: 10px; font-family: var(--font-m);
  letter-spacing: .04em;
  font-weight: 600;
}
.ems-bottom-nav__item--active .ems-bottom-nav__label {
  color: rgba(255,255,255,.9);
}

/* Add bottom padding to pages with bottom nav */
.ems-dashboard,
.ems-lesson-page { padding-bottom: 96px !important }

/* ─── Classify activity ─── */
.ems-classify { margin-top: 4px }

/* Word bank — the pool of chips to sort */
.ems-classify-bank {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 16px; min-height: 56px;
  background: var(--surface2);
  border: 1.5px dashed var(--card-border);
  border-radius: var(--r); margin-bottom: 16px;
}
.ems-classify-bank:empty::before {
  content: 'All words placed — check your answers below';
  font-size: 12px; color: var(--text3); font-family: var(--font-m);
  font-style: italic;
}

/* Individual chips */
.ems-classify-chip {
  position: relative;
  display: inline-flex; flex-direction: column;
  padding: 8px 16px; border-radius: 20px;
  background: var(--card); border: 1.5px solid var(--card-border);
  font-size: 14px; color: var(--text);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background .15s, border-color .15s, transform .12s;
  box-shadow: 0 1px 4px rgba(15,31,61,.06);
}
.ems-classify-chip:active { transform: scale(.96) }
.ems-classify-chip:hover { border-color: var(--navy-light); background: #eff4ff }

/* Picker popup that appears when a chip is tapped */
.ems-classify-picker {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1.5px solid var(--navy);
  border-radius: var(--r);
  box-shadow: 0 8px 28px rgba(15,31,61,.22);
  display: flex; flex-direction: column; gap: 0;
  z-index: 500; min-width: 160px; overflow: hidden;
  white-space: nowrap;
}
.ems-classify-picker__btn {
  display: block; width: 100%;
  padding: 10px 16px; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--card-border);
  font-family: var(--font-b); font-size: 13px; color: var(--text);
  cursor: pointer; transition: background .12s;
}
.ems-classify-picker__btn:last-child { border-bottom: none }
.ems-classify-picker__btn:hover { background: #eff4ff; color: var(--navy) }
.ems-classify-picker__btn--bank { color: var(--text3); font-size: 12px }
.ems-classify-picker__btn--bank:hover { background: var(--surface2) }

/* Column grid */
.ems-classify-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.ems-classify-col {
  background: var(--card); border: 1.5px solid var(--card-border);
  border-radius: var(--r); overflow: hidden;
}
.ems-classify-col__title {
  font-family: var(--font-m); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy-light); padding: 10px 12px;
  background: var(--surface2); border-bottom: 1px solid var(--card-border);
  margin: 0;
}
.ems-classify-drop {
  min-height: 64px; padding: 10px;
  display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start;
}

/* Feedback */
.ems-classify-feedback { margin-top: 14px }


/* ─── Dashboard clean header (no topbar) ─── */
.ems-dash-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 24px 0 16px; border-bottom: none;
  margin-bottom: 0;
}
.ems-dash-header__left { flex: 1 }
.ems-dash-name {
  font-family: var(--font-d); font-size: clamp(24px,5vw,36px);
  font-weight: 700; color: var(--text); margin: 0 0 8px; line-height: 1.1;
}
.ems-dash-trial {
  display: inline-block; font-size: 12px; font-family: var(--font-m);
  background: #fff8e1; color: #7a5000; border: 1px solid #f0c040;
  border-radius: 20px; padding: 4px 12px; margin-top: 2px;
}

/* ─── Teacher feedback inside activity ─── */
.ems-feedback-received {
  background: linear-gradient(135deg, #eff6ff, #f0fdf4);
  border: 1.5px solid #86d4b8;
  border-radius: var(--rl);
  padding: 20px;
  margin-bottom: 14px;
}
.ems-feedback-received__header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.ems-feedback-received__icon { font-size: 32px; flex-shrink: 0 }
.ems-feedback-received__title {
  font-family: var(--font-d); font-size: 17px; font-weight: 600;
  color: var(--text); margin-bottom: 2px;
}
.ems-feedback-received__score {
  font-size: 13px; color: var(--navy-light);
}
.ems-feedback-received__audio-label {
  font-size: 12px; color: var(--text3); font-family: var(--font-m);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em;
}
.ems-feedback-audio { width: 100%; margin-bottom: 12px; border-radius: var(--r) }
.ems-feedback-received__note {
  font-size: 15px; color: var(--text); line-height: 1.75;
  padding-top: 10px; border-top: 1px solid #a8ddc8;
}

/* ─── Today done card (dashboard) ─── */
.ems-today-done-card {
  background: linear-gradient(135deg, var(--navy), var(--navy-3));
  border-radius: var(--rxl); padding: 36px 28px;
  text-align: center; margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(15,31,61,.25);
}
.ems-today-done-card__icon { font-size: 56px; margin-bottom: 12px }
.ems-today-done-card__title {
  font-family: var(--font-d); font-size: 24px; color: #fff;
  margin: 0 0 10px; font-weight: 700;
}
.ems-today-done-card__sub {
  color: rgba(255,255,255,.65); font-size: 15px;
  line-height: 1.7; margin: 0 0 4px;
}

/* ─── Lesson completed banner (lesson page) ─── */
.ems-lesson-done-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #f0fdf4; border: 1.5px solid #86efac;
  border-radius: var(--rl); padding: 16px 20px;
  margin-bottom: 20px;
}
.ems-lesson-done-banner__icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: #166534; color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ems-lesson-done-banner__text { flex: 1; font-size: 14px; color: #166534; line-height: 1.5 }
.ems-lesson-done-banner__text strong { display: block; font-size: 15px; margin-bottom: 2px }

/* ─── Countdown timer ─── */
.ems-countdown {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,.2); border-radius: var(--rl);
  padding: 14px 20px; margin: 10px 0;
}
.ems-countdown--dark {
  background: var(--surface2); border: 1.5px solid var(--card-border);
}
.ems-countdown__num {
  font-family: var(--font-m); font-size: 28px; font-weight: 600;
  color: var(--gold-light); min-width: 36px; text-align: center;
  display: inline-block;
}
.ems-countdown--dark .ems-countdown__num { color: var(--navy) }
.ems-countdown__sep {
  font-family: var(--font-m); font-size: 13px; color: rgba(255,255,255,.4);
  margin: 0 2px; padding-bottom: 2px;
}
.ems-countdown--dark .ems-countdown__sep { color: var(--text3) }

/* ─── Activity images ─── */
.ems-scene-image {
  margin-bottom: 16px; border-radius: var(--r); overflow: hidden;
  border: 1.5px solid var(--card-border);
}
.ems-scene-image img { width: 100%; display: block; max-height: 280px; object-fit: cover }

.ems-q-image { margin-bottom: 10px; border-radius: var(--r); overflow: hidden }
.ems-q-image img { width: 100%; max-height: 200px; object-fit: cover; border-radius: var(--r) }

.ems-option--img { flex-direction: column; text-align: center; padding: 8px }
.ems-option-img { width: 100%; max-height: 120px; object-fit: cover; border-radius: var(--r); margin-bottom: 6px }

/* Picture grid for speaking activities */
.ems-picture-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.ems-picture-grid__item {
  border: 1.5px solid var(--card-border); border-radius: var(--r);
  overflow: hidden; text-align: center; background: var(--surface2);
}
.ems-picture-grid__item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block }
.ems-picture-grid__label {
  font-size: 12px; font-family: var(--font-m); color: var(--text2);
  padding: 6px 4px; display: block; font-weight: 500;
}

/* ─── Drag-match tap-to-select ─── */
.ems-draggable {
  cursor: pointer; transition: all .18s; user-select: none;
}
.ems-draggable--selected {
  background: var(--navy) !important; color: #fff !important;
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(15,31,61,.25); transform: scale(1.04);
}
.ems-dm-item { cursor: pointer; transition: all .2s }
.ems-dm-item:hover { border-color: var(--navy-light) !important }

/* ─── CSS Animations ─── */

/* Wizard slide entrance */
@keyframes ems-slide-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ems-wizard-slide[style*="flex"] {
  animation: ems-slide-in .35s cubic-bezier(.22,.68,0,1.2) both;
}

/* Activity card pop-in */
@keyframes ems-pop-in {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ems-activity { animation: ems-pop-in .3s ease both }

/* Correct answer flash */
@keyframes ems-correct-flash {
  0%   { background: #86efac; }
  60%  { background: #e8f5f0; }
  100% { background: #e8f5f0; }
}
.ems-option--correct { animation: ems-correct-flash .5s ease both }

/* Wrong answer shake */
@keyframes ems-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
.ems-option--wrong { animation: ems-shake .4s ease both }

/* Button pulse on hover */
.ems-btn--primary, .ems-btn--gold {
  transition: transform .15s, box-shadow .15s, background .15s;
}
.ems-btn--primary:active, .ems-btn--gold:active { transform: scale(.97) }

/* Quiz feedback slide in */
@keyframes ems-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ems-quiz-feedback { animation: ems-fade-up .25s ease both }

/* Classify chip selected bounce */
@keyframes ems-bounce-select {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1.04); }
}
.ems-classify-chip.ems-chip--selected {
  animation: ems-bounce-select .2s ease both;
}

/* Countdown numbers flip */
@keyframes ems-num-flip {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}
.ems-countdown__num { display: inline-block; }

/* Progress bar fill animation */
.ems-wizard-progress__fill {
  transition: width .7s cubic-bezier(.34,1.56,.64,1) !important;
}

/* Lesson completion celebration */
@keyframes ems-celebrate {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.ems-wizard-done__icon { animation: ems-celebrate .6s cubic-bezier(.34,1.56,.64,1) both .1s }

/* Today done card entrance */
.ems-today-done-card { animation: ems-pop-in .4s cubic-bezier(.22,.68,0,1.2) both }

/* Bottom nav active dot */
.ems-bottom-nav__item--active .ems-bottom-nav__icon {
  animation: ems-bounce-select .25s ease both;
}

/* Loading spinner for buttons */
@keyframes ems-spin {
  to { transform: rotate(360deg); }
}
.ems-btn[disabled]::after {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  animation: ems-spin .7s linear infinite;
}

/* Reveal animation for lesson content */
@keyframes ems-reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ems-reveal { animation: ems-reveal .4s ease both }

/* ─── Clickable words with pronunciation ─── */
.ems-word {
  cursor: help;
  transition: background .15s, color .15s;
  border-radius: 2px;
}
.ems-word:hover { background: rgba(15,31,61,.08); color: var(--navy) }

/* ─── Speaking Activity — Structured Layout ─── */

/* Instruction box — what to do */
.ems-speak-instructions {
  border: 2px solid var(--navy);
  border-radius: var(--r);
  margin-bottom: 18px;
  overflow: hidden;
  animation: ems-fade-up .3s ease both;
}
.ems-speak-instructions__header {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 18px;
}
.ems-speak-instructions__body {
  background: #f8f9ff;
  padding: 16px 18px;
}
.ems-speak-instructions__body p {
  margin: 0 0 10px;
  color: var(--text1);
  line-height: 1.7;
  font-size: 15px;
}
.ems-speak-instructions__body p:last-child { margin-bottom: 0; }
.ems-speak-timelimit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15,31,61,.07);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
  color: var(--navy);
  margin-top: 6px !important;
}

/* Content block — sentences/situations to speak about */
.ems-speak-content {
  border: 1.5px solid var(--card-border);
  border-radius: var(--r);
  margin-bottom: 18px;
  overflow: hidden;
  animation: ems-fade-up .35s ease .05s both;
}
.ems-speak-content__label {
  background: rgba(15,31,61,.04);
  border-bottom: 1px solid var(--card-border);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text2);
  padding: 8px 18px;
}

/* Numbered speaking items */
.ems-speak-items {
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ems-speak-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: box-shadow .2s, border-color .2s;
}
.ems-speak-item:hover {
  border-color: var(--navy-light);
  box-shadow: 0 2px 8px rgba(15,31,61,.08);
}
.ems-speak-item__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.ems-speak-item__body { flex: 1; min-width: 0; }
.ems-speak-item__text {
  margin: 0;
  color: var(--text1);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 500;
}
.ems-speak-item__sub {
  margin: 8px 0 0;
  padding: 0 0 0 16px;
  color: var(--text2);
  font-size: 14px;
  line-height: 1.6;
}
.ems-speak-item__sub li { margin-bottom: 4px; }

/* Action section — recorder */
.ems-speak-action {
  background: rgba(15,31,61,.03);
  border: 1.5px dashed var(--card-border);
  border-radius: var(--r);
  padding: 18px;
  text-align: center;
  animation: ems-fade-up .4s ease .1s both;
}
.ems-speak-action__hint {
  font-size: 14px;
  color: var(--text2);
  margin: 0 0 16px;
  font-style: italic;
}

/* Scene image */
.ems-scene-image {
  margin-bottom: 16px;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(15,31,61,.12);
}
.ems-scene-image img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  display: block;
}

/* Picture grid */
.ems-picture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ems-picture-grid__item {
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--card-border);
  text-align: center;
  background: #fff;
  transition: border-color .2s, transform .2s;
}
.ems-picture-grid__item:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
}
.ems-picture-grid__item img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}
.ems-picture-grid__label {
  display: block;
  padding: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .02em;
}

/* ─── My Lessons Library ─── */

.ems-library-month {
  margin-bottom: 20px;
}
.ems-library-month__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0 10px;
  border-bottom: 2px solid var(--navy);
  margin-bottom: 10px;
}
.ems-library-month__num {
  font-weight: 800;
  font-size: 13px;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ems-library-month__theme {
  font-size: 12px;
  color: var(--text2);
  font-style: italic;
}

.ems-library-card {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  margin-bottom: 8px;
  transition: border-color .18s, box-shadow .18s, transform .15s;
  animation: ems-fade-up .25s ease both;
}
.ems-library-card:hover, .ems-library-card:focus {
  border-color: var(--navy);
  box-shadow: 0 3px 12px rgba(15,31,61,.1);
  transform: translateY(-1px);
  outline: none;
}
.ems-library-card:active { transform: scale(.99); }

.ems-library-card__left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ems-library-card__day {
  font-size: 11px;
  font-weight: 700;
  color: var(--teal-l);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ems-library-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ems-library-card__focus {
  font-size: 12px;
  color: var(--text2);
}
.ems-library-card__arrow {
  font-size: 22px;
  color: var(--text3);
  flex-shrink: 0;
  line-height: 1;
}

/* ─── Lesson content drawer (slides up from bottom) ─── */

.ems-library-drawer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}
.ems-library-drawer--open {
  pointer-events: auto;
}

.ems-library-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,20,40,.55);
  opacity: 0;
  transition: opacity .3s ease;
}
.ems-library-drawer--open .ems-library-drawer__backdrop {
  opacity: 1;
}

.ems-library-drawer__panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 88vh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.22,.68,0,1.2);
  box-shadow: 0 -8px 40px rgba(10,20,40,.18);
}
.ems-library-drawer--open .ems-library-drawer__panel {
  transform: translateY(0);
}

.ems-library-drawer__header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--card-border);
  position: relative;
  flex-shrink: 0;
}
.ems-library-drawer__day-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--teal-l);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: block;
  margin-bottom: 4px;
}
.ems-library-drawer__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  padding-right: 36px;
  line-height: 1.3;
}
.ems-library-drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border: none;
  background: var(--surface2);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  transition: background .15s;
}
.ems-library-drawer__close:hover { background: var(--card-border); }

.ems-library-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 40px;
  -webkit-overflow-scrolling: touch;
}
.ems-library-drawer__loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--text2);
  font-size: 15px;
}

/* Style lesson content inside drawer */
.ems-lesson-concept-content h3 {
  color: var(--navy);
  font-size: 16px;
  margin: 20px 0 8px;
  font-weight: 700;
}
.ems-lesson-concept-content h3:first-child { margin-top: 0; }
.ems-lesson-concept-content p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text1);
  margin: 0 0 10px;
}
.ems-lesson-concept-content ul, .ems-lesson-concept-content ol {
  padding-left: 20px;
  margin: 0 0 12px;
}
.ems-lesson-concept-content li {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text1);
  margin-bottom: 5px;
}
.ems-lesson-concept-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 14px;
}
.ems-lesson-concept-content table th,
.ems-lesson-concept-content table td {
  padding: 8px;
  border: 1px solid var(--card-border);
}
.ems-lesson-concept-content table th { background: rgba(15,31,61,.05); font-weight: 600; }
.ems-lesson-concept-content strong { color: var(--navy); }

/* ─── Listen & Choose the Picture activity ─── */

.ems-picq-group {
  margin-bottom: 24px;
  animation: ems-fade-up .3s ease both;
}
.ems-picq-group__label {
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--navy);
  display: inline-block;
}

.ems-picq-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.ems-picq-option {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}
.ems-picq-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ems-picq-option__img-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid var(--card-border);
  transition: border-color .2s, box-shadow .2s, transform .15s;
  background: #f5f5f5;
  width: 100%;
  aspect-ratio: 3/4;
}
.ems-picq-option__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .2s;
}

.ems-picq-option__check {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--card-border);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: transparent;
  transition: background .2s, color .2s;
}

/* Selected state — before grading */
.ems-picq-option input:checked ~ .ems-picq-option__img-wrap {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15,31,61,.2);
  transform: scale(1.02);
}
.ems-picq-option input:checked ~ .ems-picq-option__img-wrap .ems-picq-option__check {
  background: var(--navy);
  color: #fff;
}

/* Hover state */
.ems-picq-option:not(.ems-picq-option--done):hover .ems-picq-option__img-wrap {
  border-color: var(--navy-light);
  box-shadow: 0 3px 10px rgba(15,31,61,.12);
}

/* After grading — correct */
.ems-picq-option--correct .ems-picq-option__img-wrap {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25) !important;
}
.ems-picq-option--correct .ems-picq-option__check {
  background: #22c55e !important;
  color: #fff !important;
}

/* After grading — wrong (student picked this but it was wrong) */
.ems-picq-option--wrong .ems-picq-option__img-wrap {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.25) !important;
  animation: ems-shake .4s ease;
}
.ems-picq-option--wrong .ems-picq-option__check {
  background: #ef4444 !important;
  color: #fff !important;
}
.ems-picq-option--wrong .ems-picq-option__check::before {
  content: '\2715'; /* ✗ */
}

.ems-picq-option__letter {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
}

/* Responsive: 2 columns on very small screens */
@media (max-width: 360px) {
  .ems-picq-options { grid-template-columns: 1fr 1fr; }
}

/* ─── Lesson Visual Panels (illustrations) ─── */

.ems-visual-panel {
  background: #fff;
  border: 2px solid var(--card-border);
  border-radius: var(--rxl);
  padding: 18px;
  margin-bottom: 24px;
  animation: ems-pop-in .35s cubic-bezier(.22,.68,0,1.2) both;
  box-shadow: 0 2px 12px rgba(15,31,61,.07);
}
.ems-visual-panel__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text2);
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 10px;
  margin-bottom: 0;
}
.ems-visual-colours {
  border-color: rgba(168,85,247,.25);
  background: linear-gradient(135deg, #faf5ff 0%, #fff 100%);
}

/* ─── Lesson Hero Image (textbook-style illustration) ─── */

.ems-lesson-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(15,31,61,.15);
  animation: ems-fade-up .4s ease both;
  background: var(--surface2);
  min-height: 160px;
}
.ems-lesson-hero img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.ems-lesson-hero:hover img { transform: scale(1.02); }
.ems-lesson-hero__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(10,20,40,.7));
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 20px 14px 10px;
  display: block;
}

/* ─── Inline image between lesson sections ─── */

.ems-lesson-inline-img {
  margin: 20px 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(15,31,61,.12);
  animation: ems-fade-up .35s ease .1s both;
  background: var(--surface2);
}
.ems-lesson-inline-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* Wider on desktop */
@media (min-width: 640px) {
  .ems-lesson-hero img { height: 300px; }
  .ems-lesson-inline-img img { height: 220px; }
}

/* ─── Vocabulary visual panel (CSS-only, no external images) ─── */
.ems-visual-panel {
  background: #fff;
  border: 2px solid var(--card-border);
  border-radius: var(--rxl);
  padding: 18px;
  margin-bottom: 24px;
  animation: ems-pop-in .35s cubic-bezier(.22,.68,0,1.2) both;
  box-shadow: 0 2px 12px rgba(15,31,61,.07);
}
.ems-visual-panel__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text2);
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 10px;
  margin-bottom: 0;
}

/* ─── Overflow protection for all lesson content and visual panels ─── */
.ems-concept__body,
.ems-lesson-concept-content {
  overflow-x: hidden;
  max-width: 100%;
  word-break: break-word;
}
/* All inline grid panels must not overflow */
.ems-concept__body div[style*="grid"],
.ems-lesson-concept-content div[style*="grid"],
.ems-visual-panel div[style*="grid"] {
  overflow-x: auto;
  max-width: 100%;
}
/* Emoji/vocabulary cells must wrap on small screens */
.ems-concept__body div[style*="minmax"],
.ems-lesson-concept-content div[style*="minmax"] {
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)) !important;
}
/* Ensure tables inside lessons don't overflow */
.ems-concept__body table,
.ems-lesson-concept-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
/* Hero images must stay within bounds */
.ems-lesson-hero,
.ems-lesson-inline-img {
  max-width: 100%;
  overflow: hidden;
}
.ems-lesson-hero img,
.ems-lesson-inline-img img {
  max-width: 100%;
  width: 100%;
}
/* Visual panel itself must not overflow */
.ems-visual-panel {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* ─── Visual panel overflow protection — final override ─── */
.ems-visual-panel {
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.ems-visual-panel > div[style] {
  max-width: 100% !important;
  overflow-x: hidden !important;
  /* Force auto-fill so cells wrap on any screen width */
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
}
/* Days of the week panel: 7 equal columns that shrink */
.ems-visual-panel > div[style*="repeat(7"] {
  grid-template-columns: repeat(7, 1fr) !important;
}
/* Concept body must not overflow */
.ems-concept__body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  word-break: break-word;
}
/* Tables in lessons scroll horizontally if needed */
.ems-concept__body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
/* Images in lessons must fit */
.ems-concept__body img,
.ems-lesson-concept-content img {
  max-width: 100% !important;
  height: auto !important;
}

/* ─── Lesson Visual Panels (.ems-vp) ─── */
.ems-vp {
  background: #fff;
  border: 2px solid var(--card-border);
  border-radius: 14px;
  padding: 16px;
  margin: 16px 0;
  box-shadow: 0 2px 10px rgba(15,31,61,.07);
  animation: ems-fade-up .3s ease both;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.ems-vp__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text2);
  padding-bottom: 10px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--card-border);
}
/* Grids inside panels must not overflow */
.ems-vp > div, .ems-vp table {
  max-width: 100%;
  box-sizing: border-box;
}
.ems-vp table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Concept body overflow protection */
.ems-concept__body, .ems-lesson-concept-content {
  overflow-x: hidden !important;
  max-width: 100% !important;
  word-break: break-word;
}
.ems-concept__body img, .ems-lesson-concept-content img {
  max-width: 100% !important;
  height: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PICTURE AUDIO QUIZ — div-based cards with explicit JS selection
══════════════════════════════════════════════════════════════════════ */
.ems-paq { }
.ems-paq__question { font-size:1.05rem; font-weight:600; margin-bottom:6px; color:var(--text); }
.ems-paq__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:16px 0; }

/* Card — plain div, full tap target */
.ems-paq__item {
  display:flex; flex-direction:column; gap:0;
  border:2.5px solid var(--border,#e2e8f0);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
  user-select:none;
  -webkit-tap-highlight-color: rgba(59,130,246,.15);
  overflow:hidden;
}
.ems-paq__item:hover { border-color:#94a3b8; }
.ems-paq__item:active { transform:scale(.97); }

/* Selected state */
.ems-paq__item.is-selected {
  border-color:var(--accent,#3b82f6) !important;
  background:rgba(59,130,246,.06) !important;
  box-shadow:0 0 0 4px rgba(59,130,246,.18) !important;
}

/* Result states */
.ems-paq__item--correct {
  border-color:var(--green,#22c55e) !important;
  background:rgba(34,197,94,.10) !important;
  box-shadow:0 0 0 4px rgba(34,197,94,.22) !important;
}
.ems-paq__item--wrong {
  border-color:var(--red,#ef4444) !important;
  background:rgba(239,68,68,.08) !important;
  box-shadow:0 0 0 4px rgba(239,68,68,.20) !important;
}
.ems-paq__item--done { cursor:default; pointer-events:none; }
.ems-paq__item--done.ems-paq__item--correct,
.ems-paq__item--done.ems-paq__item--wrong { pointer-events:auto; } /* keep play btns usable */

/* Media area */
.ems-paq__media { position:relative; width:100%; aspect-ratio:4/3; background:var(--surface,#f8fafc); overflow:hidden; }
.ems-paq__img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.ems-paq__img--placeholder {
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; font-weight:800; color:var(--accent,#3b82f6);
  background:var(--surface,#f8fafc);
}

/* Play button — top right corner, isolated */
.ems-paq__play-btn {
  position:absolute; top:6px; right:6px;
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.6);
  color:#fff;
  font-size:.85rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding-left:2px; /* optical centering ▶ */
  transition:transform .12s, background .15s;
  z-index:2;
  pointer-events:auto !important;
}
.ems-paq__play-btn:hover { background:rgba(0,0,0,.82); transform:scale(1.08); }
.ems-paq__play-btn:active { transform:scale(.92); }
.ems-paq__play-btn.is-playing { background:var(--accent,#3b82f6); }
.ems-paq__audio { display:none; }

/* Label row at bottom */
.ems-paq__label-row {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 10px;
  border-top:1px solid var(--border,#e2e8f0);
  background:rgba(0,0,0,.02);
}
.ems-paq__radio-circle {
  width:18px; height:18px; flex-shrink:0;
  border:2px solid #cbd5e1; border-radius:50%;
  background:#fff;
  transition:border-color .12s, background .12s, box-shadow .12s;
}
.ems-paq__item.is-selected .ems-paq__radio-circle {
  border-color:var(--accent,#3b82f6);
  background:var(--accent,#3b82f6);
  box-shadow:inset 0 0 0 3px #fff;
}
.ems-paq__item--correct .ems-paq__radio-circle {
  border-color:var(--green,#22c55e) !important;
  background:var(--green,#22c55e) !important;
}
.ems-paq__item--wrong .ems-paq__radio-circle {
  border-color:var(--red,#ef4444) !important;
  background:var(--red,#ef4444) !important;
}
.ems-paq__choice-label { font-size:.9rem; font-weight:600; color:var(--text); }

.ems-quiz-feedback { margin-top:12px; font-weight:600; padding:10px 14px; border-radius:8px; border:1.5px solid currentColor; }


/* ══════════════════════════════════════════════════════════════════════
   IMAGE + AUDIO PANEL (.ems-iap)
══════════════════════════════════════════════════════════════════════ */
.ems-iap__scene { margin:14px 0; border-radius:10px; overflow:hidden; line-height:0; }
.ems-iap__img { width:100%; max-height:420px; object-fit:contain; border-radius:10px; background:var(--surface,#f8fafc); }
.ems-iap__quiz { margin-top:14px; }

/* ══════════════════════════════════════════════════════════════════════
   TAP THE CORRECT FORM (.ems-tcf)
══════════════════════════════════════════════════════════════════════ */
.ems-tcf { }
.ems-tcf__row { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px; margin:10px 0; padding:10px 12px; background:var(--surface,#f8fafc); border-radius:8px; border:1px solid var(--border,#e2e8f0); font-size:1rem; line-height:1.7; }
.ems-tcf__text { color:var(--text); }
.ems-tcf__choices { display:inline-flex; flex-wrap:wrap; gap:5px; align-items:center; }
.ems-tcf__btn { padding:3px 12px; border-radius:20px; border:2px solid var(--accent,#3b82f6); color:var(--accent,#3b82f6); background:#fff; font-weight:600; font-size:.9rem; cursor:pointer; transition:background .15s,color .15s,border-color .15s; white-space:nowrap; }
.ems-tcf__btn:hover:not(:disabled) { background:var(--accent,#3b82f6); color:#fff; }
.ems-tcf__btn--correct { background:var(--green,#22c55e)!important; color:#fff!important; border-color:var(--green,#22c55e)!important; }
.ems-tcf__btn--wrong   { background:var(--red,#ef4444)!important;   color:#fff!important; border-color:var(--red,#ef4444)!important; }
.ems-tcf__btn:disabled { cursor:default; }
.ems-tcf__fb { font-size:.9rem; font-weight:600; }
.ems-tcf__summary { margin-top:14px; padding:10px 14px; border-radius:8px; background:rgba(0,0,0,.04); font-size:1rem; text-align:center; }

/* ══════════════════════════════════════════════════════════════════════
   PROFESSIONAL POLISH — subtle animations for engagement
══════════════════════════════════════════════════════════════════════ */

/* Slide entrance — gentle fade and slide */
.ems-wizard-slide[style*="flex"] {
  animation: ems-slide-fade-in .4s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes ems-slide-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* PAQ item — gentle entrance stagger */
.ems-paq__item {
  animation: ems-paq-pop-in .35s cubic-bezier(.34,1.56,.64,1) both;
}
.ems-paq__item:nth-child(1) { animation-delay: 0.00s; }
.ems-paq__item:nth-child(2) { animation-delay: 0.05s; }
.ems-paq__item:nth-child(3) { animation-delay: 0.10s; }
.ems-paq__item:nth-child(4) { animation-delay: 0.15s; }
@keyframes ems-paq-pop-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Correct/wrong shake for feedback */
.ems-paq__item--correct {
  animation: ems-correct-pulse .6s ease-out;
}
.ems-paq__item--wrong {
  animation: ems-wrong-shake .45s ease-out;
}
@keyframes ems-correct-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(34,197,94,.3); }
  100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
}
@keyframes ems-wrong-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  50%      { transform: translateX(6px); }
  75%      { transform: translateX(-3px); }
}

/* Auto-advance banner — gentle scale-in */
.ems-auto-advance-banner,
.ems-wizard-next-row {
  animation: ems-bounce-in .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ems-bounce-in {
  from { opacity: 0; transform: scale(.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Quiz feedback box */
.ems-quiz-feedback {
  animation: ems-fade-up .35s ease-out both;
}
@keyframes ems-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Progress bar smooth animation */
#ems-wizard-bar {
  transition: width .5s cubic-bezier(.65,0,.35,1);
}

/* Button micro-interactions */
.ems-btn {
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.ems-btn:active:not(:disabled) {
  transform: scale(.97);
}

/* Play button pulse when playing */
.ems-paq__play-btn.is-playing {
  animation: ems-play-pulse 1.4s ease-in-out infinite;
}
@keyframes ems-play-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,.45); }
  50%      { box-shadow: 0 0 0 10px rgba(59,130,246,0); }
}

/* Wizard progress label — gentle update flash */
#ems-wizard-label {
  transition: color .25s ease;
}

/* Lesson card hover lift */
.ems-lesson-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.ems-lesson-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,31,61,.10);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .ems-wizard-slide[style*="flex"],
  .ems-paq__item,
  .ems-paq__item--correct,
  .ems-paq__item--wrong,
  .ems-auto-advance-banner,
  .ems-wizard-next-row,
  .ems-quiz-feedback,
  .ems-paq__play-btn.is-playing {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   LESSON ACTION BAR — replaces bottom nav on lesson page
   Fixed at bottom, prompts student to start activities
══════════════════════════════════════════════════════════════════════ */
.ems-lesson-action-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--navy, #0f1f3d);
  border-top: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 -4px 24px rgba(0,0,0,.22);
}
.ems-lesson-action-bar__back {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: .85rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s;
}
.ems-lesson-action-bar__back:hover { color: #fff; }
.ems-lesson-action-bar__info {
  flex: 1;
  font-size: .8rem;
  color: rgba(255,255,255,.55);
}
.ems-lesson-action-bar__progress {
  background: rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 600;
}
.ems-lesson-action-bar__cta {
  flex-shrink: 0;
  font-size: .92rem !important;
  padding: 10px 20px !important;
  border-radius: 50px !important;
  animation: ems-cta-pulse 2.5s ease-in-out infinite;
}
@keyframes ems-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,32,.5); }
  50%       { box-shadow: 0 0 0 10px rgba(232,160,32,.0); }
}
/* Push page content up so it's not hidden behind the bar */
.ems-lesson-app { padding-bottom: 80px !important; }

/* ══════════════════════════════════════════════════════════════════════
   WRITING ACTIVITY — ensure textarea is always visible and prominent
══════════════════════════════════════════════════════════════════════ */
.ems-written-form .ems-textarea,
.ems-record-form .ems-textarea {
  display: block !important;
  width: 100%;
  min-height: 120px;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: var(--r, 8px);
  font-size: .95rem;
  line-height: 1.6;
  font-family: var(--font, inherit);
  color: var(--text);
  background: #fff;
  resize: vertical;
  transition: border-color .15s;
}
.ems-written-form .ems-textarea:focus,
.ems-record-form .ems-textarea:focus {
  outline: none;
  border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.ems-written-form .ems-textarea:disabled {
  background: var(--surface, #f8fafc);
  color: var(--text2);
  cursor: not-allowed;
  opacity: .75;
}

/* Writing prompt box */
.ems-prompt {
  background: var(--surface, #f8fafc);
  border-left: 3px solid var(--accent, #3b82f6);
  border-radius: 0 var(--r,8px) var(--r,8px) 0;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: .95rem;
  white-space: pre-line;
  line-height: 1.6;
}

/* Word count indicator */
.ems-word-count {
  font-size: .78rem;
  color: var(--text3, #94a3b8);
  text-align: right;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   ACTIVITY INTERACTION FIXES — classify picker, reorder tap buttons,
   drag-match instructions
══════════════════════════════════════════════════════════════════════ */

/* Instruction text for interactive activities */
.ems-dm-instructions {
  font-size: 13px;
  color: var(--text2, #64748b);
  background: var(--surface, #f8fafc);
  border-left: 3px solid var(--accent, #3b82f6);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Reorder: up/down tap buttons */
.ems-ro-arrows {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  margin-right: 8px;
  vertical-align: middle;
}
.ems-ro-up, .ems-ro-dn {
  display: block;
  background: var(--surface2, #f1f5f9);
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: 4px;
  width: 26px; height: 20px;
  font-size: 10px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  color: var(--text2, #64748b);
  transition: background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.ems-ro-up:hover, .ems-ro-dn:hover,
.ems-ro-up:active, .ems-ro-dn:active {
  background: var(--navy, #0f1f3d);
  color: #fff;
  border-color: var(--navy, #0f1f3d);
}
.ems-reorder-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: var(--card, #fff);
  border: 1.5px solid var(--card-border, #e2e8f0);
  border-radius: var(--r, 8px);
  margin-bottom: 8px;
  font-size: 14px;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color .15s, background .15s;
}
.ems-drag-handle {
  cursor: grab;
  font-size: 18px;
  color: var(--text3, #94a3b8);
  margin-right: 10px;
  padding: 0 4px;
  flex-shrink: 0;
}

/* Classify picker: must overflow visible inside wizard */
.ems-wizard-slide .ems-classify,
.ems-wizard-slide .ems-classify-bank,
.ems-wizard-slide .ems-classify-cols {
  overflow: visible !important;
}
.ems-classify-chip {
  position: relative;
  overflow: visible !important;
}
.ems-classify-picker {
  z-index: 9999 !important;
}

/* Drag-match: make selection state clearer */
.ems-draggable {
  position: relative;
  transition: all .18s;
}
.ems-draggable::before {
  content: 'TAP TO SELECT';
  display: block;
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--text3, #94a3b8);
  margin-bottom: 2px;
}
.ems-draggable--selected::before {
  content: 'SELECTED ✓';
  color: rgba(255,255,255,.7);
}
.ems-dm-item::after {
  content: '← tap here to place';
  display: block;
  font-size: 10px;
  color: var(--text3, #94a3b8);
  margin-top: 3px;
  font-style: italic;
}


/* ══════════════════════════════════════════════════════════════
   INTERACTIVE SCENE PLAYER  (ESP)
   Modern, mobile-first, lesson-mode UI
══════════════════════════════════════════════════════════════ */

/* Wrapper */
.ems-scene-player-wrap { margin: 0 0 24px; }

.esp-wrap {
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(15,31,61,.07);
}

/* Progress bar */
.esp-progress-bar {
  height: 4px;
  background: #f1f5f9;
}
.esp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0f1f3d, #0d9488);
  transition: width .5s cubic-bezier(.34,1.56,.64,1);
  border-radius: 0 4px 4px 0;
}

/* Header row: replay + counter */
.esp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 0;
}
.esp-audio-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  transition: background .15s, transform .15s;
  line-height: 1;
}
.esp-audio-btn:hover { background: rgba(15,31,61,.06); transform: scale(1.1); }
.esp-counter {
  font-size: 11px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Scene card */
.esp-scene {
  padding: 18px 18px 10px;
  transition: opacity .28s ease, transform .28s ease;
}

/* Teacher area */
.esp-teacher {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.esp-avatar {
  font-size: 28px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(15,31,61,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .15s;
}
.esp-avatar--speaking {
  animation: esp-speak 1.8s ease infinite;
}
@keyframes esp-speak {
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(13,148,136,.4); }
  30%{ transform:scale(1.08); box-shadow:0 0 0 8px rgba(13,148,136,0); }
}
.esp-bubble {
  background: #0f1f3d;
  color: #fff;
  border-radius: 4px 16px 16px 16px;
  padding: 11px 15px;
  font-size: 14px;
  line-height: 1.6;
  flex: 1;
  position: relative;
}
.esp-bubble::before {
  content: '';
  position: absolute;
  left: -7px; top: 10px;
  border: 7px solid transparent;
  border-right-color: #0f1f3d;
  border-left: 0;
}

/* Main content block */
.esp-content {
  background: #f8fafc;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #0f1f3d;
  line-height: 1.65;
  text-align: center;
  margin-bottom: 12px;
  border: 1px solid #e8edf4;
}

/* Pronunciation tip */
.esp-tip {
  background: rgba(251,191,36,.1);
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13px;
  color: #78350f;
  margin-bottom: 10px;
  line-height: 1.5;
}
.esp-tip-icon { font-style: normal; }

/* Tap choices */
.esp-choices {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}
.esp-choices--1col { grid-template-columns: 1fr; }
.esp-choices--2col { grid-template-columns: 1fr 1fr; }

.esp-choice {
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 13px 10px;
  font-size: 14px;
  font-weight: 600;
  color: #0f1f3d;
  cursor: pointer;
  text-align: center;
  transition: all .14s;
  font-family: inherit;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}
.esp-choice:hover:not(:disabled) {
  border-color: #0f1f3d;
  background: rgba(15,31,61,.03);
  transform: translateY(-1px);
}
.esp-choice:active:not(:disabled) { transform: scale(.97); }
.esp-choice--correct {
  border-color: #22c55e !important;
  background: rgba(34,197,94,.1) !important;
  color: #15803d !important;
}
.esp-choice--wrong {
  border-color: #ef4444 !important;
  background: rgba(239,68,68,.08) !important;
  color: #b91c1c !important;
}
.esp-choice--reveal {
  border-color: #22c55e !important;
  background: rgba(34,197,94,.08) !important;
  color: #15803d !important;
  animation: esp-reveal .35s ease;
}
@keyframes esp-reveal { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }

/* Inline replay button */
.esp-replay-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px auto 8px;
  background: none;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
  transition: all .14s;
}
.esp-replay-inline:hover { border-color: #0f1f3d; color: #0f1f3d; }

/* Feedback */
.esp-feedback {
  margin: 0 16px 10px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  display: none;
}
.esp-feedback--success {
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.25);
  color: #14532d;
  display: block;
}
.esp-feedback--retry {
  background: rgba(251,191,36,.1);
  border: 1px solid rgba(251,191,36,.3);
  color: #78350f;
  display: block;
}
.esp-fb-icon { margin-right: 6px; font-style: normal; }

/* Controls */
.esp-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 18px;
}

/* Buttons */
.esp-btn {
  width: 100%;
  max-width: 340px;
  padding: 14px 20px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all .14s;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  letter-spacing: .01em;
}
.esp-btn--primary {
  background: #0f1f3d;
  color: #fff;
}
.esp-btn--primary:hover { opacity: .9; }
.esp-btn--primary:active { transform: scale(.97); }

.esp-btn--secondary {
  background: #f8fafc;
  color: #0f1f3d;
  border: 2px solid #0f1f3d;
}
.esp-btn--ghost {
  background: none;
  color: #64748b;
  border: 1.5px solid #e2e8f0;
}
.esp-btn--ghost:hover { border-color: #94a3b8; color: #0f1f3d; }
.esp-btn--record {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}
.esp-btn--recording {
  animation: esp-record-pulse 1s ease infinite;
}
@keyframes esp-record-pulse {
  0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.4); }
  50%{ box-shadow:0 0 0 10px rgba(239,68,68,0); }
}
.esp-btn--skip {
  background: none;
  color: #94a3b8;
  border: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 20px;
  max-width: 200px;
}
.esp-btn--skip:hover { color: #64748b; }

/* Scene type variants */
.esp-scene--introduction .esp-bubble {
  background: linear-gradient(135deg, #0f1f3d, #1e3a8a);
}
.esp-scene--completion .esp-content {
  background: linear-gradient(135deg, rgba(15,31,61,.05), rgba(13,148,136,.05));
  border-color: rgba(13,148,136,.2);
  font-size: 16px;
}
.esp-scene--tap_choice .esp-content {
  font-size: 14px;
  font-weight: 500;
}

/* Mobile single-column choices */
@media (max-width: 400px) {
  .esp-choices--2col { grid-template-columns: 1fr; }
  .esp-content { font-size: 15px; }
}

/* ── Bottom nav redesign ────────────────────────────────────── */
.ems-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: #fff;
  border-top: 1px solid #e8edf4;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  z-index: 200;
  box-shadow: 0 -2px 16px rgba(15,31,61,.06);
}
.ems-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 3px;
  text-decoration: none;
  color: #94a3b8;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
  padding: 6px 0 8px;
}
.ems-bottom-nav__item--active {
  color: #0f1f3d;
}
.ems-bottom-nav__icon {
  font-size: 20px;
  line-height: 1;
  display: block;
}
.ems-bottom-nav__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.ems-bottom-nav__item--active .ems-bottom-nav__icon {
  position: relative;
}
.ems-bottom-nav__item--active .ems-bottom-nav__icon::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 3px;
  background: #0f1f3d;
  border-radius: 2px;
}

/* ── Scene player loading state ─────────────────────────────── */
.esp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  gap: 16px;
  color: #94a3b8;
  font-size: 14px;
}
.esp-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: #0f1f3d;
  border-radius: 50%;
  animation: esp-spin .8s linear infinite;
}
@keyframes esp-spin { to { transform: rotate(360deg); } }

/* ── esp-body (scene content container) ─────────────────────── */
.esp-body {
  padding: 0;
}

/* ── Error state ─────────────────────────────────────────────── */
.esp-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
}
.esp-error__icon { font-size: 32px; }
.esp-error__msg { font-size: 14px; color: #64748b; }

/* "I heard:" display in voice feedback */
.esp-heard {
    font-size: 13px;
    color: #475569;
    margin-bottom: 6px;
    font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   LISTENING ACTIVITY PLAYER
══════════════════════════════════════════════════════════════ */

.ems-listen-act {
  margin-bottom: 16px;
}

.ems-listen-player {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(15,31,61,.04), rgba(13,148,136,.04));
  border: 1.5px solid rgba(13,148,136,.2);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ems-listen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #0f1f3d;
  color: #fff;
  border: none;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.ems-listen-btn:hover { opacity: .88; }
.ems-listen-btn:active { transform: scale(.97); }
.ems-listen-btn:disabled { opacity: .5; cursor: wait; }

.ems-listen-btn--replay {
  background: rgba(15,31,61,.08);
  color: #0f1f3d;
  font-weight: 600;
}
.ems-listen-btn--replay:hover { background: rgba(15,31,61,.14); }

.ems-listen-btn--generate {
  background: linear-gradient(135deg, #0d9488, #0f766e);
}

.ems-listen-btn--small {
  padding: 7px 14px;
  font-size: 13px;
}

.ems-listen-status {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
  flex: 1;
  min-width: 120px;
}

.ems-listen-instructions {
  font-size: 13px;
  color: #475569;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: rgba(251,191,36,.08);
  border-left: 3px solid #fbbf24;
  border-radius: 0 8px 8px 0;
}

.ems-listen-quiz .ems-q { margin-bottom: 14px; }

/* Minimal pairs listen layout */
.ems-mp-listen-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--surface, #f8fafc);
  border-radius: 12px;
}

.ems-mp-listen-player {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* Dictation textarea */
.ems-dict-textarea {
  font-family: inherit;
  font-size: 15px;
  width: 100%;
  padding: 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  resize: vertical;
  margin-bottom: 10px;
}
.ems-dict-textarea:focus {
  outline: none;
  border-color: #0f1f3d;
}

/* ══════════════════════════════════════════════════════════════
   STREAK & XP SYSTEM
══════════════════════════════════════════════════════════════ */

/* ── Streak Card ─────────────────────────────────────────────── */
.ems-streak-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 0 18px;
  box-shadow: 0 2px 12px rgba(15,31,61,.06);
}

/* Main streak display */
.ems-streak-main {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.ems-streak-flame {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .2s;
}
.ems-streak-flame--active {
  animation: ems-flicker 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(251,146,60,.5));
}
.ems-streak-flame--cold {
  filter: grayscale(.7);
  opacity: .6;
}
@keyframes ems-flicker {
  0%,100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.08) rotate(2deg); }
}

.ems-streak-count {
  display: flex;
  flex-direction: column;
}
.ems-streak-number {
  font-size: 36px;
  font-weight: 800;
  color: #0f1f3d;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ems-streak-label {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ems-streak-best {
  margin-left: auto;
  font-size: 12px;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 600;
}

/* ── XP bar ──────────────────────────────────────────────────── */
.ems-xp-section {
  margin-bottom: 12px;
}
.ems-xp-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.ems-xp-level {
  font-size: 13px;
  font-weight: 700;
  color: #0f1f3d;
}
.ems-xp-total {
  font-size: 12px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.ems-xp-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}
.ems-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  border-radius: 4px;
  transition: width .6s cubic-bezier(.34,1.56,.64,1);
  min-width: 4px;
}
.ems-xp-next {
  font-size: 11px;
  color: #94a3b8;
  text-align: right;
}

/* ── Milestone progress ──────────────────────────────────────── */
.ems-streak-milestone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.ems-milestone-icon { font-size: 16px; flex-shrink: 0; }
.ems-milestone-text strong { color: #92400e; }

/* ── Today status ────────────────────────────────────────────── */
.ems-streak-today {
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
}
.ems-streak-today--done {
  background: #dcfce7;
  color: #15803d;
}
.ems-streak-today--warn {
  background: #fef3c7;
  color: #92400e;
}

/* ══════════════════════════════════════════════════════════════
   MILESTONE POPUP — full-screen celebration
══════════════════════════════════════════════════════════════ */
.ems-milestone-popup {
  position: fixed;
  inset: 0;
  background: rgba(15,31,61,.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ems-popup-in .3s ease;
}
@keyframes ems-popup-in {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

.ems-milestone-popup__inner {
  background: #fff;
  border-radius: 24px;
  padding: 40px 32px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(15,31,61,.25);
}

.ems-milestone-popup__flame {
  font-size: 56px;
  margin-bottom: 12px;
  animation: ems-flicker 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(251,146,60,.6));
}

.ems-milestone-popup__days {
  font-size: 28px;
  font-weight: 800;
  color: #0f1f3d;
  margin-bottom: 6px;
}

.ems-milestone-popup__title {
  font-size: 18px;
  font-weight: 700;
  color: #f59e0b;
  margin-bottom: 16px;
}

.ems-milestone-popup__xp {
  font-size: 15px;
  font-weight: 700;
  color: #15803d;
  background: #dcfce7;
  display: inline-block;
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.ems-milestone-popup__close {
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   STUDENT PROGRESS DASHBOARD
══════════════════════════════════════════════════════════════ */

/* ── Stats summary row ───────────────────────────────────────── */
.ems-prog-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 420px) {
  .ems-prog-stats { grid-template-columns: repeat(2, 1fr); }
}

.ems-prog-stat {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ems-prog-stat__n {
  font-size: 24px;
  font-weight: 800;
  color: #0f1f3d;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ems-prog-stat__l {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Level card ──────────────────────────────────────────────── */
.ems-prog-level-card {
  background: linear-gradient(135deg, #0f1f3d, #1e3a8a);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 20px;
  color: #fff;
}
.ems-prog-level-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ems-prog-level-badge {
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: .04em;
}
.ems-prog-level-name {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
}
.ems-prog-level-xp {
  font-size: 14px;
  font-weight: 700;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}
.ems-prog-xp-bar {
  height: 8px;
  background: rgba(255,255,255,.15);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.ems-prog-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 4px;
  transition: width .8s cubic-bezier(.34,1.56,.64,1);
  min-width: 4px;
}
.ems-prog-xp-sub {
  font-size: 12px;
  color: rgba(255,255,255,.6);
}

/* ── Section wrapper ─────────────────────────────────────────── */
.ems-prog-section {
  margin-bottom: 28px;
}
.ems-prog-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f1f3d;
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ems-prog-section-sub {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 400;
}

/* ── Day map — current month grid ───────────────────────────── */
.ems-day-map {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (max-width: 340px) {
  .ems-day-map { grid-template-columns: repeat(4, 1fr); }
}

.ems-day-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: 12px;
  padding: 10px 6px 8px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  text-decoration: none;
  position: relative;
  transition: all .15s;
  min-height: 72px;
}
.ems-day-cell--completed {
  background: #0f1f3d;
  border-color: #0f1f3d;
}
.ems-day-cell--completed .ems-day-cell__n { color: rgba(255,255,255,.7); }
.ems-day-cell--completed .ems-day-cell__check { color: #4ade80; }
.ems-day-cell--completed .ems-day-cell__title { color: rgba(255,255,255,.6); }
.ems-day-cell--current {
  border-color: #0d9488;
  background: rgba(13,148,136,.06);
  box-shadow: 0 0 0 3px rgba(13,148,136,.2);
}
.ems-day-cell--current .ems-day-cell__n { color: #0d9488; }
.ems-day-cell--in_progress {
  border-color: #fbbf24;
  background: #fffbeb;
}
.ems-day-cell--available {
  background: #fff;
  border-color: #d1d5db;
}
.ems-day-cell--locked {
  opacity: .45;
}

a.ems-day-cell:hover:not(.ems-day-cell--locked) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15,31,61,.1);
}
a.ems-day-cell:active { transform: scale(.97); }

.ems-day-cell__n {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 2px;
}
.ems-day-cell__check {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 4px;
}
.ems-day-cell__title {
  font-size: 9px;
  color: #94a3b8;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── All months grid ─────────────────────────────────────────── */
.ems-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 380px) {
  .ems-month-grid { grid-template-columns: repeat(2, 1fr); }
}

.ems-month-card {
  border-radius: 14px;
  padding: 14px 12px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  transition: all .15s;
}
.ems-month-card--done {
  background: #fff;
  border-color: #0f1f3d;
}
.ems-month-card--current {
  background: #fff;
  border-color: #0d9488;
  box-shadow: 0 2px 12px rgba(13,148,136,.12);
}
.ems-month-card--locked { opacity: .5; }

.ems-month-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ems-month-card__num {
  font-size: 13px;
  font-weight: 800;
  color: #0f1f3d;
}
.ems-month-card__badge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 100px;
  padding: 2px 8px;
}
.ems-month-card__badge--done    { background: #dcfce7; color: #15803d; }
.ems-month-card__badge--active  { background: #ccfbf1; color: #0d9488; }
.ems-month-card__badge--locked  { background: #f1f5f9; color: #94a3b8; }

.ems-month-card__theme {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 8px;
  line-height: 1.35;
  min-height: 28px;
}
.ems-month-bar {
  height: 5px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}
.ems-month-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #0f1f3d, #0d9488);
  border-radius: 3px;
  transition: width .6s ease;
}
.ems-month-card__sub {
  font-size: 10px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

/* ── Recent completions ──────────────────────────────────────── */
.ems-recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ems-recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
}
.ems-recent-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0f1f3d;
  color: #4ade80;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.ems-recent-info { flex: 1; min-width: 0; }
.ems-recent-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f1f3d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ems-recent-meta { font-size: 11px; color: #94a3b8; }
.ems-recent-date { font-size: 12px; color: #94a3b8; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ── Milestone badges ────────────────────────────────────────── */
.ems-badges-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 420px) {
  .ems-badges-grid { grid-template-columns: repeat(3, 1fr); }
}

.ems-badge-card {
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
  border: 1.5px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all .15s;
}
.ems-badge-card--earned {
  background: linear-gradient(135deg, rgba(15,31,61,.04), rgba(13,148,136,.04));
  border-color: #0f1f3d;
}
.ems-badge-card--locked {
  background: #f8fafc;
  opacity: .55;
}
.ems-badge-card__icon { font-size: 26px; line-height: 1; }
.ems-badge-card__name {
  font-size: 10px;
  font-weight: 700;
  color: #0f1f3d;
  line-height: 1.3;
}
.ems-badge-card__desc { font-size: 9px; color: #94a3b8; }
.ems-badge-card__lock { font-size: 9px; color: #0d9488; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   TYPE-TO-SPEAK FALLBACK
══════════════════════════════════════════════════════════════ */

.esp-feedback--type {
  background: #f0f7ff;
  border: 1.5px solid #bfdbfe;
  color: #1e40af;
  display: block;
}

.esp-type-prompt {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 0;
}

.esp-type-wrap {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.esp-type-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px; /* 16px prevents iOS zoom */
  font-family: inherit;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: #0f1f3d;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.esp-type-input:focus {
  border-color: #0f1f3d;
}
.esp-type-input::placeholder {
  color: #94a3b8;
  font-style: italic;
}

.esp-type-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.esp-type-actions .esp-btn--primary {
  flex: 1;
}

/* ── Streak card inside Today tab — less top margin ─────────── */
#tab-today > .ems-streak-card:first-child {
  margin-top: 0;
}
#tab-today .ems-streak-card {
  margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════════
   SATURDAY CLASS CARD
══════════════════════════════════════════════════════════════ */
.ems-class-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, #0f1f3d, #1e3a8a);
  color: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.ems-class-card--live {
  background: linear-gradient(135deg, #15803d, #166534);
  animation: ems-pulse-border 2s ease infinite;
}
@keyframes ems-pulse-border {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}
.ems-class-card__icon { font-size: 28px; flex-shrink: 0; margin-top: 2px; }
.ems-class-card__body { flex: 1; }
.ems-class-card__live-badge {
  display: inline-block;
  background: #22c55e;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  border-radius: 100px;
  padding: 2px 10px;
  margin-bottom: 6px;
}
.ems-class-card__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
.ems-class-card__time {
  font-size: 13px;
  color: rgba(255,255,255,.8);
}
.ems-class-join-btn {
  display: inline-block;
  margin-top: 12px !important;
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.3) !important;
  border-radius: 100px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all .15s !important;
}
.ems-class-join-btn:hover {
  background: rgba(255,255,255,.25) !important;
  color: #fff !important;
}

/* ── Teacher badge ───────────────────────────────────────────── */
.ems-teacher-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--card-border, #e2e8f0);
  margin-bottom: 20px;
}
.ems-teacher-badge {
  background: linear-gradient(135deg, #0f1f3d, #1e3a8a);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 100px;
  padding: 6px 14px;
}

/* header streak styles moved to bottom of file */

/* ══════════════════════════════════════════════════════════════
   WEEKEND CARDS — Saturday and Sunday states
══════════════════════════════════════════════════════════════ */
.ems-weekend-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 28px 24px;
  text-align: center;
  margin-bottom: 16px;
}
.ems-weekend-card--sunday {
  background: linear-gradient(135deg, #f8fafc, #f0f9ff);
  border-color: #bae6fd;
}
.ems-weekend-card__icon {
  font-size: 44px;
  margin-bottom: 10px;
  line-height: 1;
}
.ems-weekend-card__title {
  font-size: 17px;
  font-weight: 800;
  color: #0f1f3d;
  margin-bottom: 8px;
}
.ems-weekend-card__sub {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  max-width: 300px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   HEADER STREAK — ultra-compact: just flame + number
══════════════════════════════════════════════════════════════ */
.ems-hstreak {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 6px;
  border-radius: 100px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
}
.ems-hstreak--active {
  border-color: rgba(251,146,60,.5);
  background: #fffbeb;
}
.ems-hstreak--cold { opacity: .6; }
.ems-hstreak__flame {
  font-size: 18px;
  line-height: 1;
}
.ems-hstreak--active .ems-hstreak__flame {
  animation: ems-flicker 2s ease-in-out infinite;
}
.ems-hstreak__body {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.ems-hstreak__number {
  font-size: 18px;
  font-weight: 800;
  color: #0f1f3d;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ems-hstreak__label {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   XP STRIP — inline stats row below the tabs
══════════════════════════════════════════════════════════════ */
.ems-xp-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  padding: 8px 4px 12px;
  flex-wrap: wrap;
}
.ems-xp-strip__item { display: flex; align-items: center; gap: 4px; }
.ems-xp-strip__item strong { color: #0f1f3d; }
.ems-xp-strip__sep { color: #e2e8f0; font-size: 16px; }

/* ══════════════════════════════════════════════════════════════
   MAIN CARD — unified card for all 5 Today states
══════════════════════════════════════════════════════════════ */
.ems-main-card {
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  margin-bottom: 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Saturday — deep navy with teal accent */
.ems-main-card--saturday {
  background: linear-gradient(145deg, #0f1f3d 0%, #0d4f6e 100%);
}
/* Sunday — softer navy/slate */
.ems-main-card--sunday {
  background: linear-gradient(145deg, #1e293b 0%, #334155 100%);
}
/* Weekday done — deep green */
.ems-main-card--done {
  background: linear-gradient(145deg, #14532d 0%, #166534 100%);
}

.ems-main-card__icon {
  font-size: 40px;
  margin-bottom: 8px;
  line-height: 1;
}
.ems-main-card__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 6px;
}
.ems-main-card__title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.3;
  color: #fff;
}
.ems-main-card__sub {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  margin-bottom: 4px;
}
.ems-main-card__hint {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin: 12px 0 0;
}
.ems-main-card__countdown-label {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  margin: 16px 0 6px;
}

/* Live badge */
.ems-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #22c55e;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  border-radius: 100px;
  padding: 4px 12px;
  animation: ems-pulse-border 2s ease infinite;
}

/* Smaller countdown inside weekend cards */
.ems-countdown--small .ems-countdown__num {
  font-size: 28px;
  min-width: 36px;
}

/* Remove old weekend-card styles that conflict */
.ems-weekend-card { display: none; }

/* ══════════════════════════════════════════════════════════════
   AUDIO UNLOCK PROMPT — shown when browser blocks autoplay
══════════════════════════════════════════════════════════════ */
#esp-audio-unlock {
  position: absolute;
  inset: 0;
  background: rgba(15,31,61,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: inherit;
  cursor: pointer;
  animation: ems-popup-in .25s ease;
}
.esp-audio-unlock__inner {
  text-align: center;
  color: #fff;
}
.esp-audio-unlock__icon {
  font-size: 48px;
  margin-bottom: 10px;
  animation: ems-flicker 1.5s ease infinite;
}
.esp-audio-unlock__text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════════
   ANNOUNCEMENT CARDS — student dashboard
══════════════════════════════════════════════════════════════ */
.ems-announce-card {
  position: relative;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px 40px 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(15,31,61,.06);
  overflow: hidden;
  transition: box-shadow .15s;
}
.ems-announce-card[data-link] { cursor: pointer; }
.ems-announce-card[data-link]:hover { box-shadow: 0 4px 18px rgba(15,31,61,.1); }
.ems-announce-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #0f1f3d, #0d9488);
  border-radius: 4px 0 0 4px;
}

/* Dismiss button */
.ems-ann-close {
  position: absolute;
  top: 10px; right: 12px;
  background: none;
  border: none;
  font-size: 18px;
  color: #cbd5e1;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .12s;
  -webkit-tap-highlight-color: transparent;
}
.ems-ann-close:hover { color: #64748b; }

/* Body row */
.ems-ann-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ems-ann-emoji {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.ems-ann-text { flex: 1; min-width: 0; }
.ems-ann-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f1f3d;
  margin-bottom: 2px;
}
.ems-ann-msg {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}

/* Play button */
.ems-ann-play {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #0f1f3d;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: all .15s;
}
.ems-ann-play:hover { background: #0d9488; }
.ems-ann-play--playing { background: #0d9488; }

/* Tap hint */
.ems-ann-tap-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 6px;
  padding-left: 38px;
}

/* ── Translation Activity ─────────────────────────────────────── */
.ems-activity__task-label {
  display: inline-block;
  background: #f0f9ff;
  border: 1.5px solid #bae6fd;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #0284c7;
  margin-bottom: 14px;
}
.ems-translation-source {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-left: 4px solid var(--navy, #0f1f3d);
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.ems-translation-source__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
  margin-bottom: 8px;
}
.ems-translation-source__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--navy, #0f1f3d);
}

/* ── Listen & Fill the Gaps ───────────────────────────────────── */
.ems-listen-gap__audio {
  margin-bottom: 20px;
  text-align: center;
}
.ems-listen-gap__tip {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  margin: 6px 0 0;
}
.ems-listen-gap__text {
  font-size: 16px;
  line-height: 2.2;
  color: var(--navy, #0f1f3d);
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
}
.ems-listen-gap__text--done .ems-gap-answer {
  background: #dcfce7;
  color: #15803d;
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 700;
}
.ems-gap-input {
  display: inline-block;
  border: none;
  border-bottom: 2.5px solid var(--navy, #0f1f3d);
  background: transparent;
  font-size: 16px;
  font-family: inherit;
  color: var(--navy, #0f1f3d);
  text-align: center;
  padding: 2px 4px;
  margin: 0 2px;
  outline: none;
  min-width: 60px;
  transition: border-color .2s;
}
.ems-gap-input:focus { border-bottom-color: var(--gold, #e8b43c); }
.ems-done-note {
  margin-top: 14px;
  font-size: 13px;
  color: #15803d;
  font-weight: 600;
}

/* ── Classify — British Council tap-to-select style ──────────── */

/* Selected chip — highlighted gold, calls for action */
.ems-classify-chip--selected {
  background: var(--gold, #e8b43c) !important;
  border-color: var(--gold, #e8b43c) !important;
  color: #fff !important;
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(232,180,60,.4);
  z-index: 10;
}

/* Dimmed chips — not the selected one */
.ems-classify-chip--dim {
  opacity: .35;
  pointer-events: none;   /* cannot accidentally click them */
}

/* Column becomes a drop target when chip is selected */
.ems-classify-col--target {
  border: 2px dashed var(--gold, #e8b43c) !important;
  background: #fffbf0 !important;
  cursor: pointer;
}
.ems-classify-col--target:hover,
.ems-classify-col--hover {
  background: #fff8e1 !important;
  border-color: #d4900a !important;
}

/* "Tap a column" hint text */
.ems-classify-select-hint {
  display: none;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold, #e8b43c);
  margin: 8px 0 0;
  letter-spacing: .03em;
}

/* Remove old picker styles (kept for safety) */
.ems-classify-picker { display: none !important; }

/* Milestone message */
.ems-milestone-msg{background:rgba(255,255,255,.12);border-radius:12px;padding:12px 16px;margin:12px 0 4px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.9);font-style:italic;text-align:left}

/* ── Minimal Pairs Listen — student UX (improved) ────────────── */
.ems-mp-listen-wrap { padding: 4px 0; }

.ems-mp-listen-intro {
  font-size: 14px; font-weight: 700; color: #475569;
  margin-bottom: 20px; text-align: center; letter-spacing: .01em;
}

.ems-mp-pair {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px 20px 20px;
  margin-bottom: 18px;
  transition: border-color .2s;
}
.ems-mp-pair:has(input:checked) { border-color: #cbd5e1; }

/* Play button row — centered, prominent */
.ems-mp-play-row {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px; margin-bottom: 22px;
}

.ems-mp-play-btn {
  font-size: 15px !important; font-weight: 800 !important;
  padding: 14px 48px !important; border-radius: 50px !important;
  min-width: 180px; letter-spacing: .02em;
}

.ems-mp-replay-hint {
  font-size: 11px; color: #94a3b8; font-style: italic;
}

/* Word choice buttons — large, clear, very tactile */
.ems-mp-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.ems-mp-choice { display: block; cursor: pointer; }

.ems-mp-choice input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}

.ems-mp-choice__word {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 80px;
  text-align: center;
  font-size: 22px; font-weight: 900; letter-spacing: .01em;
  color: var(--navy, #0f1f3d);
  background: #fff;
  border: 3px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 12px;
  transition: all .15s cubic-bezier(.2,.8,.2,1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ems-mp-choice:hover .ems-mp-choice__word,
.ems-mp-choice:active .ems-mp-choice__word {
  border-color: #94a3b8; background: #f1f5f9; transform: scale(1.01);
}

.ems-mp-choice input:checked + .ems-mp-choice__word {
  border-color: var(--navy, #0f1f3d);
  background: var(--navy, #0f1f3d);
  color: #fff; transform: scale(1.04);
  box-shadow: 0 6px 20px rgba(15,31,61,.25);
}

/* After grading — correct/wrong */
.ems-mp-choice--correct .ems-mp-choice__word {
  border-color: #16a34a; background: #dcfce7; color: #15803d; transform: none;
}
.ems-mp-choice--wrong .ems-mp-choice__word {
  border-color: #dc2626; background: #fee2e2; color: #dc2626; transform: none;
}

/* ── Pronunciation Practice Activity ─────────────────────────── */
.ems-pron-wrap { padding: 4px 0; }
.ems-pron-prompt { font-size:14px; color:#475569; margin-bottom:16px; font-style:italic; }

.ems-pron-item {
  background: #f8fafc; border: 1.5px solid #e2e8f0;
  border-radius: 16px; padding: 20px; margin-bottom: 14px;
}

.ems-pron-target {
  text-align: center; margin-bottom: 16px;
}
.ems-pron-word {
  display: block; font-size: 32px; font-weight: 900;
  color: var(--navy, #0f1f3d); letter-spacing: .02em;
}
.ems-pron-phonetic {
  display: block; font-size: 16px; color: #64748b;
  margin-top: 4px; font-style: italic;
}

.ems-pron-listen-row {
  display: flex; justify-content: center; margin-bottom: 14px;
}

.ems-pron-record-row { display: flex; justify-content: center; }

.ems-pron-record-btn {
  min-width: 180px; font-size: 15px !important; font-weight: 700 !important;
  padding: 12px 28px !important; border-radius: 50px !important;
}
.ems-pron-btn--done {
  background: #16a34a !important; border-color: #16a34a !important;
  color: #fff !important;
}

/* Feedback banners */
.ems-pron-feedback { margin-top: 12px; }
.ems-pron-fb {
  border-radius: 10px; padding: 10px 14px; font-size: 14px; line-height: 1.5;
}
.ems-pron-fb--pass {
  background: #dcfce7; border: 1.5px solid #86efac; color: #15803d;
}
.ems-pron-fb--retry {
  background: #fef9c3; border: 1.5px solid #fde047; color: #854d0e;
}
.ems-pron-fb--info {
  background: #f1f5f9; border: 1.5px solid #cbd5e1; color: #475569;
  font-size: 12px;
}

/* ── Gap Builder Admin (ems-admin.css would be better but keeping inline) ── */
/* (styles injected via admin head for the gap builder are handled by inline CSS above) */

/* ── Listen & Order (Sequence) ───────────────────────────────── */
.ems-listen-seq { padding: 4px 0; }
.ems-listen-seq__audio { margin-bottom: 18px; text-align: center; }
.ems-listen-seq__tip { font-size: 12px; color: #94a3b8; font-style: italic; margin-top: 6px; }
.ems-listen-seq__prompt { font-size: 14px; color: #475569; margin-bottom: 14px; }

.ems-listen-seq__list { display: flex; flex-direction: column; gap: 8px; }

.ems-listen-seq__item {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid #e2e8f0;
  border-radius: 12px; padding: 12px 16px;
  cursor: grab; transition: all .15s;
  user-select: none;
}
.ems-listen-seq__item:active { cursor: grabbing; }
.ems-listen-seq__item.ems-seq-dragging { opacity: .5; }
.ems-listen-seq__item.ems-seq-selected {
  border-color: var(--gold, #e8b43c);
  background: #fffbf0;
  box-shadow: 0 0 0 3px rgba(232,180,60,.2);
}

.ems-listen-seq__handle {
  color: #94a3b8; font-size: 16px; flex-shrink: 0;
}
.ems-listen-seq__text { flex: 1; font-size: 15px; line-height: 1.4; }
.ems-listen-seq__num {
  flex-shrink: 0; width: 24px; height: 24px;
  background: var(--navy, #0f1f3d); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.ems-listen-seq__item--done { cursor: default; }

/* ── Saturday live class compact banner ──────────────────────── */
.ems-sat-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: linear-gradient(135deg, #0f1f3d 0%, #1e3a6e 100%);
  border-radius: 16px; padding: 14px 18px; margin-bottom: 14px; color: #fff;
}
.ems-sat-banner__left { display: flex; align-items: center; gap: 12px; }
.ems-sat-banner__icon { font-size: 24px; flex-shrink: 0; }
.ems-sat-banner__title { font-weight: 800; font-size: 14px; line-height: 1.3; }
.ems-sat-banner__time  { font-size: 12px; opacity: .75; margin-top: 2px; }