:root {
  --sp-navy: #0D315F;
  --sp-navy-deep: #092748;
  --sp-navy-soft: #173F70;
  --sp-gold: #D6B574;
  --sp-gold-light: #EBD7AA;
  --sp-cream: #F7F3EB;
  --sp-paper: #FFFFFF;
  --sp-ink: #102D52;
  --sp-text: #34475F;
  --sp-muted: #7E8B9C;
  --sp-line: #E5DED3;
  --sp-success: #3D7A59;
  --sp-danger: #B64D51;
  --sp-soft-shadow: 0 10px 30px rgba(13, 49, 95, .07);
  --sp-shadow: 0 24px 62px rgba(13, 49, 95, .12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--sp-text);
  background:
    radial-gradient(circle at 8% 20%, rgba(214, 181, 116, .09), transparent 26%),
    radial-gradient(circle at 92% 64%, rgba(13, 49, 95, .045), transparent 27%),
    var(--sp-cream);
}

button,
input {
  font: inherit;
}

/* Header fallback, while still keeping the same shared English Nest header. */
.spelling-site-topbar {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.spelling-site-topbar .brand-logo {
  display: block;
  max-width: 100%;
}

.spelling-page {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 38px 0 92px;
}

/* =========================
   HERO
   ========================= */

.spelling-hero {
  position: relative;
  overflow: hidden;
  min-height: 438px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: 48px;
  align-items: center;
  padding: 56px 58px;
  color: #fff;
  background:
    radial-gradient(circle at 15% 90%, rgba(214, 181, 116, .13), transparent 32%),
    linear-gradient(135deg, #0B2D57 0%, #123965 57%, #174474 100%);
  border: 1px solid rgba(214, 181, 116, .34);
  border-radius: 32px;
  box-shadow: 0 28px 68px rgba(9, 39, 73, .17);
}

.spelling-hero::before,
.spelling-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.spelling-hero::before {
  width: 440px;
  height: 440px;
  top: -305px;
  right: -80px;
  border: 1px solid rgba(255, 255, 255, .08);
}

.spelling-hero::after {
  width: 310px;
  height: 310px;
  left: 28%;
  bottom: -235px;
  border: 1px solid rgba(214, 181, 116, .13);
}

.spelling-hero-copy,
.spelling-visual {
  position: relative;
  z-index: 2;
}

.spelling-kicker,
.section-label {
  display: block;
  color: var(--sp-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.spelling-hero h1 {
  max-width: 610px;
  margin: 15px 0 17px;
  color: #fff;
  font-size: clamp(37px, 4.25vw, 57px);
  line-height: 1.26;
  letter-spacing: -.035em;
  font-weight: 800;
}

.spelling-hero h1 span {
  color: #F0CD85;
}

.spelling-hero-copy > p {
  max-width: 625px;
  margin: 0;
  color: rgba(255, 255, 255, .70);
  font-size: 16px;
  line-height: 1.95;
}

.spelling-steps {
  direction: ltr;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 31px;
}

.spelling-steps div {
  direction: rtl;
  min-width: 100px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
}

.spelling-steps strong {
  direction: ltr;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--sp-navy);
  background: var(--sp-gold);
  border-radius: 50%;
  font-size: 10px;
}

.spelling-steps span {
  color: rgba(255, 255, 255, .79);
  font-size: 11px;
  font-weight: 700;
}

.spelling-steps > i {
  width: 18px;
  height: 1px;
  background: rgba(214, 181, 116, .45);
}

.spelling-visual {
  min-height: 310px;
  display: grid;
  place-items: center;
}

.sound-stage {
  position: absolute;
  width: 242px;
  height: 242px;
  left: 5px;
  top: 3px;
  display: grid;
  place-items: center;
}

.sound-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(214, 181, 116, .24);
}

.ring-a {
  width: 118px;
  height: 118px;
}

.ring-b {
  width: 176px;
  height: 176px;
  border-color: rgba(255, 255, 255, .13);
}

.ring-c {
  width: 238px;
  height: 238px;
  border-color: rgba(214, 181, 116, .11);
}

.speaker-disc {
  position: relative;
  z-index: 2;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  color: var(--sp-navy);
  background: var(--sp-gold);
  border-radius: 50%;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .18);
}

.speaker-disc svg {
  width: 35px;
  height: 35px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dictation-card {
  position: absolute;
  width: 282px;
  height: 174px;
  right: 3px;
  bottom: 3px;
  padding: 24px 23px;
  color: var(--sp-ink);
  background: #FBF8F2;
  border: 1px solid rgba(255, 255, 255, .90);
  border-radius: 22px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .18);
  transform: rotate(-3deg);
}

.dictation-card > span {
  color: #967A45;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.dictation-lines {
  direction: ltr;
  display: flex;
  gap: 7px;
  margin-top: 31px;
}

.dictation-lines i {
  display: block;
  width: 35px;
  height: 7px;
  background: #D9E0E8;
  border-radius: 999px;
}

.dictation-lines i:nth-child(2) { width: 24px; }
.dictation-lines i:nth-child(3) { width: 43px; }
.dictation-lines i:nth-child(4) { width: 28px; }
.dictation-lines i:nth-child(5) { width: 18px; }

.dictation-cursor {
  width: 2px;
  height: 25px;
  margin-top: 13px;
  background: var(--sp-gold);
  animation: cursorBlink 1s steps(1) infinite;
}

.keyboard-key {
  position: absolute;
  left: 20px;
  bottom: 18px;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  color: var(--sp-navy);
  background: #fff;
  border: 1px solid #E3DBCE;
  border-bottom-width: 3px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
}

@keyframes cursorBlink {
  50% { opacity: 0; }
}

/* =========================
   SECTION INTRO
   ========================= */

.spelling-section-head {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 44px;
  align-items: end;
  margin: 66px 6px 26px;
}

.spelling-section-head h2 {
  margin: 9px 0 0;
  color: var(--sp-ink);
  font-size: clamp(25px, 3vw, 37px);
  line-height: 1.35;
  letter-spacing: -.025em;
}

.spelling-section-head > p {
  margin: 0;
  color: var(--sp-muted);
  font-size: 14px;
  line-height: 1.95;
}

/* =========================
   MODE CARDS
   ========================= */

.spelling-app {
  min-height: 360px;
}

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

.mode-card {
  position: relative;
  overflow: hidden;
  min-height: 278px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  text-align: right;
  color: var(--sp-ink);
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--sp-line);
  border-radius: 25px;
  box-shadow: var(--sp-soft-shadow);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mode-card::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  left: -100px;
  bottom: -120px;
  border: 1px solid rgba(13, 49, 95, .075);
  border-radius: 50%;
}

.mode-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  transform: scaleX(0);
  transform-origin: right;
  background: var(--sp-gold);
  transition: transform .2s ease;
}

.mode-card:hover {
  transform: translateY(-4px);
  border-color: #DCCDAF;
  box-shadow: 0 18px 42px rgba(13, 49, 95, .11);
}

.mode-card:hover::after {
  transform: scaleX(1);
}

.mode-card-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}

.mode-index {
  direction: ltr;
  color: #A28B65;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.mode-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: var(--sp-navy);
  background: #F4EEE3;
  border: 1px solid #E7DCCA;
  border-radius: 17px;
}

.mode-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mode-copy {
  position: relative;
  z-index: 2;
  margin-top: 30px;
}

.mode-copy h3 {
  margin: 0 0 8px;
  color: var(--sp-ink);
  font-size: 25px;
  font-weight: 800;
}

.mode-copy p {
  max-width: 435px;
  margin: 0;
  color: var(--sp-muted);
  font-size: 13px;
  line-height: 1.9;
}

.mode-card-foot {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid #EFE8DE;
}

.mode-card-foot span {
  color: var(--sp-ink);
  font-size: 12px;
  font-weight: 800;
}

.mode-card-foot b {
  direction: ltr;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--sp-navy);
  background: #fff;
  border: 1px solid #DCE2E9;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 500;
}

/* =========================
   APP NAV / GROUPS
   ========================= */

.sp-appbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, .63);
  border: 1px solid rgba(13, 49, 95, .07);
  border-radius: 14px;
}

.sp-back {
  padding: 0;
  color: var(--sp-muted);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.sp-back:hover {
  color: var(--sp-ink);
}

.sp-tag {
  padding: 5px 11px;
  color: var(--sp-ink);
  background: #EFE8DB;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.sp-groups-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  margin-bottom: 18px;
}

.sp-groups-head h3 {
  margin: 7px 0 5px;
  color: var(--sp-ink);
  font-size: 29px;
  font-weight: 800;
}

.sp-groups-head p {
  margin: 0;
  color: var(--sp-muted);
  font-size: 13px;
  line-height: 1.8;
}

.sp-overview {
  direction: ltr;
  min-width: 165px;
  padding: 12px 16px;
  text-align: center;
  background: rgba(255, 255, 255, .76);
  border: 1px solid var(--sp-line);
  border-radius: 15px;
}

.sp-overview strong {
  display: block;
  color: var(--sp-ink);
  font-size: 21px;
}

.sp-overview span {
  color: var(--sp-muted);
  font-size: 10px;
}

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

.sp-group-card {
  min-height: 116px;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 17px;
  text-align: right;
  color: var(--sp-ink);
  background: var(--sp-paper);
  border: 1px solid var(--sp-line);
  border-radius: 18px;
  box-shadow: 0 7px 20px rgba(13, 49, 95, .05);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sp-group-card:hover {
  transform: translateY(-2px);
  border-color: #DCCCAF;
  box-shadow: 0 14px 30px rgba(13, 49, 95, .09);
}

.sp-group-icon {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  color: var(--sp-navy);
  background: #F5F0E7;
  border: 1px solid #E8DECE;
  border-radius: 14px;
}

.sp-group-icon svg {
  width: 24px;
  height: 24px;
}

.sp-group-name {
  display: block;
  color: var(--sp-ink);
  font-size: 14px;
  font-weight: 800;
}

.sp-group-count {
  direction: ltr;
  display: block;
  margin-top: 4px;
  color: var(--sp-muted);
  font-size: 11px;
  text-align: right;
}

.sp-group-arrow {
  direction: ltr;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--sp-navy);
  border: 1px solid #DCE2E9;
  border-radius: 50%;
  font-size: 17px;
}

/* =========================
   PRACTICE
   ========================= */

.sp-practice {
  max-width: 850px;
  margin: 0 auto;
}

.sp-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.sp-progress-row span {
  color: var(--sp-muted);
  font-size: 11px;
  font-weight: 700;
}

.sp-progress-row strong {
  direction: ltr;
  color: var(--sp-ink);
  font-size: 12px;
}

.sp-progress-track {
  height: 6px;
  overflow: hidden;
  margin-bottom: 18px;
  background: #E0DAD0;
  border-radius: 999px;
}

.sp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sp-gold), #E7C986);
  border-radius: inherit;
  transition: width .25s ease;
}

.sp-listen-card {
  position: relative;
  overflow: hidden;
  padding: 31px 28px 28px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 20%, rgba(214, 181, 116, .08), transparent 28%),
    var(--sp-navy);
  border: 1px solid rgba(214, 181, 116, .30);
  border-radius: 24px;
  box-shadow: var(--sp-shadow);
}

.sp-listen-card::after {
  content: "";
  position: absolute;
  width: 245px;
  height: 245px;
  left: -125px;
  bottom: -170px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
}

.sp-listen-label {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--sp-gold);
  font-size: 11px;
  font-weight: 800;
}

.sp-listen-main {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 31px 0 28px;
}

.sp-play {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  color: var(--sp-navy);
  background: var(--sp-gold);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 15px 36px rgba(0, 0, 0, .20);
  cursor: pointer;
  transition: transform .17s ease;
}

.sp-play:hover {
  transform: scale(1.04);
}

.sp-play svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sp-wave {
  direction: ltr;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 18px;
}

.sp-wave i {
  width: 3px;
  display: block;
  background: rgba(255, 255, 255, .30);
  border-radius: 999px;
}

.sp-wave i:nth-child(1),
.sp-wave i:nth-child(9) { height: 10px; }

.sp-wave i:nth-child(2),
.sp-wave i:nth-child(8) { height: 18px; }

.sp-wave i:nth-child(3),
.sp-wave i:nth-child(7) { height: 27px; }

.sp-wave i:nth-child(4),
.sp-wave i:nth-child(6) { height: 17px; }

.sp-wave i:nth-child(5) { height: 33px; }

.sp-audio-tools {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.sp-audio-btn {
  padding: 7px 11px;
  color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.sp-audio-btn:hover {
  color: #fff;
  border-color: rgba(214, 181, 116, .38);
}

.sp-answer-card {
  margin-top: 13px;
  padding: 23px;
  background: var(--sp-paper);
  border: 1px solid var(--sp-line);
  border-radius: 20px;
  box-shadow: var(--sp-soft-shadow);
}

.sp-answer-label {
  display: block;
  margin-bottom: 8px;
  color: var(--sp-muted);
  font-size: 11px;
  font-weight: 700;
}

.sp-answer-input {
  direction: ltr;
  width: 100%;
  min-height: 58px;
  padding: 13px 15px;
  color: var(--sp-ink);
  background: #FBFAF7;
  border: 1.5px solid #DDD6CB;
  border-radius: 13px;
  outline: none;
  text-align: left;
  font-size: 17px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sp-answer-input:focus {
  border-color: var(--sp-navy);
  box-shadow: 0 0 0 4px rgba(13, 49, 95, .07);
}

.sp-actions {
  display: flex;
  justify-content: flex-start;
  gap: 9px;
  margin-top: 12px;
}

.sp-btn {
  min-height: 42px;
  padding: 10px 21px;
  color: #fff;
  background: var(--sp-navy);
  border: 1px solid var(--sp-navy);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  transition: transform .15s ease, background .15s ease;
}

.sp-btn:hover {
  transform: translateY(-1px);
  background: var(--sp-navy-deep);
}

.sp-btn.secondary {
  color: var(--sp-ink);
  background: #F2ECE1;
  border-color: #E3D8C6;
}

.sp-result {
  margin-top: 13px;
  padding: 16px 17px;
  border-radius: 14px;
}

.sp-result.correct {
  color: #285E43;
  background: rgba(61, 122, 89, .09);
  border: 1px solid rgba(61, 122, 89, .18);
}

.sp-result.wrong {
  color: #8E393D;
  background: rgba(182, 77, 81, .08);
  border: 1px solid rgba(182, 77, 81, .16);
}

.sp-result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 800;
}

.sp-accuracy {
  direction: ltr;
}

.sp-correct-answer {
  direction: ltr;
  margin-top: 9px;
  color: var(--sp-ink);
  font-size: 15px;
  font-weight: 800;
  text-align: left;
}

.sp-extra {
  margin-top: 9px;
  color: var(--sp-muted);
  font-size: 12px;
  line-height: 1.8;
}

.sp-extra b {
  color: var(--sp-ink);
}

.sp-next-wrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* =========================
   SUMMARY
   ========================= */

.sp-summary {
  max-width: 720px;
  margin: 0 auto;
  padding: 39px 32px;
  text-align: center;
  background: var(--sp-paper);
  border: 1px solid var(--sp-line);
  border-top: 4px solid var(--sp-navy);
  border-radius: 24px;
  box-shadow: var(--sp-shadow);
}

.sp-summary-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  color: var(--sp-navy);
  background: #F1E8D8;
  border-radius: 19px;
  font-size: 25px;
  font-weight: 800;
}

.sp-summary h3 {
  margin: 0;
  color: var(--sp-ink);
  font-size: 28px;
}

.sp-summary > p {
  margin: 7px 0 22px;
  color: var(--sp-muted);
  font-size: 13px;
  line-height: 1.8;
}

.sp-summary-stats {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 22px;
}

.sp-summary-stat {
  padding: 14px 10px;
  background: #F7F3EB;
  border: 1px solid #E8E0D4;
  border-radius: 13px;
}

.sp-summary-stat strong {
  display: block;
  color: var(--sp-ink);
  font-size: 23px;
}

.sp-summary-stat span {
  color: var(--sp-muted);
  font-size: 10px;
}

.sp-summary-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
}

.spelling-error {
  padding: 18px;
  color: #8E393D;
  background: rgba(182, 77, 81, .08);
  border: 1px solid rgba(182, 77, 81, .16);
  border-radius: 14px;
}

/* =========================
   FOOTER
   ========================= */

.spelling-footer {
  width: min(1120px, calc(100% - 40px));
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto;
  padding: 21px 0 35px;
  color: var(--sp-muted);
  border-top: 1px solid #DDD6CA;
  font-size: 11px;
}

.spelling-footer strong {
  color: var(--sp-ink);
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 940px) {
  .spelling-hero {
    grid-template-columns: 1fr;
  }

  .spelling-visual {
    min-height: 275px;
  }
}

@media (max-width: 720px) {
  .spelling-page,
  .spelling-footer,
  .spelling-site-topbar {
    width: calc(100% - 24px);
  }

  .spelling-page {
    padding-top: 18px;
  }

  .spelling-hero {
    gap: 25px;
    padding: 36px 24px;
    border-radius: 24px;
  }

  .spelling-hero h1 {
    font-size: 37px;
  }

  .spelling-hero-copy > p {
    font-size: 14px;
  }

  .spelling-steps > i {
    display: none;
  }

  .spelling-section-head {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 45px;
  }

  .mode-grid,
  .sp-group-grid {
    grid-template-columns: 1fr;
  }

  .sp-groups-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sp-overview {
    width: fit-content;
  }

  .sp-summary-stats {
    grid-template-columns: 1fr;
  }

  .spelling-footer {
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 470px) {
  .spelling-visual {
    min-height: 245px;
  }

  .sound-stage {
    width: 190px;
    height: 190px;
    left: -5px;
  }

  .ring-a {
    width: 92px;
    height: 92px;
  }

  .ring-b {
    width: 140px;
    height: 140px;
  }

  .ring-c {
    width: 190px;
    height: 190px;
  }

  .speaker-disc {
    width: 68px;
    height: 68px;
  }

  .dictation-card {
    width: 238px;
    height: 153px;
    right: -5px;
    padding: 20px;
  }

  .mode-card {
    min-height: 245px;
    padding: 23px;
  }

  .sp-group-card {
    grid-template-columns: 44px 1fr auto;
    padding: 14px;
  }

  .sp-group-icon {
    width: 42px;
    height: 42px;
  }

  .sp-listen-card {
    padding: 25px 18px 22px;
  }

  .sp-answer-card {
    padding: 18px;
  }
}



/* =========================================================
   ORIGINAL ENGLISH NEST SPELLING TRAINER
   هذه الأنماط تعيد شاشة التدريب الأصلية بعد اختيار المجموعة.
   ========================================================= */
#en-spelling{
  --navy:#0d2346;
  --gold:#d9ae58;
  --blue:#1779d6;
  --text:#24364d;
  --muted:#758095;
  --border:#e5eaf1;
  --soft:#f5f8fc;
  --green:#58d6a6;
  --green-soft:#eafaf4;
  --red:#f08b90;
  --red-soft:#fff0f1;
  padding:0;
  background:transparent;
  color:var(--text);
  font-family:"Tajawal","Cairo","Segoe UI",sans-serif;
}

#en-spelling *{box-sizing:border-box}
#en-spelling-app{max-width:1050px;margin:0 auto;min-height:610px}

#en-spelling .en-center{text-align:center}
#en-spelling .en-eyebrow{color:var(--gold);font-weight:900;font-size:14px;margin:0 0 8px}
#en-spelling .en-title{margin:0;color:var(--navy);font-size:44px;font-weight:900;line-height:1.3}
#en-spelling .en-desc{max-width:680px;margin:14px auto 38px;color:var(--muted);font-size:18px;line-height:1.9}

#en-spelling .en-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:900px;margin:0 auto}
#en-spelling .en-mode{border:1px solid var(--border);border-radius:24px;background:#fff;padding:32px 28px;text-align:right;font-family:inherit;cursor:pointer;box-shadow:0 14px 36px rgba(13,35,70,.08);transition:.2s}
#en-spelling .en-mode:hover{transform:translateY(-5px);border-color:rgba(217,174,88,.75);box-shadow:0 20px 44px rgba(13,35,70,.12)}
#en-spelling .en-mode-icon{width:68px;height:68px;border-radius:19px;background:var(--soft);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--blue);font-size:29px;font-weight:900}
#en-spelling .en-mode-icon svg{width:38px;height:38px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#en-spelling .en-mode h2{margin:0 0 9px;color:var(--navy);font-size:26px;font-weight:900}
#en-spelling .en-mode p{margin:0;min-height:62px;color:var(--muted);font-size:16px;line-height:1.9}
#en-spelling .en-mode-foot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid #edf0f4;color:var(--navy);font-weight:900;font-size:14px}
#en-spelling .en-round-arrow{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center}

#en-spelling .en-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
#en-spelling .en-back{border:1px solid var(--border);background:#fff;border-radius:11px;padding:8px 13px;color:var(--muted);font-family:inherit;font-weight:700;cursor:pointer}
#en-spelling .en-section-title{margin:0;color:var(--navy);font-size:31px;font-weight:900}
#en-spelling .en-section-sub{margin:5px 0 0;color:var(--muted);font-size:14px}

#en-spelling .en-groups{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
#en-spelling .en-group{display:flex;align-items:center;gap:15px;width:100%;padding:17px 19px;border:1px solid var(--border);border-radius:18px;background:#fff;text-align:right;font-family:inherit;cursor:pointer;box-shadow:0 8px 24px rgba(13,35,70,.06);transition:.2s}
#en-spelling .en-group:hover{transform:translateY(-2px);border-color:rgba(217,174,88,.7)}
#en-spelling .en-group-icon{width:52px;height:52px;flex:0 0 52px;border-radius:16px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center}
#en-spelling .en-group-icon svg{width:27px;height:27px;color:#fff}
#en-spelling .en-group-info{flex:1}
#en-spelling .en-group-name{display:block;color:var(--navy);font-size:17px;font-weight:900}
#en-spelling .en-group-count{display:block;color:var(--muted);font-size:12px;margin-top:3px}
#en-spelling .en-group-go{color:var(--gold);font-size:23px}

#en-spelling .en-practice{min-height:610px}
#en-spelling .en-practice-head{display:flex;justify-content:space-between;align-items:center;gap:15px}
#en-spelling .en-counter{color:var(--muted);font-weight:800;font-size:14px}
#en-spelling .en-progress{height:3px;background:#edf0f4;border-radius:99px;margin:12px 0 34px;overflow:hidden}
#en-spelling .en-progress>span{display:block;height:100%;background:var(--green);transition:.25s}

#en-spelling .en-stage{min-height:470px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;outline:none;position:relative;padding:20px 0}
#en-spelling .en-meaning-label{color:#a1a9b5;font-size:12px;font-weight:800;margin-bottom:4px}
#en-spelling .en-meaning{margin:0;color:var(--navy);font-size:30px;font-weight:900;line-height:1.5}

#en-spelling .en-audio{margin:22px 0;width:58px;height:58px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px rgba(13,35,70,.07);font-size:24px}
#en-spelling .en-audio:hover{background:var(--navy);color:#fff}

#en-spelling .en-typing{direction:ltr;min-height:100px;width:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;font-family:Arial,Helvetica,sans-serif;font-size:82px;font-weight:800;line-height:1.05;letter-spacing:-2px;margin:0 auto 24px;color:#d9dee6}
#en-spelling .en-typing.empty:before{content:"ابدأ الكتابة...";direction:rtl;font-family:"Tajawal","Cairo",sans-serif;font-size:18px;font-weight:700;letter-spacing:0;color:#c0c6cf}
#en-spelling .en-letter{display:inline-block}
#en-spelling .en-letter.ok{color:var(--navy)}
#en-spelling .en-letter.bad{color:var(--red)}
#en-spelling .en-letter.space{min-width:.32em}
#en-spelling .en-typing.correct .en-letter{color:var(--green)!important}
#en-spelling .en-typing.wrongflash .en-letter{color:var(--red)!important}

#en-spelling .en-example{direction:ltr;max-width:760px;min-height:42px;margin:0 auto;color:#737d8a;font-family:Arial,Helvetica,sans-serif;font-size:20px;line-height:1.7}
#en-spelling .en-blank{display:inline-block;min-width:70px;padding:0 8px;margin:0 4px;border-bottom:2px solid #cfd5dd;color:transparent}
#en-spelling .en-answer{background:var(--green-soft);color:#2ea978;border-radius:5px;padding:2px 6px;font-weight:800}

#en-spelling .en-feedback{min-height:30px;margin-top:20px;font-size:15px;font-weight:900}
#en-spelling .en-feedback.ok{color:#2eab7a}
#en-spelling .en-feedback.bad{color:#d85f66}
#en-spelling .en-next{display:none;margin-top:11px;border:0;border-radius:999px;padding:11px 27px;background:var(--navy);color:#fff;font-family:inherit;font-weight:800;cursor:pointer}
#en-spelling .en-next.show{display:inline-block}
#en-spelling .en-help{margin-top:24px;color:#abb2bd;font-size:12px}
#en-spelling .en-skip{border:0;background:none;color:#a9b0ba;font-family:inherit;text-decoration:underline;font-size:12px;cursor:pointer;margin-top:9px}
#en-spelling .en-hidden-input{position:fixed;top:50%;left:50%;width:1px;height:1px;opacity:.01;border:0;padding:0;margin:0;transform:translate(-50%,-50%);pointer-events:none;font-size:16px;background:transparent;color:transparent;caret-color:transparent}

#en-spelling .en-summary{max-width:680px;margin:35px auto;text-align:center}
#en-spelling .en-summary-icon{width:82px;height:82px;margin:0 auto 18px;border-radius:50%;background:var(--green-soft);color:#2faa7a;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:900}
#en-spelling .en-summary h2{margin:0;color:var(--navy);font-size:34px;font-weight:900}
#en-spelling .en-score{font-size:64px;font-weight:900;color:var(--navy);margin:24px 0}
#en-spelling .en-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px}
#en-spelling .en-stat{border:1px solid var(--border);border-radius:16px;padding:17px;background:#fff}
#en-spelling .en-stat b{display:block;color:var(--navy);font-size:24px}
#en-spelling .en-stat span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
#en-spelling .en-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
#en-spelling .en-action{border:1px solid var(--border);background:#fff;color:var(--navy);border-radius:999px;padding:10px 22px;font-family:inherit;font-weight:800;cursor:pointer}
#en-spelling .en-action.primary{background:var(--navy);border-color:var(--navy);color:#fff}

#en-spelling .en-coming{max-width:620px;margin:70px auto;padding:40px;border:1px solid var(--border);border-radius:22px;text-align:center}
#en-spelling .en-coming h2{color:var(--navy);font-size:29px}
#en-spelling .en-coming p{color:var(--muted);line-height:1.9}

/* تدريب الجمل الأصلي */
#en-spelling .en-sent-controls{display:flex;justify-content:center;gap:10px;margin-bottom:26px;flex-wrap:wrap}
#en-spelling .en-sent-btn{border:1px solid var(--border);background:#fff;color:var(--navy);border-radius:12px;padding:9px 18px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s}
#en-spelling .en-sent-btn:hover{background:var(--soft)}
#en-spelling .en-sent-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}
#en-spelling .en-sent-text{direction:ltr;max-width:900px;margin:0 auto 30px;font-family:Arial,Helvetica,sans-serif;font-size:38px;font-weight:700;line-height:1.7;text-align:center;color:#c7ccd6;word-wrap:break-word}
#en-spelling .en-sent-char{position:relative;white-space:pre-wrap}
#en-spelling .en-sent-char.correct{color:var(--green)}
#en-spelling .en-sent-char.incorrect{color:var(--red);text-decoration:underline;text-decoration-color:var(--red)}
#en-spelling .en-sent-char.cursor{border-left:3px solid var(--gold);animation:en-blink 1s steps(1) infinite}
@keyframes en-blink{0%,49%{border-color:var(--gold)}50%,100%{border-color:transparent}}
#en-spelling .en-sent-stats{display:flex;justify-content:center;gap:34px;margin-top:8px}
#en-spelling .en-sent-stat{text-align:center}
#en-spelling .en-sent-stat b{display:block;color:var(--navy);font-size:24px;font-weight:900}
#en-spelling .en-sent-stat span{display:block;color:var(--muted);font-size:12px;margin-top:2px}

@media(max-width:767px){
  #en-spelling .en-title{font-size:34px}
  #en-spelling .en-desc{font-size:16px}
  #en-spelling .en-mode-grid{grid-template-columns:1fr}
  #en-spelling .en-mode p{min-height:auto}
  #en-spelling .en-typing{font-size:50px;letter-spacing:-1px;min-height:75px}
  #en-spelling .en-meaning{font-size:24px}
  #en-spelling .en-example{font-size:17px}
  #en-spelling .en-stats{grid-template-columns:1fr}
  #en-spelling .en-sent-text{font-size:26px}
}

/* =========================================================
   PREMIUM GROUPS PAGE
   صفحة اختيار المجموعات الجديدة فقط.
   التدريب بعد اختيار المجموعة يبقى من الكود الأصلي.
   ========================================================= */

#en-spelling .sp-appbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  padding:11px 14px;
  background:rgba(255,255,255,.63);
  border:1px solid rgba(13,49,95,.07);
  border-radius:14px;
}

#en-spelling .sp-back{
  padding:0;
  color:#7c8797;
  background:none;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
}

#en-spelling .sp-back:hover{color:#0d315f}

#en-spelling .sp-tag{
  padding:5px 11px;
  color:#0d315f;
  background:#efe8db;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}

#en-spelling .sp-groups-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:end;
  margin-bottom:18px;
}

#en-spelling .sp-section-label{
  display:block;
  color:#c49a4a;
  font-size:11px;
  font-weight:900;
  margin-bottom:5px;
}

#en-spelling .sp-groups-head h3{
  margin:7px 0 5px;
  color:#0d315f;
  font-size:29px;
  font-weight:900;
}

#en-spelling .sp-groups-head p{
  margin:0;
  color:#8d98a8;
  font-size:13px;
  line-height:1.8;
}

#en-spelling .sp-overview{
  direction:ltr;
  min-width:165px;
  padding:12px 16px;
  text-align:center;
  background:rgba(255,255,255,.76);
  border:1px solid #e5ddd0;
  border-radius:15px;
}

#en-spelling .sp-overview strong{
  display:block;
  color:#0d315f;
  font-size:21px;
}

#en-spelling .sp-overview span{
  color:#8d98a8;
  font-size:10px;
}

#en-spelling .sp-group-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
}

#en-spelling .sp-group-card{
  min-height:116px;
  display:grid;
  grid-template-columns:50px 1fr auto;
  gap:14px;
  align-items:center;
  padding:17px;
  text-align:right;
  color:#0d315f;
  background:#fff;
  border:1px solid #e5ddd0;
  border-radius:18px;
  box-shadow:0 7px 20px rgba(13,49,95,.05);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  font-family:inherit;
}

#en-spelling .sp-group-card:hover{
  transform:translateY(-2px);
  border-color:#dccCAF;
  box-shadow:0 14px 30px rgba(13,49,95,.09);
}

#en-spelling .sp-group-icon{
  width:47px;
  height:47px;
  display:grid;
  place-items:center;
  color:#0d315f;
  background:#f5f0e7;
  border:1px solid #e8dece;
  border-radius:14px;
}

#en-spelling .sp-group-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#en-spelling .sp-group-copy{min-width:0}

#en-spelling .sp-group-name{
  display:block;
  color:#0d315f;
  font-size:14px;
  font-weight:900;
}

#en-spelling .sp-group-count{
  direction:ltr;
  display:block;
  margin-top:4px;
  color:#8d98a8;
  font-size:11px;
  text-align:right;
}

#en-spelling .sp-group-arrow{
  direction:ltr;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  color:#0d315f;
  border:1px solid #dce2e9;
  border-radius:50%;
  font-size:17px;
}

@media(max-width:850px){
  #en-spelling .sp-group-grid{grid-template-columns:1fr}
  #en-spelling .sp-groups-head{grid-template-columns:1fr;gap:14px}
  #en-spelling .sp-overview{justify-self:stretch}
}



/* =========================================================
   WORD PRACTICE — immersive dark premium layout
   Inspired by the clean focus of the reference page,
   but styled as English Nest.
   ========================================================= */

body.spelling-word-session{
  background:#10141d;
  overflow-x:hidden;
}

body.spelling-word-session .spelling-site-topbar,
body.spelling-word-session .spelling-hero,
body.spelling-word-session .spelling-section-head,
body.spelling-word-session .spelling-footer{
  display:none !important;
}

body.spelling-word-session .spelling-page{
  max-width:none;
  margin:0;
  padding:0;
}

body.spelling-word-session .spelling-app{
  margin:0;
  padding:0;
}

body.spelling-word-session #en-spelling{
  padding:0;
  background:#10141d;
}

body.spelling-word-session #en-spelling-app{
  max-width:none;
  min-height:100vh;
}

#en-spelling .lw-practice{
  --lw-bg:#10141d;
  --lw-panel:#171c27;
  --lw-line:#293140;
  --lw-white:#f1f3f6;
  --lw-muted:#7f8998;
  --lw-soft:#aeb6c2;
  --lw-gold:#d8b56f;
  --lw-green:#65d7a8;
  --lw-red:#f08b90;

  min-height:100vh;
  position:relative;
  padding:24px 34px 34px;
  background:
    radial-gradient(circle at 50% 43%,rgba(255,255,255,.025),transparent 30%),
    radial-gradient(circle at 82% 18%,rgba(216,181,111,.035),transparent 23%),
    var(--lw-bg);
  color:var(--lw-white);
  overflow:hidden;
}

#en-spelling .lw-topbar{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  direction:ltr;
}

#en-spelling .lw-group-btn,
#en-spelling .lw-replay{
  height:38px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  border:1px solid var(--lw-line);
  border-radius:8px;
  background:rgba(18,23,32,.76);
  color:#aab3c1;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:.18s ease;
}

#en-spelling .lw-group-btn:hover,
#en-spelling .lw-replay:hover{
  color:#fff;
  border-color:#465166;
  background:#181e29;
}

#en-spelling .lw-group-btn > span{
  font-size:17px;
  line-height:1;
}

#en-spelling .lw-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#en-spelling .lw-counter{
  color:#697485;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:700;
}

#en-spelling .lw-replay svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#en-spelling .lw-progress{
  width:100%;
  height:1px;
  margin-top:18px;
  background:#1b212c;
  overflow:hidden;
}

#en-spelling .lw-progress span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#d8b56f,#e1c98f);
  transition:width .25s ease;
}

#en-spelling .lw-stage{
  min-height:calc(100vh - 95px);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:34px 20px 52px;
  outline:none;
  text-align:center;
}

#en-spelling .lw-meaning{
  margin:0 0 22px;
  color:#8d96a5;
  font-size:clamp(25px,2.4vw,38px);
  font-weight:800;
  line-height:1.35;
}

#en-spelling .lw-audio-orb{
  width:76px;
  height:76px;
  position:relative;
  display:grid;
  place-items:center;
  margin:0 0 38px;
  color:#10264c;
  background:linear-gradient(145deg,#e4c77f,#cfaa5d);
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  box-shadow:
    0 16px 38px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.4);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;
}

#en-spelling .lw-audio-orb:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:
    0 20px 46px rgba(0,0,0,.34),
    0 0 0 8px rgba(216,181,111,.055),
    inset 0 1px 0 rgba(255,255,255,.4);
}

#en-spelling .lw-audio-orb:active{
  transform:scale(.97);
}

#en-spelling .lw-audio-orb svg{
  width:30px;
  height:30px;
  position:relative;
  z-index:2;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#en-spelling .lw-orb-ring{
  position:absolute;
  inset:-1px;
  border:1px solid rgba(216,181,111,.18);
  border-radius:50%;
  pointer-events:none;
}

#en-spelling .lw-ring-one{animation:lw-pulse 2.3s ease-out infinite}
#en-spelling .lw-ring-two{animation:lw-pulse 2.3s .8s ease-out infinite}

@keyframes lw-pulse{
  0%{transform:scale(1);opacity:.52}
  70%{transform:scale(1.48);opacity:0}
  100%{transform:scale(1.48);opacity:0}
}

#en-spelling .lw-typing{
  min-height:126px;
  width:100%;
  margin:0 auto 32px;
  color:#e9edf3;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(76px,10vw,154px);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.055em;
}

#en-spelling .lw-typing.empty:before{
  content:"ابدأ الكتابة...";
  color:#48515f;
  font-family:"Tajawal","Cairo","Segoe UI",sans-serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:0;
}

#en-spelling .lw-typing .en-letter{
  color:#e8ebf0;
}

#en-spelling .lw-typing .en-letter.bad{
  color:var(--lw-red);
}

#en-spelling .lw-typing.correct .en-letter{
  color:var(--lw-green)!important;
}

#en-spelling .lw-example{
  max-width:840px;
  min-height:54px;
  margin:0 auto;
  color:#747e8d;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(19px,2vw,28px);
  line-height:1.65;
}

#en-spelling .lw-example .en-blank{
  min-width:86px;
  height:.9em;
  margin:0 6px;
  padding:0 10px;
  border:1px solid #333c49;
  border-radius:5px;
  background:#1c222d;
  vertical-align:middle;
}

#en-spelling .lw-example .en-answer{
  padding:2px 7px;
  color:#91e4c2;
  background:rgba(101,215,168,.1);
  border-radius:5px;
}

#en-spelling .lw-feedback{
  min-height:30px;
  margin-top:21px;
  font-size:13px;
  font-weight:800;
}

#en-spelling .lw-feedback.ok{color:var(--lw-green)}
#en-spelling .lw-feedback.bad{color:var(--lw-red)}

#en-spelling .lw-next{
  margin-top:7px;
  padding:10px 25px;
  border:1px solid #2e3948;
  background:#1c2430;
  color:#f2f4f7;
}

#en-spelling .lw-next:hover{
  background:#253042;
}

#en-spelling .lw-hint{
  margin-top:20px;
  color:#3f4856;
  font-size:11px;
  font-weight:700;
}

#en-spelling .lw-skip{
  margin-top:10px;
  padding:0;
  color:#596373;
  background:none;
  border:0;
  font-family:inherit;
  font-size:11px;
  text-decoration:underline;
  cursor:pointer;
}

#en-spelling .lw-skip:hover{color:#8893a3}

@media(max-width:767px){
  #en-spelling .lw-practice{padding:16px 15px 24px}
  #en-spelling .lw-topbar{gap:8px}
  #en-spelling .lw-group-btn,
  #en-spelling .lw-replay{height:34px;padding:0 9px;font-size:10px}
  #en-spelling .lw-replay span{display:none}
  #en-spelling .lw-stage{min-height:calc(100vh - 75px);padding:24px 10px 38px}
  #en-spelling .lw-meaning{font-size:25px;margin-bottom:18px}
  #en-spelling .lw-audio-orb{width:66px;height:66px;margin-bottom:30px}
  #en-spelling .lw-typing{min-height:88px;font-size:clamp(58px,18vw,92px);margin-bottom:25px}
  #en-spelling .lw-example{font-size:18px;line-height:1.7}
}



/* =========================================================
   WORD PRACTICE — ENGLISH NEST CREAM + TRUE CENTER
   Keeps the focused exercise layout, restores the site palette.
   ========================================================= */

body.spelling-word-session{
  background:
    radial-gradient(circle at 8% 22%, rgba(214,181,116,.10), transparent 28%),
    radial-gradient(circle at 90% 70%, rgba(13,49,95,.045), transparent 28%),
    #F7F3EB !important;
}

body.spelling-word-session .spelling-page{
  width:100vw !important;
  max-width:100vw !important;
  margin:0 !important;
  padding:0 !important;
}

body.spelling-word-session .spelling-app,
body.spelling-word-session #en-spelling,
body.spelling-word-session #en-spelling-app{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

body.spelling-word-session #en-spelling{
  background:transparent !important;
}

#en-spelling .lw-practice{
  --lw-bg:#F7F3EB;
  --lw-panel:#FFFFFF;
  --lw-line:#DDD6CB;
  --lw-white:#0D315F;
  --lw-muted:#8995A4;
  --lw-soft:#65758A;
  --lw-gold:#D6B574;
  --lw-green:#3D8A65;
  --lw-red:#C85D63;

  width:100%;
  min-height:100vh;
  padding:22px 34px 32px;
  color:#0D315F;
  background:
    radial-gradient(circle at 12% 18%,rgba(214,181,116,.10),transparent 27%),
    radial-gradient(circle at 87% 67%,rgba(13,49,95,.035),transparent 29%),
    #F7F3EB;
}

#en-spelling .lw-topbar{
  width:min(1120px,calc(100% - 36px));
  margin:0 auto;
}

#en-spelling .lw-group-btn,
#en-spelling .lw-replay{
  color:#6F7D8F;
  background:rgba(255,255,255,.78);
  border-color:#DDD6CB;
  box-shadow:0 5px 16px rgba(13,49,95,.035);
}

#en-spelling .lw-group-btn:hover,
#en-spelling .lw-replay:hover{
  color:#0D315F;
  background:#FFFFFF;
  border-color:#CFBEA0;
}

#en-spelling .lw-counter{
  color:#8390A0;
}

#en-spelling .lw-progress{
  width:min(1120px,calc(100% - 36px));
  margin:18px auto 0;
  background:#E4DED4;
}

#en-spelling .lw-progress span{
  background:linear-gradient(90deg,#D6B574,#E4C98F);
}

#en-spelling .lw-stage{
  width:100%;
  max-width:920px;
  min-height:calc(100vh - 96px);
  margin:0 auto;
  padding:38px 24px 54px;
  justify-content:center;
  align-items:center;
  text-align:center;
}

#en-spelling .lw-meaning{
  width:100%;
  margin:0 auto 22px;
  color:#0D315F;
  text-align:center;
}

#en-spelling .lw-audio-orb{
  margin:0 auto 38px;
  color:#0D315F;
  background:linear-gradient(145deg,#E7CA88,#D6B574);
  border:1px solid #D2B06D;
  box-shadow:
    0 14px 32px rgba(13,49,95,.10),
    0 0 0 8px rgba(214,181,116,.075),
    inset 0 1px 0 rgba(255,255,255,.48);
}

#en-spelling .lw-audio-orb:hover{
  box-shadow:
    0 17px 38px rgba(13,49,95,.14),
    0 0 0 11px rgba(214,181,116,.09),
    inset 0 1px 0 rgba(255,255,255,.48);
}

#en-spelling .lw-orb-ring{
  border-color:rgba(214,181,116,.25);
}

#en-spelling .lw-typing{
  width:100%;
  max-width:900px;
  margin:0 auto 31px;
  color:#0D315F;
  text-align:center;
}

#en-spelling .lw-typing.empty:before{
  color:#B1BAC5;
}

#en-spelling .lw-typing .en-letter{
  color:#0D315F;
}

#en-spelling .lw-example{
  width:100%;
  max-width:850px;
  margin:0 auto;
  color:#69798D;
  text-align:center;
}

#en-spelling .lw-example .en-blank{
  background:#EFEAE2;
  border-color:#D8D0C4;
}

#en-spelling .lw-example .en-answer{
  color:#347B59;
  background:#E7F6EE;
}

#en-spelling .lw-feedback{
  width:100%;
  text-align:center;
}

#en-spelling .lw-next{
  color:#FFFFFF;
  background:#0D315F;
  border-color:#0D315F;
}

#en-spelling .lw-next:hover{
  background:#16416F;
}

#en-spelling .lw-hint{
  color:#A0A9B4;
}

#en-spelling .lw-skip{
  color:#A0A9B4;
}

#en-spelling .lw-skip:hover{
  color:#68788B;
}

@media(max-width:767px){
  #en-spelling .lw-practice{
    padding:16px 12px 24px;
  }

  #en-spelling .lw-topbar,
  #en-spelling .lw-progress{
    width:100%;
  }

  #en-spelling .lw-stage{
    max-width:100%;
    padding-inline:8px;
  }
}


/* حذف عبارة "ابدأ الكتابة..." من تدريب الكلمات */
#en-spelling .lw-typing.empty:before{
  content:"" !important;
  display:none !important;
}


/* =========================================================
   SENTENCE TRAINING — PREMIUM AUDIO CONTROLS
   ========================================================= */
#en-spelling .en-sent-controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-bottom:34px;
  flex-wrap:wrap;
}

#en-spelling .en-sent-btn{
  min-width:178px;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:11px;
  padding:9px 14px;
  border:1px solid #ddd5c8;
  border-radius:16px;
  background:rgba(255,255,255,.88);
  color:#0d315f;
  box-shadow:
    0 7px 22px rgba(13,49,95,.055),
    inset 0 1px 0 rgba(255,255,255,.75);
  font-family:inherit;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#en-spelling .en-sent-btn:hover{
  transform:translateY(-2px);
  border-color:#cfb57f;
  background:#fff;
  box-shadow:
    0 12px 28px rgba(13,49,95,.085),
    inset 0 1px 0 rgba(255,255,255,.9);
}

#en-spelling .en-sent-btn-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#0d315f;
  background:#f4eee3;
  border:1px solid #e5dac7;
}

#en-spelling .en-sent-btn-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#en-spelling .en-sent-btn-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.2;
  text-align:right;
}

#en-spelling .en-sent-btn-copy b{
  color:#0d315f;
  font-size:12px;
  font-weight:900;
}

#en-spelling .en-sent-btn-copy small{
  margin-top:4px;
  color:#9aa3af;
  font-size:9px;
  font-weight:700;
}

#en-spelling .en-sent-btn.active{
  color:#0d315f;
  background:#f7edd7;
  border-color:#d6b574;
  box-shadow:
    0 10px 26px rgba(214,181,116,.16),
    inset 0 0 0 1px rgba(214,181,116,.10);
}

#en-spelling .en-sent-btn.active .en-sent-btn-icon{
  color:#0d315f;
  background:#d6b574;
  border-color:#d6b574;
}

#en-spelling .en-sent-btn.active .en-sent-btn-copy small{
  color:#8f784d;
}

#en-spelling .en-sent-replay .en-sent-btn-icon{
  background:#edf2f7;
  border-color:#dce4ed;
}

@media(max-width:767px){
  #en-spelling .en-sent-controls{
    gap:9px;
    margin-bottom:26px;
  }

  #en-spelling .en-sent-btn{
    min-width:145px;
    min-height:54px;
    padding:8px 11px;
    border-radius:14px;
  }

  #en-spelling .en-sent-btn-icon{
    width:34px;
    height:34px;
    flex-basis:34px;
  }

  #en-spelling .en-sent-btn-copy b{font-size:11px}
  #en-spelling .en-sent-btn-copy small{font-size:8px}
}



/* =========================================================
   English Nest — Idea 08: Audio + Answer Feedback
   Spelling interaction test only
   ========================================================= */

/* ---------- WORD AUDIO ---------- */
#en-spelling .lw-audio-orb{
  position:relative;
}

#en-spelling .lw-audio-orb.is-playing{
  border-color:#d2ad66;
  box-shadow:
    0 15px 34px rgba(13,49,95,.11),
    0 0 0 8px rgba(214,181,116,.10),
    inset 0 1px 0 rgba(255,255,255,.48);
  animation:spAudioOrbBreathe 1.05s ease-in-out infinite;
}

#en-spelling .lw-audio-orb.is-playing svg{
  animation:spSpeakerPulse .68s ease-in-out infinite alternate;
}

#en-spelling .lw-audio-orb.is-playing .lw-ring-one{
  animation:spAudioRing 1.15s ease-out infinite;
}

#en-spelling .lw-audio-orb.is-playing .lw-ring-two{
  animation:spAudioRing 1.15s .30s ease-out infinite;
}

@keyframes spAudioOrbBreathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}

@keyframes spSpeakerPulse{
  from{transform:scale(.96);opacity:.76}
  to{transform:scale(1.06);opacity:1}
}

@keyframes spAudioRing{
  0%{transform:scale(.86);opacity:.36}
  85%,100%{transform:scale(1.28);opacity:0}
}

/* ---------- SENTENCE AUDIO ---------- */
#en-spelling .en-sent-btn{
  position:relative;
}

#en-spelling .en-sent-btn.is-playing{
  border-color:#d6b574;
  background:#fffaf0;
  box-shadow:
    0 12px 30px rgba(13,49,95,.08),
    0 0 0 3px rgba(214,181,116,.10);
}

#en-spelling .en-sent-btn.is-playing::after{
  content:"";
  position:absolute;
  top:9px;
  left:9px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d2ad66;
  box-shadow:0 0 0 4px rgba(214,181,116,.12);
  animation:spAudioDot 1s ease-in-out infinite;
}

#en-spelling .en-sent-btn.is-playing .en-sent-btn-icon{
  border-color:#d6b574;
  background:#f8ecd3;
}

#en-spelling .en-sent-btn.is-playing .en-sent-btn-icon svg{
  animation:spSentenceIconPulse .72s ease-in-out infinite alternate;
}

@keyframes spAudioDot{
  0%,100%{opacity:.48;transform:scale(.86)}
  50%{opacity:1;transform:scale(1.08)}
}

@keyframes spSentenceIconPulse{
  from{transform:scale(.96)}
  to{transform:scale(1.08)}
}

/* ---------- CORRECT ANSWER ---------- */
#en-spelling .lw-typing.correct{
  animation:spCorrectAnswer .42s cubic-bezier(.22,1,.36,1);
}

#en-spelling .lw-feedback.ok,
#en-spelling .en-feedback.ok{
  animation:spFeedbackCorrect .42s cubic-bezier(.22,1,.36,1);
}

#en-spelling .en-stage.sp-answer-correct{
  animation:spStageCorrect .40s cubic-bezier(.22,1,.36,1);
}

@keyframes spCorrectAnswer{
  0%{transform:scale(.985);opacity:.72}
  55%{transform:scale(1.025);opacity:1}
  100%{transform:scale(1);opacity:1}
}

@keyframes spFeedbackCorrect{
  0%{opacity:0;transform:translateY(4px) scale(.96)}
  65%{opacity:1;transform:translateY(0) scale(1.045)}
  100%{opacity:1;transform:scale(1)}
}

@keyframes spStageCorrect{
  0%{filter:none}
  50%{filter:drop-shadow(0 0 10px rgba(61,138,101,.11))}
  100%{filter:none}
}

/* ---------- WRONG ANSWER ---------- */
#en-spelling .lw-typing.wrongflash{
  animation:spWrongShake .34s ease-out;
}

#en-spelling .lw-feedback.bad,
#en-spelling .en-feedback.bad{
  animation:spFeedbackWrong .32s ease-out;
}

#en-spelling .en-stage.sp-answer-wrong{
  animation:spWrongShake .34s ease-out;
}

@keyframes spWrongShake{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-4px)}
  45%{transform:translateX(4px)}
  66%{transform:translateX(-2px)}
  82%{transform:translateX(2px)}
}

@keyframes spFeedbackWrong{
  0%{opacity:.45;transform:translateY(2px)}
  100%{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  #en-spelling .lw-audio-orb.is-playing,
  #en-spelling .lw-audio-orb.is-playing svg,
  #en-spelling .lw-audio-orb.is-playing .lw-ring-one,
  #en-spelling .lw-audio-orb.is-playing .lw-ring-two,
  #en-spelling .en-sent-btn.is-playing::after,
  #en-spelling .en-sent-btn.is-playing .en-sent-btn-icon svg,
  #en-spelling .lw-typing.correct,
  #en-spelling .lw-typing.wrongflash,
  #en-spelling .lw-feedback.ok,
  #en-spelling .lw-feedback.bad,
  #en-spelling .en-feedback.ok,
  #en-spelling .en-feedback.bad,
  #en-spelling .en-stage.sp-answer-correct,
  #en-spelling .en-stage.sp-answer-wrong{
    animation:none !important;
    transform:none !important;
  }
}