@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* Vibrant teal, sky blue, and cheerful gold over soft glass surfaces. */
  --bg-primary: #0b1220;
  --bg-secondary: #111827;
  --bg-card: rgba(17, 24, 39, 0.78);
  --bg-card-hover: rgba(30, 41, 59, 0.9);
  --border: rgba(226, 232, 240, 0.12);
  --border-glow: rgba(3, 105, 161, 0.3);

  --text-main: #f8fafc;
  --text-muted: #cbd5e1;
  --text-dim: #94a3b8;

  --primary: #0F766E;
  --primary-light: #5EEAD4;
  --primary-gradient: linear-gradient(135deg, #0F766E 0%, #0369A1 100%);
  --glass-bg: rgba(15, 23, 42, 0.76);
  --glass-border: rgba(226, 232, 240, 0.16);
  --gold-gradient: linear-gradient(135deg, #D99A16 0%, #F4B740 100%);
  --gold-accent: #F4B740;
  --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

  --success: #10b981;
  --warning: #F4B740;
  --danger: #ef4444;
  --info: #0ea5e9;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 25px rgba(15, 118, 110, 0.25);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.78);
  --bg-card-hover: rgba(255, 255, 255, 0.96);
  --border: #e2e8f0;
  --border-glow: rgba(15, 118, 110, 0.2);

  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-dim: #64748b;
  --primary-light: #0F766E;
  --primary-gradient: linear-gradient(135deg, #0F766E 0%, #0369A1 100%);
  --glass-bg: rgba(255, 255, 255, 0.76);
  --glass-border: rgba(226, 232, 240, 0.9);
  --gold-gradient: linear-gradient(135deg, #D99A16 0%, #F4B740 100%);
  --gold-accent: #9A6700;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 25px rgba(15, 118, 110, 0.14);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Cairo', 'Outfit', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-main);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  direction: rtl;
  text-align: right;
  background-image: 
    radial-gradient(at 10% 20%, rgba(15, 118, 110, 0.09) 0px, transparent 50%),
    radial-gradient(at 90% 80%, rgba(244, 183, 64, 0.07) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(15, 118, 110, 0.035) 0px, transparent 50%);
  background-attachment: fixed;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: var(--radius-full);
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ==========================================
   Header & Status Bar (Duolingo Style Glass)
   ========================================== */
.main-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0;
  box-shadow: var(--shadow-sm);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.brand-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: var(--shadow-glow);
}

.brand-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-badge {
  font-size: 0.7rem;
  color: var(--primary-light);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Gamification Floating Counters */
.status-pill-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 700;
  transition: var(--transition);
}

.status-pill:hover {
  transform: translateY(-1px);
  border-color: var(--primary-light);
}

.pill-streak { color: var(--gold-accent); }
.pill-xp { color: var(--gold-accent); }
.pill-hearts { color: #ef4444; }
.pill-level { color: var(--primary-light); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-icon {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-main);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: var(--transition);
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--primary-light);
}

/* Glassmorphic Vector Icons */
.glass-svg {
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
  transition: transform 0.22s ease, filter 0.22s ease;
}

.btn-icon:hover .glass-svg,
.unit-action-btn:hover .glass-svg,
.dialogue-play-btn:hover .glass-svg,
.rule-audio-btn:hover .glass-svg,
.btn-speak-listen:hover .glass-svg,
.btn-speak-mic:hover .glass-svg {
  transform: scale(1.12);
  filter: drop-shadow(0 0 10px rgba(3, 105, 161, 0.7));
}

.tab-icon, .b-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================
   Navigation Bar (Roadmap / Lab / Quests / Stats)
   ========================================= */
.nav-tabs {
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.5rem;
  gap: 0.4rem;
  margin: 1.25rem 0 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.nav-tabs::-webkit-scrollbar {
  display: none;
}

.nav-tab {
  flex: 0 0 auto;
  text-align: center;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(3, 105, 161, 0.35);
  transform: translateY(-1px);
}

.nav-tab.active {
  background: linear-gradient(135deg, rgba(3, 105, 161, 0.95), rgba(3, 105, 161, 0.95));
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 18px rgba(3, 105, 161, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ==========================================
   Daily Missions & Penalty Banner
   ========================================== */
.penalty-alert-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(185, 28, 28, 0.25));
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: shake 0.6s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.penalty-alert-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.penalty-alert-body {
  flex: 1;
}

.penalty-alert-title {
  color: #f87171;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

.penalty-alert-text {
  font-size: 0.9rem;
  color: var(--text-main);
  opacity: 0.95;
}

.penalty-alert-btn {
  background: #ef4444;
  color: #fff;
  border: none;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.penalty-alert-btn:hover {
  background: #dc2626;
}

/* Daily Quests Box */
.daily-quests-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.card-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.card-title {
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.daily-quests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.quest-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.quest-item.completed {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.06);
}

.quest-icon {
  font-size: 1.7rem;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quest-content {
  flex: 1;
  min-width: 0;
}

.quest-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.quest-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--primary-gradient);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.quest-reward {
  font-size: 0.8rem;
  font-weight: 800;
  color: #F4B740;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

/* ==========================================
   Units Curriculum Roadmap (Path Layout)
   ========================================== */
.path-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0 4rem;
  position: relative;
}

.path-node-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 450px;
  position: relative;
}

.unit-node-card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  box-shadow: var(--shadow-sm);
}

.unit-node-card:hover:not(.locked) {
  transform: translateY(-4px);
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.unit-node-card.active-unit {
  border: 2px solid var(--primary);
  box-shadow: 0 0 20px rgba(3, 105, 161, 0.35);
}

.unit-node-card.locked {
  opacity: 0.65;
  filter: grayscale(0.5);
  cursor: not-allowed;
}

.unit-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.unit-badge-pill {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(3, 105, 161, 0.15);
  color: var(--primary-light);
}

.unit-stars {
  display: flex;
  gap: 0.2rem;
  color: #F4B740;
  font-size: 0.95rem;
}

.unit-title-en {
  direction: ltr;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

.unit-title-ar {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.unit-desc {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.45;
  margin-bottom: 1rem;
}

.unit-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  font-size: 0.85rem;
}

.unit-action-btn {
  background: var(--primary-gradient);
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.unit-action-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 15px rgba(3, 105, 161, 0.4);
}

.connector-line {
  width: 4px;
  height: 35px;
  background: var(--border);
  margin: 0.25rem 0;
  border-radius: var(--radius-full);
}

.connector-line.passed {
  background: var(--success);
}

/* ==========================================
   Unit View (Details / Tabs: Dialogue, Grammar, Vocab, Speaking, Quiz)
   ========================================== */
.unit-view-container {
  display: none;
}
.unit-view-container.active {
  display: block;
}

.unit-banner {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.8), rgba(67, 56, 202, 0.4));
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.back-to-path-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: var(--transition);
}

.back-to-path-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.unit-lesson-tabs {
  display: flex;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 0.35rem;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  overflow-x: auto;
}

.lesson-tab-btn {
  flex: 1;
  min-width: 110px;
  text-align: center;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  border: none;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.lesson-tab-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(3, 105, 161, 0.3);
}

.lesson-tab-pane {
  display: none;
}
.lesson-tab-pane.active {
  display: block;
}

/* ==========================================
   Dialogue Section
   ========================================== */
.dialogue-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dialogue-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: var(--transition);
}

.dialogue-card:hover {
  border-color: var(--primary-light);
  background: var(--bg-card-hover);
}

.dialogue-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-gradient);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1.1rem;
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(3, 105, 161, 0.3);
}

.dialogue-play-btn:hover {
  transform: scale(1.1);
}

.dialogue-play-btn.speaking {
  animation: pulse-ring 1.2s infinite;
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(3, 105, 161, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(3, 105, 161, 0); }
  100% { box-shadow: 0 0 0 0 rgba(3, 105, 161, 0); }
}

.dialogue-body {
  flex: 1;
}

.dialogue-speaker {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--primary-light);
  margin-bottom: 0.25rem;
}

.dialogue-en {
  direction: ltr;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}

.dialogue-ar {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.dialogue-ph {
  font-size: 0.85rem;
  color: #fb923c;
  background: rgba(251, 146, 60, 0.08);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  display: inline-block;
}

/* ==========================================
   Grammar Spot Section
   ========================================== */
.grammar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.grammar-rule-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.25rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.grammar-rule-table th, .grammar-rule-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}

.grammar-rule-table th {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--primary-light);
}

.grammar-rule-table tr:last-child td {
  border-bottom: none;
}

/* ==========================================
   Vocabulary Flashcards
   ========================================== */
.vocab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.vocab-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: var(--transition);
  position: relative;
}

.vocab-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
}

.vocab-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vocab-pos {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
}

.vocab-en {
  direction: ltr;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
}

.vocab-ipa {
  direction: ltr;
  text-align: left;
  font-size: 0.85rem;
  color: var(--primary-light);
  font-family: monospace;
}

.vocab-ar {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-muted);
}

.vocab-example {
  direction: ltr;
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-dim);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}

/* ==========================================
   Speaking Lab (The Voice Engine UI)
   ========================================== */
.speaking-lab-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.speaking-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  transition: var(--transition);
}

.speaking-item:hover {
  border-color: rgba(3, 105, 161, 0.4);
}

.speaking-target-en {
  direction: ltr;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}

.speaking-target-ar {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.speaking-tip {
  font-size: 0.85rem;
  color: #F4B740;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.speaking-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-speak-listen {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--transition);
}

.btn-speak-listen:hover {
  background: rgba(255, 255, 255, 0.15);
}

.btn-speak-mic {
  background: var(--success-gradient);
  border: none;
  color: #fff;
  padding: 0.55rem 1.4rem;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
  transition: var(--transition);
}

.btn-speak-mic:hover {
  transform: scale(1.04);
}

.btn-speak-mic.recording {
  background: var(--danger-gradient);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.6);
  animation: pulse-rec 1.2s infinite;
}

@keyframes pulse-rec {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Pronunciation Results Box */
.pronounce-result-box {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border);
  display: none;
}

.pronounce-result-box.show {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.accuracy-score-badge {
  display: inline-block;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  margin-left: 0.5rem;
}

.accuracy-high { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.accuracy-mid { background: rgba(244, 183, 64, 0.2); color: #F4B740; }
.accuracy-low { background: rgba(239, 68, 68, 0.2); color: #f87171; }

.word-chips-container {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  direction: ltr;
  text-align: left;
  margin: 0.6rem 0;
}

.word-chip {
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}

.word-chip.perfect { background: rgba(16, 185, 129, 0.25); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
.word-chip.close { background: rgba(244, 183, 64, 0.25); color: #F4B740; border: 1px solid rgba(244, 183, 64, 0.4); }
.word-chip.missed { background: rgba(239, 68, 68, 0.25); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }

/* ==========================================
   Interactive Quiz & Testing Engine
   ========================================== */
.quiz-container-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.quiz-q-card {
  margin-bottom: 1.75rem;
}

.quiz-q-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: var(--text-main);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.quiz-options-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.quiz-opt-btn {
  width: 100%;
  text-align: right;
  padding: 0.9rem 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quiz-opt-btn:hover:not(:disabled) {
  border-color: var(--primary-light);
  background: var(--bg-card-hover);
}

.quiz-opt-btn.selected {
  border-color: var(--primary);
  background: rgba(3, 105, 161, 0.15);
}

.quiz-opt-btn.correct {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.quiz-opt-btn.wrong {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.quiz-explanation-box {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(3, 105, 161, 0.08);
  border-right: 3px solid var(--primary);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--text-muted);
  display: none;
}

.quiz-explanation-box.show {
  display: block;
}

.quiz-submit-btn {
  width: 100%;
  background: var(--primary-gradient);
  border: none;
  color: #fff;
  padding: 0.9rem;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.28);
  transition: var(--transition);
}

.quiz-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(8, 145, 178, 0.34);
}

/* Quiz Final Score Modal / Box */
.quiz-summary-box {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: none;
}

.quiz-summary-box.show {
  display: block;
  animation: fadeIn 0.4s ease;
}

.quiz-score-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  margin: 0 auto 1.25rem;
  box-shadow: var(--shadow-glow);
}

/* ==========================================
   Achievements & Profile Tab
   ========================================== */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.achievement-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.achievement-card.locked {
  opacity: 0.55;
  filter: grayscale(0.8);
}

.achievement-card.unlocked {
  border-color: rgba(244, 183, 64, 0.4);
  background: rgba(244, 183, 64, 0.05);
  box-shadow: 0 4px 15px rgba(244, 183, 64, 0.1);
}

.achievement-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.achievement-title {
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.achievement-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ==========================================
   TTS Speed & Accent Voice Settings Modal
   ========================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
  animation: modalScale 0.25s ease;
}

@keyframes modalScale {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.form-select, .form-range {
  width: 100%;
  padding: 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-family: inherit;
}

/* ==========================================
   Comprehensive Multi-Device Responsiveness
   (Phones, iPads/Tablets, Laptops, Desktops)
   ========================================== */

/* Universal Unified Sizing & Touch Targets */
button, .btn-icon, .unit-action-btn, .btn-speak-mic, .btn-speak-listen, .quiz-opt-btn, .quiz-submit-btn {
  min-height: 44px;
  touch-action: manipulation;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.table-responsive .grammar-rule-table {
  margin: 0;
  border: none;
  min-width: 580px; /* guarantees readability on mobile by enabling horizontal swipe */
}

/* --- Large Desktops (1440px and above) --- */
@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }
  .unit-title-en {
    font-size: 1.35rem;
  }
  .vocab-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Laptops & Standard Monitors (1024px to 1439px) --- */
@media (min-width: 1024px) and (max-width: 1439px) {
  .container {
    max-width: 1100px;
  }
  .vocab-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- iPads & Tablets (768px to 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { max-width: 960px; padding: 0 1rem; }
  .daily-quests-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vocab-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .path-node-wrapper {
    max-width: 500px;
  }
  .speaking-controls {
    justify-content: flex-start;
  }
  .modal-content {
    max-width: 440px;
  }
}

/* --- Mobile Phones (Portrait & Landscape: max-width 767px) --- */
@media (max-width: 767px) {
  :root {
    --radius-lg: 18px;
    --radius-md: 14px;
  }

  .container {
    padding: 0 0.85rem;
  }

  /* Compact Sticky Header */
  .main-header {
    padding: 0.5rem 0;
  }

  .header-content {
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .brand-icon {
    width: 38px;
    height: 38px;
    font-size: 1.25rem;
  }

  .brand-title {
    font-size: 1rem;
  }

  .brand-badge {
    font-size: 0.65rem;
  }

  .header-actions {
    gap: 0.35rem;
  }

  .btn-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  /* Status pills: full width 4-column balanced grid */
  .status-pill-group {
    order: 3;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
  }

  .status-pill {
    padding: 0.35rem 0.45rem;
    font-size: 0.78rem;
    justify-content: center;
    gap: 0.25rem;
    white-space: nowrap;
  }

  /* Navigation Tabs: scrollable with smooth touch */
  .nav-tabs {
    margin: 1rem 0 0.75rem;
    padding: 0.25rem;
    gap: 0.25rem;
  }

  .nav-tab {
    min-width: 110px;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
  }

  /* Daily Quests Card */
  .daily-quests-card {
    padding: 1rem;
    margin-bottom: 1.25rem;
  }

  .daily-quests-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .quest-item {
    padding: 0.75rem;
    gap: 0.65rem;
  }

  .quest-icon {
    width: 40px;
    height: 40px;
    font-size: 1.35rem;
  }

  /* Path & Unit Cards */
  .path-container {
    padding: 1rem 0 3rem;
    gap: 1.1rem;
  }

  .path-node-wrapper {
    max-width: 100%;
  }

  .unit-node-card {
    padding: 1rem 1.15rem;
  }

  .unit-title-en {
    font-size: 1.15rem;
  }

  .unit-title-ar {
    font-size: 0.95rem;
  }

  .unit-desc {
    font-size: 0.8rem;
  }

  .unit-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    text-align: center;
  }

  .unit-action-btn {
    width: 100%;
    justify-content: center;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
  }

  /* Unit Study View */
  .unit-banner {
    padding: 1.25rem;
  }

  .unit-banner h1.unit-title-en {
    font-size: 1.4rem !important;
  }

  .unit-banner h2.unit-title-ar {
    font-size: 1.05rem !important;
  }

  .unit-lesson-tabs {
    gap: 0.25rem;
    padding: 0.25rem;
  }

  .lesson-tab-btn {
    min-width: 95px;
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
  }

  /* Dialogue Cards */
  .dialogue-card {
    padding: 0.9rem;
    gap: 0.75rem;
  }

  .dialogue-play-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .dialogue-en {
    font-size: 1rem;
  }

  .dialogue-ar {
    font-size: 0.88rem;
  }

  /* Vocabulary Cards */
  .vocab-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  /* Speaking Lab */
  .speaking-lab-card {
    padding: 1.15rem;
  }

  .speaking-target-en {
    font-size: 1.15rem;
  }

  .speaking-controls {
    flex-direction: column;
    width: 100%;
  }

  .btn-speak-listen, .btn-speak-mic {
    width: 100%;
    justify-content: center;
  }

  /* Quizzes */
  .quiz-container-card {
    padding: 1.15rem;
  }

  .quiz-opt-btn {
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
  }

  /* Modal */
  .modal-content {
    padding: 1.25rem;
    max-width: 95%;
  }
}

/* Extra small devices (max-width 360px) */
@media (max-width: 360px) {
  .status-pill-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================
   ACADEMIC SUPERVISOR HERO CARD (Leth Khudair)
   ========================================== */
.supervisor-hero-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.7), rgba(17, 24, 39, 0.85));
  border: 1px solid rgba(3, 105, 161, 0.35);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 1rem 0 1.5rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), 0 0 20px rgba(3, 105, 161, 0.15);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.supervisor-hero-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: radial-gradient(circle, rgba(3, 105, 161, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.supervisor-avatar-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
}

.supervisor-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #818cf8;
  box-shadow: 0 0 18px rgba(3, 105, 161, 0.5);
}

.supervisor-verified-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #10b981;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 900;
  border: 2px solid var(--bg-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.supervisor-info {
  flex: 1;
}

.supervisor-badge-tag {
  font-size: 0.72rem;
  font-weight: 800;
  color: #F4B740;
  letter-spacing: 0.5px;
  margin-bottom: 0.2rem;
  display: inline-block;
}

.supervisor-name {
  font-size: 1.25rem;
  font-weight: 900;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.supervisor-name-en {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-light);
  font-family: 'Outfit', sans-serif;
}

.supervisor-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ==========================================
   MOBILE NATIVE BOTTOM NAVIGATION BAR
   ========================================== */
.mobile-bottom-bar {
  display: none;
}

@media (max-width: 768px) {
  .desktop-only-nav {
    display: none !important;
  }

  .app-main-content {
    padding-bottom: 95px !important;
  }

  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    z-index: 999;
    padding: 0 0.5rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: space-around;
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    cursor: pointer;
    padding: 0.4rem 0;
    transition: var(--transition);
  }

  .bottom-nav-item .b-icon {
    font-size: 1.45rem;
    line-height: 1;
    transition: var(--transition);
  }

  .bottom-nav-item .b-label {
    font-size: 0.72rem;
    font-weight: 700;
  }

  .bottom-nav-item.active {
    color: #818cf8;
  }

  .bottom-nav-item.active .b-icon {
    transform: translateY(-2px) scale(1.15);
  }
}

/* ==========================================
   NATIVE APP GRAMMAR FORMULA CARDS
   ========================================== */
.grammar-rules-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.grammar-formula-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.grammar-formula-card:hover {
  border-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.grammar-formula-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.subject-pill {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: 0.85rem;
  color: #ffffff;
}

.formula-pill {
  background: rgba(3, 105, 161, 0.2);
  color: var(--primary-light);
  border: 1px solid rgba(3, 105, 161, 0.35);
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-full);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
}

.rule-audio-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: var(--transition);
}

.rule-audio-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.grammar-formula-en {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  direction: ltr;
  text-align: left;
}

.grammar-formula-ar {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Possessives App Grid */
.grammar-possessives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}

.possessive-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.possessive-adj {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  color: #F4B740;
}

.possessive-meaning {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.possessive-example {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 0.2rem;
}

/* ==========================================
   SPEAKING MODAL & LIVE WAVEFORM
   ========================================== */
.speaking-modal-box {
  max-width: 520px;
  text-align: center;
}

.speaking-modal-target {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1rem;
  margin-bottom: 0.75rem;
}

.modal-target-en {
  direction: ltr;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 0.4rem;
}

.modal-target-ar {
  font-size: 1.05rem;
  color: var(--text-muted);
}

/* Wave animation */
.recording-wave-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 50px;
  margin: 1rem 0;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.recording-wave-wrap.active {
  opacity: 1;
}

.wave-bar {
  width: 6px;
  height: 12px;
  background: #0369A1;
  border-radius: var(--radius-full);
}

.recording-wave-wrap.active .wave-bar {
  background: #ef4444;
  animation: waveAnim 0.8s ease-in-out infinite alternate;
}

.recording-wave-wrap.active .wave-bar:nth-child(1) { animation-delay: 0.0s; }
.recording-wave-wrap.active .wave-bar:nth-child(2) { animation-delay: 0.2s; }
.recording-wave-wrap.active .wave-bar:nth-child(3) { animation-delay: 0.4s; }
.recording-wave-wrap.active .wave-bar:nth-child(4) { animation-delay: 0.1s; }
.recording-wave-wrap.active .wave-bar:nth-child(5) { animation-delay: 0.3s; }

@keyframes waveAnim {
  0% { height: 10px; }
  100% { height: 42px; }
}

.modal-recording-status {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  min-height: 24px;
  margin-bottom: 1rem;
}

.modal-mic-toggle-btn {
  width: 100%;
  max-width: 320px;
  height: 52px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--success-gradient);
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.modal-mic-toggle-btn.recording {
  background: var(--danger-gradient);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.6);
  animation: pulse-rec 1s infinite alternate;
}

.modal-results-wrap {
  margin-top: 1.25rem;
  padding: 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}

.modal-accuracy-score {
  font-size: 1.25rem;
  font-weight: 900;
  padding: 0.4rem 1.25rem;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: 0.75rem;
}

.modal-feedback-text {
  font-size: 0.95rem;
  color: var(--text-main);
  margin-top: 0.5rem;
  font-weight: 600;
}

/* ==========================================
   ACADEMIC SOURCES & REFERENCES BADGE / MODAL
   ========================================== */
.sources-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.book-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.book-card:hover {
  border-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(3, 105, 161, 0.15);
}

.book-tag {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  background: rgba(3, 105, 161, 0.15);
  color: var(--primary-light);
}

.book-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
}

.book-authors {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.book-desc {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 0.25rem;
}

/* ==========================================
   NUMBERS ACADEMY (High-Precision Numbers & Rules)
   ========================================== */
.numbers-rules-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.number-rule-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.number-rule-card:hover {
  border-color: rgba(52, 211, 153, 0.4);
}

.number-rule-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.number-rule-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
}

.number-rule-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
}

.number-rule-title-en {
  font-size: 0.85rem;
  color: var(--primary-light);
  font-weight: 600;
  direction: ltr;
  display: block;
}

.number-rule-summary {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.number-rule-tips {
  background: rgba(0, 0, 0, 0.2);
  border-right: 3px solid #10b981;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}

.number-rule-tips li {
  font-size: 0.88rem;
  color: #e2e8f0;
  margin-bottom: 0.4rem;
  line-height: 1.45;
}

.number-rule-examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.number-example-pill {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition: var(--transition);
}

.number-example-pill:hover {
  border-color: #10b981;
}

.num-ex-en {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-main);
  direction: ltr;
}

.num-ex-ar {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.numbers-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.num-cat-btn {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.num-cat-btn.active, .num-cat-btn:hover {
  background: rgba(52, 211, 153, 0.15);
  border-color: #34d399;
  color: #34d399;
}

.numbers-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}

.number-card-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: var(--transition);
  position: relative;
}

.number-card-item:hover {
  border-color: #34d399;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 211, 153, 0.15);
}

.num-badge-val {
  font-size: 1.4rem;
  font-weight: 900;
  color: #34d399;
  font-family: 'Outfit', sans-serif;
  direction: ltr;
  text-align: left;
}

.num-text-en {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  direction: ltr;
  text-align: left;
}

.num-text-ar {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.num-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* ==========================================
   PHONICS LAB (Alphabet & Vowels)
   ========================================== */
.phonics-section-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 1.5rem 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.phonics-letters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.phonics-letter-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  transition: var(--transition);
}

.phonics-letter-card:hover {
  border-color: #f43f5e;
  transform: translateY(-2px);
}

.phonics-letter-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(225, 29, 72, 0.4));
  border: 1px solid rgba(244, 63, 94, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 900;
  font-family: 'Outfit', sans-serif;
  color: #fff;
}

.phonics-sound-tag {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fda4af;
  direction: ltr;
}

.phonics-example-word {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  direction: ltr;
}

.phonics-rule-text {
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin-top: 0.25rem;
}

.vowel-pairs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.vowel-pair-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ==========================================
   VOCABULARY BANK (Oxford Word Skills)
   ========================================== */
.vocab-bank-header {
  background: linear-gradient(135deg, rgba(219, 39, 119, 0.15), rgba(124, 58, 237, 0.15));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.vocab-category-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.vocab-category-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vocab-words-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}

.vocab-word-chip {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: var(--transition);
}

.vocab-word-chip:hover {
  border-color: #f472b6;
  background: rgba(244, 114, 182, 0.05);
}

/* ==========================================
   INTERACTIVE MULTI-TESTER MODAL (Keyboard & Listening)
   ========================================== */
.tester-modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  max-width: 580px;
  width: 92%;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.tester-q-counter {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primary-light);
  margin-bottom: 0.5rem;
}

.tester-q-prompt {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.25rem;
  text-align: center;
}

.tester-q-subprompt {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 1.25rem;
}

.test-text-input {
  width: 100%;
  padding: 0.9rem 1.25rem;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  outline: none;
  transition: var(--transition);
  text-align: center;
  direction: ltr;
}

.test-text-input:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 15px rgba(3, 105, 161, 0.3);
}

.test-feedback-box {
  margin-top: 1rem;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  display: none;
}

.test-feedback-box.correct {
  display: block;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.test-feedback-box.wrong {
  display: block;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.test-submit-btn {
  width: 100%;
  padding: 0.9rem;
  margin-top: 1.25rem;
  border-radius: var(--radius-full);
  border: none;
  background: var(--primary-gradient);
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}

.test-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(3, 105, 161, 0.4);
}

/* ==========================================
   ACADEMIC SUPERVISOR HERO CARD (Prof. Leth Khudair)
   ========================================== */
.supervisor-hero-card {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.75), rgba(49, 46, 129, 0.45));
  border: 1px solid rgba(3, 105, 161, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
}

.supervisor-hero-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(3, 105, 161, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.supervisor-avatar-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
}

.supervisor-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.45);
}

.supervisor-verified-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 22px;
  height: 22px;
  background: #10b981;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  border: 2px solid var(--bg-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.supervisor-info {
  flex: 1;
  min-width: 0;
}

.supervisor-badge-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.35rem;
}

.supervisor-name {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.supervisor-name-en {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 600;
}

.supervisor-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}

/* ==========================================
   SPEAKING LAB & SPEAKING CARDS
   ========================================== */
.speaking-lab-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
}

.speaking-item-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: var(--transition);
}

.speaking-item-card:hover {
  border-color: rgba(3, 105, 161, 0.4);
  background: rgba(255, 255, 255, 0.04);
}

.speaking-item-card .en-phrase {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--text-main);
  direction: ltr;
  text-align: left;
}

.speaking-item-card .ar-phrase {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* ==========================================
   GLASSMORPHIC SPEAK & LISTEN BUTTONS
   ========================================== */
.btn-speak-listen {
  background: rgba(3, 105, 161, 0.12);
  border: 1px solid rgba(3, 105, 161, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #c7d2fe;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all 0.22s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-speak-listen:hover {
  background: rgba(3, 105, 161, 0.25);
  border-color: rgba(3, 105, 161, 0.6);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(3, 105, 161, 0.35);
}

.btn-speak-mic {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #a7f3d0;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.5rem 1.15rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all 0.22s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-speak-mic:hover {
  background: rgba(16, 185, 129, 0.3);
  border-color: rgba(16, 185, 129, 0.7);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

/* ==========================================
   MOBILE BOTTOM BAR (NATIVE APP EXPERIENCE)
   ========================================== */
.mobile-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 999;
  padding: 0 0.5rem max(0.25rem, env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
}

.bottom-nav-item {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0.25rem 0;
  position: relative;
  font-family: inherit;
}

.bottom-nav-item .b-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.bottom-nav-item .b-label {
  font-size: 0.7rem;
  font-weight: 700;
  transition: color 0.2s ease;
}

.bottom-nav-item:hover {
  color: #ffffff;
}

.bottom-nav-item.active {
  color: var(--primary-light);
}

.bottom-nav-item.active .b-icon {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 10px rgba(3, 105, 161, 0.7));
}

.bottom-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 16px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--primary-gradient);
  box-shadow: 0 0 8px rgba(3, 105, 161, 0.8);
}

/* ==========================================
   RESPONSIVE DESIGN (MOBILE & TABLET CLEANUP)
   ========================================== */
@media (max-width: 820px) {
  .desktop-only-nav {
    display: none !important;
  }

  .mobile-bottom-bar {
    display: flex !important;
  }

  body {
    padding-bottom: 75px !important;
  }

  .container {
    padding: 0 0.85rem !important;
  }

  /* Compact supervisor card on mobile - NOT giant boxes */
  .supervisor-hero-card {
    padding: 0.85rem 1rem !important;
    gap: 0.85rem !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 1rem !important;
  }

  .supervisor-avatar-wrap {
    width: 54px !important;
    height: 54px !important;
  }

  .supervisor-name {
    font-size: 1.05rem !important;
    margin-bottom: 0.15rem !important;
  }

  .supervisor-name-en {
    font-size: 0.78rem !important;
  }

  .supervisor-desc {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .supervisor-badge-tag {
    font-size: 0.65rem !important;
    padding: 0.15rem 0.5rem !important;
    margin-bottom: 0.2rem !important;
  }

  /* Compact Speaking Card & Items on mobile */
  .speaking-lab-card {
    padding: 1rem 0.85rem !important;
    border-radius: var(--radius-md) !important;
  }

  .speaking-lab-card h2, .speaking-lab-card h3 {
    font-size: 1.15rem !important;
  }

  .speaking-item-card {
    padding: 0.85rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: var(--radius-sm) !important;
  }

  .speaking-item-card .en-phrase {
    font-size: 1.1rem !important;
  }

  .speaking-item-card .ar-phrase {
    font-size: 0.85rem !important;
  }

  /* Compact action buttons */
  .speaking-item-card .actions-row, .modal-actions-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .speaking-item-card .btn-speak-listen,
  .speaking-item-card .btn-speak-mic {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.6rem !important;
  }

  /* Compact Header Status Pills */
  .header-content {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .brand-title span:first-child {
    font-size: 1rem !important;
  }

  .brand-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .status-pill-group {
    gap: 0.35rem !important;
    order: 3 !important;
    width: 100% !important;
    justify-content: space-between !important;
  }

  .status-pill {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.78rem !important;
    flex: 1 !important;
    justify-content: center !important;
    gap: 0.3rem !important;
  }

  /* Compact Daily Quests & Roadmaps */
  .daily-quests-card {
    padding: 0.85rem 1rem !important;
    margin-bottom: 1.25rem !important;
  }

  .unit-node-card {
    padding: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .unit-title-en {
    font-size: 1.1rem !important;
  }

  .unit-title-ar {
    font-size: 0.9rem !important;
  }

  /* Compact Numbers Rules & Cards */
  .number-rule-card {
    padding: 1rem !important;
  }

  .number-rule-title {
    font-size: 1rem !important;
  }

  .numbers-cat-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0.5rem !important;
    scrollbar-width: none !important;
  }
  .numbers-cat-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .numbers-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .number-card-item {
    padding: 0.85rem !important;
    box-sizing: border-box !important;
  }

  .num-badge-val {
    font-size: 1.15rem !important;
  }

  .num-text-en {
    font-size: 0.95rem !important;
  }

  .num-actions-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.4rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .num-actions-row .btn-speak-listen {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0.45rem 0.2rem !important;
    font-size: 0.78rem !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* Compact Phonics */
  .phonics-letters-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .phonics-letter-card {
    padding: 0.85rem 0.5rem !important;
    box-sizing: border-box !important;
  }

  .phonics-letter-badge {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.4rem !important;
  }

  .phonics-card-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.4rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .phonics-card-actions .btn-speak-listen {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0.45rem 0.2rem !important;
    font-size: 0.78rem !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* Compact Vocab Bank */
  .vocab-words-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .vocab-word-chip {
    padding: 0.85rem 1rem !important;
    box-sizing: border-box !important;
  }

  .vocab-card-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .vocab-card-actions .btn-speak-listen {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0.45rem 0.3rem !important;
    font-size: 0.82rem !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}

/* Extra small devices (max-width 400px) */
@media (max-width: 400px) {
  .numbers-items-grid, .phonics-letters-grid {
    grid-template-columns: 1fr !important;
  }
  .num-actions-row, .phonics-card-actions, .vocab-card-actions {
    flex-direction: column !important;
  }
  .num-actions-row .btn-speak-listen,
  .phonics-card-actions .btn-speak-listen,
  .vocab-card-actions .btn-speak-listen {
    width: 100% !important;
  }
}

/* ==========================================
   LESSON STEPPER & NAVIGATION FOOTER
   ========================================== */
.lesson-stepper-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.lesson-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
  border: none;
}

.lesson-step-btn.next-step {
  background: var(--primary-gradient);
  color: #fff;
  margin-right: auto;
  box-shadow: 0 4px 15px rgba(3, 105, 161, 0.35);
}

.lesson-step-btn.next-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(3, 105, 161, 0.5);
}

.lesson-step-btn.prev-step {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.lesson-step-btn.prev-step:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-main);
}

.lesson-step-btn.exam-step {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

@media (max-width: 600px) {
  .lesson-stepper-footer {
    flex-direction: column-reverse;
    gap: 0.75rem;
  }
  .lesson-step-btn {
    width: 100%;
    justify-content: center;
    padding: 0.85rem;
    font-size: 0.9rem;
  }
}

/* ==========================================
   CURRICULUM PLACEMENT BANNER
   ========================================== */
.placement-banner-card {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.65), rgba(15, 118, 110, 0.25));
  border: 1px solid rgba(129, 140, 248, 0.35);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .placement-banner-card {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
  border: 1px solid rgba(3, 105, 161, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

.placement-banner-content {
  flex: 1;
}

.placement-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}

.placement-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.placement-btn {
  background: var(--primary-gradient);
  border: none;
  color: #fff;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.28);
}

.placement-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(8, 145, 178, 0.34);
}

.home-step-actions { display:flex; align-items:center; justify-content:flex-end; gap:.65rem; flex-wrap:wrap; }
.placement-test-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px; padding:.65rem .95rem; border:1px solid var(--glass-border); border-radius:var(--radius-full); background:rgba(255,255,255,.42); color:var(--text-main); font:700 .88rem 'Cairo',sans-serif; cursor:pointer; transition:var(--transition); }
.placement-test-btn:hover { border-color:var(--primary); background:rgba(15,118,110,.09); }
[data-theme="dark"] .placement-test-btn { background:rgba(15,23,42,.42); }
.unit-learning-outcome { display:flex; align-items:flex-start; gap:.45rem; margin-top:.8rem; padding:.7rem .8rem; border-inline-start:3px solid var(--success); border-radius:10px; background:rgba(16,185,129,.08); color:var(--text-main); font-size:.88rem; line-height:1.6; }
.unit-learning-outcome strong { flex:0 0 auto; color:#047857; }
[data-theme="dark"] .unit-learning-outcome strong { color:#6ee7b7; }
.path-section-heading { width:min(100%,860px); margin:0 auto .4rem; color:var(--text-main); font-size:1.15rem; font-weight:900; }
.path-section-heading p { margin-top:.2rem; color:var(--text-muted); font-size:.88rem; font-weight:500; }

@media (max-width: 768px) {
  .placement-banner-card {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
    gap: 1rem;
  }
  .placement-btn {
    width: 100%;
    justify-content: center;
  }
  .home-step-actions { justify-content:stretch; }
  .home-step-actions > button { flex:1 1 100%; }
}

/* ==========================================
   BANNER HERO HEADERS & DISCIPLINE TAGS
   ========================================== */
.banner-hero-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 0.4rem;
  line-height: 1.4;
}

.banner-hero-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.tag-numbers {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.tag-phonics {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.tag-vocab {
  color: #ec4899;
  background: rgba(236, 72, 153, 0.12);
  border: 1px solid rgba(236, 72, 153, 0.3);
}

.tag-cambridge {
  color: #0369A1;
  background: rgba(3, 105, 161, 0.12);
  border: 1px solid rgba(3, 105, 161, 0.3);
}

/* ==========================================
   MULTI-MODAL UNIT GRADUATION EXAM (3 TIERS)
   ========================================== */
.exam-tier-section {
  margin-bottom: 2rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.exam-tier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.exam-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 800;
}

.exam-tier-badge.tier-typing {
  background: rgba(3, 105, 161, 0.15);
  color: #5EEAD4;
  border: 1px solid rgba(3, 105, 161, 0.35);
}

.exam-tier-badge.tier-grammar {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.exam-tier-badge.tier-speaking {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.exam-weight-pill {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dim);
}

.exam-typing-card, .exam-speaking-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  margin-bottom: 0.85rem;
  transition: var(--transition);
}

.exam-typing-card:focus-within {
  border-color: var(--primary-light);
  box-shadow: 0 0 16px rgba(3, 105, 161, 0.2);
}

.exam-speaking-card.tested {
  border-color: #10b981;
}

.exam-input-text {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-primary);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  direction: ltr;
  text-align: left;
  outline: none;
  transition: var(--transition);
  margin-top: 0.5rem;
}

.exam-input-text:focus {
  border-color: var(--primary-light);
  background: var(--bg-card);
}

.exam-speaking-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  margin-top: 0.5rem;
}

.exam-speaking-status-pill.tested {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.exam-speaking-status-pill.pending {
  background: rgba(244, 183, 64, 0.15);
  color: #F4B740;
  border: 1px solid rgba(244, 183, 64, 0.35);
}

/* ==========================================
   OFFICIAL ACADEMIC GRADUATION CERTIFICATE
   ========================================== */
.certificate-modal-box {
  max-width: 680px;
  width: 95%;
  background: #0f172a;
  border: 2px solid #F4B740;
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: 0 0 50px rgba(244, 183, 64, 0.25);
  position: relative;
  overflow: hidden;
}

.cert-ribbon-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #F4B740;
}

.cert-inner-frame {
  border: 2px solid rgba(244, 183, 64, 0.4);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at 50% 30%, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.98) 100%);
  margin-bottom: 1.25rem;
}

.cert-inner-frame::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border: 1px dashed rgba(244, 183, 64, 0.3);
  border-radius: calc(var(--radius-lg) - 4px);
  pointer-events: none;
}

.cert-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  font-size: 5rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.02);
  pointer-events: none;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 12px;
}

.cert-crown-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.cert-main-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fde047;
  margin-bottom: 0.2rem;
  letter-spacing: 0.5px;
}

.cert-sub-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #94a3b8;
  margin-bottom: 1.25rem;
}

.cert-intro {
  font-size: 0.9rem;
  color: #cbd5e1;
  margin-bottom: 0.35rem;
}

.cert-student-name {
  font-size: 1.45rem;
  font-weight: 900;
  color: #ffffff;
  padding: 0.4rem 1.5rem;
  display: inline-block;
  border-bottom: 2px solid #F4B740;
  margin-bottom: 0.85rem;
}

.cert-desc-text {
  font-size: 0.88rem;
  color: #94a3b8;
  max-width: 500px;
  margin: 0 auto 0.75rem;
  line-height: 1.5;
}

.cert-unit-badge {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  background: rgba(3, 105, 161, 0.2);
  border: 1px solid rgba(3, 105, 161, 0.4);
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: 1rem;
  color: #c7d2fe;
  margin-bottom: 1.25rem;
}

.cert-meta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.cert-meta-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cert-meta-box .meta-label {
  font-size: 0.72rem;
  color: #94a3b8;
}

.cert-meta-box .meta-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
}

.cert-footer-signature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: right;
}

.cert-seal-wrap {
  flex-shrink: 0;
}

.cert-gold-seal {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: radial-gradient(circle, #fde047 0%, #ca8a04 100%);
  border: 3px double #78350f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(202, 138, 4, 0.4);
}

.cert-gold-seal span:first-child {
  font-size: 0.58rem;
  font-weight: 900;
  color: #451a03;
  letter-spacing: 0.5px;
}

.cert-gold-seal span:last-child {
  font-size: 0.52rem;
  font-weight: 800;
  color: #78350f;
}

.cert-signature-box {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cert-sign-title {
  font-size: 0.75rem;
  color: #94a3b8;
}

.cert-sign-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
}

.cert-sign-role {
  font-size: 0.72rem;
  color: #64748b;
}

.cert-actions-row {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

/* ==========================================
   LIGHT MODE CONTRAST & ACCESSIBILITY FIXES
   ========================================== */
[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --border: #e2e8f0;
  --border-glow: rgba(15, 118, 110, 0.2);
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-dim: #64748b;
  --primary-light: #0F766E;
  --primary-gradient: linear-gradient(135deg, #0F766E 0%, #0369A1 100%);
  --glass-bg: rgba(255,255,255,.78);
  --glass-border: rgba(226,232,240,.9);
  --gold-gradient: linear-gradient(135deg,#D99A16 0%,#F4B740 100%);
  --gold-accent: #9A6700;
}

[data-theme="light"] .supervisor-hero-card,
[data-theme="light"] .banner-numbers,
[data-theme="light"] .banner-phonics,
[data-theme="light"] .banner-vocab,
[data-theme="light"] .banner-cambridge,
[data-theme="light"] .unit-banner,
[data-theme="light"] .vocab-bank-header,
[data-theme="light"] .sources-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .supervisor-name,
[data-theme="light"] .banner-hero-title,
[data-theme="light"] .num-text-en,
[data-theme="light"] .num-ex-en,
[data-theme="light"] .phonics-example-word,
[data-theme="light"] .tester-q-prompt,
[data-theme="light"] .speaking-item-card .en-phrase,
[data-theme="light"] .modal-target-en {
  color: #0f172a !important;
}

[data-theme="light"] .supervisor-desc,
[data-theme="light"] .banner-hero-desc,
[data-theme="light"] .unit-desc,
[data-theme="light"] .num-text-ar,
[data-theme="light"] .speaking-item-card .ar-phrase {
  color: #475569 !important;
}

[data-theme="light"] .number-rule-tips {
  background: rgba(16, 185, 129, 0.08) !important;
  border-right-color: #059669 !important;
}

[data-theme="light"] .number-rule-tips li {
  color: #065f46 !important;
}

[data-theme="light"] .number-example-pill {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .number-card-item,
[data-theme="light"] .phonics-letter-card,
[data-theme="light"] .vocab-category-card,
[data-theme="light"] .speaking-lab-card,
[data-theme="light"] .speaking-item-card,
[data-theme="light"] .quiz-container-card,
[data-theme="light"] .book-card,
[data-theme="light"] .grammar-card,
[data-theme="light"] .grammar-formula-card,
[data-theme="light"] .dialogue-card,
[data-theme="light"] .daily-quests-card,
[data-theme="light"] .unit-node-card,
[data-theme="light"] .exam-tier-section,
[data-theme="light"] .exam-typing-card,
[data-theme="light"] .exam-speaking-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .nav-tabs {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .nav-tab {
  background: #f8fafc !important;
  color: #475569 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .nav-tab:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] .nav-tab.active {
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
}

[data-theme="light"] .test-text-input,
[data-theme="light"] .exam-input-text {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .speaking-modal-target {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .certificate-modal-box {
  background: #ffffff !important;
  border-color: #D99A16 !important;
}

[data-theme="light"] .cert-inner-frame {
  background: radial-gradient(circle at 50% 30%, #fffbeb 0%, #ffffff 100%) !important;
  border-color: rgba(217, 119, 6, 0.4) !important;
}

[data-theme="light"] .cert-student-name {
  color: #0f172a !important;
  border-bottom-color: #D99A16 !important;
}

[data-theme="light"] .cert-intro,
[data-theme="light"] .cert-desc-text,
[data-theme="light"] .cert-sign-role {
  color: #475569 !important;
}

[data-theme="light"] .cert-meta-box {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .cert-meta-box .meta-val,
[data-theme="light"] .cert-sign-name {
  color: #0f172a !important;
}

/* ==========================================
   CAMBRIDGE PHONICS MASTERY & SPOKEN FLUENCY
   ========================================== */
.th-mastery-container,
.silent-letters-container,
.connected-speech-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.th-mastery-card,
.silent-letter-card,
.connected-speech-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.th-mastery-card:hover,
.silent-letter-card:hover,
.connected-speech-card:hover {
  border-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.phonics-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 800;
  width: fit-content;
}

.phonics-rule-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.phonics-words-subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.phonics-word-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: var(--transition);
}

.phonics-word-item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(3, 105, 161, 0.4);
}

.phonics-word-en {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  direction: ltr;
  text-align: left;
}

.phonics-word-ar {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.phonics-word-tip {
  font-size: 0.75rem;
  color: var(--primary-light);
  font-weight: 700;
}

.silent-letter-highlight {
  color: #ef4444 !important;
  text-decoration: line-through;
  font-weight: 900;
}

.speech-phrase-box {
  background: rgba(3, 105, 161, 0.06);
  border: 1px dashed rgba(3, 105, 161, 0.3);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-top: 0.4rem;
}

.speech-phrase-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #38bdf8;
  direction: ltr;
  margin-bottom: 0.25rem;
}

@media (max-width: 480px) {
  .th-mastery-container,
  .silent-letters-container,
  .connected-speech-container {
    grid-template-columns: 1fr !important;
  }
  .phonics-words-subgrid {
    grid-template-columns: 1fr !important;
  }
}

/* Accessible responsive refresh and new learning workspace */
:root { --focus-ring: 0 0 0 3px rgba(3, 105, 161, .42); }
[hidden] { display:none !important; }
button, .unit-action-btn, .lesson-tab-btn, .nav-tab, .bottom-nav-item, .placement-btn {
  min-height: 44px;
  font-family: inherit;
  font-weight: 750;
  letter-spacing: 0;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
button:focus-visible, input:focus-visible, select:focus-visible, label:has(input:focus-visible) {
  outline: none;
  box-shadow: var(--focus-ring);
}
button:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.container { width: min(100% - 2rem, 1320px); padding-inline: 0; }
.app-main-content { padding-top: clamp(1rem, 3vw, 2rem); }
.header-content { flex-wrap: wrap; }
.status-pill-group { flex-wrap: wrap; }
.nav-tabs { flex-wrap: wrap; justify-content: center; }
.nav-tab { flex: 1 1 auto; justify-content: center; }
.header-actions { align-items: center; }
.profile-entry-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.3rem .75rem; color:var(--text-main); background:var(--bg-card); border:1px solid var(--border); border-radius:999px; cursor:pointer; }
.profile-entry-avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:white; background:var(--primary-gradient); background-size:cover; background-position:center; }
.profile-entry-avatar.has-photo, .profile-avatar-large.has-photo { color:transparent; }
.profile-entry-label { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feature-view { width:100%; padding-bottom:5rem; }
.feature-hero-card, .story-side-card, .dictation-card, .profile-progress-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.feature-hero-card { padding:clamp(1.25rem,3vw,2.25rem); margin-bottom:1.25rem; background:linear-gradient(125deg,rgba(3, 105, 161,.12),rgba(185,145,69,.06)),var(--bg-card); }
.feature-hero-card h1 { font-size:clamp(1.45rem,3vw,2.25rem); margin:.35rem 0; }
.feature-kicker { color:var(--primary-light); font-size:.82rem; font-weight:800; }
.story-workspace { display:grid; grid-template-columns:minmax(250px,.75fr) minmax(0,1.4fr); gap:1rem; align-items:start; }
.story-side-card,.dictation-card { padding:clamp(1rem,2.4vw,1.6rem); }
.story-side-card h2 { margin:1rem 0 .4rem; font-size:1.35rem; }
.story-unit-label { display:block; margin-bottom:.45rem; color:var(--primary); font-size:.82rem; font-weight:700; }
.story-arabic-intro,.story-note,.dictation-hint { color:var(--text-muted); }
.writing-task-card { display:grid; gap:1rem; padding:clamp(1rem,3vw,1.5rem); border:1px solid var(--border); border-radius:20px; background:var(--bg-card); box-shadow:var(--shadow-sm); }
.writing-task-card h3 { margin:0; font-size:1.25rem; }
.writing-target-note { margin:0; color:var(--text-muted); }
.writing-draft-input { width:100%; min-height:220px; padding:1rem; resize:vertical; border:1px solid var(--border); border-radius:14px; background:var(--bg-secondary); color:var(--text-main); font:inherit; line-height:1.7; }
.writing-draft-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; color:var(--text-muted); font-size:.88rem; }
.writing-self-check { display:grid; gap:.65rem; padding:1rem; border-radius:14px; background:var(--bg-secondary); }
.writing-self-check label { display:flex; align-items:flex-start; gap:.55rem; }
.writing-self-check input { margin-top:.25rem; accent-color:var(--primary); }
.story-actions,.dictation-controls,.profile-actions,.placement-assessment-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem; }
.story-actions .unit-action-btn,.dictation-controls .unit-action-btn,.profile-actions .unit-action-btn { flex:1 1 150px; }
.secondary-action { background:var(--bg-secondary)!important; color:var(--text-main)!important; border:1px solid var(--border)!important; }
.dictation-progress { display:flex; justify-content:space-between; font-weight:800; }
.dictation-progress-track,.profile-unit-track { width:100%; height:8px; background:var(--bg-secondary); border-radius:99px; overflow:hidden; margin:.55rem 0 1rem; }
.dictation-progress-track span,.profile-unit-track i { display:block; height:100%; width:0; background:var(--primary-gradient); border-radius:inherit; transition:width .25s ease; }
.dictation-input { display:block; width:100%; min-height:58px; margin:1rem 0 .6rem; padding:.8rem 1rem; border-radius:14px; border:2px solid var(--border); background:var(--bg-primary); color:var(--text-main); font:600 1.1rem/1.4 'Outfit',sans-serif; text-align:left; }
.dictation-feedback { min-height:1.6rem; font-weight:800; }
.dictation-feedback.correct { color:#34d399; }.dictation-feedback.incorrect { color:#F4B740; }
.story-transcript { margin-top:.75rem; padding:.85rem; border-radius:12px; background:var(--bg-secondary); direction:ltr; text-align:left; line-height:2; }
.word-match { color:#34d399; }.word-miss { color:#f87171; text-decoration:underline; text-decoration-style:wavy; }
.profile-hero { display:flex; align-items:center; gap:1rem; }
.profile-avatar-large { width:88px; height:88px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--primary-gradient); background-position:center; background-size:cover; font-size:2rem; font-weight:900; }
.profile-hero p { color:var(--text-muted); direction:ltr; text-align:right; }
.profile-actions { align-items:center; }
.profile-name-input { min-height:44px; flex:1 1 220px; padding:.65rem .85rem; border:1px solid var(--border); border-radius:12px; background:var(--bg-primary); color:var(--text-main); font:inherit; }
.profile-status { flex:1 1 100%; color:var(--text-muted); }
.profile-privacy-note { color:var(--text-muted); font-size:.88rem; padding:.85rem 1rem; margin:.5rem 0 1rem; border-inline-start:3px solid var(--primary-light); background:var(--bg-card); border-radius:10px; }
.profile-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin:1rem 0; }
.profile-stat { padding:1rem; border:1px solid var(--border); border-radius:16px; background:var(--bg-card); display:grid; gap:.25rem; }
.profile-stat span { color:var(--text-muted); font-size:.85rem; }.profile-stat strong { font-size:1.4rem; }
.profile-progress-card { padding:1.25rem; }.profile-progress-card h2 { margin-bottom:1rem; }
.learning-summary-card{margin-bottom:1rem}.profile-section-heading,.profile-summary-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}.profile-section-heading h2{margin:.25rem 0}.profile-level-chip{padding:.45rem .75rem;border-radius:999px;background:rgba(15,118,110,.12);color:var(--primary-light);font-weight:900}.profile-next-step{margin:.5rem 0 1rem;color:var(--text-muted);line-height:1.7}.profile-overall-track{height:12px;overflow:hidden;border-radius:999px;background:var(--bg-secondary);border:1px solid var(--border)}.profile-overall-track i{display:block;width:0;height:100%;border-radius:inherit;background:var(--success-gradient);transition:width .4s ease}.profile-summary-foot{margin-top:.65rem;color:var(--text-muted);font-size:.9rem}.profile-achievement-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:.65rem}.profile-achievement-item{display:flex;align-items:center;gap:.75rem;padding:.8rem;border:1px solid var(--border);border-radius:14px;background:var(--bg-secondary)}.profile-achievement-icon{flex:0 0 42px;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(245,158,11,.14);font-size:1.35rem}.profile-achievement-item div{display:grid;gap:.18rem}.profile-achievement-item small{color:var(--text-muted);line-height:1.45}
.certificate-shelf { margin-top:1rem; }
.certificate-shelf-note { color:var(--text-muted); line-height:1.7; margin:.25rem 0 1rem; }
.profile-certificates-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:.8rem; }
.profile-certificate-card { display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; padding:1rem; border:1px solid var(--border); border-radius:16px; background:var(--bg-secondary); }
.profile-certificate-card strong { font-size:1rem; }
.profile-certificate-card span { color:var(--text-muted); font-size:.9rem; }
.profile-certificate-card button { width:100%; margin-top:auto; }.profile-certificate-actions{display:grid;grid-template-columns:1fr;gap:.5rem;width:100%;margin-top:auto}.profile-certificate-card.is-locked{opacity:.78;border-style:dashed}.profile-certificate-preview{display:grid;gap:1rem;margin-top:1.2rem;padding:clamp(.7rem,2vw,1.25rem);border:1px solid var(--border);border-radius:18px;background:var(--bg-secondary)}.profile-certificate-preview[hidden]{display:none}.profile-preview-actions{display:flex;justify-content:space-between;align-items:center;gap:.7rem;flex-wrap:wrap}.profile-preview-actions strong{color:var(--primary-light)}.profile-certificate-preview .public-certificate-card{justify-self:center}
.certificate-english-name-field{display:grid;gap:.45rem;margin:1rem 0;padding:.9rem;border:1px solid var(--border);border-radius:14px;background:var(--bg-secondary);font-weight:800}.certificate-name-entry{display:flex;gap:.55rem;flex-wrap:wrap}.certificate-name-entry input{flex:1 1 240px;min-width:0;padding:.7rem .8rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-primary);color:var(--text-main);font:inherit;text-align:left}.certificate-english-name-field small{color:var(--text-muted);font-weight:500}
.profile-certificate-card button:disabled { opacity:.55; cursor:not-allowed; }
.certificate-share-link { color:var(--primary-light); font-weight:800; text-decoration:underline; overflow-wrap:anywhere; }
.profile-certificate-card.is-earned { border-color:rgba(16,185,129,.5); background:linear-gradient(145deg,rgba(16,185,129,.1),var(--bg-card)); }
.profile-certificate-card.final-certificate { grid-column:1/-1; }
.public-certificate-page { min-height:100vh; display:grid; place-items:center; padding:clamp(.5rem,3vw,2rem); background:radial-gradient(ellipse at 20% 10%,rgba(79,70,229,.12),transparent 40%),var(--bg-primary); }
.public-certificate-card { --certificate-accent:#0F766E; width:min(100%,min(88vh,760px)); aspect-ratio:1; max-height:94vh; padding:clamp(1rem,4vw,2.4rem); display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:clamp(.45rem,1.5vw,1rem); overflow:hidden; text-align:center; color:#0f172a; background:linear-gradient(145deg,#fff 0%,#f8fafc 72%,#f0fdfa 100%); border:clamp(5px,.9vw,9px) double var(--certificate-accent); border-radius:clamp(14px,2vw,26px); box-shadow:var(--shadow-lg); }
.certificate-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.4rem;color:var(--certificate-accent);font-weight:900}.certificate-academy{justify-self:start;max-width:100%;overflow-wrap:anywhere;font-size:clamp(.78rem,2vw,1.1rem)}.certificate-logo{width:clamp(26px,5vw,44px);height:clamp(26px,5vw,44px);object-fit:contain}.certificate-issue{justify-self:end;color:#64748b;font-size:clamp(.62rem,1.6vw,.82rem)}
.certificate-center{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.25rem,1vw,.65rem)}.public-certificate-card h1{margin:0;max-width:100%;font-size:clamp(1.35rem,5vw,2.6rem);line-height:1.15;overflow-wrap:anywhere}.certificate-eyebrow{font-size:clamp(.8rem,2vw,1rem);font-weight:800;color:#475569}.certificate-learner-name{color:#111827}.certificate-course{margin:0;color:#64748b;font-size:clamp(.72rem,1.8vw,.95rem);line-height:1.35}.public-certificate-card h2{margin:0;color:var(--certificate-accent);font-size:clamp(1rem,3vw,1.6rem);line-height:1.25}
.public-certificate-avatar{width:clamp(42px,9vw,76px);height:clamp(42px,9vw,76px);border-radius:50%;object-fit:cover;border:3px solid var(--certificate-accent)}.certificate-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.certificate-stat{min-width:0;padding:.45rem .25rem;border-block:1px solid #e2e8f0;display:grid;gap:.15rem}.certificate-stat strong{font-size:clamp(.78rem,2.1vw,1.15rem);overflow-wrap:anywhere;color:var(--certificate-accent)}.certificate-stat span{font-size:clamp(.62rem,1.55vw,.8rem);color:#64748b}.certificate-source{margin:0;color:#475569;font-size:clamp(.62rem,1.55vw,.82rem);line-height:1.35;overflow-wrap:anywhere}.certificate-foot{display:grid;gap:.2rem;border-top:1px solid #e2e8f0;padding-top:.35rem}.certificate-foot small{font-size:clamp(.56rem,1.25vw,.72rem);line-height:1.35;color:#64748b}.certificate-verify{font:600 clamp(.52rem,1.1vw,.68rem) ui-monospace,monospace;color:#64748b;overflow-wrap:anywhere}.public-certificate-loading{grid-row:1/-1;align-self:center;padding:2rem;color:var(--text-muted)}
@media(max-width:420px){.public-certificate-card{width:100%;padding:4.5%;gap:2.5vw}.certificate-source{font-size:2.5vw}.certificate-foot small{font-size:2.2vw}}
.formal-certificate-card{--certificate-accent:#17365d;--certificate-corner:#17365d;position:relative;isolation:isolate;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto auto;gap:clamp(.35rem,1.2vw,.8rem);padding:clamp(1.1rem,4vw,2.2rem);border:clamp(5px,.85vw,8px) double #c99738;border-radius:clamp(9px,1.5vw,18px);background-color:#fffdf7;background-image:linear-gradient(135deg,var(--certificate-corner) 0 30px,transparent 31px),linear-gradient(225deg,var(--certificate-corner) 0 30px,transparent 31px),linear-gradient(45deg,var(--certificate-corner) 0 30px,transparent 31px),linear-gradient(315deg,var(--certificate-corner) 0 30px,transparent 31px),linear-gradient(145deg,#fffdf8,#f7f8f5);background-size:64px 64px,64px 64px,64px 64px,64px 64px,100% 100%;background-position:top left,top right,bottom left,bottom right,center;background-repeat:no-repeat;box-shadow:0 18px 45px rgba(15,23,42,.16)}
.formal-certificate-card::before{content:"";position:absolute;z-index:0;inset:10px;border:1px solid rgba(201,151,56,.7);pointer-events:none}.formal-certificate-card>*{position:relative;z-index:1}.formal-certificate-card.certificate-final{--certificate-accent:#12634c;--certificate-corner:#104f40;border-color:#c99a3c;background-image:linear-gradient(135deg,#104f40 0 30px,transparent 31px),linear-gradient(225deg,#104f40 0 30px,transparent 31px),linear-gradient(45deg,#104f40 0 30px,transparent 31px),linear-gradient(315deg,#104f40 0 30px,transparent 31px),linear-gradient(145deg,#fffdf5,#f2f8f3)}
.formal-certificate-card .certificate-head{padding:0 clamp(.35rem,2vw,1rem);color:var(--certificate-accent);font-family:Outfit,Cairo,sans-serif}.formal-certificate-card .certificate-academy{letter-spacing:.04em;text-transform:uppercase}.formal-certificate-card .certificate-issue{font-weight:800}.formal-certificate-card .certificate-center{gap:clamp(.25rem,1vw,.6rem)}.formal-certificate-card .certificate-eyebrow{color:var(--certificate-accent);font-family:Outfit,Cairo,sans-serif;font-size:clamp(.68rem,1.7vw,.95rem);font-weight:900;letter-spacing:.08em}.formal-certificate-card .certificate-learner-name{width:min(88%,600px);padding:.32rem .6rem .45rem;border-bottom:2px solid #c99738;color:#101a2d;font-family:Cairo,Outfit,sans-serif;font-size:clamp(1.4rem,5.4vw,2.7rem);font-weight:900}.formal-certificate-card .certificate-course{color:#526174;font-size:clamp(.68rem,1.7vw,.9rem)}.formal-certificate-card .certificate-level{color:var(--certificate-accent);font-size:clamp(1.05rem,3.1vw,1.7rem);font-weight:900}.formal-certificate-card .public-certificate-avatar{border:3px solid #c99738;box-shadow:0 0 0 5px rgba(201,151,56,.13)}.formal-certificate-card .certificate-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem}.formal-certificate-card .certificate-stat{border-block:1px solid rgba(23,54,93,.16)}.formal-certificate-card .certificate-stat strong{color:var(--certificate-accent)}.formal-certificate-card .certificate-source{text-align:center;color:#526174}.formal-certificate-card .certificate-foot{border-color:rgba(23,54,93,.16)}.formal-certificate-card .certificate-foot small,.formal-certificate-card .certificate-verify{text-align:center}.certificate-level-list{display:flex;justify-content:center;flex-wrap:wrap;gap:.32rem}.certificate-level-list span{min-width:2.3em;padding:.2rem .45rem;border:1px solid #c99738;border-radius:999px;color:var(--certificate-accent);font-size:clamp(.62rem,1.45vw,.78rem);font-weight:900}.certificate-template-card .certificate-mock-avatar{display:grid;place-items:center;background:#e7e9ed;color:var(--certificate-accent);font-size:clamp(.58rem,1.4vw,.8rem);font-weight:900}
.formal-certificate-card .certificate-center{position:relative}.formal-certificate-card .certificate-center>*{position:relative;z-index:1}.formal-certificate-card .certificate-center::before,.formal-certificate-card .certificate-center::after{position:absolute;top:20%;color:#c99738;font-size:clamp(1.7rem,4vw,3rem);line-height:1;opacity:.9;content:"❧"}.formal-certificate-card .certificate-center::before{inset-inline-start:8%}.formal-certificate-card .certificate-center::after{inset-inline-end:8%;transform:scaleX(-1)}.formal-certificate-card .certificate-learner-name{min-height:clamp(42px,8vw,68px);display:grid;place-items:center;padding:.32rem .6rem .45rem;border:1.5px solid #c99738;border-radius:4px}.formal-certificate-card.certificate-level .certificate-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.certificate-code-row{display:flex;align-items:center;justify-content:center;gap:.55rem;color:#53657a;font-size:clamp(.55rem,1.2vw,.72rem);font-weight:800}.certificate-qr{width:clamp(54px,9vw,84px);height:clamp(54px,9vw,84px);flex:0 0 auto;display:grid;place-items:center;padding:4px;border:1px solid #c99738;border-radius:5px;background:#fff}.certificate-qr canvas,.certificate-qr img{display:block!important;width:100%!important;height:100%!important;image-rendering:pixelated}.certificate-qr table{width:100%;height:100%;border-collapse:collapse}.certificate-qr td{padding:0}
.formal-certificate-card::after{content:"✦";position:absolute;top:6px;left:50%;z-index:2;transform:translateX(-50%);padding:0 .35rem;background:#fffdf7;color:#c99738;font-size:clamp(.8rem,1.7vw,1.1rem)}.formal-certificate-card.certificate-final::after{background:#fffdf5}.formal-certificate-card .certificate-main-title{margin:0;color:var(--certificate-accent);font-family:Georgia,Outfit,serif;font-size:clamp(1rem,3.5vw,1.8rem);font-weight:800;letter-spacing:.035em;line-height:1.15;text-align:center}.formal-certificate-card .certificate-main-title::after{content:"";display:block;width:38%;height:2px;margin:.35rem auto 0;background:linear-gradient(90deg,transparent,#c99738,transparent)}.formal-certificate-card .certificate-learner-name{font-size:clamp(1.25rem,4.2vw,2.15rem);line-height:1.15}
@media print{body:has(.public-certificate-page){background:#fff!important}.public-certificate-page{min-height:0;padding:0;background:#fff}.public-certificate-card{width:190mm;height:190mm;max-height:none;print-color-adjust:exact;-webkit-print-color-adjust:exact;box-shadow:none;border-radius:0}.main-header,body>header,body>main:not(.public-certificate-page){display:none!important}}
@page{size:A4 portrait;margin:10mm}
@media print{body.printing-profile-certificate *{visibility:hidden!important}body.printing-profile-certificate #profileCertificatePreview,body.printing-profile-certificate #profileCertificatePreview *{visibility:visible!important}body.printing-profile-certificate #profileCertificatePreview{position:fixed;inset:0;z-index:999999;width:100vw;height:100vh;margin:0;padding:0;display:grid!important;place-items:center;border:0;border-radius:0;background:#fff}.printing-profile-certificate .profile-preview-actions{display:none!important}.printing-profile-certificate .profile-certificate-preview .public-certificate-card{width:190mm;height:190mm;max-height:none;aspect-ratio:1;box-shadow:none;border-radius:0;print-color-adjust:exact;-webkit-print-color-adjust:exact}}
.story-reading-view { display:grid; gap:.5rem; max-height:52vh; overflow:auto; padding:.9rem; margin:.8rem 0; border:1px solid var(--border); border-radius:16px; background:var(--bg-secondary); }
.story-reading-sentence { display:flex; align-items:flex-start; gap:.7rem; width:100%; padding:.65rem .75rem; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--text-main); text-align:left; font:inherit; line-height:1.7; cursor:pointer; }
.story-reading-sentence:hover,.story-reading-sentence.is-speaking { border-color:var(--primary-light); background:rgba(79,70,229,.12); }
.story-reading-number { flex:0 0 1.7rem; display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--primary-light); color:#fff; font-size:.78rem; font-weight:900; }
.word-extra { background:rgba(245,158,11,.22); color:#92400e; text-decoration:line-through; border-radius:4px; padding:0 .12rem; }
.oxford-word-link { display:inline-flex; align-items:center; gap:.3rem; margin-top:.45rem; color:var(--primary-light); font-size:.78rem; font-weight:800; text-decoration:underline; }
.vocab-count-pill { padding:.55rem .85rem; border:1px solid var(--border); border-radius:999px; color:var(--primary-light); background:var(--bg-card); white-space:nowrap; }
.story-focus-words { display:flex; flex-wrap:wrap; gap:.5rem; margin:.85rem 0; }
.story-focus-word { display:flex; align-items:center; gap:.5rem; padding:.45rem .7rem; border:1px solid var(--border); border-radius:999px; background:var(--bg-secondary); color:var(--text-main); cursor:pointer; }
.story-focus-word strong { direction:ltr; }
.story-focus-word span { color:var(--text-muted); font-size:.85rem; }
.profile-unit-row { display:grid; grid-template-columns:1fr auto; gap:.35rem .8rem; padding:.65rem 0; border-bottom:1px solid var(--border); }
.profile-unit-track { grid-column:1/-1; height:5px; margin:0; }.profile-unit-track i { background:var(--success-gradient); }

/* Premium landscape certificates: scalable on screen, fitted to A4 when printed. */
.public-certificate-card.formal-certificate-card{--certificate-frame:#C99738;width:min(100%,1040px);height:auto;min-height:0;max-height:none;aspect-ratio:297/210;border-radius:12px;padding:clamp(1rem,3.1vw,2rem);gap:clamp(.2rem,.65vw,.55rem);grid-template-rows:auto minmax(0,1fr) auto auto auto auto auto;overflow:hidden;background-color:#fffdf7;background-image:repeating-linear-gradient(45deg,rgba(21,45,71,.018) 0 1px,transparent 1px 7px),linear-gradient(145deg,#fffefa,#f6f7f3);border-color:var(--certificate-frame);}
.formal-certificate-card::before{inset:9px;border:1px solid color-mix(in srgb,var(--certificate-frame) 55%,transparent)}
.formal-certificate-card::after{content:"✦";top:8px;background:#fffdf7}
.formal-certificate-card.certificate-final{border-width:10px;background-image:repeating-linear-gradient(45deg,rgba(21,45,71,.02) 0 1px,transparent 1px 7px),linear-gradient(145deg,#fffdf5,#eff7f1)}
.formal-certificate-card[data-level="A1"]{--certificate-accent:#2563EB}.formal-certificate-card[data-level="A2"]{--certificate-accent:#15803D}.formal-certificate-card[data-level="B1"]{--certificate-accent:#7C3AED}.formal-certificate-card[data-level="B2"]{--certificate-accent:#C2410C}.formal-certificate-card[data-level="C1"]{--certificate-accent:#0891B2}.formal-certificate-card[data-level="C2"]{--certificate-accent:#7F1D1D}.formal-certificate-card[data-level="FINAL"]{--certificate-accent:#14532D}
.formal-certificate-card .certificate-center{gap:clamp(.15rem,.45vw,.4rem);padding:.15rem 0}.formal-certificate-card .certificate-main-title{font-size:clamp(1rem,2.2vw,1.8rem)}
.formal-certificate-card .certificate-learner-name{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(1.8rem,4.6vw,3.1rem);font-weight:700;border:0;border-bottom:1px solid var(--certificate-frame);border-radius:0;min-height:0;padding:.05rem .5rem .18rem}
.formal-certificate-card .certificate-course{max-width:90%;font-size:clamp(.68rem,1.25vw,.95rem)}.certificate-can-do{margin:0;color:#53657a;font:italic clamp(.65rem,1.2vw,.88rem) Georgia,serif}
.formal-certificate-card .certificate-level{font-family:Georgia,serif;font-size:clamp(1rem,2.1vw,1.5rem)}
.formal-certificate-card .certificate-logo{width:clamp(36px,5vw,64px);height:clamp(36px,5vw,64px);object-fit:contain}.formal-certificate-card .certificate-academy{font-family:Georgia,serif;letter-spacing:.12em}
.formal-certificate-card .certificate-stats{max-width:900px;width:100%;justify-self:center}.formal-certificate-card .certificate-stat{padding:.22rem .18rem}.formal-certificate-card .certificate-source{font-size:clamp(.58rem,1.05vw,.78rem)}
.certificate-signatures{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,8vw,6rem);width:min(78%,700px);justify-self:center}.certificate-signature{display:grid;gap:.1rem;min-width:0;text-align:center}.certificate-signature span{min-height:1.15rem;border-bottom:1px solid #667085;color:#26364a;font:italic 600 clamp(.7rem,1.15vw,.92rem) Georgia,serif}.certificate-signature small{color:#59677a;font-size:clamp(.48rem,.78vw,.64rem);font-weight:800;letter-spacing:.08em}
.certificate-seal{position:absolute!important;right:clamp(1.5rem,5vw,4rem);bottom:clamp(1.3rem,4vw,2.5rem);display:grid;place-items:center;width:clamp(62px,9vw,94px);aspect-ratio:1;border:3px double var(--certificate-frame,#bd902f);border-radius:50%;outline:1px solid color-mix(in srgb,var(--certificate-frame,#bd902f) 45%,transparent);outline-offset:4px;color:var(--certificate-frame,#946e21);background:rgba(255,252,240,.9);font:900 clamp(.48rem,.8vw,.65rem) Georgia,serif;letter-spacing:.06em;text-align:center;transform:rotate(-9deg)}
.formal-certificate-card.certificate-final .certificate-seal{width:clamp(76px,10vw,112px);border-width:4px}
.formal-certificate-card .certificate-foot{padding-top:.2rem;gap:.12rem}.formal-certificate-card .certificate-foot small{font-size:clamp(.5rem,.85vw,.66rem)}.formal-certificate-card .certificate-verify{font-size:clamp(.43rem,.75vw,.6rem);overflow-wrap:anywhere}
.formal-certificate-card .certificate-code-row{gap:.4rem;font-size:clamp(.45rem,.8vw,.62rem);padding-bottom:.05rem}.formal-certificate-card .certificate-qr{width:clamp(48px,6vw,64px);height:clamp(48px,6vw,64px);padding:3px;margin-inline-start:clamp(0px,8vw,70px);flex:0 0 auto;overflow:hidden}
.certificate-template-card{width:min(100%,1040px);max-height:none}.admin-logo-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.admin-logo-row img{width:88px;height:70px;object-fit:contain;border:1px solid var(--border);border-radius:10px;background:white}.admin-logo-row small{flex:1 1 240px;color:var(--text-muted)}
@media(max-width:600px){.public-certificate-card.formal-certificate-card{width:100%;aspect-ratio:297/210;padding:5%;gap:1.2vw;border-radius:8px}.formal-certificate-card .certificate-head{font-size:2.3vw}.formal-certificate-card .certificate-center{gap:.5vw}.formal-certificate-card .certificate-eyebrow{font-size:2.2vw}.formal-certificate-card .certificate-main-title{font-size:4vw}.formal-certificate-card .certificate-course,.certificate-can-do{font-size:2.25vw}.formal-certificate-card .certificate-learner-name{font-size:7vw}.formal-certificate-card .certificate-level{font-size:3.6vw}.formal-certificate-card .certificate-source{font-size:1.9vw}.formal-certificate-card .certificate-signatures{width:75%;gap:6vw}.certificate-signature small{font-size:1.45vw}.certificate-seal{right:7%;bottom:10%;width:12vw}.formal-certificate-card .certificate-stat strong{font-size:2.7vw}.formal-certificate-card .certificate-stat span{font-size:1.8vw}.formal-certificate-card .certificate-qr{width:10vw;height:10vw}.formal-certificate-card .certificate-verify{font-size:1.35vw}}
@media print{@page{size:A4 landscape;margin:7mm}body:has(.public-certificate-page){background:white!important}.public-certificate-page{min-height:0;padding:0;background:white}.public-certificate-card.formal-certificate-card,.printing-profile-certificate .profile-certificate-preview .public-certificate-card{width:283mm!important;height:196mm!important;min-height:0!important;max-height:none!important;aspect-ratio:297/210!important;padding:8mm!important;gap:1.4mm!important;border-radius:0!important;box-shadow:none!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}.main-header,body>header,body>main:not(.public-certificate-page){display:none!important}.certificate-seal{width:22mm!important;right:14mm!important;bottom:12mm!important}.formal-certificate-card .certificate-qr{width:16mm!important;height:16mm!important;margin-inline-start:18mm!important}.formal-certificate-card .certificate-qr canvas,.formal-certificate-card .certificate-qr img{max-width:100%!important;max-height:100%!important}.certificate-template-gallery{display:none!important}}

/* Certificate v3 layout: follow the supplied classic landscape reference. */
.public-certificate-card.formal-certificate-card{display:block;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:297/210;width:min(100%,1080px);height:auto;max-height:none;min-height:0;padding:0;border:7px double var(--certificate-frame,#b98a2e);border-radius:0;background-color:#fbf7ec;background-image:repeating-linear-gradient(45deg,transparent 0 7px,rgba(20,40,75,.12) 7px 8px),repeating-linear-gradient(-45deg,transparent 0 7px,rgba(20,40,75,.12) 7px 8px),radial-gradient(ellipse at center,#fff 0%,#fbf7ec 66%);background-size:100% 8%,100% 8%,100% 100%;background-position:top,bottom,center;background-repeat:no-repeat;box-shadow:0 0 0 4px #fbf7ec,0 0 0 6px #8a6420,0 14px 38px rgba(15,23,42,.16);text-align:center;color:#14284b}
.formal-certificate-card::before{content:"";position:absolute;z-index:0;inset:2.8%;border:1px solid color-mix(in srgb,var(--certificate-frame,#b98a2e) 82%,#8a6420);box-shadow:inset 0 0 0 3px rgba(255,255,255,.68);pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 0 34%,rgba(20,40,75,.035) 34.2% 34.5%,transparent 34.8% 48%,rgba(185,138,46,.035) 48.2% 48.5%,transparent 48.8%)}
.formal-certificate-card>*{z-index:1}.formal-certificate-card .certificate-head{position:absolute;inset:4.7% 10% auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7mm;padding:0;color:#14284b;font-family:"Cinzel",Georgia,serif}.formal-certificate-card .certificate-logo{order:-1;width:10mm;height:10mm;object-fit:contain}.formal-certificate-card .certificate-academy{font:700 clamp(13px,1.7vw,22px)/1.1 "Cinzel",Georgia,serif;letter-spacing:.22em;color:#14284b}.formal-certificate-card .certificate-issue{display:block;position:static;color:#8a6420;font:500 clamp(9px,1.1vw,14px)/1.1 "Cinzel",Georgia,serif;letter-spacing:.3em}
.formal-certificate-card .certificate-center{position:absolute;inset:18% 8% 31%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2px,.55vw,7px);padding:0;overflow:visible;text-align:center}.formal-certificate-card .certificate-center::before,.formal-certificate-card .certificate-center::after{display:none}.formal-certificate-card .certificate-center>*{position:relative;z-index:1;flex:0 0 auto}.formal-certificate-card .certificate-eyebrow{color:#8a6420;font:italic 500 clamp(12px,1.45vw,20px)/1.1 "Cormorant Garamond",Georgia,serif;letter-spacing:.11em}.formal-certificate-card .certificate-main-title{margin:0;color:var(--certificate-accent,#14284b);font:700 clamp(22px,4.1vw,52px)/1.05 "Cinzel",Georgia,serif;letter-spacing:.045em}.formal-certificate-card .certificate-main-title::after{display:none}.formal-certificate-card .certificate-learner-name{width:auto;max-width:94%;min-height:0;margin:0;padding:0 12mm 1mm;border:0;border-bottom:1px solid var(--certificate-frame,#b98a2e);border-radius:0;color:var(--certificate-accent,#14284b);font:400 clamp(34px,6.2vw,78px)/1.05 "Pinyon Script","Cormorant Garamond",Georgia,serif;overflow-wrap:anywhere}.formal-certificate-card .certificate-course{max-width:94%;margin:0;color:#2c3550;font:500 clamp(12px,1.45vw,19px)/1.25 "Cormorant Garamond",Georgia,serif}.formal-certificate-card .certificate-level{margin:0;color:#8a6420;font:700 clamp(14px,2.15vw,28px)/1.1 "Cinzel",Georgia,serif;letter-spacing:.12em}.formal-certificate-card .certificate-can-do{max-width:85%;margin:0;color:#5c6475;font:italic 500 clamp(11px,1.2vw,16px)/1.2 "Cormorant Garamond",Georgia,serif}.formal-certificate-card .public-certificate-avatar{display:none}
.formal-certificate-card .certificate-level-list{display:flex;justify-content:center;flex-wrap:wrap;gap:1.3mm;margin-top:1mm}.formal-certificate-card .certificate-level-list span{min-width:8mm;padding:1mm 2mm;border:1px solid var(--certificate-frame,#b98a2e);border-radius:50%;color:var(--certificate-accent,#14284b);font:700 clamp(9px,1.1vw,14px) "Cinzel",Georgia,serif}
.formal-certificate-card .certificate-stats{position:absolute;left:12%;right:12%;bottom:19%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3mm;width:auto;max-width:none}.formal-certificate-card .certificate-stat{min-width:0;padding:1.4mm .7mm 0;border:0;border-top:1px solid var(--certificate-frame,#b98a2e);border-bottom:0;display:grid;gap:.5mm}.formal-certificate-card .certificate-stat strong{color:var(--certificate-accent,#14284b);font:700 clamp(11px,1.4vw,18px) "Cinzel",Georgia,serif;overflow-wrap:anywhere}.formal-certificate-card .certificate-stat span{color:#5c6475;font:600 clamp(8px,.95vw,12px) "Cormorant Garamond",Georgia,serif;letter-spacing:.14em;text-transform:uppercase}
.formal-certificate-card .certificate-foot{position:absolute;left:12%;right:12%;bottom:14%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4mm;padding:0;border:0;text-align:center;color:#5c6475}.formal-certificate-card .certificate-foot small{font:500 clamp(8px,.9vw,11px)/1.12 "Cormorant Garamond",Georgia,serif;color:#5c6475}.formal-certificate-card .certificate-foot .certificate-verify{display:none}
.formal-certificate-card .certificate-code-row{position:absolute;left:8%;right:8%;bottom:2.7%;height:11.5%;display:grid;grid-template-columns:minmax(0,1fr) 27mm minmax(0,1fr) 24mm;align-items:end;justify-content:stretch;gap:4mm;padding:0;color:#53657a;font-size:10px}.formal-certificate-card .certificate-signatures{display:contents}.formal-certificate-card .certificate-signature{display:grid;align-content:end;gap:.5mm;min-width:0;text-align:center}.formal-certificate-card .certificate-signature i{height:8mm;overflow:hidden;color:var(--certificate-accent,#14284b);font:italic 400 clamp(16px,2.2vw,28px)/1 "Pinyon Script","Cormorant Garamond",Georgia,serif}.formal-certificate-card .certificate-signature hr{width:92%;margin:0 auto;border:0;border-top:1px solid var(--certificate-accent,#14284b)}.formal-certificate-card .certificate-signature small{color:#5c6475;font:500 clamp(7px,.85vw,11px) "Cormorant Garamond",Georgia,serif}.formal-certificate-card .certificate-signature small b{display:block;color:var(--certificate-accent,#14284b);font:700 clamp(7px,.8vw,10px) "Cinzel",Georgia,serif;letter-spacing:.08em}
.formal-certificate-card .certificate-seal{position:relative!important;inset:auto!important;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-self:center;align-self:center;width:26mm;height:28mm;aspect-ratio:auto;transform:none;border:0;outline:0;border-radius:0;background:radial-gradient(circle,#f7e8b7 0 44%,transparent 45%),repeating-conic-gradient(from 0deg,#e8cd7e 0deg 3deg,#b98a2e 3deg 6deg);clip-path:polygon(50% 0,59% 7%,70% 2%,76% 12%,88% 10%,90% 22%,100% 30%,94% 41%,100% 52%,92% 62%,97% 74%,84% 80%,82% 94%,68% 91%,58% 100%,49% 91%,37% 99%,29% 89%,16% 92%,14% 79%,2% 73%,8% 61%,0 51%,7% 40%,1% 29%,13% 21%,12% 9%,26% 12%,35% 2%);color:#5e3f0c;filter:drop-shadow(0 1mm 1mm rgba(0,0,0,.22));font-family:"Cinzel",Georgia,serif;letter-spacing:.04em}.formal-certificate-card .certificate-seal small{font-size:clamp(6px,.65vw,9px)}.formal-certificate-card .certificate-seal strong{font-size:clamp(12px,1.5vw,20px)}.formal-certificate-card.certificate-final .certificate-seal{width:30mm;height:32mm}.formal-certificate-card.certificate-final .certificate-seal strong{font-size:clamp(13px,1.65vw,22px)}
.formal-certificate-card .certificate-qr-block{display:grid;justify-items:center;align-content:end;gap:.5mm;min-width:0;text-align:center;color:#5c6475;font:500 clamp(6px,.7vw,9px)/1.1 "Cormorant Garamond",Georgia,serif}.formal-certificate-card .certificate-qr{width:18mm;height:18mm;max-width:100%;max-height:100%;padding:1mm;border:1px solid var(--certificate-frame,#b98a2e);border-radius:0;background:white;overflow:hidden}.formal-certificate-card .certificate-qr canvas,.formal-certificate-card .certificate-qr img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;image-rendering:pixelated}.formal-certificate-card .certificate-qr table{width:100%;height:100%;border-collapse:collapse}.formal-certificate-card .certificate-qr td{padding:0}.formal-certificate-card .certificate-qr-block>span,.formal-certificate-card .certificate-qr-block>strong,.formal-certificate-card .certificate-qr-block>small{display:block;max-width:100%;overflow-wrap:anywhere}.formal-certificate-card .certificate-verify{color:var(--certificate-accent,#14284b);font:700 clamp(6px,.68vw,9px) "Cinzel",Georgia,serif}.formal-certificate-card .certificate-verify-url{font-size:clamp(5px,.55vw,7px)}
.formal-certificate-card.certificate-final{--certificate-accent:#5A1424;border-width:10px}.formal-certificate-card[data-level="A1"]{--certificate-accent:#14284B}.formal-certificate-card[data-level="A2"]{--certificate-accent:#146B54}.formal-certificate-card[data-level="B1"]{--certificate-accent:#0E7490}.formal-certificate-card[data-level="B2"]{--certificate-accent:#8A6420}.formal-certificate-card[data-level="C1"]{--certificate-accent:#5B3F8C}.formal-certificate-card[data-level="C2"]{--certificate-accent:#5A1424}.formal-certificate-card[data-level="FINAL"]{--certificate-accent:#5A1424}
@media(max-width:650px){.public-certificate-card.formal-certificate-card{width:100%;aspect-ratio:297/210;border-width:4px;box-shadow:0 0 0 2px #fbf7ec,0 0 0 3px #8a6420}.formal-certificate-card .certificate-head{inset-block-start:5%}.formal-certificate-card .certificate-logo{width:7vw;height:7vw}.formal-certificate-card .certificate-center{inset:19% 5% 31%;gap:.5vw}.formal-certificate-card .certificate-main-title{font-size:4vw}.formal-certificate-card .certificate-learner-name{font-size:7vw}.formal-certificate-card .certificate-course{font-size:2.1vw}.formal-certificate-card .certificate-level{font-size:2.6vw}.formal-certificate-card .certificate-can-do{font-size:1.8vw}.formal-certificate-card .certificate-stats{left:8%;right:8%;bottom:20%;gap:1vw}.formal-certificate-card .certificate-stat{padding-top:.6vw}.formal-certificate-card .certificate-stat strong{font-size:2vw}.formal-certificate-card .certificate-stat span{font-size:1.35vw}.formal-certificate-card .certificate-foot{left:8%;right:8%;bottom:15%}.formal-certificate-card .certificate-foot small{font-size:1.25vw}.formal-certificate-card .certificate-code-row{left:5%;right:5%;bottom:2.3%;height:12%;grid-template-columns:minmax(0,1fr) 16vw minmax(0,1fr) 13vw;gap:1.5vw}.formal-certificate-card .certificate-signature i{height:5vw;font-size:4vw}.formal-certificate-card .certificate-signature small,.formal-certificate-card .certificate-signature small b{font-size:1.2vw}.formal-certificate-card .certificate-seal{width:15vw;height:16vw}.formal-certificate-card.certificate-final .certificate-seal{width:18vw;height:19vw}.formal-certificate-card .certificate-qr{width:10vw;height:10vw;padding:.7vw}.formal-certificate-card .certificate-qr-block{font-size:1.1vw}.formal-certificate-card .certificate-verify{font-size:1.1vw}}
@media print{@page{size:A4 landscape;margin:0}.public-certificate-page{padding:0}.public-certificate-card.formal-certificate-card,.printing-profile-certificate .profile-certificate-preview .public-certificate-card{width:297mm!important;height:210mm!important;aspect-ratio:297/210!important;padding:0!important;border-radius:0!important;border-width:2mm!important;box-shadow:none!important}.formal-certificate-card .certificate-head{inset:4.7% 10% auto!important}.formal-certificate-card .certificate-center{inset:18% 8% 31%!important}.formal-certificate-card .certificate-stats{bottom:19%!important}.formal-certificate-card .certificate-foot{bottom:14%!important}.formal-certificate-card .certificate-code-row{bottom:2.7%!important;height:11.5%!important}.formal-certificate-card .certificate-qr{width:18mm!important;height:18mm!important}.certificate-template-gallery{display:none!important}*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}}
@media(min-width:651px){.formal-certificate-card .certificate-stats{bottom:21%}.formal-certificate-card .certificate-foot{bottom:16.5%}.formal-certificate-card .certificate-code-row{bottom:2.2%;height:14%}.formal-certificate-card .certificate-seal{width:15mm;height:16mm}.formal-certificate-card.certificate-final .certificate-seal{width:18mm;height:19mm}.formal-certificate-card .certificate-qr{width:14mm;height:14mm}}
@media(max-width:650px){.formal-certificate-card .certificate-stats{bottom:21%}.formal-certificate-card .certificate-foot{bottom:16%}.formal-certificate-card .certificate-code-row{bottom:1.8%;height:16%;grid-template-columns:minmax(0,1fr) 15vw minmax(0,1fr) 12vw;gap:1vw}.formal-certificate-card .certificate-seal{width:13vw;height:14vw}.formal-certificate-card.certificate-final .certificate-seal{width:15vw;height:16vw}.formal-certificate-card .certificate-qr{width:8vw;height:8vw}.formal-certificate-card .certificate-qr-block{gap:.15vw}}
@media print{.formal-certificate-card.certificate-final{border-width:3mm!important}.formal-certificate-card .certificate-stats{bottom:21%!important}.formal-certificate-card .certificate-foot{bottom:16.5%!important}.formal-certificate-card .certificate-code-row{bottom:2.2%!important;height:14%!important}.formal-certificate-card .certificate-seal{width:15mm!important;height:16mm!important}.formal-certificate-card.certificate-final .certificate-seal{width:18mm!important;height:19mm!important}.formal-certificate-card .certificate-qr{width:14mm!important;height:14mm!important}}
/* Final positioning pass: English LTR certificate, matching the supplied reference. */
.public-certificate-card.formal-certificate-card{direction:ltr;background-size:100% 3.5%,100% 3.5%,100% 100%;box-shadow:0 0 0 4px #fbf7ec,0 0 0 6px #8a6420,0 14px 38px rgba(15,23,42,.16)}
.formal-certificate-card::before{background:radial-gradient(ellipse at 50% 48%,transparent 0 34%,rgba(20,40,75,.018) 34.2% 34.35%,transparent 34.7% 48%,rgba(185,138,46,.018) 48.2% 48.35%,transparent 48.7%)}
.formal-certificate-card::after{display:none}
.formal-certificate-card .certificate-head{inset:5.3% 10% auto;gap:1mm}.formal-certificate-card .certificate-logo{width:12mm;height:12mm}.formal-certificate-card .certificate-academy{font-size:clamp(17px,2vw,26px);letter-spacing:.24em}.formal-certificate-card .certificate-issue{font-size:clamp(10px,1.2vw,15px);letter-spacing:.3em}
.formal-certificate-card .certificate-center{inset:19% 8% 37%;gap:clamp(3px,.7vw,9px)}.formal-certificate-card .certificate-eyebrow{font-size:clamp(13px,1.65vw,21px);letter-spacing:.14em}.formal-certificate-card .certificate-main-title{font-size:clamp(28px,4.8vw,62px);letter-spacing:.055em}.formal-certificate-card .certificate-main-title::after{display:block;content:"";width:58mm;height:1px;margin:2mm auto 0;background:linear-gradient(90deg,transparent,var(--certificate-frame,#b98a2e),transparent)}.formal-certificate-card .certificate-learner-name{font-size:clamp(42px,7vw,88px);line-height:1.08;padding:0 10mm 1.5mm}.formal-certificate-card .certificate-course{font-size:clamp(15px,1.8vw,23px);line-height:1.28}.formal-certificate-card .certificate-level{font-size:clamp(19px,2.65vw,34px);letter-spacing:.13em}.formal-certificate-card .certificate-can-do{font-size:clamp(13px,1.5vw,19px);line-height:1.3}
.formal-certificate-card .certificate-stats{left:15%;right:15%;bottom:26%;gap:4mm}.formal-certificate-card .certificate-stat{padding-top:2mm}.formal-certificate-card .certificate-stat strong{font-size:clamp(13px,1.55vw,20px)}.formal-certificate-card .certificate-stat span{font-size:clamp(9px,1.05vw,13px);letter-spacing:.16em}
.formal-certificate-card .certificate-foot{left:12%;right:12%;bottom:20%;gap:.7mm}.formal-certificate-card .certificate-foot small{font-size:clamp(9px,1vw,13px)}
.formal-certificate-card .certificate-code-row{direction:ltr;left:9%;right:9%;bottom:4%;height:14%;grid-template-columns:minmax(0,1fr) 24mm minmax(0,1fr) 20mm;gap:4mm;align-items:end}.formal-certificate-card .certificate-signature:nth-child(1){grid-column:1}.formal-certificate-card .certificate-seal{grid-column:2;width:16mm;height:17mm}.formal-certificate-card .certificate-signature:nth-child(2){grid-column:3}.formal-certificate-card .certificate-qr-block{grid-column:4}.formal-certificate-card.certificate-final .certificate-seal{width:20mm;height:21mm}.formal-certificate-card .certificate-qr{width:15mm;height:15mm}.formal-certificate-card .certificate-signature i{height:9mm;font-size:clamp(20px,2.7vw,35px)}.formal-certificate-card .certificate-signature small,.formal-certificate-card .certificate-signature small b{font-size:clamp(8px,.95vw,12px)}.formal-certificate-card .certificate-qr-block{font-size:clamp(7px,.8vw,10px)}.formal-certificate-card .certificate-verify{font-size:clamp(7px,.8vw,10px)}
@media(max-width:650px){.formal-certificate-card .certificate-head{inset-block-start:5%}.formal-certificate-card .certificate-logo{width:8vw;height:8vw}.formal-certificate-card .certificate-center{inset:20% 5% 37%;gap:.7vw}.formal-certificate-card .certificate-main-title{font-size:5vw}.formal-certificate-card .certificate-learner-name{font-size:8vw}.formal-certificate-card .certificate-course{font-size:2.3vw}.formal-certificate-card .certificate-level{font-size:3vw}.formal-certificate-card .certificate-can-do{font-size:2vw}.formal-certificate-card .certificate-stats{left:8%;right:8%;bottom:26%}.formal-certificate-card .certificate-foot{left:7%;right:7%;bottom:20%}.formal-certificate-card .certificate-code-row{left:5%;right:5%;bottom:3.5%;height:14%;grid-template-columns:minmax(0,1fr) 15vw minmax(0,1fr) 12vw;gap:1vw}.formal-certificate-card .certificate-seal{width:13vw;height:14vw}.formal-certificate-card.certificate-final .certificate-seal{width:15vw;height:16vw}.formal-certificate-card .certificate-qr{width:8vw;height:8vw}.formal-certificate-card .certificate-signature i{height:5vw;font-size:4.5vw}}
@media print{.formal-certificate-card .certificate-head{inset:5.3% 10% auto!important}.formal-certificate-card .certificate-center{inset:19% 8% 37%!important}.formal-certificate-card .certificate-stats{left:15%!important;right:15%!important;bottom:26%!important}.formal-certificate-card .certificate-foot{left:12%!important;right:12%!important;bottom:20%!important}.formal-certificate-card .certificate-code-row{left:9%!important;right:9%!important;bottom:4%!important;height:14%!important;grid-template-columns:minmax(0,1fr) 24mm minmax(0,1fr) 20mm!important}.formal-certificate-card .certificate-seal{width:16mm!important;height:17mm!important}.formal-certificate-card.certificate-final .certificate-seal{width:20mm!important;height:21mm!important}.formal-certificate-card .certificate-qr{width:15mm!important;height:15mm!important}}
.formal-certificate-card .certificate-main-title{font-size:clamp(28px,4vw,48px)}.formal-certificate-card .certificate-learner-name{font-size:clamp(40px,5.8vw,68px)}.formal-certificate-card .certificate-level{font-size:clamp(18px,2.35vw,30px)}.formal-certificate-card .certificate-can-do{font-size:clamp(13px,1.4vw,18px)}
@media(max-width:650px){.formal-certificate-card .certificate-main-title{font-size:4.4vw}.formal-certificate-card .certificate-learner-name{font-size:6.6vw}}
@media print{.formal-certificate-card .certificate-main-title{font-size:48px!important}.formal-certificate-card .certificate-learner-name{font-size:68px!important}}
@supports (font-size:1cqw){.public-certificate-card.formal-certificate-card{container-type:inline-size}.formal-certificate-card .certificate-head{gap:.25cqw}.formal-certificate-card .certificate-logo{width:clamp(28px,4.4cqw,48px);height:clamp(28px,4.4cqw,48px)}.formal-certificate-card .certificate-academy{font-size:clamp(15px,2cqw,22px)}.formal-certificate-card .certificate-issue{font-size:clamp(9px,1.15cqw,13px)}.formal-certificate-card .certificate-center{gap:clamp(3px,.6cqw,7px)}.formal-certificate-card .certificate-eyebrow{font-size:clamp(11px,1.45cqw,16px)}.formal-certificate-card .certificate-main-title{font-size:clamp(24px,4.2cqw,48px)}.formal-certificate-card .certificate-learner-name{font-size:clamp(32px,5.9cqw,68px)}.formal-certificate-card .certificate-course{font-size:clamp(12px,1.55cqw,18px)}.formal-certificate-card .certificate-level{font-size:clamp(16px,2.25cqw,26px)}.formal-certificate-card .certificate-can-do{font-size:clamp(11px,1.3cqw,15px)}.formal-certificate-card .certificate-stat strong{font-size:clamp(12px,1.45cqw,17px)}.formal-certificate-card .certificate-stat span{font-size:clamp(8px,.95cqw,11px)}.formal-certificate-card .certificate-foot small{font-size:clamp(8px,.9cqw,10px)}.formal-certificate-card .certificate-code-row{grid-template-columns:minmax(0,1fr) 8cqw minmax(0,1fr) 7cqw;gap:.35cqw}.formal-certificate-card .certificate-signature i{height:3.6cqw;font-size:clamp(16px,2.6cqw,28px)}.formal-certificate-card .certificate-signature small,.formal-certificate-card .certificate-signature small b{font-size:clamp(7px,.85cqw,10px)}.formal-certificate-card .certificate-seal{width:6.3cqw;height:6.7cqw}.formal-certificate-card.certificate-final .certificate-seal{width:7.5cqw;height:7.8cqw}.formal-certificate-card .certificate-seal small{font-size:clamp(6px,.65cqw,8px)}.formal-certificate-card .certificate-seal strong{font-size:clamp(11px,1.35cqw,16px)}.formal-certificate-card .certificate-qr-block{font-size:clamp(6px,.72cqw,8px)}.formal-certificate-card .certificate-qr{width:6.2cqw;height:6.2cqw}.formal-certificate-card .certificate-verify{font-size:clamp(6px,.7cqw,8px)}}
/* Clean frame and a proper vector rosette seal; eliminate the decorative stripe noise. */
.public-certificate-card.formal-certificate-card{background-image:radial-gradient(ellipse at center,#fffdf7 0%,#fbf7ec 74%,#f8f1df 100%)!important;background-repeat:no-repeat!important;background-size:100% 100%!important}
.formal-certificate-card::before{background:none!important;box-shadow:inset 0 0 0 3px rgba(255,255,255,.62)!important}
.formal-certificate-card.certificate-final{background-image:radial-gradient(ellipse at center,#fffdf7 0%,#fbf7ec 74%,#f8f1df 100%)!important}
.formal-certificate-card .certificate-code-row{bottom:4.5%;height:17%;grid-template-columns:minmax(0,1fr) 11cqw minmax(0,1fr) 7cqw;align-items:center}
.formal-certificate-card .certificate-seal{position:relative!important;inset:auto!important;right:auto!important;bottom:auto!important;grid-column:2;justify-self:center;align-self:center;display:grid;place-items:center;width:7.5cqw;height:8.6cqw;aspect-ratio:auto;padding:0;border:0!important;outline:0!important;border-radius:0!important;background:none!important;clip-path:none!important;transform:none!important;filter:drop-shadow(0 1px 1px rgba(57,38,7,.28));overflow:visible}
.formal-certificate-card.certificate-final .certificate-seal{width:9.5cqw;height:11.5cqw}
.certificate-seal-art{display:block;width:100%;height:100%;overflow:visible}.certificate-seal-art .seal-brand{font:700 7px "Cinzel",Georgia,serif;letter-spacing:1.1px;fill:#6e4b12}.certificate-seal-art .seal-level{font:700 18px "Cinzel",Georgia,serif;fill:#4d330a}.certificate-seal-art .seal-caption{font:500 4.3px "Cinzel",Georgia,serif;letter-spacing:.65px;fill:#6e4b12}.certificate-final .certificate-seal-art .seal-level{font-size:12px}
@media(max-width:650px){.formal-certificate-card .certificate-code-row{bottom:4%;height:17%;grid-template-columns:minmax(0,1fr) 11cqw minmax(0,1fr) 7cqw;gap:.4cqw}.formal-certificate-card .certificate-seal{width:7.5cqw;height:8.6cqw}.formal-certificate-card.certificate-final .certificate-seal{width:9.5cqw;height:11.5cqw}.formal-certificate-card .certificate-qr{width:6.2cqw;height:6.2cqw}}
@media print{.public-certificate-card.formal-certificate-card{background-image:radial-gradient(ellipse at center,#fffdf7 0%,#fbf7ec 74%,#f8f1df 100%)!important}.formal-certificate-card .certificate-code-row{bottom:4.5%!important;height:17%!important;grid-template-columns:minmax(0,1fr) 11cqw minmax(0,1fr) 7cqw!important}.formal-certificate-card .certificate-seal{position:relative!important;inset:auto!important;width:7.5cqw!important;height:8.6cqw!important}.formal-certificate-card.certificate-final .certificate-seal{width:9.5cqw!important;height:11.5cqw!important}}
/* Keep the verification block and the rosette well inside the frame. */
.formal-certificate-card .certificate-stats{bottom:32%!important}
.formal-certificate-card .certificate-foot{left:12%!important;right:12%!important;bottom:26%!important}
.formal-certificate-card .certificate-code-row{left:11%!important;right:11%!important;bottom:5%!important;height:20%!important;grid-template-columns:minmax(0,1fr) 14cqw minmax(0,1fr) 8cqw!important;align-items:center!important}
.formal-certificate-card .certificate-signature{align-content:center!important}
.formal-certificate-card .certificate-seal{position:relative!important;inset:auto!important;right:auto!important;bottom:auto!important;grid-column:2!important;justify-self:center!important;align-self:center!important;width:8.5cqw!important;height:9.8cqw!important;overflow:visible!important}
.formal-certificate-card.certificate-final .certificate-seal{width:12cqw!important;height:14cqw!important}
.formal-certificate-card .certificate-qr-block{grid-column:4!important;min-width:0!important;justify-self:center!important;align-self:center!important;overflow:hidden!important}
.formal-certificate-card .certificate-qr{width:6.2cqw!important;height:6.2cqw!important;max-width:100%!important;max-height:100%!important}
.formal-certificate-card .certificate-center{bottom:39%!important}
@media(max-width:650px){.formal-certificate-card .certificate-center{bottom:39%!important}.formal-certificate-card .certificate-stats{bottom:32%!important}.formal-certificate-card .certificate-foot{bottom:26%!important}.formal-certificate-card .certificate-code-row{left:8%!important;right:8%!important;bottom:5%!important;height:20%!important;grid-template-columns:minmax(0,1fr) 14cqw minmax(0,1fr) 8cqw!important}.formal-certificate-card .certificate-seal{width:8.5cqw!important;height:9.8cqw!important}.formal-certificate-card.certificate-final .certificate-seal{width:12cqw!important;height:14cqw!important}}
@media print{.formal-certificate-card .certificate-center{bottom:39%!important}.formal-certificate-card .certificate-stats{bottom:32%!important}.formal-certificate-card .certificate-foot{bottom:26%!important}.formal-certificate-card .certificate-code-row{left:11%!important;right:11%!important;bottom:5%!important;height:20%!important;grid-template-columns:minmax(0,1fr) 14cqw minmax(0,1fr) 8cqw!important}.formal-certificate-card .certificate-seal{width:8.5cqw!important;height:9.8cqw!important}.formal-certificate-card.certificate-final .certificate-seal{width:12cqw!important;height:14cqw!important}}
.placement-assessment-modal { width:min(680px,calc(100vw - 1.5rem)); max-height:min(90vh,850px); overflow:auto; }
.placement-question-meta { color:var(--primary-light); font-weight:800; margin:.5rem 0; }
.placement-question-text { font-size:1.2rem; margin:.5rem 0 1rem; }
.placement-options { display:grid; gap:.65rem; }
.placement-option { display:flex; align-items:center; gap:.75rem; min-height:50px; padding:.75rem; border:1px solid var(--border); border-radius:12px; background:var(--bg-secondary); cursor:pointer; }
.placement-option:has(input:checked) { border-color:var(--primary-light); background:rgba(3, 105, 161,.14); }
.placement-option input { accent-color:var(--primary); width:18px; height:18px; }
.placement-result { padding:1.3rem; margin:1rem 0; border:1px solid var(--border); border-radius:16px; background:var(--bg-secondary); }
.placement-result-score { font-size:1.4rem; font-weight:900; color:var(--primary-light); margin-bottom:.5rem; }
.placement-validation { color:#F4B740; margin-top:.6rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.review-queue { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:1rem; }
.review-empty,.review-word-card { padding:clamp(1rem,2.5vw,1.4rem); background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.review-empty { grid-column:1/-1; text-align:center; color:var(--text-muted); }
.review-empty strong { color:var(--text-main); font-size:1.1rem; }
.review-word-heading { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.review-word-heading h2 { font-size:clamp(1.2rem,3vw,1.6rem); overflow-wrap:anywhere; }
.review-word-meaning { font-size:1.05rem; font-weight:800; margin:.5rem 0; }
.review-word-example { padding:.75rem; border-radius:10px; background:var(--bg-secondary); line-height:1.7; overflow-wrap:anywhere; }
.review-controls { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.review-controls .unit-action-btn { flex:1 1 90px; min-height:44px; }
.cefr-roadmap { margin:clamp(1.5rem,4vw,3rem) 0; }
.cefr-roadmap-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.cefr-roadmap-heading h2 { margin:.3rem 0; font-size:clamp(1.35rem,3vw,2rem); }
.cefr-roadmap-heading p,.cefr-roadmap-note { color:var(--text-muted); max-width:780px; line-height:1.8; }
.cefr-source-link { flex:0 0 auto; color:var(--primary-light); font-weight:800; text-decoration:none; }
.cefr-source-link:hover { text-decoration:underline; }
.cefr-level-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; }
.cefr-level-card { min-width:0; padding:clamp(1rem,2vw,1.35rem); border:1px solid var(--border); border-radius:18px; background:var(--bg-card); box-shadow:var(--shadow-sm); }
.cefr-level-card.cefr-active { border-color:rgba(15, 118, 110,.4); background:linear-gradient(145deg,rgba(15, 118, 110,.08),var(--bg-card) 65%); }
.cefr-level-top { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.cefr-code { color:var(--primary-light); font:800 1.15rem 'Outfit',sans-serif; letter-spacing:.04em; }
.cefr-state { padding:.24rem .6rem; border-radius:999px; color:var(--primary); background:rgba(15, 118, 110,.1); font-size:.75rem; font-weight:800; }
.cefr-planned { color:var(--text-muted); background:var(--bg-secondary); }
.cefr-level-card h3 { margin:.45rem 0; font-size:1.08rem; }
.cefr-level-card p { min-height:3.4em; color:var(--text-muted); line-height:1.7; }
.cefr-skills { display:block; margin-top:.75rem; color:var(--primary-light); font-size:.82rem; font-weight:800; }
.cefr-roadmap-note { margin-top:.85rem; font-size:.85rem; }
:root { --focus-ring:0 0 0 3px rgba(15, 118, 110,.32); }
.feature-hero-card { background:linear-gradient(125deg,rgba(15, 118, 110,.08),rgba(244, 183, 64,.045)),var(--glass-bg); }
.unit-action-btn:not(.secondary-action):not([style*="background"]),
.review-controls .unit-action-btn:not(.secondary-action) { background:var(--primary-gradient); border-color:transparent; color:#fff; }
.unit-action-btn:not(.secondary-action):not([style*="background"]):hover,
.review-controls .unit-action-btn:not(.secondary-action):hover { filter:brightness(1.08); box-shadow:0 6px 18px rgba(15, 118, 110,.22); }
.quiz-submit-btn:hover { box-shadow:0 6px 20px rgba(15, 118, 110,.28); }

/* Clear navigation hierarchy: primary pages visible, supporting tools in one menu. */
.nav-tabs { position:relative; z-index:50; display:flex; flex-wrap:nowrap; align-items:center; justify-content:stretch; gap:.4rem; padding:.55rem; border-radius:20px; overflow:visible; background:var(--glass-bg); border:1px solid var(--glass-border); box-shadow:var(--shadow-sm); }
.nav-tabs > .nav-tab { flex:1 1 0; min-width:0; padding:.55rem .65rem; font-size:.84rem; }
.nav-tabs .nav-tab.active { background:var(--primary-gradient); border-color:rgba(255,255,255,.25); box-shadow:0 5px 14px rgba(15, 118, 110,.24); }
.nav-more { position:relative; flex:0 0 auto; }
.nav-more-summary { min-height:44px; display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.55rem .8rem; border:1px solid var(--glass-border); border-radius:14px; background:rgba(255,255,255,.035); color:var(--text-main); font:700 .84rem 'Cairo',sans-serif; white-space:nowrap; cursor:pointer; list-style:none; }
.nav-more-summary::-webkit-details-marker,.mobile-more-nav > summary::-webkit-details-marker { display:none; }
.nav-more[open] > .nav-more-summary,.nav-more:has(.nav-tab.active) > .nav-more-summary { color:#fff; background:var(--primary-gradient); }
.nav-more-menu { position:absolute; top:calc(100% + .6rem); inset-inline-end:0; display:grid; grid-template-columns:1fr; gap:.35rem; width:max-content; min-width:235px; max-height:min(70vh,520px); overflow-y:auto; padding:.55rem; border:1px solid var(--glass-border); border-radius:18px; background:var(--glass-bg); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); box-shadow:var(--shadow-lg); }
.nav-more-menu .nav-tab { justify-content:flex-start; width:100%; padding:.55rem .75rem; border-radius:12px; }
.mobile-more-nav { display:none; }

/* Glass surfaces use a consistent blur, translucent fill, and fine border. */
.main-header,.supervisor-hero-card,.daily-quests-card,.placement-banner-card,.unit-node-card,.feature-hero-card,.profile-progress-card,.review-word-card,.cefr-level-card { background:var(--glass-bg); border-color:var(--glass-border); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:var(--shadow-md); }
.supervisor-hero-card { background:linear-gradient(125deg,rgba(15, 118, 110,.1),rgba(244, 183, 64,.045)),var(--glass-bg); }
.supervisor-hero-card::before,.supervisor-hero-card::after { background:radial-gradient(circle,rgba(15, 118, 110,.1) 0%,transparent 70%); }
.supervisor-img { border-color:#0F766E; box-shadow:0 0 16px rgba(15, 118, 110,.24); }
.quest-item,.story-side-card,.dictation-card { background:rgba(255,255,255,.035); border-color:var(--glass-border); }
.quest-icon .glass-svg stop { stop-color:var(--primary-light)!important; }
.placement-banner-card { background:linear-gradient(120deg,rgba(15, 118, 110,.1),rgba(244, 183, 64,.05)),var(--glass-bg); }
.unit-node-card { transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.unit-node-card:hover { transform:translateY(-3px); border-color:rgba(15, 118, 110,.38); box-shadow:var(--shadow-lg); }
.status-pill .glass-svg stop { stop-color:currentColor!important; }
.nav-tabs .glass-svg stop,.mobile-bottom-bar .glass-svg stop { stop-color:var(--primary-light)!important; }
.brand-icon .glass-svg stop { stop-color:#fff!important; }
.cefr-level-card.cefr-active { border-color:rgba(15, 118, 110,.4); background:linear-gradient(145deg,rgba(15, 118, 110,.08),var(--glass-bg) 65%); }
.placement-option:has(input:checked) { border-color:var(--primary-light); background:rgba(15, 118, 110,.08); }
.placement-assessment-actions { background:var(--glass-bg); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.placement-btn { background:var(--primary-gradient); }
.bottom-nav-item.active .b-icon { filter:drop-shadow(0 0 8px rgba(15, 118, 110,.35)); }
.bottom-nav-item.active::after { box-shadow:0 0 8px rgba(15, 118, 110,.32); }
.glass-svg { filter:drop-shadow(0 2px 4px rgba(16,37,28,.14)); }
.pill-streak .glass-svg stop,.pill-xp .glass-svg stop { stop-color:var(--gold-accent)!important; }
[data-theme="light"] .supervisor-hero-card { background:linear-gradient(125deg,rgba(15, 118, 110,.07),rgba(244, 183, 64,.04)),var(--glass-bg)!important; border-color:var(--glass-border)!important; }
[data-theme="light"] .placement-banner-card { background:linear-gradient(120deg,rgba(15, 118, 110,.07),rgba(244, 183, 64,.04)),var(--glass-bg)!important; border-color:var(--glass-border)!important; }
[data-theme="light"] .mobile-bottom-bar { background:var(--glass-bg); }
.daily-quests-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.quest-item { min-width:0; }
.quest-desc,.quest-title { overflow-wrap:anywhere; }
.tag-numbers,.tag-phonics,.tag-vocab,.tag-cambridge { color:var(--primary-light); background:rgba(15, 118, 110,.08); border-color:rgba(15, 118, 110,.2); }
.quest-icon .glass-svg stop { stop-color:var(--primary-light)!important; }
.glass-svg stop { stop-color:var(--primary-light)!important; }
.status-pill .glass-svg stop { stop-color:currentColor!important; }
.pill-streak .glass-svg stop,.pill-xp .glass-svg stop { stop-color:var(--gold-accent)!important; }
.review-controls [data-review-action="easy"] { background:#047857!important; border:1px solid #10b981!important; color:#fff!important; }
.review-controls [data-review-action="good"] { background:#fffbeb!important; border:1px solid #D99A16!important; color:#92400e!important; }
.review-controls [data-review-action="hard"] { background:#fef2f2!important; border:1px solid #ef4444!important; color:#b91c1c!important; }
.review-controls [data-review-action]:hover { transform:translateY(-1px); filter:brightness(.98); }

@media (min-width:821px) and (max-width:1023px) {
  .container { width:min(100% - 2rem,960px); max-width:960px; }
  .header-content { flex-wrap:nowrap; gap:.65rem; }
  .brand { flex:0 0 auto; }
  .status-pill-group { flex:1 1 auto; justify-content:center; gap:.35rem; }
  .header-actions { flex:0 0 auto; gap:.35rem; }
  .status-pill { padding:.35rem .55rem; font-size:.78rem; }
  .nav-tabs > .nav-tab { font-size:.78rem; padding-inline:.45rem; }
  .daily-quests-grid { grid-template-columns:1fr; }
  .path-container { display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
  .path-node-wrapper { max-width:min(100%,860px); }
}

@media (min-width:1024px) and (max-width:1439px) {
  .path-container { align-items:center; }
  .path-node-wrapper { max-width:min(100%,860px); }
}

@media (min-width: 1440px) {
  .container { width:min(100% - 4rem, 1400px); }
  .path-container { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem 2rem; }
}
@media (max-width: 1023px) {
  .story-workspace { grid-template-columns:1fr 1.3fr; }
  .nav-tab { flex:1 1 18%; }
}
@media (max-width: 820px) {
  .container { width:min(100% - 1.25rem, 760px); }
  .mobile-bottom-bar { justify-content:space-around; overflow:visible; overscroll-behavior-x:contain; padding-inline:.25rem; background:var(--glass-bg); border-top:1px solid var(--glass-border); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
  .bottom-nav-item { flex:1 1 0; min-width:0; padding-inline:.15rem; }
  .bottom-nav-item .b-label { font-size:clamp(.58rem,2.5vw,.7rem); white-space:nowrap; }
  .mobile-more-nav { display:flex; flex:1 1 0; position:relative; height:100%; align-items:stretch; }
  .mobile-more-nav > summary { list-style:none; }
  .mobile-more-nav > summary::-webkit-details-marker { display:none; }
  .mobile-more-menu { position:absolute; bottom:calc(100% + .65rem); inset-inline-end:.5rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; width:min(300px,calc(100vw - 1rem)); max-height:min(65vh,430px); overflow-y:auto; padding:.55rem; border:1px solid var(--glass-border); border-radius:18px; background:var(--glass-bg); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); box-shadow:var(--shadow-lg); }
  .mobile-more-menu .bottom-nav-item { min-width:0; min-height:50px; flex-direction:row; justify-content:flex-start; gap:.45rem; padding:.45rem .5rem; border:1px solid var(--glass-border); border-radius:12px; background:rgba(255,255,255,.035); text-align:right; }
  .mobile-more-menu .bottom-nav-item .b-label { white-space:normal; text-align:right; line-height:1.35; }
  .mobile-more-nav:has(.bottom-nav-item.active) > summary { color:var(--primary-light); }
  .story-workspace { grid-template-columns:1fr; }
  .profile-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cefr-level-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cefr-roadmap-heading { align-items:flex-start; flex-direction:column; }
  .daily-quests-grid { grid-template-columns:1fr; }
}
@media (max-width: 540px) {
  .container { width:calc(100% - 1rem); }
  .header-content { gap:.5rem; justify-content:center; }
  .brand { margin-inline-end:auto; }
  .status-pill-group { order:3; width:100%; justify-content:center; gap:.35rem; }
  .status-pill { min-height:32px; padding:.25rem .55rem; font-size:.76rem; }
  .header-actions { margin-inline-start:auto; }
  .profile-entry-label { display:none; }
  .feature-hero-card { margin-inline:-.1rem; }
  .profile-hero { align-items:flex-start; }
  .profile-avatar-large { width:68px; height:68px; }
  .dictation-controls .unit-action-btn { flex:1 1 100%; }
  .placement-assessment-actions { position:sticky; bottom:0; padding:.6rem 0; background:var(--bg-card); }
  .cefr-level-grid { grid-template-columns:1fr; }
  .cefr-level-card p { min-height:0; }
  .daily-quests-grid { grid-template-columns:1fr; }
  .header-content { flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* High-contrast speaking controls: readable in both light and dark themes. */
.btn-speak-listen {
  background: #0F766E !important;
  border: 1px solid #0F766E !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(15, 118, 110, .2) !important;
}
.btn-speak-listen:hover {
  background: #115E59 !important;
  border-color: #115E59 !important;
  color: #ffffff !important;
}
.btn-speak-mic {
  background: #0369A1 !important;
  border: 1px solid #0369A1 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(3, 105, 161, .2) !important;
}
.btn-speak-mic:hover {
  background: #0F766E !important;
  border-color: #0F766E !important;
  color: #ffffff !important;
}
.btn-speak-mic.recording,
.btn-speak-mic.recording:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}
.btn-speak-listen .glass-svg stop,
.btn-speak-mic .glass-svg stop { stop-color: #ffffff !important; }
.speaking-target-ar,
.speaking-item-card .ar-phrase { color: #475569 !important; }
[data-theme="dark"] .speaking-target-ar,
[data-theme="dark"] .speaking-item-card .ar-phrase { color: #cbd5e1 !important; }

/* Keep the full interface on one cheerful, accessible learning palette. */
.nav-tab.active,
.nav-tabs .nav-tab.active,
.nav-more[open] > .nav-more-summary,
.nav-more:has(.nav-tab.active) > .nav-more-summary,
.nav-more.open > .nav-more-summary {
  background: linear-gradient(135deg, #0f766e 0%, #0369a1 100%) !important;
  color: #ffffff !important;
}
.tag-numbers { color:#047857; background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.3); }
.tag-phonics { color:#0369a1; background:rgba(3,105,161,.1); border-color:rgba(3,105,161,.25); }
.tag-vocab { color:#9a6700; background:rgba(244,183,64,.18); border-color:rgba(217,154,22,.38); }
.tag-cambridge { color:#0f766e; background:rgba(15,118,110,.1); border-color:rgba(15,118,110,.25); }
.exam-tier-badge.tier-typing { background:rgba(3,105,161,.12); color:#0369a1; border-color:rgba(3,105,161,.3); }
.exam-tier-badge.tier-grammar { background:rgba(15,118,110,.12); color:#0f766e; border-color:rgba(15,118,110,.3); }

/* ==========================================
   AI LIVE VOICE CONVERSATION & NEWS ARTICLES
   ========================================== */
.ai-chat-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ai-scenario-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.ai-scenario-info {
  flex: 1;
  min-width: 250px;
}

.ai-scenario-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.ai-scenario-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.ai-scenario-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.ai-chat-feed {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  min-height: 420px;
  max-height: 600px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  backdrop-filter: blur(16px);
}

.ai-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  animation: fadeIn 0.3s ease;
}

.ai-msg.tutor {
  align-self: flex-start;
}

.ai-msg.student {
  align-self: flex-end;
}

.ai-msg-bubble {
  padding: 1rem 1.25rem;
  border-radius: 18px;
  position: relative;
  font-size: 1rem;
  line-height: 1.6;
}

.ai-msg.tutor .ai-msg-bubble {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.15), rgba(3, 105, 161, 0.15));
  border: 1px solid rgba(15, 118, 110, 0.35);
  color: var(--text-main);
  border-bottom-right-radius: 4px;
}

.ai-msg.student .ai-msg-bubble {
  background: linear-gradient(135deg, #0F766E, #0369A1);
  color: #ffffff;
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 15px rgba(15, 118, 110, 0.3);
}

.ai-msg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.ai-msg.student .ai-msg-header {
  color: rgba(255, 255, 255, 0.8);
}

.ai-msg-en {
  font-size: 1.05rem;
  font-weight: 600;
  direction: ltr;
  text-align: left;
  margin-bottom: 0.35rem;
}

.ai-msg-ar {
  font-size: 0.9rem;
  color: var(--text-muted);
  border-top: 1px dashed var(--border);
  padding-top: 0.4rem;
  margin-top: 0.4rem;
}

.ai-msg.student .ai-msg-ar {
  color: rgba(255, 255, 255, 0.85);
  border-top-color: rgba(255, 255, 255, 0.2);
}

/* Mistake & Pronunciation Correction Box */
.ai-correction-card {
  margin-top: 0.6rem;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  color: var(--text-main);
  font-size: 0.9rem;
}

[data-theme="light"] .ai-correction-card {
  background: #fef2f2;
  border-color: #fca5a5;
}

.ai-correction-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  color: #ef4444;
  margin-bottom: 0.35rem;
}

.ai-correction-body {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.ai-corrected-sentence {
  background: rgba(16, 185, 129, 0.12);
  border: 1px dashed rgba(16, 185, 129, 0.4);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  color: #10b981;
  font-weight: 700;
  direction: ltr;
  text-align: left;
  margin-bottom: 0.5rem;
}

.ai-retry-pronounce-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #F4B740, #D99A16);
  color: #1e1b4b;
  border: none;
  border-radius: var(--radius-full);
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}

.ai-retry-pronounce-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(244, 183, 64, 0.4);
}

/* Bottom Live Voice Control Bar */
.ai-chat-input-bar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: var(--shadow-md);
}

.ai-live-mic-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #0F766E, #0369A1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(15, 118, 110, 0.35);
}

.ai-live-mic-btn:hover {
  transform: scale(1.08);
}

.ai-live-mic-btn.recording {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  animation: pulseMic 1.4s infinite;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.5) !important;
}

@keyframes pulseMic {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.ai-input-text {
  flex: 1;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.75rem 1.25rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-main);
  outline: none;
}

[data-theme="light"] .ai-input-text {
  background: #ffffff;
}

.ai-input-text:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
}

.ai-send-btn {
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-full);
  border: none;
  background: var(--primary-gradient);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.ai-send-btn:hover {
  transform: translateY(-2px);
}

/* CEFR Level Unlock Buttons */
.cefr-level-btn-row {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cefr-btn-action {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--primary-gradient);
  color: #fff;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cefr-btn-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(3, 105, 161, 0.3);
}

/* Articles and News Tab */
.story-tab-switch {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  background: var(--bg-card);
  padding: 0.35rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  width: fit-content;
}

.story-sub-tab {
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.story-sub-tab.active {
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.article-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  backdrop-filter: blur(16px);
  margin-top: 1rem;
}

.article-paragraph-box {
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

[data-theme="light"] .article-paragraph-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.article-vocab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.article-vocab-card {
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}



/* Certificate refinement: safe footer grid, learner portrait, and level-specific identities. */
.formal-certificate-card .certificate-center{inset:17% 8% 37%!important;gap:clamp(2px,.5cqw,6px)!important}
.formal-certificate-card .certificate-main-title{font-size:clamp(22px,3.5cqw,40px)!important}
.formal-certificate-card .certificate-learner-name{font-size:clamp(30px,5.1cqw,58px)!important;min-height:0!important;border:0!important;border-bottom:1px solid var(--certificate-frame,#c99738)!important;border-radius:0!important}
.formal-certificate-card .certificate-level{font-size:clamp(17px,2.15cqw,25px)!important;letter-spacing:.09em!important}
.formal-certificate-card .certificate-code-row{left:12%!important;right:12%!important;bottom:6%!important;height:16%!important;display:grid!important;grid-template-columns:minmax(0,1fr) 12cqw minmax(0,1fr) 12cqw!important;gap:1.2cqw!important;align-items:center!important;overflow:visible!important}
.formal-certificate-card .certificate-code-row>.certificate-signature:nth-child(1){grid-column:1!important;grid-row:1!important}
.formal-certificate-card .certificate-code-row>.certificate-seal{grid-column:2!important;grid-row:1!important;width:8.5cqw!important;height:9.8cqw!important;justify-self:center!important;align-self:center!important}
.formal-certificate-card.certificate-final .certificate-code-row>.certificate-seal{width:10cqw!important;height:12cqw!important}
.formal-certificate-card .certificate-code-row>.certificate-signature:nth-child(3){grid-column:3!important;grid-row:1!important}
.formal-certificate-card .certificate-code-row>.certificate-qr-block{grid-column:4!important;grid-row:1!important;justify-self:center!important;align-self:center!important;width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;text-align:center!important;overflow-wrap:anywhere!important}
.formal-certificate-card .certificate-qr{width:min(100%,6.2cqw)!important;height:auto!important;aspect-ratio:1!important;margin:0 auto!important;padding:2px!important}
.formal-certificate-card .certificate-qr-block>span,.formal-certificate-card .certificate-verify,.formal-certificate-card .certificate-verify-url{display:block;max-width:100%;font-size:clamp(6px,.62cqw,8px)!important;line-height:1.15;overflow-wrap:anywhere}
.formal-certificate-card .certificate-signature{min-width:0;align-content:center!important}
.formal-certificate-card .certificate-signature hr{width:100%;margin:.2mm 0!important;border:0;border-top:1px solid var(--certificate-accent,#14284b)!important}
.formal-certificate-card .certificate-signature i{height:auto!important;min-height:5mm;display:grid;place-items:end center;max-width:100%;overflow:hidden;color:#5a1424;font:italic clamp(15px,2.1cqw,24px)/1.1 "Cormorant Garamond",Georgia,serif!important;white-space:nowrap}
.formal-certificate-card .certificate-signature small{font-size:clamp(6px,.68cqw,9px)!important;letter-spacing:.08em}
.formal-certificate-card.certificate-template-card .certificate-stats{bottom:32%!important}
.formal-certificate-card.certificate-template-card .certificate-foot{bottom:25%!important}
.formal-certificate-card[data-level="A1"]{border-style:solid!important;border-width:2px!important}
.formal-certificate-card[data-level="A1"]::before{box-shadow:inset 0 0 0 1px #14284b55!important}
.formal-certificate-card[data-level="A2"]{border-style:double!important;border-width:5px!important}
.formal-certificate-card[data-level="B1"]::before{box-shadow:inset 0 0 0 2px #0e749055,inset 0 0 0 7px #fffdf7,inset 0 0 0 8px #0e749033!important}
.formal-certificate-card[data-level="B2"]{border-width:3px!important;box-shadow:0 0 0 4px #fbf7ec,0 0 0 7px #b98a2e,0 14px 38px #0f172a26!important}
.formal-certificate-card[data-level="C1"]::before{box-shadow:inset 0 0 0 2px #5b3f8c66,inset 0 0 0 8px #fffdf7,inset 0 0 0 9px #5b3f8c33!important}
.formal-certificate-card[data-level="C2"]{border-width:4px!important;box-shadow:0 0 0 4px #fbf7ec,0 0 0 7px #5a1424,0 14px 38px #0f172a26!important}
.formal-certificate-card.certificate-final{border-width:5px!important;box-shadow:0 0 0 4px #fbf7ec,0 0 0 8px #8a6420,0 14px 38px #0f172a26!important}
@media(max-width:650px){.formal-certificate-card .certificate-code-row{left:10%!important;right:10%!important;bottom:5%!important;height:17%!important;grid-template-columns:minmax(0,1fr) 12cqw minmax(0,1fr) 12cqw!important;gap:1cqw!important}.formal-certificate-card .certificate-center{inset:17% 6% 38%!important}.formal-certificate-card .certificate-code-row>.certificate-seal{width:8cqw!important;height:9cqw!important}.formal-certificate-card.certificate-final .certificate-code-row>.certificate-seal{width:10cqw!important;height:12cqw!important}.formal-certificate-card .certificate-qr{width:6.2cqw!important}}
@media print{.formal-certificate-card .certificate-center{inset:17% 8% 37%!important}.formal-certificate-card .certificate-code-row{left:12%!important;right:12%!important;bottom:6%!important;height:16%!important;grid-template-columns:minmax(0,1fr) 12cqw minmax(0,1fr) 12cqw!important}.formal-certificate-card .certificate-qr{width:6.2cqw!important}}
/* Readable learner name and a real signatory label; remove the demo initials badge. */
.formal-certificate-card .certificate-learner-name{font-family:"Cormorant Garamond",Georgia,serif!important;font-style:normal!important;font-weight:600!important;letter-spacing:.025em!important;text-transform:none!important;white-space:normal!important;overflow-wrap:anywhere!important}
.unit-reading-card {
  width: 100%;
  margin: 0 0 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--border, #dbe3ee);
  border-radius: 18px;
  background: var(--bg-card, #fff);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
  box-sizing: border-box;
}
.unit-reading-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.unit-reading-heading h3 { margin:.2rem 0; font-size:clamp(1.05rem, 2vw, 1.3rem); }
.unit-reading-listen { min-height:44px; padding:.65rem 1rem; border:0; border-radius:999px; background:var(--primary-gradient, #4f46e5); color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.unit-reading-text { max-width:78ch; margin:1rem auto; color:var(--text-main, #172033); font-size:clamp(1rem, 1.5vw, 1.1rem); line-height:1.9; overflow-wrap:anywhere; }
.unit-reading-questions { display:grid; gap:.75rem; margin-top:1.1rem; }
.unit-reading-questions > strong { color:var(--text-main, #172033); }
.unit-reading-question { min-width:0; padding:.8rem; border:1px solid var(--border, #dbe3ee); border-radius:14px; }
.unit-reading-question legend { max-width:100%; padding:0 .25rem; font-weight:700; line-height:1.6; }
.unit-reading-choice { min-height:42px; margin:.35rem .25rem .1rem 0; padding:.55rem .8rem; border:1px solid var(--border, #dbe3ee); border-radius:10px; background:var(--bg-secondary, #f5f7fb); color:var(--text-main, #172033); font:inherit; text-align:left; cursor:pointer; }
.unit-reading-choice:disabled { cursor:default; opacity:1; }
.unit-reading-choice.is-correct { border-color:#15966b; background:#e7f7ef; color:#126342; }
.unit-reading-choice.is-incorrect { border-color:#dc5656; background:#fff0f0; color:#9b2929; }
.unit-reading-feedback { display:block; margin-top:.45rem; color:var(--text-muted, #64748b); font-size:.9rem; line-height:1.6; }
@media (max-width:600px) {
  .unit-reading-card { padding:1rem; border-radius:14px; }
  .unit-reading-choice { display:block; width:100%; margin:.45rem 0; text-align:left; }
}