/*
  JOY IELTS unified finish layer 260716.
  Purpose: keep the whole site calm and consistent without editing the long base CSS.
  Page roles:
  - Inspire: home page
  - Start: subject/module pages
  - Focus: drills and task rooms
  - Reflect: reports and stats
*/

:root{
  --joy-finish-ink:#1f1a2e;
  --joy-finish-text:#675f72;
  --joy-finish-muted:#8b8394;
  --joy-finish-line:rgba(55,43,78,.115);
  --joy-finish-line-strong:rgba(55,43,78,.165);
  --joy-finish-brand:#7b4fe8;
  --joy-finish-warm:#d46b34;
  --joy-finish-warm-soft:#fff7ef;
  --joy-finish-paper:#fff;
  --joy-finish-soft:#fbfaf8;
}

html{
  background:#fff;
}

body.site-start,
body.site-focus,
body.site-reflect,
body.vocab-page,
body.word-list-page,
body.stats-page{
  background:#fff!important;
  color:var(--joy-finish-ink)!important;
}

body.site-start .page,
body.site-focus .page,
body.site-reflect .page,
body.vocab-page .page,
body.word-list-page .page,
body.stats-page .page{
  background:#fff!important;
  padding:22px 24px!important;
}

body.site-start .app,
body.site-focus .app,
body.site-reflect .app,
body.vocab-page .app,
body.word-list-page .app,
body.stats-page .app{
  width:min(100%,1180px)!important;
  background:#fff!important;
  border:1px solid var(--joy-finish-line)!important;
  border-radius:22px!important;
  box-shadow:none!important;
  overflow:visible!important;
}

body.site-focus .app,
body.site-reflect .app{
  width:min(100%,1060px)!important;
}

body.site-start .inner,
body.site-focus .inner,
body.site-reflect .inner,
body.vocab-page .inner,
body.word-list-page .inner,
body.stats-page .inner{
  padding:18px 20px 22px!important;
}

body.site-start .topbar,
body.site-focus .topbar,
body.site-reflect .topbar,
body.vocab-page .topbar,
body.word-list-page .topbar,
body.stats-page .topbar{
  margin:0 0 14px!important;
  padding:0!important;
  background:transparent!important;
  color:var(--joy-finish-ink)!important;
  border-bottom:1px solid rgba(31,26,46,.06)!important;
  padding-bottom:12px!important;
}

body.site-start .dot,
body.site-start .app-dot,
body.site-focus .dot,
body.site-focus .app-dot,
body.site-reflect .dot,
body.site-reflect .app-dot,
body.vocab-page .dot,
body.vocab-page .app-dot,
body.word-list-page .dot,
body.word-list-page .app-dot,
body.stats-page .dot,
body.stats-page .app-dot{
  width:30px!important;
  height:30px!important;
  border-radius:10px!important;
  background:var(--joy-finish-warm-soft)!important;
  color:var(--joy-finish-warm)!important;
  border:1px solid rgba(212,107,52,.16)!important;
  box-shadow:none!important;
}

body.site-start .title b,
body.site-start .app-title b,
body.site-focus .title b,
body.site-focus .app-title b,
body.site-reflect .title b,
body.site-reflect .app-title b,
body.vocab-page .title b,
body.vocab-page .app-title b,
body.word-list-page .title b,
body.word-list-page .app-title b,
body.stats-page .title b,
body.stats-page .app-title b{
  color:var(--joy-finish-ink)!important;
  font-size:14px!important;
  letter-spacing:-.02em!important;
}

body.site-start .title span,
body.site-start .app-title span,
body.site-focus .title span,
body.site-focus .app-title span,
body.site-reflect .title span,
body.site-reflect .app-title span,
body.vocab-page .title span,
body.vocab-page .app-title span,
body.word-list-page .title span,
body.word-list-page .app-title span,
body.stats-page .title span,
body.stats-page .app-title span{
  margin-top:2px!important;
  color:var(--joy-finish-muted)!important;
  font-size:11px!important;
}

body.site-start .nav-mini a,
body.site-start .nav-mini button,
body.site-focus .nav-mini a,
body.site-focus .nav-mini button,
body.site-reflect .nav-mini a,
body.site-reflect .nav-mini button,
body.vocab-page .nav-mini a,
body.vocab-page .nav-mini button,
body.word-list-page .nav-mini a,
body.word-list-page .nav-mini button,
body.stats-page .nav-mini a,
body.stats-page .nav-mini button,
body.site-start .home,
body.site-focus .home,
body.site-reflect .home{
  min-height:30px!important;
  height:30px!important;
  background:#fff!important;
  color:#645b70!important;
  border:1px solid var(--joy-finish-line-strong)!important;
  border-radius:999px!important;
  box-shadow:none!important;
  font-size:11.5px!important;
}

body.site-start .intro,
body.site-start .hero{
  min-height:126px!important;
  padding:18px 22px!important;
  border:1px solid var(--joy-finish-line)!important;
  border-radius:18px!important;
  background:#fff!important;
  background-image:none!important;
  box-shadow:none!important;
}

body.site-start .intro h1,
body.site-start .hero h1{
  color:var(--joy-finish-ink)!important;
  font-size:25px!important;
  line-height:1.08!important;
}

body.site-start .lead,
body.site-focus .lead,
body.site-reflect .lead{
  color:var(--joy-finish-text)!important;
}

body.site-start .task-card,
body.site-start .task,
body.site-start .task-link,
body.site-start .mode-card,
body.site-start .status-card,
body.site-start .progress,
body.site-start .rhythm,
body.site-start .rhythm-note,
body.site-start .review-card,
body.site-start .bank-item,
body.site-focus .card,
body.site-focus .intro,
body.site-focus .audio-box,
body.site-focus .q,
body.site-reflect .card,
body.site-reflect .hero,
body.site-reflect .stat,
body.site-reflect .row,
body.site-reflect .next div,
body.vocab-page .card,
body.vocab-page .panel,
body.word-list-page .card,
body.word-list-page .panel,
body.stats-page .card,
body.stats-page .hero,
body.stats-page .stat{
  background:#fff!important;
  background-image:none!important;
  border-color:var(--joy-finish-line)!important;
  box-shadow:none!important;
}

body.site-start .task-card.main,
body.site-start .task.main,
body.site-start .task-link.evidence,
body.site-start .task-link.para,
body.site-start .task-link.report,
body.site-start .mode.active{
  background:#fffdfb!important;
  background-image:none!important;
  border-color:rgba(212,107,52,.22)!important;
  box-shadow:none!important;
}

body.site-start .icon,
body.site-start .mini-icon,
body.site-start .task-badge,
body.site-start .review-icon,
body.site-focus .icon,
body.site-reflect .icon{
  background:var(--joy-finish-warm-soft)!important;
  color:var(--joy-finish-warm)!important;
  border:1px solid rgba(212,107,52,.14)!important;
}

body.site-start .tag,
body.site-start .chip,
body.site-start .status-pill,
body.site-reflect .badge{
  background:var(--joy-finish-soft)!important;
  color:#76604b!important;
  border:1px solid rgba(118,96,75,.12)!important;
}

body.site-start .primary,
body.site-focus .primary,
body.site-reflect .primary,
body.site-focus .btn.primary,
body.site-reflect .btn.primary,
body.vocab-page .primary,
body.word-list-page .primary,
body.stats-page .data-btn{
  background:var(--joy-finish-brand)!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:none!important;
  border-color:var(--joy-finish-brand)!important;
}

html body.site-start a.primary,
html body.site-start button.primary,
html body.site-focus a.primary,
html body.site-focus button.primary,
html body.site-reflect a.primary,
html body.site-reflect button.primary,
html body.site-focus .btn.primary,
html body.site-reflect .btn.primary,
html body.stats-page .data-btn,
html body.vocab-page .primary,
html body.word-list-page .primary{
  background:var(--joy-finish-brand)!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:none!important;
  border-color:var(--joy-finish-brand)!important;
}

html body.site-focus .app .primary,
html body.site-focus .app .btn.primary,
html body.site-focus .app button.primary,
html body.site-focus .app a.primary,
html body.site-reflect .app .primary,
html body.site-reflect .app .btn.primary,
html body.site-reflect .app button.primary,
html body.site-reflect .app a.primary,
html body.stats-page.site-reflect .app .data-btn{
  background:var(--joy-finish-brand)!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:none!important;
  border-color:var(--joy-finish-brand)!important;
}

body.site-focus{
  --exam:#2c3748;
}

body.site-focus .topbar{
  background:transparent!important;
  color:var(--joy-finish-ink)!important;
}

body.site-focus .app > .topbar,
body.site-reflect .app > .topbar,
body.stats-page .app > .topbar{
  padding-left:24px!important;
  padding-right:24px!important;
}

body.site-focus .dot,
body.site-focus .app-dot{
  color:var(--joy-finish-warm)!important;
  background:var(--joy-finish-warm-soft)!important;
}

body.site-focus textarea,
body.site-focus input,
body.site-focus select{
  border-color:var(--joy-finish-line-strong)!important;
  box-shadow:none!important;
}

body.site-focus textarea:focus,
body.site-focus input:focus,
body.site-focus select:focus{
  border-color:rgba(123,79,232,.35)!important;
  outline:2px solid rgba(123,79,232,.12)!important;
}

body.site-reflect .hero{
  min-height:0!important;
  padding:14px 16px!important;
  border-radius:18px!important;
}

body.site-reflect .summary,
body.stats-page .summary{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}

body.site-reflect h1,
body.stats-page h1{
  font-size:24px!important;
  line-height:1.08!important;
}

body.site-reflect .card h2,
body.stats-page .card h2{
  color:var(--joy-finish-ink)!important;
}

body.site-reflect .secondary,
body.site-focus .secondary,
body.stats-page .import,
body.stats-page .reset{
  background:#fff!important;
  color:#645b70!important;
  border:1px solid var(--joy-finish-line-strong)!important;
  box-shadow:none!important;
}

body.reading-home.site-start .rhythm-note,
body.reading-home.site-start .reading-next-bank-title,
body.reading-home.site-start .reading-bank-next{
  display:none!important;
}

body.reading-home.site-start .task-card.main{
  min-height:0!important;
}

body.reading-home.site-start .reading-main-panel{
  align-content:start!important;
}

body.reading-home.site-start .reading-side-panel{
  align-content:start!important;
}

body.reading-home.site-start .reading-bank-title{
  display:none!important;
  margin-top:0!important;
  padding-top:0!important;
}

body.reading-home.site-start .reading-bank-title h2{
  font-size:15px!important;
}

body.reading-home.site-start .reading-bank-primary{
  display:none!important;
  opacity:.84!important;
}

body.reading-home.site-start .reading-bank-primary .bank-item{
  padding:9px 11px!important;
}

body.reading-home.site-start .reading-bank-primary .bank-item:not(.current){
  background:#fff!important;
}

body.speaking-home.site-start .intro .status-card{
  margin:14px 0 0!important;
  padding:10px 12px!important;
  border-radius:14px!important;
  background:#fff!important;
}

body.speaking-home.site-start .tip{
  background:#fff!important;
  color:#4f6b58!important;
  border-color:rgba(35,122,85,.18)!important;
}

body.speaking-home.site-start .mode-card{
  background:#fff!important;
  opacity:.82!important;
}

body.vocab-page .hero,
body.word-list-page .hero{
  background:#fff!important;
  background-image:none!important;
  box-shadow:none!important;
}

body.vocab-page .repeat-panel,
body.vocab-page .card,
body.word-list-page .card{
  box-shadow:none!important;
}

body.vocab-page .panel,
body.vocab-page .card,
body.vocab-page .repeat-panel,
body.word-list-page .card{
  background:#fff!important;
  background-image:none!important;
  border-color:var(--joy-finish-line)!important;
}

body.vocab-page .stat,
body.vocab-page .stat:nth-child(1),
body.vocab-page .stat:nth-child(2),
body.vocab-page .stat:nth-child(3),
body.vocab-page .stat:nth-child(4){
  background:#fff!important;
  border-color:var(--joy-finish-line)!important;
}

body.vocab-page .hero{
  padding:18px 18px!important;
  min-height:0!important;
}

body.vocab-page .hero h1{
  font-size:27px!important;
  line-height:1.12!important;
  max-width:280px!important;
}

body.vocab-page .resume{
  margin-top:14px!important;
  background:#fff!important;
  border-color:var(--joy-finish-line)!important;
  box-shadow:none!important;
}

body.vocab-page .vocab-rules{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
  margin-top:12px!important;
}

body.vocab-page .vocab-rules span{
  min-height:28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid var(--joy-finish-line)!important;
  border-radius:999px!important;
  color:#645b70!important;
  background:#fff!important;
  font-size:11px!important;
  font-weight:760!important;
}

body.vocab-page .vocab-coach{
  margin-top:12px!important;
  padding:12px 13px!important;
  border:1px solid rgba(35,122,85,.18)!important;
  border-radius:16px!important;
  background:#fff!important;
  color:#4f6b58!important;
}

body.vocab-page .vocab-coach b{
  display:block!important;
  color:#24593b!important;
  font-size:12px!important;
  margin-bottom:5px!important;
}

body.vocab-page .vocab-coach span{
  display:block!important;
  font-size:11.5px!important;
  line-height:1.42!important;
}

body.vocab-page .audio-btn,
body.vocab-page .record-btn,
body.vocab-page .replay-btn,
body.vocab-page .check,
body.vocab-page .soft,
body.vocab-page .review{
  background:#fff!important;
  border-color:var(--joy-finish-line-strong)!important;
  color:#645b70!important;
  box-shadow:none!important;
}

body.vocab-page .known{
  background:var(--joy-finish-brand)!important;
  border-color:var(--joy-finish-brand)!important;
  color:#fff!important;
}

body.word-list-page .hero{
  padding:16px 18px!important;
  min-height:0!important;
}

body.word-list-page .hero h1{
  font-size:24px!important;
}

body.word-list-page .summary{
  padding:8px 0!important;
  border-top:1px solid var(--joy-finish-line)!important;
  border-bottom:1px solid var(--joy-finish-line)!important;
  color:var(--joy-finish-muted)!important;
}

body.word-list-page .badge,
body.word-list-page .listen,
body.word-list-page .sentence{
  background:#fff!important;
  color:#645b70!important;
  border-color:var(--joy-finish-line-strong)!important;
  box-shadow:none!important;
}

body.site-reflect .hero,
body.stats-page .hero{
  background:#fff!important;
  background-image:none!important;
}

body.stats-page .card{
  background:#fff!important;
  background-image:none!important;
}

@media (min-width:900px){
  body.stats-page .inner{
    display:grid!important;
    grid-template-columns:minmax(0,2fr) minmax(320px,1fr)!important;
    grid-template-areas:
      "top top"
      "hero hero"
      "summary diagnostic"
      "overview diagnostic"
      "manage module"
      "manage next"!important;
    gap:12px 16px!important;
    align-items:start!important;
  }

  html body.stats-page main.page section.app > .inner > .topbar{grid-column:1 / -1!important;grid-row:1!important}
  html body.stats-page main.page section.app > .inner > .hero{grid-column:1 / -1!important;grid-row:2!important;margin:0!important}
  html body.stats-page main.page section.app > .inner > .stat-summary{grid-column:1!important;grid-row:3!important;margin:0!important}
  html body.stats-page main.page section.app > .inner > .stat-overview{grid-column:1!important;grid-row:4!important;margin:0!important}
  html body.stats-page main.page section.app > .inner > .stat-diagnostic{grid-column:2!important;grid-row:3 / span 2!important;margin:0!important}
  html body.stats-page main.page section.app > .inner > .stat-manage{grid-column:1!important;grid-row:5 / span 2!important;margin:0!important}
  html body.stats-page main.page section.app > .inner > .stat-module{grid-column:2!important;grid-row:5!important;margin:0!important}
  html body.stats-page main.page section.app > .inner > .stat-next{grid-column:2!important;grid-row:6!important;margin:0!important}

  body.stats-page .summary{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  html body.reading-home.site-start .app > .inner{
    grid-template-columns:minmax(280px,.86fr) minmax(440px,1.22fr) minmax(280px,.86fr)!important;
    gap:16px 18px!important;
    align-items:start!important;
  }

  html body.reading-home.site-start .app{
    min-height:0!important;
    height:auto!important;
  }

  html body.reading-home.site-start .reading-bank-title,
  html body.reading-home.site-start .reading-bank-primary{
    grid-column:1 / -1!important;
  }

  html body.reading-home.site-start .reading-bank-title{
    grid-row:4!important;
  }

  html body.reading-home.site-start .reading-bank-primary{
    grid-row:5!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    margin-bottom:0!important;
  }

  html body.reading-home.site-start .reading-left-panel,
  html body.reading-home.site-start .reading-main-panel,
  html body.reading-home.site-start .reading-side-panel{
    min-height:0!important;
  }

  html body.reading-home.site-start .reading-left-panel .task-card.main,
  html body.reading-home.site-start .reading-side-panel .review-card{
    height:auto!important;
    min-height:0!important;
  }

  html body.reading-home.site-start .reading-main-panel{
    display:grid!important;
    grid-template-rows:auto 1fr!important;
  }

  html body.reading-home.site-start .reading-main-panel .today-list{
    height:auto!important;
    align-content:start!important;
  }

  html body.reading-home.site-start .reading-main-panel .task-link{
    min-height:104px!important;
  }

  html body.vocab-page main.page section.app > .inner{
    display:grid!important;
    grid-template-columns:minmax(260px,.75fr) minmax(420px,1.25fr) minmax(280px,.82fr)!important;
    grid-template-areas:
      "top top top"
      "left main right"!important;
    gap:14px 18px!important;
    align-items:start!important;
  }

  html body.vocab-page .topbar{grid-area:top!important}
  html body.vocab-page .vocab-left{grid-area:left!important}
  html body.vocab-page .vocab-main-card{grid-area:main!important}
  html body.vocab-page .vocab-right{grid-area:right!important}

  html body.word-list-page main.page section.app > .inner{
    display:grid!important;
    grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr)!important;
    grid-template-areas:
      "top top"
      "hero controls"
      "hero summary"
      "list list"
      "more more"!important;
    gap:12px 16px!important;
    align-items:start!important;
  }

  html body.word-list-page .topbar{grid-area:top!important}
  html body.word-list-page .hero{grid-area:hero!important;margin:0!important}
  html body.word-list-page .controls{grid-area:controls!important;margin:0!important}
  html body.word-list-page .summary{grid-area:summary!important;margin:0!important}
  html body.word-list-page .list{grid-area:list!important}
  html body.word-list-page .more{grid-area:more!important}

  html body.word-list-page .list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  html body.word-list-page .card{
    grid-template-columns:minmax(180px,.7fr) minmax(0,1fr) 180px!important;
    min-height:58px!important;
    padding:12px 16px!important;
  }

  html body.word-list-page .word-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    align-items:center!important;
  }

  html body.word-list-page .word{
    font-size:18px!important;
    line-height:1.08!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  html body.word-list-page .ipa{
    font-size:10.5px!important;
  }

  html body.word-list-page .meaning{
    font-size:12.4px!important;
  }

  html body.word-list-page .example{
    font-size:11.5px!important;
  }

  body.speaking-home.site-start .inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(420px,.9fr)!important;
    grid-template-areas:
      "top top"
      "left right"!important;
    grid-template-rows:auto auto!important;
    gap:12px 18px!important;
    align-items:start!important;
  }

  body.speaking-home.site-start .topbar{grid-area:top!important}
  html body.speaking-home.site-start .speaking-left{
    grid-area:left!important;
    min-width:0!important;
    display:block!important;
  }
  html body.speaking-home.site-start .speaking-right{
    grid-area:right!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    align-content:start!important;
  }
  html body.speaking-home.site-start .speaking-start-panel,
  html body.speaking-home.site-start .speaking-right > *{
    grid-column:auto!important;
    grid-row:auto!important;
    grid-area:auto!important;
    margin:0!important;
    width:auto!important;
    align-self:auto!important;
  }
  html body.speaking-home.site-start .speaking-start-panel{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  html body.speaking-home.site-start .speaking-start-panel > *{
    width:100%!important;
    margin:0!important;
    flex:0 0 auto!important;
  }
  html body.speaking-home.site-start .speaking-left .intro{
    min-height:126px!important;
    padding:18px 22px!important;
    width:100%!important;
    height:auto!important;
  }
  html body.speaking-home.site-start .speaking-left .status-card,
  html body.speaking-home.site-start .speaking-left .tip{
    width:100%!important;
    height:auto!important;
  }
  html body.speaking-home.site-start .speaking-left .intro .status-card{
    display:flex!important;
  }
  html body.speaking-home.site-start .speaking-right > .section-title{
    order:1!important;
    margin:0!important;
  }
  html body.speaking-home.site-start .speaking-right .task-card{
    order:2!important;
  }
  html body.speaking-home.site-start .speaking-right .mode-card{
    order:3!important;
    margin-top:2px!important;
  }
  html body.speaking-home.site-start .speaking-right .progress{
    order:4!important;
  }
  html body.speaking-home.site-start .speaking-right .task-card,
  html body.speaking-home.site-start .speaking-right .task-card.main{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) auto!important;
    min-height:0!important;
    padding:12px!important;
    margin:0!important;
    width:100%!important;
  }
  html body.speaking-home.site-start .speaking-right .task-card.main{
    order:2!important;
  }
  html body.speaking-home.site-start #startSprint{
    margin-top:0!important;
    width:100%!important;
    background:var(--joy-finish-brand)!important;
    background-image:none!important;
    color:#fff!important;
    box-shadow:none!important;
  }
}

@media (max-width:760px){
  body.site-start .page,
  body.site-focus .page,
  body.site-reflect .page,
  body.vocab-page .page,
  body.word-list-page .page,
  body.stats-page .page{
    padding:0!important;
  }

  body.site-start .app,
  body.site-focus .app,
  body.site-reflect .app,
  body.vocab-page .app,
  body.word-list-page .app,
  body.stats-page .app{
    width:100%!important;
    min-height:100vh!important;
    border:0!important;
    border-radius:0!important;
  }

  body.site-start .inner,
  body.site-focus .inner,
  body.site-reflect .inner,
  body.vocab-page .inner,
  body.word-list-page .inner,
  body.stats-page .inner{
    padding:16px 18px 24px!important;
  }

  body.site-start .topbar,
  body.site-focus .topbar,
  body.site-reflect .topbar,
  body.vocab-page .topbar,
  body.word-list-page .topbar,
  body.stats-page .topbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  body.site-start .nav-mini,
  body.site-focus .nav-mini,
  body.site-reflect .nav-mini,
  body.vocab-page .nav-mini,
  body.word-list-page .nav-mini,
  body.stats-page .nav-mini{
    width:100%;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }

  body.site-start .nav-mini a,
  body.site-start .nav-mini button,
  body.site-focus .nav-mini a,
  body.site-focus .nav-mini button,
  body.site-reflect .nav-mini a,
  body.site-reflect .nav-mini button,
  body.vocab-page .nav-mini a,
  body.vocab-page .nav-mini button,
  body.word-list-page .nav-mini a,
  body.word-list-page .nav-mini button,
  body.stats-page .nav-mini a,
  body.stats-page .nav-mini button{
    width:100%!important;
    min-width:0!important;
    padding:0 8px!important;
    white-space:normal!important;
    text-align:center!important;
    line-height:1.08!important;
  }

  body.site-reflect .summary,
  body.stats-page .summary{
    grid-template-columns:1fr 1fr!important;
  }

  body.stats-page .controls,
  body.stats-page .data-actions{
    grid-template-columns:1fr!important;
  }

  body.stats-page select{
    width:100%!important;
    min-width:0!important;
  }
}

html body.site-focus main.page section.app div.inner .primary,
html body.site-focus main.page section.app div.inner .btn.primary,
html body.site-focus main.page section.app div.inner button.primary,
html body.site-focus main.page section.app div.inner a.primary,
html body.site-reflect main.page section.app div.inner .primary,
html body.site-reflect main.page section.app div.inner .btn.primary,
html body.site-reflect main.page section.app div.inner button.primary,
html body.site-reflect main.page section.app div.inner a.primary,
html body.stats-page.site-reflect main.page section.app div.inner .data-btn{
  background:#7b4fe8!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:none!important;
  border-color:#7b4fe8!important;
}

html body.site-focus main.page section.app .primary,
html body.site-focus main.page section.app .btn.primary,
html body.site-focus main.page section.app button.primary,
html body.site-focus main.page section.app a.primary,
html body.site-reflect main.page section.app .primary,
html body.site-reflect main.page section.app .btn.primary,
html body.site-reflect main.page section.app button.primary,
html body.site-reflect main.page section.app a.primary,
html body.stats-page.site-reflect main.page section.app .data-btn{
  background:#7b4fe8!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:none!important;
  border-color:#7b4fe8!important;
}

html body.reading-home.reading-start-polished.site-start:not(:has(.home-hero + .training-deck + .progress-board)) main.page > section.app{
  min-height:0!important;
  height:auto!important;
}

html body.reading-home.reading-start-polished.site-start main.page > section.app > .inner{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:16px!important;
  padding:22px 24px 24px!important;
}

html body.reading-home .reading-start-screen{
  display:grid!important;
  grid-template-columns:minmax(280px,.9fr) minmax(420px,1.15fr) minmax(280px,.9fr)!important;
  gap:18px!important;
  align-items:stretch!important;
}

html body.reading-home .reading-start-card{
  background:#fff!important;
  border:1px solid var(--joy-finish-line)!important;
  border-radius:18px!important;
  box-shadow:none!important;
  padding:18px!important;
  min-height:260px!important;
}

html body.reading-home .reading-task-card h1{
  margin:6px 0 8px!important;
  color:var(--joy-finish-ink)!important;
  font-size:24px!important;
  line-height:1.1!important;
}

html body.reading-home .reading-task-card p,
html body.reading-home .reading-start-card span,
html body.reading-home .reading-start-card small{
  font-size:13px!important;
  line-height:1.42!important;
}

html body.reading-home .reading-start-card .section-title{
  margin:0 0 12px!important;
}

html body.reading-home .reading-start-card .section-title h2{
  font-size:21px!important;
}

html body.reading-home .reading-start-card .task-link,
html body.reading-home .reading-start-card .review-card{
  min-height:84px!important;
  margin:0 0 10px!important;
  padding:13px!important;
}

html body.reading-home .reading-start-card .primary{
  width:100%!important;
  min-height:42px!important;
  height:42px!important;
  margin-top:18px!important;
  font-size:13.5px!important;
}

html body.reading-home .reading-coach,
html body.site-start .joy-coach{
  display:block!important;
  background:#fff!important;
  border:1px solid rgba(35,122,85,.18)!important;
  border-radius:16px!important;
  color:#4f6b58!important;
  padding:12px 13px!important;
  font-size:13px!important;
  line-height:1.45!important;
}

html body.reading-home .reading-coach b,
html body.site-start .joy-coach b{
  display:block!important;
  color:#24593b!important;
  font-size:13px!important;
  margin-bottom:4px!important;
}

html body.reading-home .reading-coach span,
html body.site-start .joy-coach span{
  display:block!important;
  font-size:13px!important;
  line-height:1.45!important;
}

html body.reading-home .reading-bank-panel{
  border-top:1px solid var(--joy-finish-line)!important;
  padding-top:12px!important;
}

html body.reading-home .reading-bank-panel summary{
  cursor:pointer!important;
  color:#645b70!important;
  font-size:13px!important;
  font-weight:780!important;
  list-style:none!important;
}

html body.reading-home .reading-bank-panel summary::-webkit-details-marker{
  display:none!important;
}

html body.reading-home .reading-bank-panel[open] .reading-bank-title,
html body.reading-home .reading-bank-panel[open] .reading-bank-primary,
html body.reading-home .reading-bank-panel[open] .reading-bank-next{
  display:grid!important;
}

html body.vocab-page .hero h1{
  max-width:none!important;
  font-size:24px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}

html body.vocab-page #vocabHeroTitle{
  font-size:24px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}

html body.vocab-page .mini-pill#modePill{
  display:none!important;
}

html body.vocab-page .vocab-coach{
  margin-top:12px!important;
}

html body.vocab-page .vocab-coach .coach-rules{
  display:grid!important;
  gap:5px!important;
  margin-top:7px!important;
  color:#716a7f!important;
  font-size:13px!important;
  line-height:1.42!important;
}

html body.vocab-page .vocab-coach .coach-rule{
  display:block!important;
}

html body.vocab-page .vocab-coach .coach-rule b{
  display:inline!important;
  color:#5a4a76!important;
  font-size:13px!important;
  margin:0!important;
}

html body.vocab-page .vocab-coach .coach-rule.active{
  color:#3f3553!important;
  font-weight:760!important;
}

html body.vocab-page .vocab-coach .coach-rule.active b{
  color:#7b4fe8!important;
}

html body.vocab-page .vocab-rules{
  display:none!important;
}

html body.vocab-page .stats{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

html body.vocab-page .stats .stat:first-child{
  display:none!important;
}

html body.vocab-page .stats .stat:last-child{
  display:none!important;
}

html body.vocab-page .stat b{
  font-size:18px!important;
}

html body.vocab-page .stat span,
html body.vocab-page .queue p,
html body.vocab-page .pronounce-note,
html body.vocab-page .feedback,
html body.vocab-page .review-help,
html body.vocab-page .resume span,
html body.vocab-page .meaning,
html body.vocab-page .example,
html body.vocab-page .word-flow span{
  font-size:13px!important;
  line-height:1.45!important;
}

html body.vocab-page .word{
  font-size:38px!important;
  line-height:1.02!important;
  letter-spacing:0!important;
}

html body.vocab-page h2#word.word{
  font-size:38px!important;
  line-height:1.02!important;
  letter-spacing:0!important;
}

html body.vocab-page button,
html body.vocab-page .action,
html body.vocab-page .audio-btn,
html body.vocab-page .record-btn,
html body.vocab-page .replay-btn,
html body.vocab-page .check{
  min-height:36px!important;
  height:36px!important;
  font-size:13px!important;
  border-radius:12px!important;
}

html body.vocab-page .bar{
  transition:none!important;
}

html body.vocab-page .vocab-right{
  display:grid!important;
  grid-template-rows:auto auto 1fr!important;
  align-content:start!important;
  gap:12px!important;
}

html body.vocab-page .vocab-right .stats{order:1!important}
html body.vocab-page .vocab-right .review-help{order:2!important}
html body.vocab-page .vocab-right .queue{order:3!important}

html body.vocab-page .vocab-left{
  display:grid!important;
  align-content:start!important;
}

html body.vocab-page .vocab-left .feedback{
  min-height:34px!important;
  margin-top:10px!important;
}

html body.vocab-page .vocab-main-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-flow:row!important;
  align-content:start!important;
  gap:8px!important;
  min-height:0!important;
  padding:14px 18px!important;
}

html body.vocab-page .vocab-main-card > *{
  grid-column:1!important;
  width:100%!important;
}

html body.vocab-page .word-top{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin-bottom:0!important;
}

html body.vocab-page .word-type-line{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex:0 0 auto!important;
  color:#7b7286!important;
  font-size:13px!important;
}

html body.vocab-page .word-type-line span{
  font-size:13px!important;
}

html body.vocab-page .word-type-line .tag{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:26px!important;
  padding:0 10px!important;
  font-size:12px!important;
}

html body.vocab-page .word-info{
  display:flex!important;
  align-items:baseline!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  padding-bottom:8px!important;
  border-bottom:1px solid rgba(31,26,46,.08)!important;
}

html body.vocab-page .ipa{
  font-size:14px!important;
  margin-bottom:0!important;
  color:#7c7488!important;
  white-space:nowrap!important;
}

html body.vocab-page .meaning{
  font-size:15px!important;
  line-height:1.45!important;
  flex:1 1 280px!important;
}

html body.vocab-page .example-label{
  margin:4px 0 0!important;
}

html body.vocab-page .example{
  font-size:16px!important;
  line-height:1.5!important;
  margin:0!important;
  max-width:92%!important;
}

html body.vocab-page .audio-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}

html body.vocab-page .audio-btn{
  height:34px!important;
  min-height:34px!important;
}

html body.vocab-page .repeat-panel{
  padding:8px!important;
  margin-bottom:0!important;
}

html body.vocab-page .repeat-title{
  margin-bottom:6px!important;
}

html body.vocab-page .repeat-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:6px!important;
}

html body.vocab-page .record-btn,
html body.vocab-page .replay-btn{
  height:34px!important;
  min-height:34px!important;
  padding:0 5px!important;
  font-size:12px!important;
  white-space:normal!important;
  line-height:1.05!important;
}

html body.vocab-page .record-btn.recording{
  background:#7b4fe8!important;
  border-color:#7b4fe8!important;
  color:#fff!important;
}

html body.vocab-page .record-btn.pending{
  background:#7b4fe8!important;
  border-color:#7b4fe8!important;
  color:#fff!important;
  box-shadow:0 0 0 3px rgba(123,79,232,.14)!important;
}

html body.vocab-page .record-btn.done{
  background:#e9fbef!important;
  border-color:#bfe8cb!important;
  color:#287245!important;
}

html body.vocab-page .replay-btn.ready{
  background:#eef8ff!important;
  border-color:#cce8f8!important;
  color:#286987!important;
}

html body.vocab-page .word-flow{
  border:1px solid var(--joy-finish-line)!important;
  border-radius:16px!important;
  background:#fff!important;
  padding:10px 12px!important;
}

html body.vocab-page .word-flow b{
  display:block!important;
  color:var(--joy-finish-ink)!important;
  font-size:14px!important;
  margin-bottom:2px!important;
}

html body.vocab-page .word-flow span{
  display:block!important;
  color:#645b70!important;
}

html body.vocab-page .vocab-main-card .vocab-spell{
  margin-top:0!important;
  display:none!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px!important;
}

html body.vocab-page .vocab-main-card .vocab-spell.show{
  display:grid!important;
}

html body.vocab-page .vocab-main-card .vocab-spell input{
  height:38px!important;
  font-size:15px!important;
}

html body.vocab-page .vocab-main-card #checkSpelling{
  height:38px!important;
  min-height:38px!important;
  padding:0 15px!important;
}

html body.vocab-page .actions{
  display:grid!important;
  grid-template-columns:1.35fr .85fr!important;
  gap:8px!important;
}

html body.vocab-page #prev{
  display:none!important;
}

html body.vocab-page #markKnown{
  order:1!important;
  height:40px!important;
  min-height:40px!important;
  background:#7b4fe8!important;
  border-color:#7b4fe8!important;
  color:#fff!important;
  font-size:13.5px!important;
  font-weight:850!important;
}

html body.vocab-page #markNext{
  order:2!important;
  height:40px!important;
  min-height:40px!important;
  background:#fff!important;
  border:1px solid var(--joy-finish-line)!important;
  color:#6d5f78!important;
  font-size:13px!important;
}

html body.vocab-page .action-note{
  margin:-2px 0 0!important;
  color:#6f687b!important;
  font-size:13px!important;
  line-height:1.42!important;
}

html body.vocab-page .vocab-main-card .feedback{
  display:block!important;
  min-height:34px!important;
  margin-top:0!important;
  padding:8px 12px!important;
  border:1px solid var(--joy-finish-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#5e566b!important;
}

html body.vocab-page .vocab-main-card .feedback strong{
  color:#4f35a5!important;
  font-weight:850!important;
}

html body.vocab-page .vocab-main-card .feedback.celebrate{
  border-color:#d9cdfa!important;
  background:linear-gradient(90deg,#fff,#f7f3ff)!important;
  color:#4f35a5!important;
}

html body.vocab-page .vocab-main-card .feedback.celebrate strong{
  color:#7b4fe8!important;
}

html body.vocab-page .review-help{
  margin:0!important;
  padding:10px 12px!important;
  border:1px solid var(--joy-finish-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#6f687b!important;
}

html body.vocab-page .queue{
  align-self:start!important;
  min-width:0!important;
  overflow:hidden!important;
}

html body.vocab-page .queue p{
  display:grid!important;
  gap:6px!important;
  min-width:0!important;
}

html body.vocab-page .queue p > span{
  min-width:0!important;
  max-width:100%!important;
}

html body.vocab-page .queue-review{
  display:block!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

html body.vocab-page #openReviewQueue{
  display:none!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  margin-top:9px!important;
  padding-left:8px!important;
  padding-right:8px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

html body.vocab-page #openReviewQueue.show{
  display:block!important;
}

html body.vocab-page .queue:not(.open) .queue-list,
html body.vocab-page .queue:not(.open) .queue-review{
  display:none!important;
}

html body.listening-home #reportBtn{
  display:none!important;
}

html body.site-start .lead,
html body.site-start .task small,
html body.site-start .task-card small,
html body.site-start .task-link small,
html body.site-start .review-card span,
html body.site-start .progress-item span,
html body.site-start .status-card span,
html body.site-start .note,
html body.site-start .tip,
html body.site-start .joy-coach,
html body.site-focus .lead,
html body.site-focus .note,
html body.site-focus .hint,
html body.site-focus small,
html body.site-reflect .lead,
html body.site-reflect .note,
html body.site-reflect small{
  font-size:13px!important;
  line-height:1.45!important;
}

html body.site-start .primary,
html body.site-start a.primary,
html body.site-start button.primary,
html body.site-start .task .tag,
html body.site-start .task-card .tag,
html body.site-start .task-link .tag,
html body.site-focus .primary,
html body.site-focus button,
html body.site-focus .btn,
html body.site-reflect .primary,
html body.site-reflect button,
html body.site-reflect .btn{
  min-height:40px!important;
  font-size:13.5px!important;
}

html body.site-start .joy-coach b,
html body.site-start .joy-coach span{
  font-size:13px!important;
}

html body.word-list-page .audio button{
  min-height:36px!important;
  height:36px!important;
  font-size:12px!important;
  border-radius:12px!important;
}

html body.speaking-sprint main.page section.app{
  width:min(100%,1180px)!important;
}

html body.speaking-sprint main.page section.app > .inner{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr)!important;
  grid-template-areas:
    "top top"
    "intro intro"
    "step step"
    "coach coach"
    "main quick"
    "main support"
    "save save"
    "note note"!important;
  gap:12px 18px!important;
  align-items:start!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

html body.speaking-sprint .inner:has(> .intro + .card.main + .card){
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr)!important;
  grid-template-rows:auto auto auto auto auto auto!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}

html body.speaking-sprint .inner:has(> .intro + .card.main + .card) > .card.main{
  grid-column:1!important;
  grid-row:3 / span 2!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}

html body.speaking-sprint .inner:has(> .intro + .card.main + .card) > .card:not(.main){
  grid-column:2!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}

html body.speaking-sprint .inner:has(> .intro + .card.main + .card) > #quick{
  grid-row:3!important;
}

html body.speaking-sprint .inner:has(> .intro + .card.main + .card) > #support{
  grid-row:4!important;
}

html body.speaking-sprint .inner:has(> .intro + .card.main + .card) > #saveSprint,
html body.speaking-sprint .inner:has(> .intro + .card.main + .card) > .save-note{
  grid-column:1 / -1!important;
}

html body.speaking-sprint .topbar{grid-area:top!important;margin:0!important}
html body.speaking-sprint .intro{grid-area:intro!important;margin:0!important}
html body.speaking-sprint .current-step{grid-area:step!important}
html body.speaking-sprint .sprint-coach{grid-area:coach!important}
html body.speaking-sprint #main{grid-area:main!important;margin:0!important}
html body.speaking-sprint #quick{grid-area:quick!important;margin:0!important}
html body.speaking-sprint #support{grid-area:support!important;margin:0!important}
html body.speaking-sprint #saveSprint{grid-area:save!important;margin:0!important}
html body.speaking-sprint #saveNote{grid-area:note!important}

html body.speaking-sprint #main,
html body.speaking-sprint #quick,
html body.speaking-sprint #support{
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  align-self:start!important;
}

html body.speaking-sprint #saveSprint{
  grid-column:1 / -1!important;
  width:100%!important;
}

html body.speaking-sprint .exam-layout{
  grid-template-columns:minmax(0,1fr) minmax(210px,.42fr)!important;
  align-items:start!important;
  gap:12px!important;
}

html body.speaking-sprint .inner:has(> .intro + .card.main + .card) .exam-layout{
  grid-template-columns:minmax(0,1fr) minmax(210px,.42fr)!important;
  align-items:start!important;
  gap:12px!important;
}

html body.speaking-sprint .cue-card{
  min-height:0!important;
  border-color:var(--joy-finish-line)!important;
  border-radius:16px!important;
  background:#fff!important;
}

html body.speaking-sprint .cue-title{
  color:#7b7287!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

html body.speaking-sprint select{
  border-color:#e1dcea!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#251d35!important;
  box-shadow:none!important;
}

html body.speaking-sprint .prompt{
  font-size:14.5px!important;
  line-height:1.48!important;
  max-height:none!important;
  overflow:visible!important;
  padding-right:0!important;
}

html body.speaking-sprint .inner:has(> .intro + .card.main + .card) .prompt{
  max-height:none!important;
  overflow:visible!important;
  padding-right:0!important;
}

html body.speaking-sprint .exam-panel{
  padding:10px!important;
  min-width:0!important;
}

html body.speaking-sprint .current-step{
  display:grid!important;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr)!important;
  gap:10px!important;
  margin:0!important;
}

html body.speaking-sprint .current-step > div{
  min-width:0!important;
  border:1px solid rgba(123,79,232,.18)!important;
  border-radius:18px!important;
  background:#fff!important;
  padding:14px 16px!important;
}

html body.speaking-sprint .current-step b{
  display:block!important;
  color:#6a4ec0!important;
  font-size:12px!important;
  margin-bottom:4px!important;
}

html body.speaking-sprint .current-step span{
  display:block!important;
  color:#2f293b!important;
  font-size:20px!important;
  line-height:1.12!important;
  font-weight:820!important;
}

html body.speaking-sprint .sprint-coach{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:0!important;
  border:1px solid rgba(35,122,85,.16)!important;
  border-radius:16px!important;
  background:#fff!important;
  padding:10px 14px!important;
}

html body.speaking-sprint .sprint-coach > div{
  min-width:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  padding:0 8px!important;
  color:#5f6672!important;
}

html body.speaking-sprint .sprint-coach b{
  display:inline-block!important;
  color:#24593b!important;
  font-size:12.5px!important;
  margin:0!important;
  flex:0 0 auto!important;
}

html body.speaking-sprint .sprint-coach span{
  display:inline!important;
  font-size:12.5px!important;
  line-height:1.42!important;
  color:#4f6b58!important;
}

html body.speaking-sprint .sprint-coach .feedback-demo{
  border-color:transparent!important;
}

html body.speaking-sprint .sprint-coach .feedback-demo b{
  color:#6a4ec0!important;
}

html body.speaking-sprint .panel-title{
  display:block!important;
  margin:0 0 8px!important;
  color:#4e465e!important;
  font-size:13px!important;
}

html body.speaking-sprint .control-note{
  margin:8px 0 0!important;
  color:#6f687b!important;
  font-size:12.5px!important;
  line-height:1.35!important;
}

html body.speaking-sprint .instant-feedback{
  display:grid!important;
  gap:5px!important;
  margin-top:8px!important;
  border:1px solid rgba(29,79,145,.14)!important;
  border-radius:10px!important;
  background:#f8fbff!important;
  padding:9px 10px!important;
  color:#4f5c6d!important;
}

html body.speaking-sprint .instant-feedback b{
  color:#1d4f91!important;
  font-size:12px!important;
}

html body.speaking-sprint .instant-feedback span{
  display:block!important;
  font-size:12.5px!important;
  line-height:1.38!important;
}

html body.speaking-sprint .instant-feedback strong{
  color:#5f566e!important;
}

html body.speaking-sprint .timer-grid,
html body.speaking-sprint .actions{
  grid-template-columns:1fr!important;
}

html body.speaking-sprint .actions .btn,
html body.speaking-sprint .timer{
  width:100%!important;
  min-width:0!important;
}

html body.speaking-sprint .checks{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}

html body.speaking-sprint textarea{
  min-height:58px!important;
}

html body.speaking-home .today-route{
  border:1px solid var(--joy-finish-line)!important;
  border-radius:18px!important;
  background:#fff!important;
  padding:12px 13px!important;
  margin-bottom:12px!important;
}

html body.speaking-home .route-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:10px!important;
}

html body.speaking-home .route-head b{
  display:block!important;
  font-size:15px!important;
  color:#2f293b!important;
  letter-spacing:-.025em!important;
}

html body.speaking-home .route-head span{
  display:block!important;
  margin-top:3px!important;
  color:#756d82!important;
  font-size:12.5px!important;
  line-height:1.35!important;
}

html body.speaking-home .route-head strong{
  color:#7b4fe8!important;
  font-size:18px!important;
  line-height:1!important;
}

html body.speaking-home .route-bar{
  height:7px!important;
  border-radius:999px!important;
  background:#f0edf7!important;
  overflow:hidden!important;
  margin-bottom:10px!important;
}

html body.speaking-home .route-bar i{
  display:block!important;
  width:0;
  height:100%!important;
  border-radius:999px!important;
  background:#7b4fe8!important;
  transition:width .2s ease!important;
}

html body.speaking-home .route-list{
  display:grid!important;
  gap:7px!important;
}

html body.speaking-home .route-list span{
  display:block!important;
  color:#5f6672!important;
  font-size:12.8px!important;
  line-height:1.35!important;
}

html body.speaking-home .task-preview .today-route{
  border:0!important;
  border-top:1px solid var(--joy-finish-line)!important;
  border-radius:0!important;
  background:transparent!important;
  padding:12px 0 0!important;
  margin:2px 0 0!important;
}

html body.speaking-home .task-preview .route-head{
  margin-bottom:8px!important;
}

html body.speaking-home .task-preview .route-list{
  gap:6px!important;
}

html body.speaking-home.site-start main.page section.app{
  width:min(100%,1080px)!important;
  min-height:0!important;
  height:auto!important;
}

html body.speaking-home.site-start main.page{
  min-height:0!important;
  padding-top:22px!important;
}

html body.speaking-home.site-start main.page section.app > .inner{
  padding-bottom:22px!important;
}

html body.speaking-home.site-start .inner{
  grid-template-columns:minmax(330px,.86fr) minmax(480px,1.14fr)!important;
  align-items:stretch!important;
}

html body.speaking-home.site-start .speaking-start-panel{
  height:100%!important;
  justify-content:flex-start!important;
  gap:10px!important;
}

html body.speaking-home.site-start .speaking-left .intro{
  min-height:0!important;
  flex:0 0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  padding:24px 24px!important;
}

html body.speaking-home.site-start .speaking-left .intro h1{
  font-size:30px!important;
  line-height:1.06!important;
  max-width:420px!important;
}

html body.speaking-home.site-start .speaking-left .intro .lead{
  font-size:14px!important;
  line-height:1.5!important;
  max-width:410px!important;
}

html body.speaking-home.site-start .speaking-left .mode-card{
  margin:0!important;
}

html body.speaking-home.site-start .speaking-right{
  display:block!important;
  height:100%!important;
  gap:0!important;
}

html body.speaking-home .task-preview{
  border:1px solid var(--joy-finish-line)!important;
  border-radius:18px!important;
  background:#fff!important;
  padding:18px 18px!important;
  margin:0!important;
  box-shadow:none!important;
  min-height:100%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:
    "head head"
    "label label"
    "title title"
    "cue cue"
    "focus action"
    "progress progress"
    "more more"!important;
  grid-template-rows:auto auto auto auto auto 1fr auto!important;
  align-content:start!important;
  gap:10px 14px!important;
}

html body.speaking-home .task-preview .section-title{
  grid-area:head!important;
  margin:0!important;
  align-items:center!important;
}

html body.speaking-home .task-preview .preview-label{
  grid-area:label!important;
}

html body.speaking-home .task-preview #cueTitle{
  grid-area:title!important;
}

html body.speaking-home .task-preview .cue-list{
  grid-area:cue!important;
}

html body.speaking-home .task-preview .preview-focus{
  grid-area:focus!important;
  align-self:center!important;
}

html body.speaking-home .task-preview #startPart2{
  grid-area:action!important;
  align-self:center!important;
  justify-self:end!important;
  margin:0!important;
}

html body.speaking-home .task-preview .today-route{
  grid-area:progress!important;
  align-self:start!important;
}

html body.speaking-home .task-preview .more-practice{
  grid-area:more!important;
}

html body.speaking-home .task-preview h3{
  margin:0!important;
  color:#2f293b!important;
  font-size:25px!important;
  line-height:1.16!important;
  letter-spacing:-.03em!important;
  max-width:560px!important;
}

html body.speaking-home .preview-label{
  margin:0!important;
  color:#7b4fe8!important;
  font-size:12px!important;
  font-weight:820!important;
}

html body.speaking-home .preview-focus{
  margin:0!important;
  color:#5f6672!important;
  font-size:13px!important;
  line-height:1.4!important;
}

html body.speaking-home .cue-list{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
}

html body.speaking-home .cue-list span{
  border:1px solid #f0edf7!important;
  border-radius:12px!important;
  background:#faf9fd!important;
  padding:8px 9px!important;
  color:#625b70!important;
  font-size:12.8px!important;
  line-height:1.3!important;
}

html body.speaking-home .more-practice summary{
  cursor:pointer!important;
  color:#5b5369!important;
  font-size:13px!important;
  font-weight:820!important;
  list-style:none!important;
}

html body.speaking-home .more-practice{
  border-top:1px solid var(--joy-finish-line)!important;
  padding-top:10px!important;
  margin-top:0!important;
}

html body.speaking-home .more-practice summary::-webkit-details-marker{
  display:none!important;
}

html body.speaking-home .more-practice-grid{
  display:grid!important;
  gap:7px!important;
  margin-top:10px!important;
}

html body.speaking-home .more-practice-grid span{
  display:block!important;
  color:#686174!important;
  font-size:12.8px!important;
  line-height:1.35!important;
}

html body.speaking-home .task-preview .primary,
html body.speaking-home.site-start #startSprint{
  background:#7b4fe8!important;
  background-image:none!important;
  color:#fff!important;
  border:1px solid #7b4fe8!important;
  box-shadow:none!important;
}

html body.speaking-home .task-preview .primary{
  width:max-content!important;
  min-width:116px!important;
  padding:0 18px!important;
}

html body.speaking-home.site-start main.page section.app .speaking-right .task-preview a.primary#startPart2{
  background:#7b4fe8!important;
  background-image:none!important;
  color:#fff!important;
  border-color:#7b4fe8!important;
  box-shadow:none!important;
}

html body.speaking-sprint .topbar{
  background:#fff!important;
  color:#20192f!important;
  border-bottom:1px solid var(--joy-finish-line)!important;
}

html body.speaking-sprint .app-dot{
  background:#f4efff!important;
  color:#7b4fe8!important;
  border-radius:12px!important;
}

html body.speaking-sprint .app-title span{
  color:#7b7287!important;
}

html body.speaking-sprint .home{
  background:#fff!important;
  color:#6d55b8!important;
  border:1px solid #e4def4!important;
  border-radius:14px!important;
}

html body.speaking-sprint .intro{
  background:#fff!important;
  border-color:var(--joy-finish-line)!important;
  border-radius:18px!important;
}

html body.speaking-sprint .eyebrow{
  color:#7b4fe8!important;
}

html body.speaking-sprint .meta-pill,
html body.speaking-sprint .state{
  background:#f7f4ff!important;
  color:#6d55b8!important;
  border-color:#e3dafb!important;
  border-radius:12px!important;
}

html body.speaking-sprint .primary,
html body.speaking-sprint .btn.primary,
html body.speaking-sprint button.primary,
html body.speaking-sprint a.primary{
  background:#7b4fe8!important;
  background-image:none!important;
  color:#fff!important;
  border:1px solid #7b4fe8!important;
  box-shadow:none!important;
}

html body.speaking-sprint .secondary,
html body.speaking-sprint .timer,
html body.speaking-sprint .mini,
html body.speaking-sprint .save-actions a{
  background:#fff!important;
  color:#5f566e!important;
  border-color:#e1dcea!important;
  box-shadow:none!important;
}

html body.speaking-sprint .danger{
  background:#fff7ed!important;
  color:#9a5a13!important;
  border-color:#f4dcc0!important;
}

html body.speaking-sprint .check input{
  accent-color:#7b4fe8!important;
}

html body.speaking-sprint #quick,
html body.speaking-sprint #support{
  position:static!important;
  transform:none!important;
}

html body.speaking-sprint .exam-panel{
  background:#fff!important;
  border:1px solid var(--joy-finish-line)!important;
  border-radius:16px!important;
  padding:12px!important;
}

html body.speaking-sprint .timer-grid{
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
  margin-bottom:10px!important;
}

html body.speaking-sprint .actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  margin-top:8px!important;
}

html body.speaking-sprint #recordMain,
html body.speaking-sprint #saveSprint{
  background:#7b4fe8!important;
  background-image:linear-gradient(135deg,#7b4fe8,#8e65f2)!important;
  color:#fff!important;
  border:1px solid #7b4fe8!important;
  border-radius:18px!important;
  box-shadow:none!important;
  min-height:54px!important;
  font-weight:820!important;
}

html body.speaking-sprint #recordMain{
  grid-column:1 / -1!important;
  font-size:15px!important;
}

html body.speaking-sprint #recordMain.is-recording,
html body.speaking-sprint #redoMain.is-recording{
  background:#e85d75!important;
  background-image:none!important;
  color:#fff!important;
  border-color:#e85d75!important;
}

html body.speaking-sprint #recordMain.is-done{
  background:#2fb36d!important;
  background-image:none!important;
  border-color:#2fb36d!important;
  color:#fff!important;
}

html body.speaking-sprint #redoMain.is-done{
  background:#e8f7ef!important;
  background-image:none!important;
  color:#237a55!important;
  border-color:rgba(35,122,85,.22)!important;
}

html body.speaking-sprint #recordMain:hover,
html body.speaking-sprint #saveSprint:hover{
  background:#6f43df!important;
  border-color:#6f43df!important;
}

html body.speaking-sprint #recordMain:focus-visible,
html body.speaking-sprint #saveSprint:focus-visible{
  outline:3px solid rgba(123,79,232,.22)!important;
  outline-offset:2px!important;
}

html body.speaking-sprint #listenMain,
html body.speaking-sprint #redoMain,
html body.speaking-sprint #prepTimer,
html body.speaking-sprint #speakTimer{
  background:#fff!important;
  background-image:none!important;
  color:#5f566e!important;
  border:1px solid #e1dcea!important;
  border-radius:14px!important;
  box-shadow:none!important;
  min-height:38px!important;
  font-weight:760!important;
}

html body.speaking-sprint #prepTimer,
html body.speaking-sprint #speakTimer{
  min-height:32px!important;
  font-size:11.5px!important;
  color:#756d82!important;
  background:#faf9fd!important;
}

html body.speaking-sprint #redoMain{
  background:#fff7ed!important;
  color:#9a5a13!important;
  border-color:#f4dcc0!important;
}

html body.speaking-sprint #listenMain:disabled,
html body.speaking-sprint #redoMain:disabled{
  background:#faf9fd!important;
  color:#aaa2b7!important;
  border-color:#eee9f5!important;
  opacity:1!important;
}

html body.speaking-sprint #problemChecks,
html body.speaking-sprint #instantFeedback,
html body.speaking-sprint #redoGoal,
html body.speaking-sprint #teacherHelpRow{
  opacity:.55!important;
}

html body.speaking-sprint:not(.speaking-listened) #problemChecks,
html body.speaking-sprint:not(.speaking-listened) #instantFeedback,
html body.speaking-sprint:not(.speaking-listened) #redoGoal,
html body.speaking-sprint:not(.speaking-listened) #teacherHelpRow{
  display:none!important;
}

html body.speaking-sprint.speaking-listened #problemChecks,
html body.speaking-sprint.speaking-listened #instantFeedback,
html body.speaking-sprint.speaking-listened #redoGoal,
html body.speaking-sprint.speaking-listened #teacherHelpRow{
  opacity:1!important;
}

html body.speaking-sprint:not(.speaking-listened) #examinerReminder{
  display:none!important;
}

html body.speaking-sprint #mainAudio{
  border-radius:12px!important;
  background:#faf9fd!important;
}

html body.stats-page .data-actions{
  gap:8px!important;
}

html body.stats-page .data-btn,
html body.stats-page.site-reflect .app .data-btn,
html body.stats-page #exportBtn,
html body.stats-page #importBtn,
html body.stats-page #resetBtn{
  background:#fff!important;
  background-image:none!important;
  color:#645b70!important;
  border:1px solid var(--joy-finish-line-strong)!important;
  box-shadow:none!important;
}

html body.stats-page #resetBtn{
  color:#8a5b1d!important;
  border-color:#ead8bc!important;
}

/*
  Global polish pass: slightly firmer structure so pages feel held together,
  while keeping JOY's quiet white workspace instead of a dashboard look.
*/
html body.site-start main.page section.app,
html body.site-focus main.page section.app,
html body.site-reflect main.page section.app,
html body.vocab-page main.page section.app,
html body.word-list-page main.page section.app,
html body.stats-page main.page section.app{
  border-color:#d8d0e3!important;
  box-shadow:0 16px 44px rgba(38,30,58,.055)!important;
}

html body.site-start .topbar,
html body.site-focus .topbar,
html body.site-reflect .topbar,
html body.vocab-page .topbar,
html body.word-list-page .topbar,
html body.stats-page .topbar{
  border-bottom-color:#e0d9ea!important;
}

html body.site-start .intro,
html body.site-start .hero,
html body.site-start .task-card,
html body.site-start .task,
html body.site-start .task-link,
html body.site-start .mode-card,
html body.site-start .status-card,
html body.site-start .progress,
html body.site-start .rhythm,
html body.site-start .rhythm-note,
html body.site-start .review-card,
html body.site-start .bank-item,
html body.site-focus .card,
html body.site-focus .intro,
html body.site-focus .audio-box,
html body.site-focus .q,
html body.site-reflect .card,
html body.site-reflect .hero,
html body.site-reflect .stat,
html body.site-reflect .row,
html body.site-reflect .next div,
html body.vocab-page .card,
html body.vocab-page .panel,
html body.word-list-page .card,
html body.word-list-page .panel,
html body.stats-page .card,
html body.stats-page .hero,
html body.stats-page .stat{
  border-color:#ded6e8!important;
}

html body.site-start .task-card.main,
html body.site-start .task.main,
html body.site-start .task-link.evidence,
html body.site-start .task-link.para,
html body.site-start .task-link.report,
html body.site-start .mode.active{
  border-color:#e6cbb7!important;
}

html body.site-start .nav-mini a,
html body.site-start .nav-mini button,
html body.site-focus .nav-mini a,
html body.site-focus .nav-mini button,
html body.site-reflect .nav-mini a,
html body.site-reflect .nav-mini button,
html body.vocab-page .nav-mini a,
html body.vocab-page .nav-mini button,
html body.word-list-page .nav-mini a,
html body.word-list-page .nav-mini button,
html body.stats-page .nav-mini a,
html body.stats-page .nav-mini button,
html body.site-start .home,
html body.site-focus .home,
html body.site-reflect .home,
html body.stats-page .data-btn,
html body.stats-page.site-reflect .app .data-btn,
html body.stats-page #exportBtn,
html body.stats-page #importBtn{
  border-color:#d7cfe2!important;
}

@media (max-width:760px){
  html body.reading-home .reading-start-screen{
    grid-template-columns:1fr!important;
  }

  html body.speaking-sprint main.page section.app > .inner{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "top"
      "intro"
      "step"
      "coach"
      "main"
      "quick"
      "support"
      "save"
      "note"!important;
  }

  html body.speaking-sprint .current-step{
    grid-template-columns:1fr!important;
  }

  html body.speaking-sprint .sprint-coach{
    grid-template-columns:1fr!important;
  }
}

@media (min-width:761px){
  html body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.speaking-sprint,.stats-page,.word-list-page,.vocab-page,.site-start,.site-focus,.site-reflect) main.page > .app,
  html body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.speaking-sprint,.stats-page,.word-list-page,.vocab-page,.site-start,.site-focus,.site-reflect) main.page > section.app{
    border-color:#d8d0e3!important;
    box-shadow:0 16px 44px rgba(38,30,58,.055)!important;
  }

  html body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.speaking-sprint,.stats-page,.word-list-page,.vocab-page,.site-start,.site-focus,.site-reflect) .topbar{
    border-bottom-color:#e0d9ea!important;
  }

  html body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.speaking-sprint,.stats-page,.word-list-page,.vocab-page,.site-start,.site-focus,.site-reflect) :is(.intro,.hero,.task-card,.task,.task-link,.mode-card,.status-card,.progress,.rhythm,.rhythm-note,.review-card,.bank-item,.card,.panel,.audio-box,.q,.stat,.row,.vocab-main-card,.vocab-left .hero,.vocab-right .stats,.vocab-right .actions,.vocab-right .queue,.task-preview,.current-step,.sprint-coach,.recording-controls,.quick-card,.support-card,.save-card,.flow-note){
    border-color:#ded6e8!important;
  }

  html body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.speaking-sprint,.stats-page,.word-list-page,.vocab-page):not(:has(.home-hero + .training-deck + .progress-board)) main.page > .app,
  html body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.speaking-sprint,.stats-page,.word-list-page,.vocab-page):not(:has(.home-hero + .training-deck + .progress-board)) main.page > section.app{
    border:1px solid #d8d0e3!important;
    box-shadow:0 16px 44px rgba(38,30,58,.055)!important;
  }

  html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task):not(:has(.home-hero + .training-deck + .progress-board)) .app,
  html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task):not(:has(.home-hero + .training-deck + .progress-board)) main.page > .app,
  html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task):not(:has(.home-hero + .training-deck + .progress-board)) main.page > section.app{
    border:1px solid #d8d0e3!important;
    box-shadow:0 16px 44px rgba(38,30,58,.055)!important;
  }

  html body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.speaking-sprint,.stats-page,.word-list-page,.vocab-page):not(:has(.home-hero + .training-deck + .progress-board)) :is(.intro,.hero,.task-card,.task,.task-link,.mode-card,.status-card,.progress,.rhythm,.rhythm-note,.review-card,.bank-item,.card,.panel,.audio-box,.q,.stat,.row,.vocab-main-card,.vocab-left .hero,.vocab-right .stats,.vocab-right .actions,.vocab-right .queue,.task-preview,.current-step,.sprint-coach,.recording-controls,.quick-card,.support-card,.save-card,.flow-note){
    border-color:#ded6e8!important;
  }

  html body.joy-home-polished main.page > .app,
  html body.joy-home-polished main.page > section.app{
    border-color:#d8d0e3!important;
  }

  html body.joy-home-polished :is(.home-hero,.training-deck,.progress-board,.priority-card,.daily-task,.progress-row,.next-step-card,.side-report-entry,.report-entry){
    border-color:#ded6e8!important;
  }
}

/* Unified daily progress panels. */
.today-progress-card,
.today-overview-card,
.today-report-list,
.today-report-row{
  border:1px solid #ded6e8!important;
  background:#fff!important;
  box-shadow:none!important;
}

.today-progress-card{
  border-radius:18px;
  padding:14px;
  display:grid;
  gap:10px;
  color:#1f1a2e;
}

.today-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.today-card-head small,
.today-overview-card small{
  display:block;
  color:#d46b34;
  font-size:10.5px;
  font-weight:820;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:5px;
}

.today-card-head h2{
  margin:0!important;
  font-size:18px!important;
  line-height:1.1!important;
  letter-spacing:-.035em!important;
}

.today-state{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 9px;
  border-radius:999px;
  background:#fbfaf8;
  border:1px solid rgba(31,26,46,.08);
  color:#76604b;
  font-size:10.5px;
  font-weight:850;
  white-space:nowrap;
}

.today-state.done,
.today-report-row i.done{
  background:#e8f7ef;
  color:#237a55;
  border-color:#c8ead8;
}

.today-state.active,
.today-report-row i.active{
  background:#fff5df;
  color:#a36514;
  border-color:#f0d7a7;
}

.today-meter{
  height:8px;
  border-radius:999px;
  background:#f3f0f7;
  overflow:hidden;
}

.today-meter span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:#7b4fe8;
}

.today-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.today-facts div{
  border:1px solid rgba(31,26,46,.07);
  border-radius:14px;
  background:#fbfaf8;
  padding:9px 10px;
}

.today-facts b{
  display:block;
  color:#7b4fe8;
  font-size:18px;
  line-height:1;
  letter-spacing:-.035em;
  margin-bottom:4px;
}

.today-facts span,
.today-target,
.today-detail,
.today-next{
  color:#675f72;
  font-size:12px;
  line-height:1.42;
}

.today-target,
.today-detail,
.today-next{
  margin:0;
}

.today-target b,
.today-next b{
  color:#1f1a2e;
}

.today-overview-card{
  border-radius:22px;
  padding:16px;
  margin-bottom:12px;
}

.today-overview-card h1{
  margin:0 0 7px!important;
  color:#1f1a2e!important;
  font-size:28px!important;
  line-height:1.08!important;
  letter-spacing:-.045em!important;
}

.today-overview-card p{
  margin:0!important;
  color:#675f72!important;
  font-size:13px!important;
  line-height:1.45!important;
}

.today-report-list{
  border-radius:22px;
  padding:8px;
  display:grid;
  gap:8px;
}

.today-report-row{
  border-radius:16px;
  padding:11px 12px;
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:10px;
  align-items:center;
  color:inherit;
  text-decoration:none;
}

.today-letter{
  width:32px;
  height:32px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#fff7ef;
  border:1px solid rgba(212,107,52,.14);
  color:#d46b34;
  font-weight:850;
}

.today-report-row b{
  display:block;
  color:#1f1a2e;
  font-size:13.5px;
  letter-spacing:-.025em;
  margin-bottom:3px;
}

.today-report-row em,
.today-report-row strong{
  display:block;
  font-style:normal;
  font-weight:650;
  color:#675f72;
  font-size:11.2px;
  line-height:1.35;
}

.today-report-row strong{
  color:#4f465f;
  margin-top:3px;
}

.today-report-row i{
  font-style:normal;
  border:1px solid rgba(31,26,46,.08);
  background:#fbfaf8;
  color:#76604b;
  border-radius:999px;
  padding:5px 8px;
  font-size:10.2px;
  font-weight:850;
  white-space:nowrap;
}

@media (max-width:620px){
  .today-report-row{
    grid-template-columns:34px 1fr;
  }

  .today-report-row i{
    grid-column:2;
    justify-self:start;
  }
}

/* Learning Report page layout guard. */
@media (min-width:760px){
  html body.stats-page .app,
  html body.stats-page main.page > .app,
  html body.stats-page main.page > section.app{
    width:min(100%,980px)!important;
    border-radius:22px!important;
    box-shadow:none!important;
    border-color:#ded6e8!important;
    overflow:visible!important;
  }

  html body.stats-page .app > .inner,
  html body.stats-page main.page > .app > .inner,
  html body.stats-page main.page > section.app > .inner{
    display:block!important;
    padding:18px 20px 22px!important;
  }

  html body.stats-page .report-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 300px!important;
    gap:14px!important;
    align-items:start!important;
    width:100%!important;
  }

  html body.stats-page .report-main,
  html body.stats-page .report-side{
    display:grid!important;
    gap:12px!important;
    min-width:0!important;
    width:auto!important;
  }

  html body.stats-page .report-purpose{
    width:100%!important;
  }
}

/* Focus workbench polish for Listening, Reading, and Writing practice pages. */
html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task) .current-step,
html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task) .sprint-coach{
  border:1px solid #ded6e8!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:none!important;
}

html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task) .current-step{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin:0 0 10px!important;
  padding:0!important;
  overflow:hidden!important;
}

html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task) .current-step div{
  padding:12px 16px!important;
  min-height:60px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task) .current-step div + div{
  border-left:1px solid #ded6e8!important;
}

html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task) .current-step span,
html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task) .sprint-coach b{
  color:#7b4fe8!important;
  font-size:11px!important;
  font-weight:820!important;
}

html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task) .current-step b{
  margin-top:4px!important;
  color:#171426!important;
  font-size:16px!important;
  line-height:1.2!important;
  letter-spacing:-.025em!important;
}

html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task) .sprint-coach{
  display:grid!important;
  grid-template-columns:auto 1fr!important;
  gap:10px!important;
  align-items:center!important;
  margin:0 0 12px!important;
  padding:10px 14px!important;
}

html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task) .sprint-coach span{
  color:#4f465f!important;
  font-size:12.5px!important;
  line-height:1.45!important;
}

html body.listening-drill.site-focus .topbar{
  background:#fff!important;
  color:#171426!important;
  border-bottom:1px solid #e0d9ea!important;
}

html body.listening-drill.site-focus .title span{
  color:#8b8499!important;
}

html body.listening-drill.site-focus .dot{
  border-radius:13px!important;
  background:#f2edff!important;
  color:#7b4fe8!important;
}

html body.listening-drill.site-focus .home{
  color:#625c72!important;
  border-color:#d7cfe2!important;
  background:#fff!important;
}

html body.listening-drill.site-focus .layout{
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr)!important;
  gap:14px!important;
}

html body.listening-drill.site-focus .intro,
html body.listening-drill.site-focus .card,
html body.writing-card.site-focus .intro,
html body.writing-card.site-focus .panel,
html body.writing-card.site-focus .timer-row,
html body.writing-exam.site-focus .prompt-panel,
html body.writing-exam.site-focus .prompt-card,
html body.writing-exam.site-focus .prep,
html body.writing-exam.site-focus textarea,
html body.reading-task.site-focus .goal-card,
html body.reading-task.site-focus .panel,
html body.reading-task.site-focus .evidence-box{
  border-color:#ded6e8!important;
}

html body.writing-card.site-focus .inner{
  display:grid!important;
  grid-template-columns:minmax(220px,.58fr) minmax(430px,1.08fr) minmax(280px,.74fr)!important;
  grid-template-areas:
    "top top top"
    "intro intro intro"
    "step step step"
    "coach coach coach"
    "timer steps type"
    "check steps type"!important;
  gap:12px 16px!important;
}

html body.writing-card.site-focus .topbar{grid-area:top!important}
html body.writing-card.site-focus .intro{grid-area:intro!important;margin:0!important}
html body.writing-card.site-focus .current-step{grid-area:step!important}
html body.writing-card.site-focus .sprint-coach{grid-area:coach!important}
html body.writing-card.site-focus .timer-row{grid-area:timer!important;margin:0!important}
html body.writing-card.site-focus section.panel:nth-of-type(5){grid-area:type!important;margin:0!important}
html body.writing-card.site-focus section.panel:nth-of-type(6){grid-area:steps!important;margin:0!important}
html body.writing-card.site-focus section.panel:nth-of-type(7){grid-area:check!important;margin:0!important}

html body.writing-card.site-focus .panel,
html body.writing-card.site-focus .timer-row{
  height:auto!important;
}

html body.writing-card.site-focus .steps{
  gap:10px!important;
}

html body.writing-card.site-focus textarea{
  min-height:88px!important;
  font-size:14px!important;
}

html body.writing-exam.site-focus .current-step,
html body.writing-exam.site-focus .sprint-coach{
  margin-left:18px!important;
  margin-right:18px!important;
}

html body.writing-exam.site-focus .current-step{
  margin-top:14px!important;
}

html body.writing-exam.site-focus .layout{
  grid-template-columns:330px 1fr!important;
  min-height:0!important;
}

html body.writing-exam.site-focus textarea{
  min-height:470px!important;
  font-size:15.5px!important;
}

html body.reading-task.site-focus .workbench{
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr)!important;
}

html body.reading-task.site-focus .passage-body,
html body.reading-task.site-focus .question-body{
  height:calc(100vh - 338px)!important;
  min-height:500px!important;
}

@media (max-width:860px){
  html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task) .current-step{
    grid-template-columns:1fr!important;
  }

  html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task) .current-step div + div{
    border-left:0!important;
    border-top:1px solid #ded6e8!important;
  }

  html body.site-focus:is(.listening-drill,.writing-card,.writing-exam,.reading-task) .sprint-coach{
    grid-template-columns:1fr!important;
  }

  html body.writing-card.site-focus .inner{
    display:block!important;
  }
}

@media (min-width:761px){
  html body.site-reflect:not(:has(.home-hero + .training-deck + .progress-board)) .app,
  html body.site-reflect:not(:has(.home-hero + .training-deck + .progress-board)) main.page > .app,
  html body.site-reflect:not(:has(.home-hero + .training-deck + .progress-board)) main.page > section.app{
    border:1px solid #d8d0e3!important;
    box-shadow:0 16px 44px rgba(38,30,58,.055)!important;
  }

  html body.site-reflect:not(:has(.home-hero + .training-deck + .progress-board)) :is(.hero,.card,.stat,.item,.next div,.row,.home,.btn.secondary){
    border-color:#ded6e8!important;
  }
}

/* Final override: Learning Report must not inherit old stats grid placement. */
@media (min-width:760px){
  html body.stats-page.site-reflect main.page > section.app,
  html body.stats-page.site-reflect main.page > .app{
    width:min(100%,980px)!important;
    border-radius:22px!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  html body.stats-page.site-reflect main.page > section.app > div.inner,
  html body.stats-page.site-reflect main.page > .app > div.inner{
    display:block!important;
    grid-template-columns:none!important;
    grid-template-areas:none!important;
    grid-auto-flow:row!important;
    padding:18px 20px 22px!important;
  }

  html body.stats-page.site-reflect .report-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 300px!important;
    gap:14px!important;
    align-items:start!important;
    width:100%!important;
  }

  html body.stats-page.site-reflect .report-main,
  html body.stats-page.site-reflect .report-side{
    display:grid!important;
    gap:12px!important;
    min-width:0!important;
    width:auto!important;
  }
}