/**
 * MIKA Academy — Green · White · Yellow · Black
 * Student-readable theme: high contrast, larger type, light surfaces.
 * Load LAST (after all other stylesheets).
 */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --mika-green:       #27AE60;
  --mika-green-bright:#2ECC71;
  --mika-green-dark:  #1E8449;
  --mika-green-light: #E8F8EE;
  --mika-green-pale:  #F0FBF4;
  --mika-yellow:      #F9CA24;
  --mika-yellow-pale: #FFFDE7;
  --mika-black:       #1A1A1A;
  --mika-text:        #1A2E1A;
  --mika-text-2:      #3D5C3D;
  --mika-text-muted:  #5A7A5A;
  --mika-white:       #FFFFFF;
  --mika-border:      #C8E6C9;

  --bg-main:          #F8FFFE;
  --bg-card:          #FFFFFF;
  --bg-section:       #F0FBF4;
  --bg-yellow:        #FFFDE7;
  --bg-base:          #F8FFFE;
  --bg-elevated:      #FFFFFF;
  --bg-surface:       #F0FBF4;
  --primary:          #27AE60;
  --primary-dark:     #1E8449;
  --primary-light:    #E8F8EE;
  --accent:           #F9CA24;
  --text-primary:     #1A2E1A;
  --text-secondary:   #3D5C3D;
  --text-muted:       #5A7A5A;
  --text:             #1A2E1A;
  --color-primary:    #27AE60;
  --orange:           #27AE60;
  --green:            #27AE60;
  --font-arabic:      'Cairo', 'Tajawal', 'Segoe UI', sans-serif;
}

/* ── Global typography (students: clear & large) ─────────── */
html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

body,
#content,
.mkp-portal,
.mhi-portal,
.mcs-screen,
.mle-root,
.k12-home-wrapper {
  font-family: var(--font-arabic) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--mika-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.mhi-hero-title,
.mhi-hub-title,
.mcs-title,
.mle-stage-title,
.k12-page-header h2,
.snake-path-header-title {
  color: var(--mika-black) !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

p, li, span, label, small,
.mhi-hub-sub,
.mcs-sub,
.mle-body-text,
.k12sr-lesson-body {
  line-height: 1.7 !important;
}

/* ── Page shell — light green/white ────────────────────────── */
body {
  background: var(--bg-main) !important;
  color: var(--mika-text) !important;
}

#content {
  background: transparent !important;
  color: var(--mika-text) !important;
  padding: 12px 10px 24px !important;
}

/* ── Header & stats ────────────────────────────────────────── */
header,
.header,
.app-header {
  background: var(--mika-white) !important;
  border-bottom: 2px solid var(--mika-border) !important;
  box-shadow: 0 2px 10px rgba(39, 174, 96, 0.08) !important;
  color: var(--mika-text) !important;
}

header h1,
#app-title,
.header-title-group h1,
.stat-value,
#xp-display,
#streak-display {
  color: var(--mika-black) !important;
}

.header-subtitle,
#xp-label,
#hearts-label,
#streak-label,
.stat-item span:not(.stat-value) {
  color: var(--mika-text-2) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

/* ── Portal hub (was dark navy) ────────────────────────────── */
.mhi-portal,
.mhi-portal-dark,
.mhi-subview,
.mkp-portal {
  background: var(--bg-main) !important;
  color: var(--mika-text) !important;
  min-height: 100vh;
}

.mhi-hero,
.mhi-hero-compact,
.mkp-hero {
  background: linear-gradient(135deg, var(--mika-green-dark) 0%, var(--mika-green-bright) 55%, var(--mika-green) 100%) !important;
  color: var(--mika-white) !important;
  border-bottom: 3px solid var(--mika-yellow) !important;
}

.mhi-hero-title,
.mkp-hero-title,
.mhi-hero-desc,
.mkp-hero-sub {
  color: var(--mika-white) !important;
}

.mhi-hero-desc,
.mkp-hero-sub {
  opacity: 1 !important;
  font-weight: 600 !important;
}

.mhi-hero-cta-row {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.mhi-hero-cta {
  background: #F9CA24 !important;
  color: #1A1A1A !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-family: Cairo, sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.mhi-cd {
  color: #FFFFFF !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

#mika-wa-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9990;
  background: #25D366;
  border-radius: 99px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  font-family: Cairo, sans-serif;
  font-weight: 900;
  font-size: 13px;
  color: #fff !important;
  animation: mikaWaPulse 2s ease-in-out infinite;
}

@keyframes mikaWaPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45); }
  50% { box-shadow: 0 10px 28px rgba(37, 211, 102, 0.75); }
}

@media (max-width: 640px) {
  #mika-wa-fixed { bottom: 88px; right: 12px; padding: 10px 12px; font-size: 12px; }
  #hudhud-fab { bottom: 88px; }
}

.mhi-hub-card,
.mhi-subview .mhi-card,
.mkp-card {
  background: var(--mika-white) !important;
  border: 2px solid var(--mika-border) !important;
  color: var(--mika-text) !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.06) !important;
}

.mhi-hub-title,
.mhi-subview .mhi-card-title,
.mkp-card-title {
  color: var(--mika-black) !important;
  font-size: 1.05rem !important;
}

.mhi-hub-sub,
.mhi-subview .mhi-card-sub,
.mkp-card-sub {
  color: var(--mika-text-2) !important;
  font-size: 0.92rem !important;
}

.mhi-hub-card::before {
  background: var(--hub-clr, var(--mika-green)) !important;
}

.mhi-hub-new {
  background: var(--mika-yellow) !important;
  color: var(--mika-black) !important;
}

.mhi-back-btn,
.mcs-back-btn,
.k12-back-btn,
.mika-back-btn,
.summer-back-btn {
  background: var(--mika-white) !important;
  color: var(--mika-green-dark) !important;
  border: 2px solid var(--mika-green) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
}

.mhi-sub-title {
  color: var(--mika-black) !important;
}

.mhi-sub-note {
  background: var(--mika-yellow-pale) !important;
  color: var(--mika-text) !important;
  border-right: 4px solid var(--mika-yellow) !important;
  font-weight: 600 !important;
}

/* ── Subject selector (curriculum picker) ─────────────────── */
.mcs-screen,
.mcs-home {
  background: var(--bg-main) !important;
  color: var(--mika-text) !important;
}

.mcs-hub-btn,
.mcs-grade-btn,
.mcs-subject-btn,
.mcs-term-btn {
  background: var(--mika-white) !important;
  border: 2px solid var(--mika-border) !important;
  color: var(--mika-text) !important;
}

.mcs-hub-summer {
  border-color: var(--mika-yellow) !important;
  background: var(--mika-yellow-pale) !important;
}

.mcs-title,
.mcs-hub-text strong,
.mcs-sub-body strong,
.mcs-grade-label,
.mcs-sub-body strong {
  color: var(--mika-black) !important;
  font-size: 1.05rem !important;
}

.mcs-sub,
.mcs-hub-text small,
.mcs-sub-body small {
  color: var(--mika-text-2) !important;
  font-size: 0.9rem !important;
}

.mcs-grade-count {
  color: var(--mika-green-dark) !important;
  font-weight: 800 !important;
}

.mcs-grade-btn.is-disabled,
.mcs-term-btn.is-disabled {
  opacity: 0.55 !important;
  color: var(--mika-text-muted) !important;
}

/* ── K12 cards & grade picker ─────────────────────────────── */
#content .k12-page-wrapper,
#content .k12-stage-block,
#content .k12-grades-list {
  color: var(--mika-text) !important;
}

#content .k12-subject-card,
#content .k12-grade-card,
#content .k12-grade-row {
  background: var(--mika-white) !important;
  border: 2px solid var(--mika-border) !important;
  color: var(--mika-text) !important;
}

#content .k12-subject-title,
#content .k12-grade-label,
#content .k12-grade-name,
#content .k12-grade-num,
#content .k12-stage-htitle {
  color: var(--mika-black) !important;
}

#content .k12-grade-subjects-count,
#content .k12-subject-info {
  color: var(--mika-text-2) !important;
}

#content .k12-page-header {
  background: linear-gradient(135deg, var(--mika-green-dark), var(--mika-green-bright)) !important;
  color: var(--mika-white) !important;
}

#content .k12-page-header * {
  color: var(--mika-white) !important;
}

/* ── Lesson engine (Duolingo flow) — light readable ────────── */
.mika-v93-theme,
.mika-v93-theme body,
.mle-root {
  background: var(--bg-main) !important;
  color: var(--mika-text) !important;
}

.mle-root .mika-card,
.mle-stage-card,
.mle-spark-card,
.mle-story-panel,
.mle-battle-q {
  background: var(--mika-white) !important;
  border: 2px solid var(--mika-border) !important;
  color: var(--mika-text) !important;
}

.mle-root p,
.mle-root .mle-concept,
.mle-root .mle-story-text,
.mle-root .mle-q-text {
  color: var(--mika-text) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
}

.mle-play-btn,
.mle-root .mle-play-btn,
.mle-play-grid button {
  background: var(--mika-white) !important;
  color: var(--mika-black) !important;
  border: 2px solid var(--mika-green) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
}

.mle-play-btn.is-correct {
  background: var(--mika-green-light) !important;
  color: var(--mika-green-dark) !important;
  border-color: var(--mika-green-dark) !important;
}

.mle-play-btn.is-wrong {
  background: #FFEBEE !important;
  color: #B71C1C !important;
  border-color: #C62828 !important;
}

.mle-title,
.mle-subtitle,
.mle-question,
.mle-hint,
.mle-speech-text,
.mle-stage-label {
  color: var(--mika-black) !important;
}

.mle-hint--highlight,
.mle-tip-box {
  background: var(--mika-yellow-pale) !important;
  border-color: var(--mika-yellow) !important;
  color: var(--mika-black) !important;
}

.mle-topbar {
  background: var(--mika-white) !important;
  border-bottom: 2px solid var(--mika-border) !important;
}

.mle-close {
  color: var(--mika-black) !important;
  background: var(--mika-green-pale) !important;
}

.hh-bubble-v93__speech {
  font-weight: 800 !important;
  font-size: 15px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

/* ── Quiz / exam options — white cards, dark text ──────────── */
.btn-option,
.k12-q-option,
.k12sr-q-option,
.mika-choice-btn,
.exam-option,
.option {
  background: var(--mika-white) !important;
  color: var(--mika-black) !important;
  border: 2px solid var(--mika-border) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.btn-option:hover,
.k12-q-option:hover,
.mika-choice-btn:hover {
  border-color: var(--mika-green) !important;
  background: var(--mika-green-light) !important;
  color: var(--mika-black) !important;
}

.btn-option.selected {
  border-color: var(--mika-green) !important;
  background: var(--mika-green-light) !important;
  color: var(--mika-green-dark) !important;
}

.btn-option.correct,
.k12-q-option.correct {
  border-color: var(--mika-green-dark) !important;
  background: var(--mika-green-light) !important;
  color: var(--mika-green-dark) !important;
}

.btn-option.wrong,
.k12-q-option.wrong {
  border-color: #C62828 !important;
  background: #FFEBEE !important;
  color: #B71C1C !important;
}

.mika-v93-theme .btn-option {
  color: var(--mika-black) !important;
}

/* ── Primary buttons — green + white text ──────────────────── */
.btn-primary,
.btn-mika,
[class*="btn-primary"],
button[class*="primary"]:not(.lang-btn) {
  background: linear-gradient(135deg, var(--mika-green-bright), var(--mika-green-dark)) !important;
  color: var(--mika-white) !important;
  border: none !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 14px rgba(39, 174, 96, 0.35) !important;
}

/* ── Hub cards (k12_home_portal) ─────────────────────────── */
.hub-card:not([class*="hub-card--"]) {
  background: var(--mika-white) !important;
  border: 2px solid var(--mika-border) !important;
  color: var(--mika-text) !important;
}

.hub-card__title {
  color: var(--mika-black) !important;
}

.hub-card__subtitle {
  color: var(--mika-text-2) !important;
}

.hub-card--egypt {
  background: linear-gradient(135deg, var(--mika-green-dark), var(--mika-green)) !important;
  color: var(--mika-white) !important;
}

.hub-card--summer {
  background: linear-gradient(135deg, var(--mika-yellow), #F0B429) !important;
  color: var(--mika-black) !important;
}

.hub-card--hudhud {
  background: linear-gradient(135deg, #1A1A1A, #2D2D2D) !important;
  color: var(--mika-white) !important;
}

.hub-card--diploma {
  background: linear-gradient(135deg, var(--mika-green), #1B5E20) !important;
  color: var(--mika-white) !important;
}

.hub-card__badge--new {
  background: var(--mika-yellow) !important;
  color: var(--mika-black) !important;
}

/* ── Summer program ────────────────────────────────────────── */
.page--summer #content,
.mika-summer {
  background: var(--bg-main) !important;
  color: var(--mika-text) !important;
}

.mika-summer .ms-hero {
  background: linear-gradient(135deg, var(--mika-green-dark) 0%, var(--mika-green-bright) 55%, var(--mika-green) 100%) !important;
  border-bottom: 4px solid var(--mika-yellow) !important;
}

.mika-summer .ms-hero-title {
  color: var(--mika-white) !important;
  font-size: 2rem !important;
}

.mika-summer .ms-hero-sub {
  color: var(--mika-white) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.mika-summer .ms-hbadge {
  background: var(--mika-white) !important;
  color: var(--mika-black) !important;
  border: 2px solid var(--mika-yellow) !important;
}

.mika-summer .ms-hbadge span,
.mika-summer .ms-hbadge .btn-text {
  color: var(--mika-black) !important;
}

.mika-summer .ms-back-btn,
.summer-back-btn {
  background: var(--mika-white) !important;
  color: var(--mika-green-dark) !important;
  border: 2px solid var(--mika-green) !important;
  font-weight: 800 !important;
}

.mika-summer .ms-section-title {
  color: var(--mika-black) !important;
  font-size: 1.15rem !important;
}

.mika-summer .ms-grade-card {
  background: var(--mika-white) !important;
  border: 2px solid var(--mika-border) !important;
  color: var(--mika-text) !important;
  box-shadow: 0 3px 14px rgba(39, 174, 96, 0.1) !important;
}

.mika-summer .ms-gc-title {
  color: var(--mika-black) !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
}

.mika-summer .ms-gc-desc {
  color: var(--mika-text-2) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

.mika-summer .ms-grade-card--g6 { border-right: 5px solid var(--mika-green) !important; }
.mika-summer .ms-grade-card--g9 { border-right: 5px solid var(--mika-yellow) !important; }
.mika-summer .ms-grade-card--g10 { border-right: 5px solid var(--mika-green-dark) !important; }

.mika-summer .ms-content-section,
.mika-summer .ms-item {
  background: var(--mika-white) !important;
  color: var(--mika-text) !important;
  border-color: var(--mika-border) !important;
}

.mika-summer .ms-item-title {
  color: var(--mika-black) !important;
}

.mika-summer .ms-cs-desc,
.mika-summer .ms-item-meta {
  color: var(--mika-text-2) !important;
}

.summer-subject-card,
#content .summer-subject-card {
  color: var(--mika-black) !important;
}

.summer-subject-card {
  background: var(--mika-white) !important;
  border: 2px solid var(--mika-border) !important;
}

.summer-subject-card .ssc-info h3 {
  color: var(--mika-black) !important;
  font-weight: 800 !important;
}

.summer-subject-card .ssc-info p {
  color: var(--mika-text-2) !important;
  font-weight: 600 !important;
}

.ssc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  justify-content: center;
}
.ssc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  font-family: Cairo, sans-serif;
}
.ssc-badge--free {
  background: #E8F8EE;
  color: #1E8449;
  border: 1px solid #27AE60;
}
.ssc-badge--paid {
  background: #FFFDE7;
  color: #1A1A1A;
  border: 1px solid #F9CA24;
}

.mhi-hero-cta-row {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.mhi-hero-cta {
  background: #F9CA24 !important;
  color: #1A1A1A !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-family: Cairo, sans-serif !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(249, 202, 36, 0.35);
}
.mhi-cd {
  color: #FFFFFF !important;
  font-size: 13px;
  font-weight: 700;
}
.mhi-cd b { color: #F9CA24 !important; }

#wa-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9990;
  background: #25D366;
  border-radius: 99px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  font-family: Cairo, sans-serif;
  font-weight: 900;
  font-size: 13px;
  color: #fff !important;
  animation: waPulse 2s ease-in-out infinite;
}
@keyframes waPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45); }
  50% { box-shadow: 0 10px 28px rgba(37, 211, 102, 0.7); }
}
@media (max-width: 640px) {
  #wa-fixed { bottom: 88px; right: 12px; padding: 10px 12px; }
  #wa-fixed .wa-label { display: none; }
}

.summer-view-title,
#content .summer-view-title {
  color: var(--mika-black) !important;
}

.summer-view-subtitle,
#content .summer-view-subtitle,
#content .mhi-sub-note {
  color: var(--mika-text-2) !important;
}

/* ── Snake path ────────────────────────────────────────────── */
.snake-path-wrap:not(.mika-v93-theme) .snake-path-header-title,
.snake-path-wrap:not(.mika-v93-theme) .snake-node-label,
.snake-path-wrap:not(.mika-v93-theme) .snake-unit-title {
  color: var(--mika-black) !important;
  font-weight: 800 !important;
}

.snake-path-wrap:not(.mika-v93-theme) .snake-path-header-grade,
.snake-path-wrap:not(.mika-v93-theme) .snake-daily-mission-text {
  color: var(--mika-text-2) !important;
}

/* ── Hudhud narrator ─────────────────────────────────────────── */
.hh-narrator {
  background: var(--mika-white) !important;
  border: 2px solid var(--mika-border) !important;
}

.hh-narrator__label {
  color: var(--mika-black) !important;
}

.hh-narrator__text {
  background: var(--mika-green-pale) !important;
  border: 1px solid var(--mika-border) !important;
}

.hh-narrator__word {
  color: var(--mika-text) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.hh-narrator__word.is-past {
  color: var(--mika-text-muted) !important;
}

.hh-narrator__word.is-active {
  background: var(--mika-green) !important;
  color: var(--mika-white) !important;
}

/* ── Boot loading ──────────────────────────────────────────── */
.boot-loading {
  background: var(--bg-main) !important;
  color: var(--mika-text) !important;
}

.boot-loading p {
  color: var(--mika-text-2) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* ── Cards generic ─────────────────────────────────────────── */
[class*="card"]:not(.hub-card--summer):not(.hub-card--egypt):not(.hub-card--hudhud):not(.hub-card--diploma):not(.ms-grade-card):not(.summer-subject-card),
.mika-card,
.k12-unit-card,
.sub-plan-card {
  background: var(--mika-white) !important;
  color: var(--mika-text) !important;
  border-color: var(--mika-border) !important;
}

/* ── Links ─────────────────────────────────────────────────── */
a {
  color: var(--mika-green-dark) !important;
  font-weight: 700;
}

/* ── Inputs ────────────────────────────────────────────────── */
input,
select,
textarea {
  font-family: var(--font-arabic) !important;
  font-size: 1rem !important;
  color: var(--mika-black) !important;
  background: var(--mika-white) !important;
  border: 2px solid var(--mika-border) !important;
}

/* ── Badges & XP — yellow accent ───────────────────────────── */
.mhi-badge-featured,
.k12-badge-complete,
.xp-badge {
  background: var(--mika-yellow) !important;
  color: var(--mika-black) !important;
  font-weight: 800 !important;
}

/* ── Lesson content scroll areas ───────────────────────────── */
.k12sr-lesson-scroll,
.k12sr-lesson-body,
.k12sr-objectives,
.lesson-content-wrapper,
.lesson-content {
  color: var(--mika-text) !important;
  font-size: 1.05rem !important;
}

.k12sr-lesson-title {
  color: var(--mika-black) !important;
}

/* ── Mobile: slightly larger touch text ────────────────────── */
@media (max-width: 640px) {
  html { font-size: 18px; }
  .btn-option,
  .k12-q-option,
  .mcs-hub-btn,
  .mhi-hub-card {
    min-height: 48px;
  }
}