/* =====================================================================
   Smart Bayan UI — طبقة الهوية الرسمية المشتركة.
   هذه الطبقة لا تغير منطق المنصة؛ فقط توحد الشكل والتجربة عبر المسارات.
   ===================================================================== */

:root {
  --sb-page: #FFF8EC;
  --sb-page-soft: #F4FBFA;
  --sb-card: rgba(255, 255, 255, .96);
  --sb-border: rgba(91, 73, 54, .12);
  --sb-shadow: 0 8px 0 rgba(46, 42, 38, .055);
  --sb-shadow-hover: 0 12px 0 rgba(46, 42, 38, .075);
  --sb-ink: #2E2A26;
  --sb-soft: #675E56;
  --sb-focus: #2F8C86;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 18% -8%, rgba(255, 196, 111, .22), transparent 32%),
    radial-gradient(circle at 88% 8%, rgba(92, 169, 163, .16), transparent 28%),
    linear-gradient(180deg, #FFF8EC 0%, #FFFDF8 52%, #F4FBFA 100%) !important;
  color: var(--sb-ink);
}

.stage,
.container {
  max-width: 1140px;
}

.topbar {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 22px;
  padding: 12px 14px;
  box-shadow: 0 5px 0 rgba(46, 42, 38, .035);
  backdrop-filter: blur(8px);
}

.brand,
.brand-title {
  letter-spacing: 0;
}

.brand-sub,
.sub,
.panel-instructions,
.week-focus,
.child-meta {
  color: var(--sb-soft) !important;
}

.panel,
.login-panel,
.card,
.level-card,
.week-card,
.day-card,
.teacher-center,
.teacher-dashboard,
.homework,
.homework-panel,
.audio-panel,
.game-area,
.lesson-head {
  border: 1px solid var(--sb-border);
  box-shadow: var(--sb-shadow);
}

.panel,
.login-panel,
.teacher-center,
.teacher-dashboard {
  border-radius: 22px !important;
}

.hero {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
  align-items: center !important;
  gap: 22px !important;
  overflow: hidden;
}

.hero > div:first-child {
  min-width: 0;
}

.hero h1 {
  max-width: 760px;
  line-height: 1.25;
}

.hero p {
  max-width: 780px;
}

.hero .nemnem-wrap {
  width: 100%;
  max-width: 360px;
  justify-self: end;
  align-items: center !important;
  justify-content: flex-start;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,248,236,.78));
  border: 1px solid rgba(91, 73, 54, .1);
}

.hero .nemnem {
  width: 82px;
  height: 82px;
}

.hero .speech {
  margin-top: 7px !important;
  max-width: 230px;
  font-size: 13px;
  line-height: 1.7;
}

.hero .noor-tag {
  font-size: 12px;
}

.card,
.level-card,
.week-card,
.day-card {
  border-radius: 18px !important;
}

.level-card:hover,
.week-card:hover,
.day-card:hover,
.child-card:hover,
.track-card:hover,
.role-card:hover {
  box-shadow: var(--sb-shadow-hover);
}

.btn,
.mini-btn,
.listen-btn,
.home-btn,
.portal-btn,
.reset-btn,
.session-tab,
.game-tab,
.choice-card,
.choice,
.task-option,
.mini-choice,
.track-card,
.role-card {
  font-family: inherit;
  letter-spacing: 0;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease;
}

.btn:hover,
.mini-btn:hover,
.listen-btn:hover,
.home-btn:hover,
.portal-btn:hover,
.reset-btn:hover,
.session-tab:hover,
.game-tab:hover,
.choice-card:hover,
.choice:hover,
.task-option:hover,
.mini-choice:hover {
  filter: brightness(1.02);
}

.btn:focus-visible,
.mini-btn:focus-visible,
.listen-btn:focus-visible,
.home-btn:focus-visible,
.portal-btn:focus-visible,
.reset-btn:focus-visible,
.session-tab:focus-visible,
.game-tab:focus-visible,
.choice-card:focus-visible,
.choice:focus-visible,
.task-option:focus-visible,
.mini-choice:focus-visible,
.track-card:focus-visible,
.role-card:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(47, 140, 134, .32);
  outline-offset: 3px;
}

.chip,
.child-chip,
.session-chip {
  border: 1px solid rgba(92, 169, 163, .18);
}

.home-btn,
.portal-btn,
.reset-btn,
.chip-logout,
.btn-soft,
.mini-btn {
  min-height: 40px;
}

.home-btn,
.portal-btn,
.reset-btn {
  border: 1px solid rgba(92, 169, 163, .16) !important;
  background: rgba(255, 255, 255, .88) !important;
  color: var(--sb-ink) !important;
}

.chip-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.progressbar,
.child-progress-line,
.teacher-track-bar,
.progress-fill {
  background: #ECE3D4 !important;
}

.lesson-head {
  align-items: center !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,252,247,.96)) !important;
}

.lesson-head .actions {
  margin-top: 0 !important;
}

.lesson-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(310px, .82fr);
  gap: 16px;
  align-items: start;
  text-align: initial;
}

.lesson-main,
.lesson-side {
  min-width: 0;
}

.lesson-main {
  border: 2px solid rgba(232, 215, 189, .82);
  border-radius: 22px;
  padding: 18px;
  background:
    linear-gradient(180deg, #fff, #FFFCF7);
}

.lesson-main h3 {
  color: var(--sb-ink);
  font-size: 24px;
  line-height: 1.45;
  margin-bottom: 10px;
  text-align: center;
}

.lesson-main .picture {
  margin-top: 0 !important;
}

.lesson-main .big,
.lesson-main .word,
.lesson-main .equation {
  overflow-wrap: anywhere;
}

.lesson-side {
  display: grid;
  gap: 12px;
}

.lesson-side .explain-panel,
.lesson-side .coach-box,
.lesson-side .homework {
  margin: 0 !important;
  max-width: none !important;
}

.lesson-side .practice-grid {
  max-width: none !important;
  margin: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-side .day-intro-btn {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(180deg, #FFF1D8, #FFE4B0);
  color: #8B4A14;
  box-shadow: 0 5px 0 rgba(139, 74, 20, .14);
}

.lesson-side .homework-grid {
  grid-template-columns: 1fr !important;
}

.lesson-side .task-card {
  min-height: 0 !important;
}

.lesson-main .quran,
.lesson-main .audio-panel {
  max-width: none !important;
}

.lesson-main .helper {
  max-width: none !important;
}

.done-mark,
.day-status,
.week-status,
.tag,
.num,
.wk-num {
  letter-spacing: 0;
}

.week-card .wk-desc {
  display: block;
  max-width: calc(100% - 70px);
  line-height: 1.6;
}

.session-tabs {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px !important;
  margin: 10px 0 14px !important;
}

.session-tab {
  min-width: 0 !important;
  min-height: 112px;
  align-items: stretch !important;
  justify-content: space-between !important;
  flex-direction: column;
  text-align: center;
  border: 1px solid rgba(92, 169, 163, .14) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,248,236,.9)) !important;
  color: var(--sb-ink) !important;
}

.session-tab.active {
  background:
    linear-gradient(180deg, rgba(255,140,66,.96), rgba(217,106,33,.94)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.session-tab.done:not(.active) {
  background: linear-gradient(180deg, #F1FAF1, #fff) !important;
  border-color: rgba(92, 184, 92, .35) !important;
}

.day-chip-num {
  width: 42px;
  height: 42px;
  margin: 0 auto;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(92, 169, 163, .14);
  color: var(--sb-focus);
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 900;
}

.session-tab.active .day-chip-num {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

.day-chip-text {
  display: grid;
  gap: 2px;
}

.day-chip-text strong {
  font-size: 15px;
  line-height: 1.35;
}

.day-chip-text small {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--sb-soft);
  font-weight: 800;
}

.session-tab.active .day-chip-text small {
  color: rgba(255, 255, 255, .86);
}

.day-chip-state {
  display: inline-flex;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 9px;
  background: #FFF4E8;
  color: #B95018;
  font-size: 11px;
  font-weight: 900;
}

.session-tab.active .day-chip-state {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

.game-tabs {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 20px;
  padding: 8px;
  align-items: center;
}

.game-tab {
  border: 1px solid rgba(92, 169, 163, .12) !important;
}

.game-tabs .reading-board-btn {
  margin: 0 !important;
  min-height: 46px;
  background: linear-gradient(180deg, #5CA9A3, #3D7A75) !important;
  color: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 0 rgba(61, 122, 117, .22) !important;
  flex: 0 0 auto;
}

.speech,
#nemnemSpeech,
#noorSpeechEn,
#noorSpeechMath,
#noorSpeechTilawa {
  line-height: 1.7;
}

.explain-panel,
.daily-phonics-board {
  border-radius: 20px !important;
  box-shadow: 0 6px 0 rgba(46, 42, 38, .045);
}

.explain-panel {
  margin: 0 auto 18px;
  max-width: 920px;
  padding: 18px;
  text-align: right;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,252,247,.98)),
    radial-gradient(circle at 8% 0%, rgba(255,140,66,.13), transparent 34%);
  border: 2px solid rgba(232, 215, 189, .95);
}

.explain-panel h3 {
  margin: 0 0 12px;
  color: var(--teal-dark, #2D7772);
  font-size: 22px;
  line-height: 1.45;
}

.explain-intro {
  margin: 0 0 14px;
  color: var(--ink-soft, #7B6B5B);
  font-weight: 900;
  line-height: 1.8;
}

.explain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.explain-card {
  background: #fff;
  border: 2px solid #EFE4D4;
  border-radius: 16px;
  padding: 13px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.explain-card span {
  display: inline-flex;
  align-self: flex-start;
  border-radius: 999px;
  padding: 4px 10px;
  background: #FFF1D8;
  color: #B35D1A;
  font-size: 12px;
  font-weight: 900;
}

.explain-card strong {
  color: var(--ink, #2F2A25);
  font-size: 15px;
  line-height: 1.8;
}

.explain-panel.flash {
  animation: explainPulse 1.1s ease;
}

@keyframes explainPulse {
  0%, 100% { box-shadow: 0 6px 0 rgba(46, 42, 38, .045); }
  35% { box-shadow: 0 0 0 5px rgba(255, 140, 66, .18), 0 6px 0 rgba(46, 42, 38, .045); }
}

@media (max-width: 720px) {
  .explain-grid {
    grid-template-columns: 1fr;
  }

  .explain-panel {
    padding: 14px;
  }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr !important;
  }

  .hero .nemnem-wrap {
    max-width: none;
    justify-self: stretch;
  }

  .hero .speech {
    max-width: none;
  }

  .lesson-shell {
    grid-template-columns: 1fr;
  }

  .lesson-side .practice-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .lesson-main {
    padding: 14px;
  }

  .lesson-main h3 {
    font-size: 20px;
  }

  .lesson-head .actions {
    width: 100%;
  }

  .lesson-head .actions .btn {
    flex: 1 1 130px;
  }
}

.daily-board-slot {
  margin: 16px 0 14px;
  scroll-margin-top: 16px;
}

.daily-phonics-board {
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,252,247,.96)),
    radial-gradient(circle at 12% 0%, rgba(255,140,66,.12), transparent 34%);
  border: 1px solid rgba(232, 112, 42, .18);
  padding: 16px;
}

.daily-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.daily-board-kicker {
  display: inline-flex;
  background: #FFF1D8;
  color: #B35D1A;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 7px;
}

.daily-board-head h2 {
  margin: 0;
  color: var(--orange-dark, #C45A1C);
  font-size: 22px;
  line-height: 1.35;
}

.daily-board-head p {
  margin: 5px 0 0;
  color: var(--sb-soft);
  font-weight: 800;
}

.daily-board-listen {
  flex-shrink: 0;
}

.daily-sound-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 9px;
  background: #F8FBF2;
  border: 1px solid rgba(92, 184, 92, .22);
  border-radius: 18px;
  padding: 12px;
}

.daily-sound-cell {
  min-height: 54px;
  border: 1px solid rgba(91, 73, 54, .14);
  background: #fff;
  border-radius: 14px;
  color: var(--sb-ink);
  font-family: inherit;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.045);
}

.daily-sound-cell:hover {
  transform: translateY(-2px);
  border-color: var(--orange, #FF8C42);
}

.daily-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.daily-reading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.daily-reading-card {
  background: #fff;
  border: 2px solid #EFE4D4;
  border-radius: 16px;
  padding: 12px;
  min-height: 92px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 0 rgba(0,0,0,.04);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.daily-reading-card:hover {
  transform: translateY(-2px);
  border-color: rgba(92, 169, 163, .55);
  box-shadow: 0 7px 0 rgba(0,0,0,.055);
}

.daily-reading-card span {
  display: block;
  color: #B35D1A;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 5px;
}

.daily-reading-card strong {
  display: block;
  color: var(--sb-ink);
  font-size: 22px;
  line-height: 1.6;
}

.daily-ladder-panel {
  margin-top: 14px;
  background: linear-gradient(135deg, #FFF8EC, #F6FBF7);
  border: 2px solid rgba(92, 169, 163, .24);
  border-radius: 20px;
  padding: 14px;
}

.daily-ladder-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.daily-ladder-title span {
  color: #B35D1A;
  font-size: 13px;
  font-weight: 900;
}

.daily-ladder-title strong {
  color: var(--sb-ink);
  font-size: 18px;
  font-weight: 900;
}

.daily-ladder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.daily-ladder-card {
  position: relative;
  min-height: 160px;
  text-align: center;
  border: 2px solid #EFE4D4;
  background: #fff;
  border-radius: 18px;
  padding: 14px 12px 12px;
  font-family: inherit;
  color: var(--sb-ink);
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,.05);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.daily-ladder-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 140, 66, .55);
  box-shadow: 0 8px 0 rgba(0,0,0,.06);
}

.daily-ladder-step {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--orange, #FF8C42);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.daily-ladder-label {
  display: block;
  color: #5B4936;
  font-size: 13px;
  font-weight: 900;
  margin: 4px 0 8px;
}

.daily-ladder-card strong {
  display: block;
  color: var(--sb-ink);
  font-size: 25px;
  line-height: 1.7;
  margin-bottom: 6px;
}

.daily-ladder-card small {
  display: block;
  color: var(--sb-muted, #6F6257);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.7;
  min-height: 42px;
}

.daily-ladder-card b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 9px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #F8FBF2;
  color: #2F7F73;
  font-size: 12px;
  font-weight: 900;
}

.daily-note {
  background: #FFF8EC;
  border: 1px solid rgba(232, 112, 42, .18);
  border-radius: 16px;
  padding: 10px 12px;
}

.daily-note span {
  display: block;
  color: #B35D1A;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 4px;
}

.daily-note strong {
  color: var(--sb-ink);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 820px) {
  .topbar {
    border-radius: 18px;
  }

  .panel,
  .login-panel,
  .teacher-center,
  .teacher-dashboard {
    padding: 18px !important;
  }

  .btn,
  .listen-btn,
  .home-btn,
  .portal-btn,
  .reset-btn {
    width: 100%;
  }

  .session-tabs {
    grid-template-columns: 1fr !important;
  }

  .session-tab {
    min-height: 92px;
  }

  .daily-board-head {
    flex-direction: column;
  }

  .daily-board-listen {
    width: 100%;
  }

  .daily-notes-grid {
    grid-template-columns: 1fr;
  }

  .daily-reading-grid {
    grid-template-columns: 1fr;
  }

  .daily-ladder-title,
  .daily-ladder-grid {
    grid-template-columns: 1fr;
  }

  .daily-ladder-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .daily-ladder-card {
    min-height: 140px;
  }

  .week-card .wk-desc {
    max-width: none;
  }
}

/* ===== Professional polish pass: cleaner copy, stronger cards, clearer actions ===== */
:root {
  --sb-radius-lg: 24px;
  --sb-radius-md: 18px;
  --sb-action-shadow: 0 5px 0 rgba(46, 42, 38, .11);
}

.footer-note,
.next-tip {
  display: none !important;
}

.track-head,
.public-copy,
.public-panel,
.role-panel,
.teacher-login-panel,
.welcome-card,
.board-section,
.panel,
.login-panel,
.teacher-center,
.teacher-dashboard,
.hero-card,
.coach-card,
.exam-card,
.result-card {
  border: 1px solid rgba(255, 255, 255, .82) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,252,247,.94)) !important;
  box-shadow: 0 10px 0 rgba(46, 42, 38, .055) !important;
}

.track-card,
.public-track,
.preview-card,
.level-card,
.week-card,
.day-card,
.child-card,
.permission-card,
.teacher-child-card,
.teacher-track,
.homework-task,
.daily-reading-card,
.daily-ladder-card,
.letter-card,
.choice,
.choice-card,
.task-option,
.num-card,
.color-card,
.shape-card {
  border-radius: var(--sb-radius-md) !important;
  border-color: rgba(91, 73, 54, .12) !important;
  box-shadow: 0 6px 0 rgba(46, 42, 38, .052) !important;
}

.track-card,
.level-card,
.week-card,
.day-card,
.letter-card {
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FFFCF7 100%) !important;
}

.track-card:hover,
.public-track:hover,
.level-card:hover,
.week-card:hover,
.day-card:hover,
.letter-card:hover,
.choice:hover,
.choice-card:hover,
.task-option:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 0 rgba(46, 42, 38, .07) !important;
}

.level-card {
  min-height: 300px;
  gap: 14px !important;
}

.level-card h3,
.track-card h2,
.public-track strong,
.week-card .wk-title,
.section-head h2 {
  line-height: 1.3;
}

.level-card p,
.track-card p,
.public-track p,
.copy,
.sub,
.brand-sub,
.form-note,
.panel-instructions,
.helper,
.teacher-section p,
.permission-card span,
.daily-note strong {
  line-height: 1.55 !important;
}

.form-note,
.management-badge,
.lock-note,
.helper,
.panel-instructions {
  font-size: 13px !important;
  opacity: .86;
}

.form-note {
  margin: 2px 0 10px !important;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(248, 251, 242, .72);
  color: var(--sb-soft) !important;
}

.lock-note {
  padding: 8px 10px !important;
  text-align: center;
}

.actions,
.level-actions,
.backup-actions,
.teacher-actions-row,
.hero-tools,
.top-actions {
  gap: 9px !important;
}

.btn,
.mini-btn,
.listen-btn,
.home-btn,
.portal-btn,
.reset-btn,
.chip-logout,
.soft-btn {
  border-radius: 14px !important;
  min-height: 42px;
  box-shadow: var(--sb-action-shadow) !important;
}

.btn-primary,
.listen-btn {
  background: linear-gradient(180deg, var(--teal, #5CA9A3), var(--teal-dark, #3D7A75)) !important;
  color: #fff !important;
}

.btn-orange {
  background: linear-gradient(180deg, #FF9A57, #E8702A) !important;
}

.btn-soft,
.home-btn,
.portal-btn,
.reset-btn,
.soft-btn,
.exam-btn,
.mini-btn {
  background: #fff !important;
  color: var(--sb-ink) !important;
  border: 1px solid rgba(91, 73, 54, .13) !important;
}

.btn-danger {
  box-shadow: 0 5px 0 rgba(169, 68, 52, .16) !important;
}

.level-actions {
  margin-top: 4px !important;
}

.level-actions .btn {
  min-width: 130px;
}

.stats,
.account-strip,
.teacher-summary,
.permission-grid,
.public-track-grid,
.path-preview {
  gap: 10px !important;
}

.stat,
.account-metric,
.teacher-metric,
.total-stars,
.exam-result,
.plan-badge {
  border: 1px solid rgba(91, 73, 54, .09);
}

.stat,
.account-metric,
.teacher-metric {
  background: linear-gradient(180deg, #F8FBF2, #FFF8EC) !important;
  color: var(--sb-ink) !important;
}

.progressbar,
.child-progress-line,
.teacher-track-bar,
.progress-line {
  height: 10px !important;
  border-radius: 999px !important;
}

.progressbar > div,
.child-progress-line span,
.teacher-track-bar span,
.progress-line span {
  background: linear-gradient(90deg, #5CA9A3, #FF8C42) !important;
}

.role-card,
.track-card,
.public-track {
  min-height: 0 !important;
}

.role-card strong,
.track-card h2 {
  margin: 4px 0 !important;
}

.role-card p,
.track-card p:empty,
.public-note {
  display: none !important;
}

.children-list {
  max-height: 430px;
  overflow: auto;
  padding-inline-end: 3px;
}

.child-card {
  background: #fff !important;
}

.child-card.active {
  background: #F4FBFA !important;
  border-color: rgba(92, 169, 163, .55) !important;
}

.teacher-center-head,
.teacher-dashboard-head,
.section-head,
.daily-board-head,
.question-head {
  border-bottom: 1px solid rgba(91, 73, 54, .08);
  padding-bottom: 10px;
}

.speech,
#nemnemSpeech,
#noorSpeechEn,
#noorSpeechMath,
#noorSpeechTilawa,
#coachText,
#feedback,
#quizStatus {
  color: var(--sb-soft) !important;
}

.panel-instructions {
  max-width: 760px;
  margin-inline: auto !important;
}

.choice-card,
.choice,
.task-option,
.num-card {
  background: #fff !important;
}

.choice.correct,
.choice-card.correct-flash,
.num-card.correct-flash {
  border-color: rgba(92, 184, 92, .55) !important;
}

.choice.wrong,
.choice-card.wrong-flash,
.num-card.wrong-flash {
  border-color: rgba(217, 74, 56, .45) !important;
}

@media (max-width: 820px) {
  .level-actions .btn,
  .actions .btn,
  .backup-actions .btn,
  .hero-tools .btn,
  .hero-tools .soft-btn,
  .top-actions .btn,
  .top-actions .home-btn {
    width: auto;
    flex: 1 1 150px;
  }

  .level-card {
    min-height: 0;
  }
}

/* Smart Bayan brand identity refresh */
:root {
  --sb-brand-teal: #49A7A0;
  --sb-brand-blue: #4E8FC7;
  --sb-brand-orange: #FF8C42;
  --sb-brand-violet: #8C6BD8;
  --sb-brand-cream: #FFF8EC;
  --sb-brand-mint: #EFFAF7;
}

body {
  background:
    linear-gradient(90deg, rgba(92, 169, 163, .055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(140, 107, 216, .045) 1px, transparent 1px),
    linear-gradient(135deg, #FFF7E8 0%, #F3FBF8 42%, #F8F3FF 100%) !important;
  background-size: 34px 34px, 34px 34px, auto !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(255, 140, 66, .10), transparent 28%),
    linear-gradient(315deg, rgba(78, 143, 199, .10), transparent 32%);
}

.topbar {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 24px;
  padding: 12px 14px;
  box-shadow: 0 8px 0 rgba(46, 42, 38, .045);
  backdrop-filter: blur(10px);
}

.brand-title,
.brand {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  color: #256C68 !important;
  letter-spacing: 0 !important;
}

.brand-title::before,
.brand::before {
  content: "";
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: inline-block;
  background: url("smart-bayan-logo.svg") center / contain no-repeat;
  filter: drop-shadow(0 6px 8px rgba(46, 42, 38, .10));
}

.brand-sub,
.sub {
  color: #6B625B !important;
  font-weight: 900 !important;
}

.public-copy,
.track-head,
.role-panel,
.welcome-card,
.board-section,
.panel,
.login-panel,
.hero-card,
.coach-card,
.exam-card,
.result-card {
  border-color: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 12px 0 rgba(46, 42, 38, .045), 0 22px 50px rgba(46, 42, 38, .055) !important;
}

.public-copy h1,
.track-head h1,
.role-head h1,
.welcome-card h2,
.hero-card h1 {
  color: #256C68 !important;
}

.public-badge,
.track-pill,
.num,
.week-badge,
.tag {
  box-shadow: 0 5px 0 rgba(46, 42, 38, .10);
}

.track-card {
  border: 1px solid rgba(255, 255, 255, .90) !important;
  box-shadow: 0 10px 0 rgba(46, 42, 38, .052), 0 18px 34px rgba(46, 42, 38, .065) !important;
}

.track-card.arabic,
.track-card:not(.english):not(.math):not(.tilawa) {
  background: linear-gradient(145deg, #FFFFFF 0%, #F2FBF8 100%) !important;
}

.track-card.english {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFF3E8 100%) !important;
}

.track-card.math {
  background: linear-gradient(145deg, #FFFFFF 0%, #E9FBFC 100%) !important;
}

.track-card.tilawa {
  background: linear-gradient(145deg, #FFFFFF 0%, #F6F2FF 100%) !important;
}

.btn-primary,
.listen-btn {
  background: linear-gradient(135deg, #49A7A0, #4E8FC7) !important;
  box-shadow: 0 5px 0 #276E73 !important;
}

.btn-orange {
  background: linear-gradient(135deg, #FFB15D, #FF7C3A) !important;
}

.total-stars,
.account-metric,
.stat,
.teacher-metric {
  background: linear-gradient(180deg, rgba(255,255,255,.86), #FFF7E8) !important;
}

@media (max-width: 620px) {
  .brand-title::before,
  .brand::before {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .topbar {
    border-radius: 20px;
  }
}

/* Premium market-ready visual pass */
:root {
  --sb-surface-glass: rgba(255, 255, 255, .78);
  --sb-border-soft: rgba(91, 73, 54, .10);
  --sb-shadow-premium: 0 12px 0 rgba(46, 42, 38, .045), 0 28px 60px rgba(46, 42, 38, .075);
}

body {
  color: #2D2924 !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 184, 95, .26), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(73, 167, 160, .22), transparent 30%),
    radial-gradient(circle at 82% 92%, rgba(140, 107, 216, .16), transparent 30%),
    linear-gradient(135deg, #FFF8EC 0%, #F3FBF8 45%, #F7F2FF 100%) !important;
  background-size: auto !important;
}

.stage {
  position: relative;
}

.topbar {
  position: sticky;
  top: 10px;
  z-index: 20;
  background: rgba(255,255,255,.80) !important;
  box-shadow: var(--sb-shadow-premium) !important;
}

.public-copy,
.public-panel,
.track-head,
.role-panel,
.welcome-card,
.board-section,
.panel,
.login-panel,
.teacher-center,
.teacher-section,
.exam-card,
.result-card,
.hero-card,
.coach-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,252,247,.82)) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow: var(--sb-shadow-premium) !important;
  backdrop-filter: blur(12px);
}

.public-copy {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.public-badge {
  background: linear-gradient(135deg, #FFF1D8, #FFE4C7) !important;
  border: 1px solid rgba(255,140,66,.20);
}

.public-copy h1 {
  max-width: 820px !important;
  font-size: 48px !important;
  color: #245E5B !important;
}

.public-copy p {
  font-size: 17px;
  max-width: 850px !important;
}

.public-actions .btn {
  min-height: 50px;
  padding-inline: 24px !important;
}

.public-track-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.public-track,
.track-card,
.role-card,
.permission-card,
.level-card,
.week-card,
.day-card,
.letter-card,
.number-card,
.shape-card,
.color-card,
.teacher-placeholder-card,
.audio-card {
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow: 0 10px 0 rgba(46,42,38,.045), 0 22px 42px rgba(46,42,38,.07) !important;
}

.public-track {
  min-height: 235px !important;
  padding: 20px !important;
}

.public-track .icon,
.track-card .track-icon,
.permission-icon {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(91,73,54,.08), 0 6px 0 rgba(46,42,38,.04);
}

.track-card h2,
.public-track strong,
.level-card h3 {
  font-weight: 900 !important;
}

.track-mini span,
.plan-badge,
.exam-result,
.lock-note {
  border: 1px solid rgba(91,73,54,.08);
}

.public-note {
  display: flex !important;
  background: linear-gradient(135deg, #F7F4FF, #FFF8EC) !important;
  border: 1px solid rgba(140,107,216,.16) !important;
  box-shadow: 0 8px 0 rgba(46,42,38,.04) !important;
}

.btn,
.mini-btn,
.listen-btn,
.home-btn,
.portal-btn,
.reset-btn,
.soft-btn,
.chip-logout {
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.btn:hover,
.mini-btn:hover,
.listen-btn:hover,
.home-btn:hover,
.portal-btn:hover,
.reset-btn:hover,
.soft-btn:hover,
.chip-logout:hover {
  filter: brightness(1.02);
}

.choice,
.choice-card,
.task-option,
.num-card {
  box-shadow: 0 6px 0 rgba(46,42,38,.045) !important;
}

@media (max-width: 1040px) {
  .public-track-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .topbar {
    position: static;
  }

  .public-track-grid {
    grid-template-columns: 1fr !important;
  }

  .public-copy {
    min-height: 0;
  }

  .public-copy h1 {
    font-size: 34px !important;
  }
}

/* Premium lesson experience pass */
.hero.panel,
.panel.hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,248,236,.82)) !important;
}

.hero.panel::after,
.panel.hero::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px 18px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #49A7A0, #FF8C42, #8C6BD8);
  opacity: .42;
}

.lesson-head {
  align-items: center !important;
  border-bottom: 0 !important;
}

.lesson-head h1,
.lesson-head h2,
.lesson-head h3,
.panel-title {
  color: #245E5B !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.week-grid,
.day-grid {
  gap: 18px !important;
}

.week-card,
.day-card {
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,252,247,.86)) !important;
  overflow: hidden;
}

.week-card::before,
.day-card::before {
  background: linear-gradient(90deg, var(--week, var(--day, #49A7A0)), rgba(255,255,255,.34)) !important;
}

.week-title,
.day-title {
  font-weight: 900 !important;
  color: #2D2924 !important;
}

.week-focus,
.wk-desc,
.panel-instructions {
  color: #6B625B !important;
  font-weight: 800 !important;
}

.week-days {
  gap: 8px !important;
}

.day-dot {
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(91,73,54,.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 0 rgba(46,42,38,.035);
}

.day-dot.done,
.day-card.done,
.week-card.complete {
  background:
    linear-gradient(180deg, #F1FBF3, #FFFFFF) !important;
  border-color: rgba(92,184,92,.28) !important;
}

.game-tabs,
.session-tabs {
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 22px;
  padding: 8px;
  box-shadow: 0 7px 0 rgba(46,42,38,.035);
}

.game-tab,
.session-tab {
  border-radius: 16px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(91,73,54,.10) !important;
  color: #5B534B !important;
  box-shadow: 0 5px 0 rgba(46,42,38,.045) !important;
}

.game-tab.active,
.session-tab.active {
  color: #fff !important;
  background: linear-gradient(135deg, #49A7A0, #4E8FC7) !important;
  box-shadow: 0 6px 0 rgba(39,110,115,.22) !important;
}

.lesson-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: 18px;
  align-items: stretch;
}

.lesson-main,
.lesson-side {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(91,73,54,.09);
  border-radius: 24px;
  padding: 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.52), 0 7px 0 rgba(46,42,38,.035);
}

.lesson-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-area {
  text-align: center;
}

.big,
.equation,
.target-card,
.harakat-target,
.sound-target,
.target {
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,248,236,.76));
  border: 1px solid rgba(91,73,54,.10);
  border-radius: 26px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 8px 0 rgba(46,42,38,.035);
}

.big,
.equation {
  padding: 14px 18px;
}

.choice,
.choice-card,
.num-card,
.color-card,
.shape-card,
.task-option,
.mini-choice {
  border-radius: 18px !important;
  border: 1px solid rgba(91,73,54,.10) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.choice:hover,
.choice-card:hover,
.num-card:hover,
.color-card:hover,
.shape-card:hover,
.task-option:hover,
.mini-choice:hover {
  transform: translateY(-3px);
}

.speech,
#speech,
#nemnemSpeech,
#noorSpeech,
#noorSpeechEn,
#noorSpeechMath,
#noorSpeechTilawa {
  background:
    linear-gradient(180deg, #FFFFFF, #FFF8EC) !important;
  border: 1px solid rgba(91,73,54,.10) !important;
  border-radius: 20px !important;
  box-shadow: 0 7px 0 rgba(46,42,38,.04) !important;
  color: #4E463F !important;
  font-weight: 900 !important;
}

.helper,
.homework,
.homework-panel,
.explain-panel,
.audio-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(244,251,250,.78)) !important;
  border: 1px solid rgba(73,167,160,.16) !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 0 rgba(46,42,38,.04) !important;
}

.explain-panel {
  padding: 18px !important;
  margin-bottom: 16px;
}

.explain-intro {
  color: #6B625B !important;
  font-weight: 900 !important;
  line-height: 1.75 !important;
}

.explain-grid,
.homework-grid,
.homework-activities {
  gap: 12px !important;
}

.explain-card,
.task-card,
.homework-task {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(91,73,54,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 0 rgba(46,42,38,.035) !important;
}

.explain-card span,
.task-title,
.homework-title,
.homework-task h4 {
  color: #C7611F !important;
  font-weight: 900 !important;
}

.task-card.done,
.homework-task.done {
  background: linear-gradient(180deg, #EFFAEF, #FFFFFF) !important;
  border-color: rgba(92,184,92,.32) !important;
}

.audio-panel audio {
  width: 100%;
  margin-top: 10px;
}

.audio-note {
  color: #6B625B !important;
  font-weight: 800 !important;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .lesson-shell {
    grid-template-columns: 1fr;
  }

  .game-tabs,
  .session-tabs {
    padding: 7px;
  }
}

/* Official polish pass: consistent lesson surfaces across all tracks */
.btn,
button,
.mini-btn {
  letter-spacing: 0 !important;
}

.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(73, 167, 160, .28) !important;
  outline-offset: 3px;
}

.lesson-head,
.panel.lesson-head {
  align-items: center !important;
  gap: 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,236,.82)) !important;
}

.lesson-head h1,
.lesson-head h2,
.lesson-head h3 {
  color: #256C68 !important;
}

.lesson-shell,
.game-area.lesson-shell {
  gap: 18px !important;
  align-items: stretch !important;
}

.lesson-main {
  min-height: 420px;
}

.lesson-side {
  min-width: 0;
}

.week-card,
.day-card,
.level-card,
.track-card {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.week-card:hover,
.day-card:hover,
.level-card:hover,
.track-card:hover {
  transform: translateY(-3px);
}

.week-days,
.day-grid,
.homework-grid,
.practice-grid,
.explain-grid {
  align-items: stretch;
}

.day-dot,
.day-pill,
.task-card,
.homework-task {
  min-height: 54px;
}

.complete-day,
.done-day,
.complete-btn {
  background: linear-gradient(135deg, #5CA9A3, #4E8FC7) !important;
  color: #fff !important;
}