/*
  JOY IELTS horizontal skin
  Goal: keep the original JOY color mood, rebuild every UI element for landscape.
  Scope: visual layout only. No learning logic, storage, audio, reports, or buttons are removed.
*/

:root{
  --joy-ink:#171426;
  --joy-text:#5f5a70;
  --joy-muted:#8b8499;
  --joy-purple:#40506f;
  --joy-purple-2:#2f6f73;
  --joy-purple-soft:#eef4f4;
  --joy-line:#e9e2f7;
  --joy-line-2:#ded7f4;
  --joy-mint:#e8f7ef;
  --joy-mint-ink:#237a55;
  --joy-cream:#fff5df;
  --joy-cream-ink:#a36514;
  --joy-amber:#d99b34;
  --joy-navy:#24344f;
  --joy-teal:#2f6f73;
  --joy-blue:#eefcff;
  --joy-bg:#f5f7f8;
  --joy-paper:#fffefa;
  --joy-shadow:0 18px 54px rgba(72,54,130,.11);
}

/* Launch desktop polish: final cascade layer for module pages. */
@media (min-width:900px){
  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .page{
    padding:18px !important;
    align-items:flex-start !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .app{
    width:min(1240px, calc(100vw - 36px)) !important;
    max-width:none !important;
    border-radius:26px !important;
    overflow:visible !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .inner{
    width:100% !important;
    display:grid !important;
    gap:14px 18px !important;
    align-items:start !important;
    padding:18px 20px 22px !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .topbar{
    grid-column:1 / -1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 2px 12px !important;
    border-bottom:1px solid #f0edf8 !important;
  }

  .nav-mini{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }

  .nav-mini a,
  .nav-mini button{
    height:34px !important;
    padding:0 13px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid #e9e2f7 !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#4d4a5d !important;
    font-size:11.5px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
    box-shadow:0 5px 14px rgba(72,54,130,.035) !important;
  }

  .nav-mini button{
    min-width:44px !important;
    color:#8b63ee !important;
    background:#fbf9ff !important;
  }

  /* Vocab: one word card, compact progress, clustered actions. */
  .vocab-page .inner{
    grid-template-columns:280px minmax(470px,520px) minmax(300px,1fr) !important;
  }

  .vocab-page .vocab-left{
    grid-column:1 !important;
    grid-row:2 !important;
    display:grid !important;
    gap:10px !important;
    align-content:start !important;
  }

  .vocab-page .vocab-main-card{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding:16px 18px !important;
    border-radius:22px !important;
    min-height:0 !important;
  }

  .vocab-page .vocab-right{
    grid-column:3 !important;
    grid-row:2 !important;
    display:grid !important;
    gap:12px !important;
    align-content:start !important;
  }

  .vocab-page .vocab-left .hero,
  .vocab-page .vocab-right .stats,
  .vocab-page .vocab-right .actions,
  .vocab-page .vocab-right .queue{
    margin:0 !important;
    border-radius:22px !important;
  }

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

  .vocab-page .vocab-left h1{
    font-size:25px !important;
    line-height:1.08 !important;
    max-width:230px !important;
  }

  .vocab-page .vocab-left .resume{
    grid-template-columns:1fr auto !important;
    margin-top:14px !important;
    padding:12px !important;
    border-radius:18px !important;
  }

  .vocab-page .vocab-left .progress{
    height:7px !important;
    margin:2px 4px 0 !important;
  }

  .vocab-page .vocab-left .meta{
    margin:0 4px !important;
    font-size:12px !important;
  }

  .vocab-page .word{
    font-size:26px !important;
  }

  .vocab-page .meaning{
    font-size:15px !important;
    padding:12px 0 !important;
  }

  .vocab-page .example{
    font-size:14px !important;
    line-height:1.45 !important;
  }

  .vocab-page .audio-grid,
  .vocab-page .repeat-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .vocab-page .audio-btn,
  .vocab-page .record-btn,
  .vocab-page .replay-btn,
  .vocab-page .action,
  .vocab-page .check{
    height:38px !important;
    border-radius:14px !important;
    font-size:12.5px !important;
  }

  .vocab-page .repeat-panel{
    padding:12px !important;
    border-radius:18px !important;
  }

  .vocab-page .spell{
    grid-template-columns:1fr 96px !important;
    gap:10px !important;
  }

  .vocab-page .spell input{
    height:40px !important;
    border-radius:14px !important;
    font-size:14px !important;
  }

  .vocab-page .vocab-right .stats{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .vocab-page .vocab-right .stat{
    min-height:76px !important;
    padding:12px !important;
    display:grid !important;
    grid-template-columns:34px 1fr !important;
    grid-template-rows:auto auto !important;
    gap:2px 10px !important;
    text-align:left !important;
    align-items:center !important;
  }

  .vocab-page .vocab-right .stat i{
    grid-row:1 / 3 !important;
    width:34px !important;
    height:34px !important;
    border-radius:13px !important;
    display:grid !important;
    place-items:center !important;
    background:rgba(255,255,255,.72) !important;
    font-size:18px !important;
    margin:0 !important;
  }

  .vocab-page .vocab-right .stat b{
    font-size:20px !important;
    line-height:1 !important;
    margin:0 !important;
  }

  .vocab-page .vocab-right .stat span{
    font-size:11.5px !important;
    line-height:1.15 !important;
  }

  .vocab-page .vocab-right .actions{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    gap:9px !important;
  }

  .vocab-page .vocab-right .queue{
    padding:15px !important;
  }

  .vocab-page .queue h2{
    font-size:17px !important;
  }

  .vocab-page .queue p{
    font-size:13px !important;
  }

  .vocab-page .queue #openReviewQueue{
    width:100% !important;
    height:38px !important;
    margin-top:10px !important;
  }

  /* Reading: left current task, center drills, right review, passage bank below. */
  .reading-home .inner{
    grid-template-columns:300px minmax(480px,1fr) 300px !important;
    grid-auto-flow:row dense !important;
  }

  .reading-home .task-card.main{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  .reading-home .task-card.main .card-row{
    grid-template-columns:34px 1fr !important;
    gap:12px !important;
  }

  .reading-home .task-card.main .primary{
    grid-column:1 / -1 !important;
    width:100% !important;
    height:40px !important;
    margin-top:10px !important;
  }

  .reading-home .rhythm-note{
    grid-column:1 !important;
    grid-row:3 !important;
    margin:0 !important;
    padding:15px !important;
    border-radius:22px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(1){
    grid-column:2 !important;
    grid-row:2 !important;
    margin:2px 0 -2px !important;
  }

  .reading-home .today-list{
    grid-column:2 !important;
    grid-row:3 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    margin:0 !important;
  }

  .reading-home .today-list .task-link{
    min-height:104px !important;
    padding:14px !important;
    border-radius:20px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(2){
    grid-column:3 !important;
    grid-row:2 !important;
    margin:2px 0 -2px !important;
  }

  .reading-home .review-card{
    grid-column:3 !important;
    grid-row:3 !important;
    margin:0 !important;
    padding:14px !important;
    border-radius:20px !important;
    min-height:104px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(3){
    grid-column:1 / -1 !important;
    grid-row:4 !important;
    margin:8px 0 -4px !important;
  }

  .reading-home .bank-list:nth-of-type(1){
    grid-column:1 / -1 !important;
    grid-row:5 !important;
  }

  .reading-home .inner > .section-title:nth-of-type(4){
    grid-column:1 / -1 !important;
    grid-row:6 !important;
    margin:2px 0 -4px !important;
  }

  .reading-home .bank-list:nth-of-type(2){
    grid-column:1 / -1 !important;
    grid-row:7 !important;
  }

  .reading-home .bank-list{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
    margin:0 !important;
  }

  .reading-home .bank-item{
    min-height:76px !important;
    padding:14px !important;
    border-radius:18px !important;
  }

  .reading-home .warm-note{
    grid-column:1 / -1 !important;
    grid-row:8 !important;
    margin:0 !important;
    padding:13px 16px !important;
    border-radius:20px !important;
  }

  /* Listening / Writing / Speaking homes share the homepage desktop rhythm. */
  body:is(.listening-home,.writing-home,.speaking-home) .inner{
    grid-template-columns:285px minmax(470px,1fr) 300px !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .hero,
  body:is(.listening-home,.writing-home,.speaking-home) .intro{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    min-height:0 !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) h1{
    font-size:26px !important;
    line-height:1.08 !important;
  }

  .listening-home .section-title:first-of-type,
  .speaking-home .section-title:first-of-type{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:2px 0 -2px !important;
  }

  .listening-home #taskList{
    grid-column:2 !important;
    grid-row:3 / span 3 !important;
    display:grid !important;
    gap:10px !important;
    padding:0 !important;
  }

  .listening-home .task{
    min-height:90px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .listening-home #startBtn,
  .listening-home #reportBtn{
    grid-column:2 !important;
    width:auto !important;
    height:40px !important;
    margin:0 !important;
    border-radius:14px !important;
  }

  .listening-home .note{
    grid-column:3 !important;
    grid-row:2 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .listening-home .progress{
    grid-column:3 !important;
    grid-row:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .writing-home .task-card{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding:16px !important;
    border-radius:22px !important;
  }

  .writing-home > .section-title,
  .writing-home .inner > .section-title{
    grid-column:2 !important;
    margin:2px 0 -4px !important;
  }

  .writing-home .task-link{
    grid-column:2 !important;
    margin:0 !important;
    min-height:90px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .writing-home .rhythm{
    grid-column:3 !important;
    grid-row:2 / span 4 !important;
    margin:0 !important;
    padding:16px !important;
    border-radius:22px !important;
  }

  .writing-home .rhythm-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .speaking-home .mode-card{
    grid-column:1 !important;
    grid-row:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .status-card{
    grid-column:1 !important;
    grid-row:4 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .task-card{
    grid-column:2 !important;
    margin:0 !important;
    min-height:96px !important;
    padding:15px 16px !important;
    border-radius:18px !important;
  }

  .speaking-home .task-card.main{
    grid-row:auto !important;
    padding-top:15px !important;
  }

  .speaking-home #startSprint{
    grid-column:2 !important;
    width:auto !important;
    height:40px !important;
    margin:0 !important;
    border-radius:14px !important;
  }

  .speaking-home #reviewRecords,
  .speaking-home .tip,
  .speaking-home .progress{
    grid-column:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .progress{
    grid-row:2 / span 2 !important;
  }

  /* Word list: word bank is a desktop table-like working area. */
  .word-list-page .inner{
    grid-template-columns:300px minmax(560px,1fr) !important;
  }

  .word-list-page .hero,
  .word-list-page .controls,
  .word-list-page .summary,
  .word-list-page .more{
    grid-column:1 !important;
    margin:0 !important;
  }

  .word-list-page .list{
    grid-column:2 !important;
    grid-row:2 / span 5 !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    align-content:start !important;
  }

  .word-list-page .card{
    margin:0 !important;
    min-height:88px !important;
    border-radius:18px !important;
    padding:14px 16px !important;
  }

  /* Report page: real-time report first, learning report second, data controls lower. */
  .stats-page .inner{
    grid-template-columns:285px minmax(470px,1fr) 300px !important;
  }

  .stats-page .hero{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  .stats-page .card{
    margin:0 !important;
    padding:16px !important;
    border-radius:22px !important;
  }

  .stats-page .card:nth-of-type(1){
    grid-column:2 !important;
    grid-row:2 !important;
  }

  .stats-page .card:nth-of-type(2){
    grid-column:2 !important;
    grid-row:3 !important;
  }

  .stats-page .card:nth-of-type(3){
    grid-column:3 !important;
    grid-row:2 !important;
  }

  .stats-page .card:nth-of-type(4){
    grid-column:3 !important;
    grid-row:3 / span 2 !important;
  }

  .stats-page .card:nth-of-type(5){
    grid-column:1 / 3 !important;
    grid-row:4 !important;
  }

  .stats-page .card:nth-of-type(6){
    grid-column:3 !important;
    grid-row:5 !important;
  }

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

  .stats-page .stat{
    min-height:74px !important;
    padding:11px !important;
    text-align:left !important;
  }

  .stats-page .rows{
    gap:9px !important;
  }

  .stats-page .row{
    grid-template-columns:68px 1fr auto !important;
    padding:10px 0 0 !important;
  }
}

@media (min-width:900px) and (max-width:1320px){
  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .app{
    width:calc(100vw - 28px) !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .inner{
    gap:12px !important;
    padding:16px !important;
  }

  .nav-mini a,
  .nav-mini button{
    height:32px !important;
    padding:0 11px !important;
    font-size:11px !important;
  }

  .vocab-page .inner{
    grid-template-columns:260px minmax(430px,500px) minmax(285px,1fr) !important;
  }

  .reading-home .inner,
  body:is(.listening-home,.writing-home,.speaking-home,.stats-page) .inner{
    grid-template-columns:270px minmax(430px,1fr) 285px !important;
  }
}

/* Final desktop productization for non-home pages. */
@media (min-width:900px){
  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .app{
    width:min(1220px, calc(100vw - 36px)) !important;
    max-width:none !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .inner{
    width:100% !important;
    display:grid !important;
    gap:16px !important;
    align-items:start !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .topbar{
    grid-column:1 / -1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:56px !important;
    margin:0 !important;
    padding:0 2px 12px !important;
    border-bottom:1px solid #f0edf8 !important;
  }

  .nav-mini{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex-wrap:wrap !important;
  }

  .nav-mini a,
  .nav-mini button{
    height:36px !important;
    padding:0 14px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid #e9e2f7 !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#4d4a5d !important;
    font-size:12px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
    box-shadow:0 5px 14px rgba(72,54,130,.035) !important;
  }

  .nav-mini button{
    color:#8b63ee !important;
    background:#fbf9ff !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .inner{
    grid-template-columns:minmax(270px,.82fr) minmax(440px,1.2fr) minmax(270px,.82fr) !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .hero,
  body:is(.listening-home,.writing-home,.speaking-home) .intro{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    min-height:178px !important;
    border-radius:24px !important;
  }

  .listening-home .section-title:first-of-type{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 0 8px !important;
  }

  .listening-home #taskList{
    grid-column:2 !important;
    grid-row:2 / span 4 !important;
    display:grid !important;
    gap:10px !important;
    padding-top:48px !important;
  }

  .listening-home #startBtn{
    grid-column:2 !important;
    grid-row:6 !important;
    margin:0 !important;
  }

  .listening-home #reportBtn{
    grid-column:2 !important;
    grid-row:7 !important;
    margin:0 !important;
  }

  .listening-home .note{
    grid-column:3 !important;
    grid-row:2 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .listening-home .progress{
    grid-column:3 !important;
    grid-row:3 / span 3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .listening-home .task{
    min-height:86px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .writing-home .task-card{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
    border-radius:24px !important;
  }

  .writing-home .section-title{
    grid-column:2 !important;
    grid-row:3 !important;
    margin:0 0 -6px !important;
  }

  .writing-home .task-link{
    grid-column:2 !important;
    margin:0 !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .writing-home .rhythm{
    grid-column:3 !important;
    grid-row:2 / span 4 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .mode-card{
    grid-column:1 !important;
    grid-row:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .status-card{
    grid-column:1 !important;
    grid-row:4 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .section-title:first-of-type{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 0 8px !important;
  }

  .speaking-home .task-card{
    grid-column:2 !important;
    margin:0 !important;
    min-height:88px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .speaking-home .task-card.main{grid-row:2 !important; padding-top:48px !important;}
  .speaking-home .task-card:not(.main):nth-of-type(2){grid-row:3 !important;}
  .speaking-home .task-card:not(.main):nth-of-type(3){grid-row:4 !important;}

  .speaking-home #startSprint{
    grid-column:2 !important;
    margin:0 !important;
  }

  .speaking-home #reviewRecords,
  .speaking-home .tip,
  .speaking-home .progress{
    grid-column:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .reading-home .inner{
    grid-template-columns:minmax(300px,.92fr) minmax(450px,1.16fr) minmax(280px,.86fr) !important;
  }

  .reading-home .task-card.main{
    grid-column:1 / 3 !important;
    grid-row:2 !important;
    margin:0 !important;
    border-radius:24px !important;
  }

  .reading-home .rhythm-note{
    grid-column:3 !important;
    grid-row:2 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .reading-home .today-list{
    grid-column:1 / 3 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .reading-home .review-card{
    grid-column:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .reading-home .bank-list{
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .reading-home .section-title{
    grid-column:1 / -1 !important;
    margin:2px 0 -8px !important;
  }

  .reading-home .warm-note{
    grid-column:1 / -1 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .vocab-page .inner{
    grid-template-columns:minmax(260px,.8fr) minmax(440px,1.12fr) minmax(270px,.88fr) !important;
  }

  .vocab-page .hero,
  .vocab-page .progress,
  .vocab-page .meta{
    grid-column:1 !important;
    margin:0 !important;
  }

  .vocab-page .card{
    grid-column:2 !important;
    grid-row:2 / span 8 !important;
    margin:0 !important;
    border-radius:24px !important;
  }

  .vocab-page .actions,
  .vocab-page .stats,
  .vocab-page .queue{
    grid-column:3 !important;
    margin:0 !important;
  }

  .word-list-page .inner{
    grid-template-columns:minmax(300px,.72fr) minmax(560px,1.28fr) !important;
  }

  .word-list-page .hero,
  .word-list-page .controls,
  .word-list-page .summary,
  .word-list-page .more{
    grid-column:1 !important;
    margin:0 !important;
  }

  .word-list-page .list{
    grid-column:2 !important;
    grid-row:2 / span 5 !important;
    margin:0 !important;
    display:grid !important;
    gap:10px !important;
    align-content:start !important;
  }

  .word-list-page .card{
    border-radius:18px !important;
    padding:14px 16px !important;
  }

  .stats-page .inner{
    grid-template-columns:minmax(300px,.9fr) minmax(420px,1.1fr) minmax(280px,.9fr) !important;
  }

  .stats-page .hero{
    grid-column:1 / 3 !important;
    grid-row:3 !important;
    margin:0 !important;
    border-radius:24px !important;
  }

  .stats-page .card{
    margin:0 !important;
    border-radius:22px !important;
  }

  .stats-page .card:nth-of-type(1){
    grid-column:1 / 3 !important;
    grid-row:2 !important;
  }

  .stats-page .card:nth-of-type(2){
    grid-column:1 / 3 !important;
    grid-row:4 !important;
  }

  .stats-page .card:nth-of-type(3),
  .stats-page .card:nth-of-type(4){
    grid-column:3 !important;
  }

  .stats-page .card:nth-of-type(5),
  .stats-page .card:nth-of-type(6){
    grid-column:1 / -1 !important;
  }
}

/* Final launch cascade: keep this block last so old landscape rules cannot override it. */
@media (min-width:900px){
  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .page{
    padding:18px !important;
    align-items:flex-start !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .app{
    width:min(1240px, calc(100vw - 36px)) !important;
    max-width:none !important;
    border-radius:26px !important;
    overflow:visible !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .inner{
    width:100% !important;
    display:grid !important;
    gap:14px 18px !important;
    align-items:start !important;
    padding:18px 20px 22px !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .topbar{
    grid-column:1 / -1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 2px 12px !important;
    border-bottom:1px solid #f0edf8 !important;
  }

  .nav-mini{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }

  .nav-mini a,
  .nav-mini button{
    height:34px !important;
    padding:0 13px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid #e9e2f7 !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#4d4a5d !important;
    font-size:11.5px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
    box-shadow:0 5px 14px rgba(72,54,130,.035) !important;
  }

  .nav-mini button{
    min-width:44px !important;
    color:#8b63ee !important;
    background:#fbf9ff !important;
  }

  .vocab-page .inner{
    grid-template-columns:280px minmax(470px,520px) minmax(300px,1fr) !important;
  }

  .vocab-page .vocab-left{
    grid-column:1 !important;
    grid-row:2 !important;
    display:grid !important;
    gap:10px !important;
    align-content:start !important;
  }

  .vocab-page .vocab-main-card{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding:16px 18px !important;
    border-radius:22px !important;
    min-height:0 !important;
  }

  .vocab-page .vocab-right{
    grid-column:3 !important;
    grid-row:2 !important;
    display:grid !important;
    gap:12px !important;
    align-content:start !important;
  }

  .vocab-page .vocab-left .hero,
  .vocab-page .vocab-right .stats,
  .vocab-page .vocab-right .actions,
  .vocab-page .vocab-right .queue{
    margin:0 !important;
    border-radius:22px !important;
  }

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

  .vocab-page .vocab-left h1{
    font-size:25px !important;
    line-height:1.08 !important;
    max-width:230px !important;
  }

  .vocab-page .vocab-left .resume{
    grid-template-columns:1fr auto !important;
    margin-top:14px !important;
    padding:12px !important;
    border-radius:18px !important;
  }

  .vocab-page .vocab-left .progress{
    height:7px !important;
    margin:2px 4px 0 !important;
  }

  .vocab-page .vocab-left .meta{
    margin:0 4px !important;
    font-size:12px !important;
  }

  .vocab-page .word{
    font-size:26px !important;
  }

  .vocab-page .meaning{
    font-size:15px !important;
    padding:12px 0 !important;
  }

  .vocab-page .example{
    font-size:14px !important;
    line-height:1.45 !important;
  }

  .vocab-page .audio-grid,
  .vocab-page .repeat-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .vocab-page .audio-btn,
  .vocab-page .record-btn,
  .vocab-page .replay-btn,
  .vocab-page .action,
  .vocab-page .check{
    height:38px !important;
    border-radius:14px !important;
    font-size:12.5px !important;
  }

  .vocab-page .repeat-panel{
    padding:12px !important;
    border-radius:18px !important;
  }

  .vocab-page .spell{
    grid-template-columns:1fr 96px !important;
    gap:10px !important;
  }

  .vocab-page .spell input{
    height:40px !important;
    border-radius:14px !important;
    font-size:14px !important;
  }

  .vocab-page .vocab-right .stats{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .vocab-page .vocab-right .stat{
    min-height:76px !important;
    padding:12px !important;
    display:grid !important;
    grid-template-columns:34px 1fr !important;
    grid-template-rows:auto auto !important;
    gap:2px 10px !important;
    text-align:left !important;
    align-items:center !important;
  }

  .vocab-page .vocab-right .stat i{
    grid-row:1 / 3 !important;
    width:34px !important;
    height:34px !important;
    border-radius:13px !important;
    display:grid !important;
    place-items:center !important;
    background:rgba(255,255,255,.72) !important;
    font-size:18px !important;
    margin:0 !important;
  }

  .vocab-page .vocab-right .stat b{
    font-size:20px !important;
    line-height:1 !important;
    margin:0 !important;
  }

  .vocab-page .vocab-right .stat span{
    font-size:11.5px !important;
    line-height:1.15 !important;
  }

  .vocab-page .vocab-right .actions{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    gap:9px !important;
  }

  .vocab-page .vocab-right .queue{
    padding:15px !important;
  }

  .vocab-page .queue h2{
    font-size:17px !important;
  }

  .vocab-page .queue p{
    font-size:13px !important;
  }

  .vocab-page .queue #openReviewQueue{
    width:100% !important;
    height:38px !important;
    margin-top:10px !important;
  }

  .reading-home .inner{
    grid-template-columns:300px minmax(480px,1fr) 300px !important;
    grid-auto-flow:row dense !important;
  }

  .reading-home .task-card.main{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  .reading-home .task-card.main .card-row{
    grid-template-columns:34px 1fr !important;
    gap:12px !important;
  }

  .reading-home .task-card.main .primary{
    grid-column:1 / -1 !important;
    width:100% !important;
    height:40px !important;
    margin-top:10px !important;
  }

  .reading-home .rhythm-note{
    grid-column:1 !important;
    grid-row:3 !important;
    margin:0 !important;
    padding:15px !important;
    border-radius:22px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(1){
    grid-column:2 !important;
    grid-row:2 !important;
    margin:2px 0 -2px !important;
  }

  .reading-home .today-list{
    grid-column:2 !important;
    grid-row:3 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    margin:0 !important;
  }

  .reading-home .today-list .task-link{
    min-height:104px !important;
    padding:14px !important;
    border-radius:20px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(2){
    grid-column:3 !important;
    grid-row:2 !important;
    margin:2px 0 -2px !important;
  }

  .reading-home .review-card{
    grid-column:3 !important;
    grid-row:3 !important;
    margin:0 !important;
    padding:14px !important;
    border-radius:20px !important;
    min-height:104px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(3){
    grid-column:1 / -1 !important;
    grid-row:4 !important;
    margin:8px 0 -4px !important;
  }

  .reading-home .bank-list:nth-of-type(1){
    grid-column:1 / -1 !important;
    grid-row:5 !important;
  }

  .reading-home .inner > .section-title:nth-of-type(4){
    grid-column:1 / -1 !important;
    grid-row:6 !important;
    margin:2px 0 -4px !important;
  }

  .reading-home .bank-list:nth-of-type(2){
    grid-column:1 / -1 !important;
    grid-row:7 !important;
  }

  .reading-home .bank-list{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
    margin:0 !important;
  }

  .reading-home .bank-item{
    min-height:76px !important;
    padding:14px !important;
    border-radius:18px !important;
  }

  .reading-home .warm-note{
    grid-column:1 / -1 !important;
    grid-row:8 !important;
    margin:0 !important;
    padding:13px 16px !important;
    border-radius:20px !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .inner{
    grid-template-columns:285px minmax(470px,1fr) 300px !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .hero,
  body:is(.listening-home,.writing-home,.speaking-home) .intro{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    min-height:0 !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) h1{
    font-size:26px !important;
    line-height:1.08 !important;
  }

  .listening-home .section-title:first-of-type,
  .speaking-home .section-title:first-of-type{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:2px 0 -2px !important;
  }

  .listening-home #taskList{
    grid-column:2 !important;
    grid-row:3 / span 3 !important;
    display:grid !important;
    gap:10px !important;
    padding:0 !important;
  }

  .listening-home .task{
    min-height:90px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .listening-home #startBtn,
  .listening-home #reportBtn{
    grid-column:2 !important;
    width:auto !important;
    height:40px !important;
    margin:0 !important;
    border-radius:14px !important;
  }

  .listening-home .note{
    grid-column:3 !important;
    grid-row:2 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .listening-home .progress{
    grid-column:3 !important;
    grid-row:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .writing-home .task-card{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding:16px !important;
    border-radius:22px !important;
  }

  .writing-home > .section-title,
  .writing-home .inner > .section-title{
    grid-column:2 !important;
    margin:2px 0 -4px !important;
  }

  .writing-home .task-link{
    grid-column:2 !important;
    margin:0 !important;
    min-height:90px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .writing-home .rhythm{
    grid-column:3 !important;
    grid-row:2 / span 4 !important;
    margin:0 !important;
    padding:16px !important;
    border-radius:22px !important;
  }

  .writing-home .rhythm-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .speaking-home .mode-card{
    grid-column:1 !important;
    grid-row:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .status-card{
    grid-column:1 !important;
    grid-row:4 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .task-card{
    grid-column:2 !important;
    margin:0 !important;
    min-height:96px !important;
    padding:15px 16px !important;
    border-radius:18px !important;
  }

  .speaking-home .task-card.main{
    grid-row:auto !important;
    padding-top:15px !important;
  }

  .speaking-home #startSprint{
    grid-column:2 !important;
    width:auto !important;
    height:40px !important;
    margin:0 !important;
    border-radius:14px !important;
  }

  .speaking-home #reviewRecords,
  .speaking-home .tip,
  .speaking-home .progress{
    grid-column:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .progress{
    grid-row:2 / span 2 !important;
  }

  .word-list-page .inner{
    grid-template-columns:300px minmax(560px,1fr) !important;
  }

  .word-list-page .hero,
  .word-list-page .controls,
  .word-list-page .summary,
  .word-list-page .more{
    grid-column:1 !important;
    margin:0 !important;
  }

  .word-list-page .list{
    grid-column:2 !important;
    grid-row:2 / span 5 !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    align-content:start !important;
  }

  .word-list-page .card{
    margin:0 !important;
    min-height:88px !important;
    border-radius:18px !important;
    padding:14px 16px !important;
  }

  .stats-page .inner{
    grid-template-columns:285px minmax(470px,1fr) 300px !important;
  }

  .stats-page .hero{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  .stats-page .card{
    margin:0 !important;
    padding:16px !important;
    border-radius:22px !important;
  }

  .stats-page .card:nth-of-type(1){
    grid-column:2 !important;
    grid-row:2 !important;
  }

  .stats-page .card:nth-of-type(2){
    grid-column:2 !important;
    grid-row:3 !important;
  }

  .stats-page .card:nth-of-type(3){
    grid-column:3 !important;
    grid-row:2 !important;
  }

  .stats-page .card:nth-of-type(4){
    grid-column:3 !important;
    grid-row:3 / span 2 !important;
  }

  .stats-page .card:nth-of-type(5){
    grid-column:1 / 3 !important;
    grid-row:4 !important;
  }

  .stats-page .card:nth-of-type(6){
    grid-column:3 !important;
    grid-row:5 !important;
  }

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

  .stats-page .stat{
    min-height:74px !important;
    padding:11px !important;
    text-align:left !important;
  }

  .stats-page .rows{
    gap:9px !important;
  }

  .stats-page .row{
    grid-template-columns:68px 1fr auto !important;
    padding:10px 0 0 !important;
  }
}

@media (min-width:900px) and (max-width:1320px){
  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .app{
    width:calc(100vw - 28px) !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .inner{
    gap:12px !important;
    padding:16px !important;
  }

  .nav-mini a,
  .nav-mini button{
    height:32px !important;
    padding:0 11px !important;
    font-size:11px !important;
  }

  .vocab-page .inner{
    grid-template-columns:260px minmax(430px,500px) minmax(285px,1fr) !important;
  }

  .reading-home .inner,
  body:is(.listening-home,.writing-home,.speaking-home,.stats-page) .inner{
    grid-template-columns:270px minmax(430px,1fr) 285px !important;
  }
}

/* Vocab and Reading real desktop cleanup, based on accepted home standard. */
@media (min-width:900px){
  .vocab-page .inner{
    grid-template-columns:300px minmax(480px,560px) 300px !important;
    gap:16px 18px !important;
  }

  .vocab-page .hero{
    min-height:0 !important;
    padding:20px !important;
    border-radius:22px !important;
  }

  .vocab-page .hero h1{
    font-size:28px !important;
    line-height:1.05 !important;
    letter-spacing:-.045em !important;
    margin:0 0 14px !important;
  }

  .vocab-page .resume{
    padding:12px 14px !important;
    border-radius:18px !important;
  }

  .vocab-page .progress{
    height:8px !important;
    margin-top:12px !important;
    align-self:start !important;
  }

  .vocab-page .meta{
    align-self:start !important;
    font-size:12px !important;
  }

  .vocab-page .card{
    padding:22px !important;
    border-radius:24px !important;
    min-height:0 !important;
  }

  .vocab-page .word{
    font-size:28px !important;
    line-height:1.05 !important;
    margin:0 !important;
  }

  .vocab-page .ipa{
    font-size:14px !important;
    margin:8px 0 10px !important;
  }

  .vocab-page .meaning{
    font-size:20px !important;
    line-height:1.25 !important;
    padding:10px 0 !important;
  }

  .vocab-page .example-label{
    margin-top:10px !important;
  }

  .vocab-page .example{
    font-size:17px !important;
    line-height:1.45 !important;
    margin:8px 0 14px !important;
  }

  .vocab-page .audio-grid{
    gap:10px !important;
    margin-bottom:12px !important;
  }

  .vocab-page .audio-btn{
    height:42px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }

  .vocab-page .repeat-panel{
    padding:12px 14px !important;
    border-radius:18px !important;
  }

  .vocab-page .repeat-grid{
    gap:8px !important;
  }

  .vocab-page .record-btn,
  .vocab-page .replay-btn{
    height:38px !important;
    border-radius:13px !important;
    font-size:13px !important;
  }

  .vocab-page .spell{
    margin-top:12px !important;
    gap:8px !important;
  }

  .vocab-page .spell input,
  .vocab-page .check{
    height:44px !important;
    border-radius:14px !important;
    font-size:14px !important;
  }

  .vocab-page .stats{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .vocab-page .stat{
    min-height:92px !important;
    border-radius:18px !important;
    padding:14px !important;
  }

  .vocab-page .stat b{
    font-size:25px !important;
  }

  .vocab-page .queue{
    border-radius:22px !important;
    padding:16px !important;
  }

  .vocab-page .queue h2{
    font-size:18px !important;
  }

  .vocab-page .queue p{
    font-size:13px !important;
    line-height:1.4 !important;
  }

  .vocab-page #prev,
  .vocab-page #markNext,
  .vocab-page #markKnown{
    height:40px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }

  .reading-home .inner{
    grid-template-columns:330px minmax(430px,1fr) 330px !important;
    gap:16px !important;
  }

  .reading-home .task-card.main{
    grid-column:1 !important;
    grid-row:2 !important;
    min-height:0 !important;
    padding:18px !important;
  }

  .reading-home .task-card.main .card-row{
    grid-template-columns:34px minmax(0,1fr) !important;
    gap:12px !important;
  }

  .reading-home .task-card.main .primary{
    grid-column:1 / -1 !important;
    width:100% !important;
    height:42px !important;
    margin-top:10px !important;
  }

  .reading-home .rhythm-note{
    grid-column:1 !important;
    grid-row:3 !important;
    padding:16px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(1){
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
  }

  .reading-home .today-list{
    grid-column:2 !important;
    grid-row:2 !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding-top:48px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(2){
    grid-column:3 !important;
    grid-row:2 !important;
    margin:0 !important;
  }

  .reading-home .review-card{
    grid-column:3 !important;
    grid-row:2 !important;
    margin-top:48px !important;
    padding:16px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(3){
    grid-column:1 / -1 !important;
    grid-row:4 !important;
    margin:6px 0 -6px !important;
  }

  .reading-home .bank-list:nth-of-type(1){
    grid-column:1 / -1 !important;
    grid-row:5 !important;
  }

  .reading-home .inner > .section-title:nth-of-type(4){
    grid-column:1 / -1 !important;
    grid-row:6 !important;
    margin:2px 0 -6px !important;
  }

  .reading-home .bank-list:nth-of-type(2){
    grid-column:1 / -1 !important;
    grid-row:7 !important;
  }

  .reading-home .bank-list{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .reading-home .bank-item,
  .reading-home .task-link{
    min-height:82px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .vocab-page .vocab-left,
  .vocab-page .vocab-right{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    align-self:start !important;
  }

  .vocab-page .vocab-left{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  .vocab-page .vocab-main-card{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
  }

  .vocab-page .vocab-right{
    grid-column:3 !important;
    grid-row:2 !important;
  }

  .vocab-page .vocab-left .hero,
  .vocab-page .vocab-left .progress,
  .vocab-page .vocab-left .meta,
  .vocab-page .vocab-right .actions,
  .vocab-page .vocab-right .stats,
  .vocab-page .vocab-right .queue{
    grid-column:auto !important;
    grid-row:auto !important;
    margin:0 !important;
  }

  .vocab-page .vocab-left .progress{
    width:100% !important;
  }

  .vocab-page .vocab-left .meta{
    display:flex !important;
    justify-content:space-between !important;
    gap:12px !important;
  }

  .vocab-page .vocab-right .actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .vocab-page .vocab-right .actions #markKnown{
    grid-column:1 / -1 !important;
  }

  .vocab-page .audio-grid,
  .vocab-page .repeat-grid,
  .vocab-page .spell{
    grid-template-columns:1fr 1fr !important;
  }

  .vocab-page .spell input{
    min-width:0 !important;
  }

  .vocab-page .audio-btn,
  .vocab-page .record-btn,
  .vocab-page .replay-btn,
  .vocab-page .action,
  .vocab-page .check{
    width:auto !important;
    min-width:0 !important;
  }

  .vocab-page .queue .next-batch,
  .vocab-page .queue #openReviewQueue{
    height:40px !important;
    border-radius:14px !important;
  }

  .vocab-page .vocab-right .stats{
    order:1 !important;
  }

  .vocab-page .vocab-right .actions{
    order:2 !important;
  }

  .vocab-page .vocab-right .queue{
    order:3 !important;
  }
}

/* Absolute final placement fixes for module home pages. */
@media (min-width:900px){
  .listening-home #taskList{
    grid-row:2 !important;
    padding-top:48px !important;
    align-content:start !important;
  }

  .listening-home #taskList .task{
    height:auto !important;
    min-height:78px !important;
  }

  .writing-home > .page .inner > .task-card{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
    min-height:0 !important;
  }

  .writing-home > .page .inner > .rhythm{
    grid-column:3 !important;
    grid-row:2 / span 4 !important;
    margin:0 !important;
  }

  .speaking-home > .page .inner > .task-card.main{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding-top:48px !important;
  }

  .speaking-home > .page .inner > .mode-card{
    grid-column:1 !important;
    grid-row:3 !important;
  }

  .speaking-home > .page .inner > .status-card{
    grid-column:1 !important;
    grid-row:4 !important;
  }

  .writing-home > .page .inner > .task-card{
    grid-column:1 !important;
    grid-row:3 !important;
    min-height:0 !important;
  }

  .writing-home > .page .inner > .task-card .card-row{
    grid-template-columns:32px minmax(0,1fr) !important;
  }

  .writing-home > .page .inner > .task-card .primary{
    grid-column:1 / -1 !important;
    width:100% !important;
    height:40px !important;
  }

  .speaking-home > .page .inner > .task-card.main{
    grid-row:3 !important;
    padding-top:14px !important;
    align-self:start !important;
    height:auto !important;
    min-height:88px !important;
  }

  .speaking-home > .page .inner > .task-card:nth-of-type(2){
    grid-row:4 !important;
  }

  .speaking-home > .page .inner > .task-card:nth-of-type(3){
    grid-row:5 !important;
  }

  .speaking-home > .page .inner > #reviewRecords{
    grid-column:3 !important;
    grid-row:2 !important;
  }

  .speaking-home > .page .inner > .tip{
    grid-column:3 !important;
    grid-row:3 !important;
  }

  .speaking-home > .page .inner > .progress{
    grid-column:3 !important;
    grid-row:4 / span 2 !important;
  }
}

/* Launch polish: Vocab and Reading must look like desktop product pages, not stretched mobile screens. */
@media (min-width:900px){
  .vocab-page .inner{
    grid-template-columns:300px minmax(470px,520px) minmax(300px,1fr) !important;
    gap:18px !important;
    align-items:start !important;
  }

  .vocab-page .vocab-left{
    grid-column:1 !important;
    grid-row:2 !important;
    display:grid !important;
    gap:12px !important;
    align-self:start !important;
  }

  .vocab-page .vocab-left .hero{
    padding:18px 18px 16px !important;
    border-radius:22px !important;
    min-height:0 !important;
  }

  .vocab-page .vocab-left .hero h1{
    font-size:27px !important;
    line-height:1.08 !important;
    margin:0 0 14px !important;
  }

  .vocab-page .vocab-left .resume{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
    padding:12px !important;
    border-radius:18px !important;
  }

  .vocab-page .vocab-left .resume b{
    font-size:13px !important;
  }

  .vocab-page .vocab-left .resume span{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .vocab-page .vocab-left .progress{
    grid-column:auto !important;
    grid-row:auto !important;
    width:100% !important;
    height:8px !important;
    margin:0 !important;
  }

  .vocab-page .vocab-left .meta{
    grid-column:auto !important;
    grid-row:auto !important;
    display:flex !important;
    justify-content:space-between !important;
    color:#8b8499 !important;
    font-size:12px !important;
    margin:0 !important;
  }

  .vocab-page .vocab-main-card{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    padding:22px !important;
    border-radius:24px !important;
    min-height:0 !important;
  }

  .vocab-page .word{
    font-size:28px !important;
    line-height:1.05 !important;
    margin:0 !important;
  }

  .vocab-page .meaning{
    font-size:19px !important;
    line-height:1.28 !important;
    padding:9px 0 !important;
  }

  .vocab-page .example{
    font-size:16px !important;
    line-height:1.42 !important;
    margin:7px 0 14px !important;
  }

  .vocab-page .audio-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    margin-bottom:12px !important;
  }

  .vocab-page .audio-btn,
  .vocab-page .record-btn,
  .vocab-page .replay-btn,
  .vocab-page .action,
  .vocab-page .check{
    width:auto !important;
    min-width:0 !important;
    height:40px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }

  .vocab-page .repeat-panel{
    padding:12px !important;
    border-radius:18px !important;
    margin-bottom:12px !important;
  }

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

  .vocab-page .spell{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 118px !important;
    gap:8px !important;
    margin-top:0 !important;
  }

  .vocab-page .spell input{
    min-width:0 !important;
    height:42px !important;
    border-radius:14px !important;
  }

  .vocab-page .vocab-right{
    grid-column:3 !important;
    grid-row:2 !important;
    display:grid !important;
    gap:12px !important;
    align-self:start !important;
  }

  .vocab-page .vocab-right .stats,
  .vocab-page .vocab-right .actions,
  .vocab-page .vocab-right .queue{
    grid-column:auto !important;
    grid-row:auto !important;
    margin:0 !important;
  }

  .vocab-page .vocab-right .stats{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .vocab-page .vocab-right .stat{
    min-height:54px !important;
    padding:9px 10px !important;
    border-radius:16px !important;
    display:grid !important;
    grid-template-columns:22px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    gap:1px 8px !important;
  }

  .vocab-page .vocab-right .stat i{
    grid-row:1 / 3 !important;
    font-size:16px !important;
  }

  .vocab-page .vocab-right .stat b{
    font-size:18px !important;
    line-height:1 !important;
  }

  .vocab-page .vocab-right .stat span{
    font-size:11px !important;
    line-height:1.15 !important;
  }

  .vocab-page .vocab-right .actions{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    gap:8px !important;
  }

  .vocab-page .vocab-right .actions .action{
    height:38px !important;
    padding:0 8px !important;
  }

  .vocab-page .vocab-right .queue{
    padding:14px !important;
    border-radius:20px !important;
  }

  .vocab-page .queue-head{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
  }

  .vocab-page .queue h2{
    font-size:17px !important;
  }

  .vocab-page .queue p{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .vocab-page .queue .next-batch,
  .vocab-page .queue #openReviewQueue{
    width:auto !important;
    height:38px !important;
    border-radius:14px !important;
    padding:0 14px !important;
  }

  .reading-home .inner{
    grid-template-columns:310px minmax(470px,1fr) 300px !important;
    gap:18px !important;
  }

  .reading-home .task-card.main{
    grid-column:1 !important;
    grid-row:2 !important;
    min-height:0 !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  .reading-home .task-card.main .card-row{
    grid-template-columns:34px minmax(0,1fr) !important;
    gap:12px !important;
  }

  .reading-home .task-card.main .task-title{
    font-size:21px !important;
    line-height:1.08 !important;
  }

  .reading-home .task-card.main .task-note{
    font-size:14px !important;
    line-height:1.45 !important;
  }

  .reading-home .task-card.main .primary{
    grid-column:1 / -1 !important;
    width:auto !important;
    height:42px !important;
    margin-top:10px !important;
  }

  .reading-home .rhythm-note{
    grid-column:1 !important;
    grid-row:3 !important;
    padding:14px !important;
    border-radius:20px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(1){
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
  }

  .reading-home .today-list{
    grid-column:2 !important;
    grid-row:2 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    padding-top:46px !important;
  }

  .reading-home .today-list .task-link{
    min-height:112px !important;
    padding:14px !important;
    border-radius:18px !important;
    align-content:center !important;
  }

  .reading-home .inner > .section-title:nth-of-type(2){
    grid-column:3 !important;
    grid-row:2 !important;
    margin:0 !important;
  }

  .reading-home .review-card{
    grid-column:3 !important;
    grid-row:2 !important;
    margin-top:46px !important;
    padding:14px !important;
    border-radius:20px !important;
    min-height:112px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(3){
    grid-column:1 / -1 !important;
    grid-row:4 !important;
    margin:4px 0 -8px !important;
  }

  .reading-home .bank-list:nth-of-type(1){
    grid-column:1 / -1 !important;
    grid-row:5 !important;
  }

  .reading-home .inner > .section-title:nth-of-type(4){
    grid-column:1 / -1 !important;
    grid-row:6 !important;
    margin:2px 0 -8px !important;
  }

  .reading-home .bank-list:nth-of-type(2){
    grid-column:1 / -1 !important;
    grid-row:7 !important;
  }

  .reading-home .bank-list{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .reading-home .bank-item{
    min-height:74px !important;
    padding:13px 16px !important;
    border-radius:18px !important;
  }
}

/* Productized desktop rules for module pages.
   Keep existing functions; only arrange the page like a desktop learning product. */
@media (min-width:900px){
  .nav-mini{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex-wrap:wrap !important;
  }

  .nav-mini a,
  .nav-mini button{
    height:36px !important;
    padding:0 14px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid #e9e2f7 !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#4d4a5d !important;
    font-size:12px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
    box-shadow:0 5px 14px rgba(72,54,130,.035) !important;
  }

  .nav-mini button{
    color:#8b63ee !important;
    background:#fbf9ff !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .topbar{
    grid-column:1 / -1 !important;
    min-height:54px !important;
    margin:0 !important;
    padding:0 4px 12px !important;
    border-bottom:1px solid #f0edf8 !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .inner{
    width:100% !important;
    display:grid !important;
    gap:16px !important;
    align-items:start !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .inner{
    grid-template-columns:minmax(260px,.86fr) minmax(420px,1.16fr) minmax(260px,.86fr) !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .hero,
  body:is(.listening-home,.writing-home,.speaking-home) .intro{
    grid-column:1 !important;
    margin:0 !important;
    min-height:170px !important;
    border-radius:24px !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .section-title{
    margin:0 !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .task,
  body:is(.listening-home,.writing-home,.speaking-home) .task-card,
  body:is(.listening-home,.writing-home,.speaking-home) .task-link{
    border-radius:18px !important;
    padding:14px 16px !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .primary{
    height:44px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }

  .listening-home #taskList{
    grid-column:2 !important;
    display:grid !important;
    gap:10px !important;
  }

  .listening-home .section-title:first-of-type{
    grid-column:2 !important;
  }

  .listening-home #startBtn,
  .listening-home #reportBtn{
    grid-column:2 !important;
    margin:0 !important;
  }

  .listening-home .note,
  .listening-home .progress{
    grid-column:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .writing-home .task-card,
  .writing-home .section-title,
  .writing-home .task-link{
    grid-column:2 !important;
    margin:0 !important;
  }

  .writing-home .rhythm{
    grid-column:3 !important;
    grid-row:2 / span 4 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .mode-card,
  .speaking-home .status-card{
    grid-column:1 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .section-title,
  .speaking-home .task-card,
  .speaking-home #startSprint{
    grid-column:2 !important;
    margin:0 !important;
  }

  .speaking-home #reviewRecords,
  .speaking-home .tip,
  .speaking-home .progress{
    grid-column:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .reading-home .inner{
    grid-template-columns:minmax(300px,.95fr) minmax(430px,1.15fr) minmax(270px,.82fr) !important;
  }

  .reading-home .task-card.main{
    grid-column:1 / 3 !important;
    margin:0 !important;
    border-radius:24px !important;
  }

  .reading-home .rhythm-note,
  .reading-home .review-card,
  .reading-home .warm-note{
    grid-column:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .reading-home .today-list,
  .reading-home .bank-list{
    display:grid !important;
    gap:10px !important;
  }

  .reading-home .section-title{
    grid-column:1 / -1 !important;
    margin:4px 0 -4px !important;
  }

  .reading-home .today-list{
    grid-column:1 / 3 !important;
  }

  .reading-home .bank-list{
    grid-column:1 / -1 !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .reading-home .bank-item,
  .reading-home .task-link{
    border-radius:18px !important;
    padding:14px 16px !important;
  }

  .vocab-page .inner{
    grid-template-columns:minmax(260px,.8fr) minmax(440px,1.12fr) minmax(270px,.88fr) !important;
  }

  .vocab-page .hero,
  .vocab-page .progress,
  .vocab-page .meta{
    grid-column:1 !important;
    margin:0 !important;
  }

  .vocab-page .card{
    grid-column:2 !important;
    grid-row:2 / span 6 !important;
    margin:0 !important;
    border-radius:24px !important;
  }

  .vocab-page .actions,
  .vocab-page .stats,
  .vocab-page .queue{
    grid-column:3 !important;
    margin:0 !important;
  }

  .vocab-page .actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .vocab-page .action{
    height:42px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }

  .word-list-page .inner{
    grid-template-columns:minmax(290px,.72fr) minmax(560px,1.28fr) !important;
  }

  .word-list-page .hero,
  .word-list-page .controls,
  .word-list-page .summary,
  .word-list-page .more{
    grid-column:1 !important;
    margin:0 !important;
  }

  .word-list-page .list{
    grid-column:2 !important;
    grid-row:2 / span 5 !important;
    margin:0 !important;
    display:grid !important;
    gap:10px !important;
    align-content:start !important;
  }

  .word-list-page .card{
    border-radius:18px !important;
    padding:14px 16px !important;
  }

  .stats-page .inner{
    grid-template-columns:minmax(300px,.9fr) minmax(420px,1.1fr) minmax(280px,.9fr) !important;
  }

  .stats-page .hero{
    grid-column:1 !important;
    margin:0 !important;
    border-radius:24px !important;
  }

  .stats-page .card{
    margin:0 !important;
    border-radius:22px !important;
  }

  .stats-page .card:nth-of-type(2){
    grid-column:2 !important;
    grid-row:2 !important;
  }

  .stats-page .card:nth-of-type(3),
  .stats-page .card:nth-of-type(4){
    grid-column:3 !important;
  }

  .stats-page .card:nth-of-type(5),
  .stats-page .card:nth-of-type(6){
    grid-column:1 / -1 !important;
  }
}

/* Homepage final alignment: right status should not stretch into a tall empty card. */
@media (min-width:900px){
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    align-items:start !important;
  }

  .progress-board{
    min-height:0 !important;
    height:auto !important;
    align-self:start !important;
  }

  .progress-list{
    grid-template-rows:repeat(5,58px) !important;
    align-content:start !important;
    margin:4px 0 0 !important;
    padding:14px 16px !important;
  }

  .next-step-card{
    margin-top:0 !important;
  }

  .next-action-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    align-items:center !important;
    margin-top:12px !important;
  }

  .next-select{
    width:100% !important;
    height:44px !important;
    border:1px solid #dfd6f7 !important;
    border-radius:15px !important;
    background:#fff !important;
    color:#4b465e !important;
    font-size:13px !important;
    font-weight:760 !important;
    padding:0 14px !important;
  }

  #continueTraining{
    height:44px !important;
    white-space:nowrap !important;
    line-height:1.15 !important;
  }
}

/* Homepage final alignment: right status should not stretch into a tall empty card. */
@media (min-width:900px){
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    align-items:start !important;
  }

  .progress-board{
    min-height:0 !important;
    height:auto !important;
    align-self:start !important;
  }

  .progress-list{
    grid-template-rows:repeat(5,58px) !important;
    align-content:start !important;
    margin:4px 0 0 !important;
    padding:14px 16px !important;
  }

  .next-step-card{
    margin-top:0 !important;
  }

  .next-action-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    align-items:center !important;
    margin-top:12px !important;
  }

  .next-select{
    width:100% !important;
    height:44px !important;
    border:1px solid #dfd6f7 !important;
    border-radius:15px !important;
    background:#fff !important;
    color:#4b465e !important;
    font-size:13px !important;
    font-weight:760 !important;
    padding:0 14px !important;
  }

  #continueTraining{
    height:44px !important;
    white-space:normal !important;
    line-height:1.15 !important;
  }
}

*{box-sizing:border-box}

html{
  background:
    radial-gradient(circle at 12% 0%, rgba(242,237,255,.9), transparent 28%),
    radial-gradient(circle at 90% 16%, rgba(238,252,255,.9), transparent 30%),
    #f4f7f7;
}

body{
  margin:0;
  background:transparent !important;
  color:var(--joy-ink) !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif !important;
}

a{color:inherit;text-decoration:none}
button,a{font:inherit}

.page{
  min-height:100vh !important;
  padding:18px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  background:transparent !important;
}

.app{
  width:min(1220px, calc(100vw - 36px)) !important;
  max-width:none !important;
  min-height:calc(100vh - 36px) !important;
  background:rgba(255,254,250,.96) !important;
  border:1px solid rgba(222,215,244,.95) !important;
  border-radius:26px !important;
  box-shadow:0 18px 54px rgba(36,43,58,.1) !important;
  overflow:hidden !important;
}

.inner{
  padding:24px 26px 26px !important;
}

.topbar{
  min-height:46px !important;
  margin:0 0 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
}

.app-name,.brand{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  min-width:0 !important;
}

.app-dot,.dot{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
  border-radius:13px !important;
  display:grid !important;
  place-items:center !important;
  background:var(--joy-purple-soft) !important;
  color:var(--joy-purple) !important;
  font-size:18px !important;
  font-weight:850 !important;
}

.app-title b,.title b{
  display:block !important;
  color:var(--joy-ink) !important;
  font-size:19px !important;
  line-height:1.08 !important;
  letter-spacing:0 !important;
}

.app-title span,.title span{
  display:block !important;
  margin-top:3px !important;
  color:var(--joy-muted) !important;
  font-size:12.5px !important;
  line-height:1.25 !important;
}

.nav-mini,.topbar > div:last-child{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

/* Rebuilt buttons: original color mood, landscape proportions. */
.home,
.nav-mini button,
.primary,
.secondary,
.btn,
.submit,
.action{
  min-height:40px !important;
  border-radius:13px !important;
  padding:0 16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:15px !important;
  font-weight:780 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.home,
.nav-mini button,
.secondary{
  border:1px solid var(--joy-line) !important;
  background:#fff !important;
  color:#5c566d !important;
  box-shadow:none !important;
}

.primary{
  border:0 !important;
  background:linear-gradient(135deg,#24344f,#2f6f73) !important;
  color:#fff !important;
  box-shadow:0 12px 24px rgba(123,79,232,.17) !important;
}

.home:hover,
.nav-mini button:hover,
.secondary:hover,
.primary:hover,
.module:hover,
.tool-link:hover,
.task-link:hover{
  transform:translateY(-1px);
}

.hero,
.home-hero,
.intro,
.task-card,
.panel,
.progress-board,
.rhythm,
.task-link,
.mode-card,
.status-card,
.progress,
.card,
.queue,
.review{
  border:1px solid var(--joy-line-2) !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:none !important;
}

.home-hero,
.intro,
.task-card{
  background:
    radial-gradient(circle at 96% 0%, rgba(223,249,251,.82), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(255,245,223,.62), transparent 38%),
    linear-gradient(145deg,#fff,#fbfdfc) !important;
}

h1,h2,h3,p{letter-spacing:0 !important}
h1,h2,h3{color:var(--joy-ink) !important}
.lead{color:var(--joy-text) !important}

/* The horizontal skin does not use the old image as a layout pillar. */
.coach-card,
.avatar-wrap,
.avatar{
  display:none !important;
}

@media (min-width:900px){
  /* Home: original order, horizontal board. */
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    display:grid !important;
    grid-template-columns:minmax(300px,.92fr) minmax(470px,1.34fr) minmax(270px,.74fr) !important;
    grid-template-rows:auto minmax(0, auto) !important;
    gap:16px 18px !important;
    align-items:stretch !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .topbar{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .home-hero{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .training-deck{
    grid-column:2 !important;
    grid-row:2 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .progress-board{
    grid-column:3 !important;
    grid-row:2 !important;
  }

  .home-hero{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    gap:12px !important;
    height:clamp(500px, calc(100vh - 170px), 600px) !important;
    min-height:500px !important;
    margin:0 !important;
    padding:20px 22px !important;
    position:relative !important;
    overflow:hidden !important;
  }

  .training-deck{
    height:clamp(500px, calc(100vh - 170px), 600px) !important;
    min-height:500px !important;
    margin:0 !important;
    padding:18px 18px 16px !important;
    border:1px solid var(--joy-line-2) !important;
    border-radius:20px !important;
    background:
      linear-gradient(#fff,#fff) padding-box,
      repeating-linear-gradient(90deg, rgba(36,52,79,.08) 0 1px, transparent 1px 72px) border-box !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .home-hero::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:5px;
    background:linear-gradient(180deg,#24344f,#2f6f73 62%,#d99b34);
  }

  .home-hero .hero-copy{
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:0 !important;
    align-self:start !important;
  }

  .home-hero .hero-note-row{
    margin:0 0 10px !important;
  }

  .home-hero .hello-note{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:5px 9px !important;
  }

  .home-hero .hello-note b{
    color:var(--joy-ink) !important;
    font-size:25px !important;
    line-height:1 !important;
    font-weight:830 !important;
  }

  .home-hero .hello-note span{
    font-size:18px !important;
  }

  .home-hero .hello-note em{
    flex:0 0 100% !important;
    color:var(--joy-text) !important;
    font-size:14px !important;
    font-style:normal !important;
    line-height:1.25 !important;
  }

  .home-hero h1{
    margin:0 !important;
    font-size:34px !important;
    line-height:1.08 !important;
    white-space:normal !important;
  }

  .home-hero .lead{
    max-width:640px !important;
    margin:10px 0 0 !important;
    font-size:16.4px !important;
    line-height:1.42 !important;
  }

  .home-hero .task{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    min-height:0 !important;
    padding:14px 15px !important;
    display:flex !important;
    align-items:center !important;
    border:1px solid #cbdedb !important;
    border-radius:17px !important;
    background:
      linear-gradient(#fff,#fff) padding-box,
      repeating-linear-gradient(0deg, rgba(36,52,79,.08) 0 1px, transparent 1px 28px) border-box !important;
  }

  .home-hero .task span{
    color:#3c384b !important;
    font-size:15px !important;
    line-height:1.45 !important;
  }

  .home-hero .hero-action{
    grid-column:1 !important;
    grid-row:3 !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 112px !important;
    gap:10px !important;
    margin:0 !important;
    align-self:start !important;
  }

  .row-title,
  .review-tools-head,
  .section-title{
    display:flex !important;
    align-items:end !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin:0 0 10px !important;
  }

  .row-title h2,
  .review-tools-head h2,
  .section-title h2{
    margin:0 !important;
    font-size:24px !important;
    line-height:1.1 !important;
  }

  .row-title small,
  .review-tools-head small,
  .section-title span{
    color:var(--joy-muted) !important;
    font-size:12.5px !important;
    font-weight:670 !important;
  }

  .modules{
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0,1fr)) !important;
    gap:9px !important;
    margin:0 0 14px !important;
    flex:0 0 auto !important;
  }

  .module{
    min-height:118px !important;
    padding:16px 16px 14px !important;
    border:1px solid var(--joy-line-2) !important;
    border-radius:20px !important;
    color:var(--joy-ink) !important;
    position:relative !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    text-align:left !important;
  }

  .module::before{
    content:attr(data-step);
    position:absolute;
    top:14px;
    right:14px;
    color:#6f687e;
    font-size:12px;
    font-weight:850;
    letter-spacing:.08em;
  }

  .module::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background:var(--joy-teal);
    opacity:.65;
  }

  .module.v{background:#fbf9ff !important;border-color:#e5ddf4 !important}
  .module.r{background:#f0fbff !important;border-color:#d6edf4 !important}
  .module.l{background:#fff7f8 !important;border-color:#f0dfe5 !important}
  .module.w{background:#fff9ee !important;border-color:#ecd9b4 !important}
  .module.s{background:#f3fff8 !important;border-color:#d6efde !important}
  .module.w::after{background:var(--joy-amber)}
  .module.l::after{background:#b75f7a}
  .module.s::after{background:#40506f}

  .module strong{
    width:auto !important;
    min-width:28px !important;
    height:48px !important;
    margin:12px 0 8px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--joy-navy) !important;
    font-size:20px !important;
    font-weight:900 !important;
    line-height:1 !important;
  }

  .module strong svg{
    width:48px !important;
    height:48px !important;
    display:block !important;
  }

  .module span{
    display:block !important;
    font-size:16px !important;
    font-weight:850 !important;
    line-height:1 !important;
  }

  .module.active{
    border-color:#24212f !important;
    box-shadow:inset 0 0 0 1px #24212f, 0 12px 28px rgba(36,52,79,.1) !important;
  }

  .panel{
    padding:16px !important;
    background:#fff !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
  }

  .tool-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:10px !important;
    flex:1 1 auto !important;
    align-content:start !important;
  }

  .tool-link{
    height:auto !important;
    min-height:86px !important;
    padding:14px 14px !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    align-items:start !important;
    gap:10px !important;
    border:1px solid #eee9f8 !important;
    border-radius:18px !important;
    background:#fbf9ff !important;
    text-align:left !important;
    overflow:visible !important;
  }

  .tool-link:nth-child(2){background:#f0fbff !important;border-color:#d6edf4 !important}
  .tool-link:nth-child(3){background:#fff7f8 !important;border-color:#f0dfe5 !important}
  .tool-link:nth-child(4){background:#fff9ee !important;border-color:#ecd9b4 !important}
  .tool-link:nth-child(5){background:#f3fff8 !important;border-color:#d6efde !important}
  .tool-link:nth-child(6){background:#f4f7ff !important;border-color:#d9e1f2 !important}

  .tool-link i{
    width:28px !important;
    height:28px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--joy-teal) !important;
    font-style:normal !important;
    font-size:16px !important;
    font-weight:900 !important;
  }

  .tool-link b{
    display:block !important;
    font-size:15px !important;
    line-height:1.08 !important;
  }

  .tool-link span{
    display:block !important;
    margin-top:4px !important;
    color:#766f86 !important;
    font-size:12px !important;
    line-height:1.2 !important;
  }

  .progress-board{
    padding:16px 18px !important;
    height:clamp(500px, calc(100vh - 170px), 600px) !important;
    min-height:500px !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .progress-board h2{
    margin:0 0 10px !important;
    font-size:23px !important;
    line-height:1.1 !important;
  }

  .progress-list{
    flex:1 1 auto !important;
    display:grid !important;
    grid-template-rows:none !important;
    gap:10px !important;
    border-top:0 !important;
  }

  .progress-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto !important;
    column-gap:10px !important;
    row-gap:4px !important;
    align-items:center !important;
    min-height:78px !important;
    padding:13px 14px !important;
    border:1px solid #eee9f8 !important;
    border-bottom:1px solid #eee9f8 !important;
    border-radius:18px !important;
    background:#fbf9ff !important;
  }

  .progress-row.r{background:#f0fbff !important;border-color:#d6edf4 !important}
  .progress-row.w{background:#fff7f8 !important;border-color:#f0dfe5 !important}
  .progress-row.l{background:#fff9ee !important;border-color:#ecd9b4 !important}
  .progress-row.s{background:#f3fff8 !important;border-color:#d6efde !important}

  .progress-row:first-child{
    border-top:0 !important;
  }

  .progress-name{
    grid-column:1 !important;
    grid-row:1 !important;
    font-size:14.5px !important;
    font-weight:820 !important;
    color:#332f43 !important;
  }

  .progress-task{
    grid-column:1 !important;
    grid-row:2 !important;
    color:#6f687e !important;
    font-size:12.5px !important;
    line-height:1.28 !important;
  }

  .progress-state{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
    min-width:72px !important;
    padding:6px 10px !important;
    border-radius:999px !important;
    background:#f6f2fb !important;
    color:#766f86 !important;
    text-align:center !important;
    font-size:12px !important;
    font-weight:800 !important;
  }

  .progress-state.done{
    background:var(--joy-mint) !important;
    color:var(--joy-mint-ink) !important;
  }

  .progress-state.active{
    background:var(--joy-cream) !important;
    color:var(--joy-cream-ink) !important;
  }
}

@media (min-width:900px){
  /* Subject home pages: same vertical logic, turned horizontal. */
  body.writing-home .inner,
  body.listening-home .inner,
  body.speaking-home .inner{
    display:grid !important;
    grid-template-columns:minmax(390px, .9fr) minmax(0, 1.1fr) !important;
    grid-template-rows:auto auto auto !important;
    gap:16px 18px !important;
  }

  body.writing-home .topbar,
  body.listening-home .topbar,
  body.speaking-home .topbar{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }

  body.writing-home .intro,
  body.listening-home .hero,
  body.speaking-home .intro{
    grid-column:1 !important;
    grid-row:2 !important;
    min-height:178px !important;
    padding:24px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    margin:0 !important;
  }

  body.writing-home .intro h1,
  body.listening-home .hero h1,
  body.speaking-home .intro h1{
    font-size:31px !important;
    line-height:1.12 !important;
  }

  body.writing-home .intro .lead,
  body.listening-home .hero .lead,
  body.speaking-home .intro .lead{
    max-width:none !important;
    margin:12px 0 0 !important;
    font-size:17px !important;
    line-height:1.48 !important;
  }

  body.writing-home .task-card,
  body.speaking-home .task-card.main,
  body.listening-home .task.main{
    grid-column:1 !important;
    grid-row:3 !important;
    min-height:246px !important;
    padding:22px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
  }

  body.writing-home .card-row{
    width:100% !important;
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) 110px !important;
    gap:14px !important;
    align-items:center !important;
  }

  body.writing-home .icon,
  body.writing-home .mini-icon,
  body.speaking-home .mini-icon{
    width:36px !important;
    height:36px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:12px !important;
    background:var(--joy-purple-soft) !important;
    color:var(--joy-purple) !important;
    font-weight:850 !important;
  }

  body.writing-home .label{
    margin:0 0 6px !important;
    color:var(--joy-purple) !important;
    font-size:14px !important;
    font-weight:820 !important;
  }

  body.writing-home .task-title{
    margin:0 0 8px !important;
    font-size:24px !important;
    line-height:1.14 !important;
    font-weight:820 !important;
  }

  body.writing-home .fact{
    margin:3px 0 !important;
    color:#6f687e !important;
    font-size:14.5px !important;
    line-height:1.35 !important;
  }

  body.writing-home .fact i{
    display:inline-block !important;
    width:18px !important;
    color:var(--joy-purple) !important;
    font-style:normal !important;
  }

  body.writing-home .task-card .primary{
    min-height:46px !important;
    height:46px !important;
    border-radius:14px !important;
  }

  body.writing-home .inner > .section-title{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
  }

  body.writing-home .task-link{
    grid-column:2 !important;
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) auto !important;
    gap:13px !important;
    align-items:center !important;
    min-height:94px !important;
    padding:16px !important;
    margin:0 !important;
  }

  body.writing-home .task-link:nth-of-type(1){
    grid-row:2 !important;
    margin-top:42px !important;
  }

  body.writing-home .task-link:nth-of-type(2){
    grid-row:3 !important;
    align-self:start !important;
  }

  body.writing-home .task-link strong{
    display:block !important;
    margin-bottom:4px !important;
    font-size:17.5px !important;
    line-height:1.18 !important;
  }

  body.writing-home .task-link small{
    display:block !important;
    color:#6f687e !important;
    font-size:13.5px !important;
    line-height:1.3 !important;
  }

  body.writing-home .tag{
    min-height:26px !important;
    padding:0 10px !important;
    display:inline-flex !important;
    align-items:center !important;
    border-radius:999px !important;
    background:var(--joy-purple-soft) !important;
    color:var(--joy-purple) !important;
    font-size:12px !important;
    font-weight:820 !important;
  }

  body.writing-home .rhythm{
    grid-column:2 !important;
    grid-row:3 !important;
    margin:110px 0 0 !important;
    padding:16px !important;
  }

  body.writing-home .rhythm .section-title{
    display:flex !important;
    margin:0 0 10px !important;
  }

  body.writing-home .rhythm-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  body.writing-home .rhythm-item{
    min-height:74px !important;
    padding:10px !important;
    border:1px solid #eee9f8 !important;
    border-radius:14px !important;
    background:#fbfaff !important;
  }

  body.writing-home .rhythm-item b{
    display:block !important;
    margin-bottom:4px !important;
    color:var(--joy-purple) !important;
    font-size:22px !important;
    line-height:1 !important;
  }

  body.writing-home .rhythm-item span{
    color:#6f687e !important;
    font-size:11.5px !important;
    line-height:1.18 !important;
  }

  body.writing-home .note{
    display:none !important;
  }
}

@media (max-width:899px){
  .page{
    padding:0 !important;
    background:#fff !important;
  }

  .app{
    width:100% !important;
    min-height:100vh !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .inner{
    padding:16px 18px 26px !important;
  }

  .topbar{
    margin-bottom:14px !important;
  }

  .home,
  .nav-mini button{
    min-height:36px !important;
    padding:0 11px !important;
    font-size:12px !important;
  }

  .home-hero,
  .intro,
  .task-card,
  .panel,
  .progress-board,
  .rhythm{
    padding:16px !important;
    margin-bottom:12px !important;
  }

  .home-hero h1,
  .intro h1{
    font-size:25px !important;
    line-height:1.12 !important;
    white-space:normal !important;
  }

  .lead{
    font-size:13.5px !important;
    line-height:1.45 !important;
  }

  .home-hero .task{
    margin:12px 0 !important;
    padding:12px !important;
    border:1px solid var(--joy-line-2) !important;
    border-radius:15px !important;
  }

  .home-hero .hero-action{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:8px !important;
  }

  .modules{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .module{
    min-height:56px !important;
    border:1px solid var(--joy-line-2) !important;
    border-radius:14px !important;
    background:#fff !important;
    padding:6px 3px !important;
  }

  .module strong{
    width:23px !important;
    height:23px !important;
    margin:0 auto 4px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:8px !important;
    background:var(--tile,var(--joy-purple-soft)) !important;
    font-size:12px !important;
  }

  .module span{
    font-size:10px !important;
    font-weight:760 !important;
  }

  .tool-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .progress-row{
    display:grid !important;
    grid-template-columns:64px minmax(0,1fr) auto !important;
    gap:8px !important;
    padding:9px 0 !important;
  }

  body.writing-home .card-row{
    grid-template-columns:34px minmax(0,1fr) !important;
  }

  body.writing-home .task-card .primary{
    grid-column:1 / -1 !important;
    width:100% !important;
    margin-top:10px !important;
  }

  body.writing-home .rhythm-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
}

/* Final homepage pass: task-card style inspired by the existing JOY module pages. */
@media (min-width:900px){
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 330px !important;
    grid-template-rows:auto auto auto !important;
    gap:18px 20px !important;
    align-items:start !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .topbar{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .home-hero{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .training-deck{
    grid-column:1 !important;
    grid-row:3 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .progress-board{
    grid-column:2 !important;
    grid-row:2 / span 2 !important;
  }

  .home-hero{
    height:auto !important;
    min-height:220px !important;
    margin:0 !important;
    padding:28px 28px 26px 112px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 176px !important;
    grid-template-rows:auto auto !important;
    gap:16px 24px !important;
    border-radius:30px !important;
    border:2px solid #ded4ff !important;
    background:
      radial-gradient(circle at 92% 12%, rgba(223,249,251,.92), transparent 38%),
      linear-gradient(145deg,#fff,#fbf8ff) !important;
    position:relative !important;
    box-shadow:0 18px 50px rgba(64,80,111,.07) !important;
  }

  .home-hero::before{
    content:"✓" !important;
    position:absolute !important;
    left:28px !important;
    top:50% !important;
    width:56px !important;
    height:56px !important;
    transform:translateY(-50%) !important;
    display:grid !important;
    place-items:center !important;
    border-radius:22px !important;
    background:#f0e9ff !important;
    color:#7b4fe8 !important;
    font-size:34px !important;
    font-weight:650 !important;
  }

  .home-hero .hero-copy{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:start !important;
  }

  .home-hero .hello-note b{
    font-size:0 !important;
  }

  .home-hero .hello-note b::after{
    content:"Current sprint task";
    color:#7b4fe8;
    font-size:18px;
    line-height:1;
    font-weight:850;
  }

  body.zh .home-hero .hello-note b::after{
    content:"当前训练任务";
  }

  .home-hero .hello-note span,
  .home-hero .hello-note em{
    display:none !important;
  }

  .home-hero h1{
    margin:10px 0 0 !important;
    font-size:34px !important;
    line-height:1.1 !important;
    letter-spacing:0 !important;
  }

  .home-hero .lead{
    margin:12px 0 0 !important;
    max-width:650px !important;
    color:#6e6981 !important;
    font-size:21px !important;
    line-height:1.38 !important;
  }

  .home-hero .task{
    grid-column:1 !important;
    grid-row:2 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  .home-hero .task span{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    color:transparent !important;
    font-size:0 !important;
    line-height:1 !important;
  }

  .home-hero .task span::before,
  .home-hero .task span::after{
    display:inline-flex !important;
    align-items:center !important;
    min-height:36px !important;
    padding:0 16px !important;
    border-radius:999px !important;
    font-size:17px !important;
    font-weight:850 !important;
    line-height:1 !important;
  }

  .home-hero .task span::before{
    content:"Vocab 30 · Reading 4 steps";
    background:#f0e9ff !important;
    color:#7b4fe8 !important;
  }

  .home-hero .task span::after{
    content:"Listening · Writing · Speaking";
    background:#e8f7ef !important;
    color:#237a55 !important;
  }

  body.zh .home-hero .task span::before{
    content:"词汇 30 · 阅读四步";
  }

  body.zh .home-hero .task span::after{
    content:"听力 · 写作 · 口语";
  }

  .home-hero .hero-action{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin:0 !important;
  }

  .home-hero .hero-action .primary{
    min-height:64px !important;
    border-radius:999px !important;
    font-size:20px !important;
    background:#7b4fe8 !important;
    box-shadow:0 18px 36px rgba(123,79,232,.24) !important;
  }

  .home-hero .hero-action .secondary{
    min-height:50px !important;
    border-radius:999px !important;
    font-size:17px !important;
  }

  .training-deck{
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    display:block !important;
  }

  .training-deck > .row-title{
    margin:0 4px 12px !important;
  }

  .training-deck > .row-title h2{
    font-size:31px !important;
  }

  .training-deck > .row-title small{
    font-size:16px !important;
    color:#8b8499 !important;
  }

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

  .module{
    min-height:150px !important;
    padding:18px 18px 16px !important;
    border-radius:24px !important;
    border-width:2px !important;
    box-shadow:none !important;
  }

  .module::before{
    top:18px !important;
    left:18px !important;
    right:auto !important;
    color:#6e6981 !important;
    font-size:15px !important;
  }

  .module::after{
    height:5px !important;
    opacity:.55 !important;
  }

  .module strong{
    height:58px !important;
    margin:32px 0 10px !important;
  }

  .module strong svg{
    width:58px !important;
    height:58px !important;
  }

  .module span{
    font-size:18px !important;
    line-height:1.12 !important;
  }

  .panel{
    padding:24px !important;
    border-radius:28px !important;
    border:2px solid #ded4ff !important;
    background:
      radial-gradient(circle at 94% 0%, rgba(223,249,251,.72), transparent 36%),
      #fff !important;
  }

  .review-tools-head{
    margin:0 0 18px !important;
  }

  .review-tools-head h2{
    font-size:30px !important;
  }

  .review-tools-head small{
    font-size:15px !important;
  }

  .tool-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
  }

  .tool-link{
    min-height:100px !important;
    padding:16px !important;
    border-radius:20px !important;
    border-width:2px !important;
    grid-template-columns:30px minmax(0,1fr) !important;
    gap:13px !important;
  }

  .tool-link i{
    font-size:18px !important;
  }

  .tool-link b{
    font-size:17px !important;
  }

  .tool-link span{
    font-size:13px !important;
  }

  .progress-board{
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:24px 24px 18px !important;
    border-radius:30px !important;
    border:2px solid #ded4ff !important;
    background:
      radial-gradient(circle at 100% 2%, rgba(223,249,251,.78), transparent 32%),
      #fff !important;
  }

  .progress-board h2{
    font-size:30px !important;
    margin:0 0 14px !important;
  }

  .progress-list{
    gap:12px !important;
  }

  .progress-row{
    min-height:92px !important;
    border-radius:22px !important;
    padding:15px 16px !important;
    border-width:2px !important;
  }

  .progress-no{
    font-size:13px !important;
  }

  .progress-name{
    font-size:17px !important;
  }

  .progress-task{
    font-size:14px !important;
  }

  .progress-state{
    min-width:82px !important;
    min-height:32px !important;
    font-size:13px !important;
  }
}

/* Restore clear three-column homepage; use the provided module-card artwork only. */
@media (min-width:900px){
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    display:grid !important;
    grid-template-columns:minmax(300px,.92fr) minmax(470px,1.34fr) minmax(270px,.74fr) !important;
    grid-template-rows:auto minmax(0, auto) !important;
    gap:16px 18px !important;
    align-items:stretch !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .topbar{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .home-hero{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .training-deck{
    grid-column:2 !important;
    grid-row:2 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .progress-board{
    grid-column:3 !important;
    grid-row:2 !important;
  }

  .home-hero,
  .training-deck,
  .progress-board{
    height:clamp(500px, calc(100vh - 170px), 600px) !important;
    min-height:500px !important;
    margin:0 !important;
  }

  .home-hero{
    padding:24px 24px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    gap:14px !important;
    border-radius:24px !important;
    border:1px solid var(--joy-line-2) !important;
    background:
      radial-gradient(circle at 96% 0%, rgba(223,249,251,.82), transparent 34%),
      radial-gradient(circle at 0% 100%, rgba(255,245,223,.62), transparent 38%),
      linear-gradient(145deg,#fff,#fbfdfc) !important;
  }

  .home-hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 auto 0 0 !important;
    width:5px !important;
    height:auto !important;
    transform:none !important;
    border-radius:0 !important;
    background:linear-gradient(180deg,#24344f,#2f6f73 62%,#d99b34) !important;
  }

  .home-hero .hero-copy,
  .home-hero .task,
  .home-hero .coach-card{
    grid-column:1 !important;
  }

  .home-hero .hero-copy{grid-row:1 !important}
  .home-hero .coach-card{grid-row:2 !important}
  .home-hero .task{grid-row:3 !important}

  .home-hero .hello-note b{
    font-size:25px !important;
  }

  .home-hero .hello-note b::after{
    content:none !important;
  }

  .home-hero .hello-note span,
  .home-hero .hello-note em{
    display:inline !important;
  }

  .home-hero .hello-note em{
    display:block !important;
    flex:0 0 100% !important;
    color:var(--joy-text) !important;
    font-size:14px !important;
    font-style:normal !important;
  }

  .home-hero h1{
    font-size:34px !important;
    margin:12px 0 0 !important;
  }

  .home-hero .lead{
    font-size:17px !important;
    line-height:1.42 !important;
    margin:10px 0 0 !important;
  }

  .home-hero .task{
    min-height:0 !important;
    padding:14px 16px !important;
    border:1px solid #cbdedb !important;
    border-radius:18px !important;
    background:#fff !important;
    display:flex !important;
    align-items:center !important;
  }

  .home-hero .task span{
    color:#3c384b !important;
    font-size:15.5px !important;
    line-height:1.35 !important;
    display:block !important;
  }

  .home-hero .task span::before,
  .home-hero .task span::after{
    content:none !important;
  }

  .home-hero .coach-card{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-height:156px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
  }

  .home-hero .avatar-wrap{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
    height:156px !important;
    margin:0 !important;
    overflow:visible !important;
  }

  .home-hero .avatar{
    display:block !important;
    width:134px !important;
    max-width:134px !important;
    height:auto !important;
    object-fit:contain !important;
    transform:none !important;
  }

  .home-hero .coach-lines{
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
    margin-left:12px !important;
    max-width:158px !important;
    align-self:center !important;
  }

  .home-hero .coach-lines b{
    color:#5f5a70 !important;
    font-family:"Segoe Print","Comic Sans MS","Bradley Hand ITC",cursive !important;
    font-size:18px !important;
    line-height:1.08 !important;
    font-weight:500 !important;
    white-space:normal !important;
  }

  .home-hero .coach-lines b span{
    display:block !important;
    color:#5f5a70 !important;
    font:inherit !important;
    white-space:nowrap !important;
  }

  .home-hero .coach-lines b span + span{
    margin-left:12px !important;
  }

  .home-hero .coach-lines span{
    color:#171426 !important;
    font-size:16px !important;
    line-height:1.18 !important;
    font-weight:820 !important;
    white-space:nowrap !important;
  }

  .training-deck{
    padding:18px !important;
    border:1px solid var(--joy-line-2) !important;
    border-radius:22px !important;
    background:#fff !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .training-deck > .row-title{
    margin:0 4px 12px !important;
  }

  .training-deck > .row-title h2{
    font-size:25px !important;
  }

  .training-deck > .row-title small{
    font-size:13px !important;
  }

  .modules{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:12px !important;
    margin:0 0 24px !important;
    flex:0 0 auto !important;
  }

  .module{
    min-height:132px !important;
    padding:14px 10px 12px !important;
    border:1px solid var(--joy-line-2) !important;
    border-radius:22px !important;
    background:#fbf9ff !important;
    overflow:visible !important;
    box-shadow:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
  }

  .module::before,
  .module::after{
    content:none !important;
  }

  .module strong{
    display:grid !important;
    place-items:center !important;
    width:58px !important;
    height:58px !important;
    margin:0 !important;
    border-radius:20px !important;
    background:rgba(255,255,255,.72) !important;
    color:#24344f !important;
    font-size:31px !important;
    line-height:1 !important;
    box-shadow:0 10px 22px rgba(36,52,79,.08) !important;
  }

  .module.v strong{color:#8d7cf6 !important}
  .module.r strong{color:#4f82df !important}
  .module.l strong{color:#d96b99 !important}
  .module.w strong{color:#d99b34 !important}
  .module.s strong{color:#47b877 !important}

  .module span{
    position:static !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    clip:auto !important;
    color:#241f35 !important;
    font-size:15px !important;
    font-weight:500 !important;
    line-height:1.1 !important;
  }

  .module.v{background:#fbf9ff !important;border-color:#e5ddf4 !important}
  .module.r{background:#f0fbff !important;border-color:#d6edf4 !important}
  .module.l{background:#fff7f8 !important;border-color:#f0dfe5 !important}
  .module.w{background:#fff9ee !important;border-color:#ecd9b4 !important}
  .module.s{background:#f3fff8 !important;border-color:#d6efde !important}

  .module.active{
    outline:0 !important;
    transform:translateY(-1px) !important;
    border-color:#a9d3cc !important;
    box-shadow:0 8px 18px rgba(47,111,115,.08), inset 0 0 0 1px rgba(47,111,115,.22) !important;
    filter:none !important;
  }

  .panel{
    flex:1 1 auto !important;
    min-height:0 !important;
    margin-top:4px !important;
    padding:18px !important;
    border-radius:22px !important;
    border:1px solid var(--joy-line-2) !important;
    background:#fff !important;
  }

  .review-tools-head h2{font-size:25px !important}
  .review-tools-head small{font-size:13px !important}

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

  .tool-link{
    min-height:68px !important;
    padding:11px 12px !important;
    border-radius:16px !important;
    border-width:1px !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    background:#fff !important;
  }

  .tool-link i{
    width:30px !important;
    height:30px !important;
    border-radius:12px !important;
    background:#f0e9ff !important;
    color:#7b4fe8 !important;
    font-size:14px !important;
  }

  .tool-link b{font-size:13.5px !important}
  .tool-link span{font-size:10.5px !important}

  .tool-link:nth-child(2) i{background:#e8fbff !important;color:#287986 !important}
  .tool-link:nth-child(3) i{background:#fff1f5 !important;color:#9b4d64 !important}
  .tool-link:nth-child(4) i{background:#fff5df !important;color:#a36514 !important}
  .tool-link:nth-child(5) i{background:#e8f7ef !important;color:#237a55 !important}
  .tool-link:nth-child(6) i{background:#eef4f4 !important;color:#40506f !important}

  .progress-board{
    padding:16px !important;
    border-radius:22px !important;
    border:1px solid var(--joy-line-2) !important;
    background:#fff !important;
  }

  .progress-board h2{font-size:25px !important}

  .progress-list{
    flex:1 1 auto !important;
    display:grid !important;
    grid-template-rows:repeat(5,minmax(76px,86px)) !important;
    align-content:start !important;
    gap:7px !important;
  }

  .progress-row{
    min-height:0 !important;
    height:auto !important;
    padding:8px 12px !important;
    border-radius:18px !important;
    border-width:1px !important;
  }

  .progress-name{
    font-size:15px !important;
    font-weight:620 !important;
  }
  .progress-task{
    font-size:11.5px !important;
    max-height:28px !important;
    overflow:hidden !important;
    font-weight:400 !important;
  }
  .progress-state{font-size:12px !important; min-width:74px !important}
}

/*
  Site-wide landscape desk layer
  Applies to module pages after their original styles. It changes layout/skin only.
*/
@media (min-width:900px){
  body:not(:has(.home-hero + .training-deck + .progress-board)) .app{
    width:min(1220px, calc(100vw - 36px)) !important;
    min-height:calc(100vh - 36px) !important;
    border-radius:24px !important;
    background:rgba(255,254,250,.96) !important;
    border:1px solid rgba(213,226,224,.96) !important;
    box-shadow:0 20px 58px rgba(36,43,58,.10) !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .inner{
    padding:22px 24px 24px !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .topbar{
    margin:0 0 18px !important;
    padding:0 !important;
    background:transparent !important;
    color:var(--joy-ink) !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .home,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .link{
    min-height:40px !important;
    border-radius:13px !important;
    border:1px solid var(--joy-line) !important;
    background:#fff !important;
    color:#5c566d !important;
    font-size:15px !important;
    font-weight:700 !important;
    padding:0 16px !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .intro,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .hero,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .task-card,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .card,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .queue,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .rhythm,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .review-card,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .task-link,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .bank-item,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .list-card,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .skill,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .mini,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .item,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .stat,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .row,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .q,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .audio-box,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .cue-card,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .exam-panel{
    border-radius:18px !important;
    border-color:#d5e2e0 !important;
    box-shadow:none !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .primary,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .btn.primary,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .data-btn{
    background:linear-gradient(135deg,#24344f,#2f6f73) !important;
    color:#fff !important;
    border-color:transparent !important;
    box-shadow:0 10px 22px rgba(47,111,115,.14) !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .secondary,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .btn.secondary,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .import{
    background:#fff !important;
    color:#24344f !important;
    border:1px solid #d5e2e0 !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) h1{
    font-size:clamp(30px, 2.4vw, 42px) !important;
    line-height:1.05 !important;
    font-weight:760 !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) h2{
    font-size:clamp(20px, 1.45vw, 26px) !important;
    line-height:1.12 !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .lead,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .sub,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .task-note,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .fact,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .item,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .detail,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .prompt,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .audio-note,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .note{
    font-size:17px !important;
    line-height:1.48 !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .eyebrow,
  body:not(:has(.home-hero + .training-deck + .progress-board)) small,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .label,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .tag,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .pill,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .state,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .badge{
    font-size:14px !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) textarea,
  body:not(:has(.home-hero + .training-deck + .progress-board)) input,
  body:not(:has(.home-hero + .training-deck + .progress-board)) select{
    min-height:42px !important;
    border-radius:12px !important;
    border-color:#cfdedb !important;
    font-size:16px !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) audio{
    width:100% !important;
    height:46px !important;
  }

  /* Vocab training desk */
  .inner:has(> .hero + .progress + .meta + .card){
    display:grid !important;
    grid-template-columns:minmax(260px,.78fr) minmax(430px,1.34fr) minmax(260px,.78fr) !important;
    grid-template-rows:auto auto auto auto minmax(0,1fr) !important;
    gap:14px 18px !important;
    align-items:start !important;
  }
  .inner:has(> .hero + .progress + .meta + .card) > .topbar{grid-column:1 / -1 !important}
  .inner:has(> .hero + .progress + .meta + .card) > .hero{grid-column:1 !important;grid-row:2 !important;margin:0 !important}
  .inner:has(> .hero + .progress + .meta + .card) > .progress{grid-column:1 !important;grid-row:3 !important;margin:0 !important}
  .inner:has(> .hero + .progress + .meta + .card) > .meta{grid-column:1 !important;grid-row:4 !important;font-size:15px !important}
  .inner:has(> .hero + .progress + .meta + .card) > .card{grid-column:2 !important;grid-row:2 / 5 !important;margin:0 !important;padding:22px !important}
  .inner:has(> .hero + .progress + .meta + .card) > .actions{grid-column:2 !important;grid-row:5 !important;margin:0 !important}
  .inner:has(> .hero + .progress + .meta + .card) > .stats{grid-column:3 !important;grid-row:2 !important;margin:0 !important}
  .inner:has(> .hero + .progress + .meta + .card) > .queue{grid-column:3 !important;grid-row:3 / 6 !important;margin:0 !important}
  .word{font-size:clamp(46px, 5.4vw, 70px) !important;line-height:.95 !important}
  .meaning,.example{font-size:18px !important;line-height:1.55 !important}
  .audio-grid,.repeat-grid,.actions{gap:10px !important}
  .audio-btn,.record-btn,.replay-btn,.action,.check,.next-batch,.queue-toggle{
    min-height:42px !important;
    border-radius:13px !important;
    font-size:15px !important;
  }
  .stats{grid-template-columns:1fr 1fr !important;gap:10px !important}
  .stat{padding:14px !important}
  .stat b{font-size:28px !important}
  .stat span{font-size:15px !important}
  .queue h2{font-size:22px !important}
  .queue p,.queue-review,.queue-word{font-size:16px !important}

  /* Reading home: four-step sprint desk */
  .inner:has(> .task-card.main + .rhythm-note){
    display:grid !important;
    grid-template-columns:minmax(360px,.92fr) minmax(470px,1.08fr) !important;
    gap:14px 18px !important;
  }
  .inner:has(> .task-card.main + .rhythm-note) > .topbar{grid-column:1 / -1 !important}
  .inner:has(> .task-card.main + .rhythm-note) > .task-card.main{grid-column:1 !important;grid-row:2 !important;margin:0 !important}
  .inner:has(> .task-card.main + .rhythm-note) > .rhythm-note{grid-column:1 !important;grid-row:3 !important;margin:0 !important}
  .inner:has(> .task-card.main + .rhythm-note) > .section-title:nth-child(4){grid-column:2 !important;grid-row:2 !important;align-self:end !important}
  .inner:has(> .task-card.main + .rhythm-note) > .today-list{grid-column:2 !important;grid-row:3 !important}
  .inner:has(> .task-card.main + .rhythm-note) > .section-title:nth-child(6){grid-column:2 !important;grid-row:4 !important}
  .inner:has(> .task-card.main + .rhythm-note) > .review-card{grid-column:2 !important;grid-row:5 !important}
  .inner:has(> .task-card.main + .rhythm-note) > .bank-list,
  .inner:has(> .task-card.main + .rhythm-note) > .warm-note{grid-column:1 / -1 !important}
  .task-link.evidence{background:linear-gradient(145deg,#fff,#f4f1fb) !important}
  .task-link.para{background:linear-gradient(145deg,#fff,#e8f7ef) !important}
  .task-link.report,.review-card{background:linear-gradient(145deg,#fff,#fff5df) !important}

  /* Writing home: Daily Card and Writing Task are separate. */
  body.writing-home .inner{
    display:grid !important;
    grid-template-columns:minmax(360px,.92fr) minmax(470px,1.08fr) !important;
    gap:14px 18px !important;
  }
  body.writing-home .topbar{grid-column:1 / -1 !important}
  body.writing-home .intro,
  body.writing-home .task-card{grid-column:1 !important;margin:0 !important}
  body.writing-home .section-title,
  body.writing-home .task-link,
  body.writing-home .rhythm{grid-column:2 !important}
  body.writing-home .task-link:nth-of-type(1){background:linear-gradient(145deg,#fff,#e8f7ef) !important}
  body.writing-home .task-link:nth-of-type(2){background:linear-gradient(145deg,#fff,#fff5df) !important}

  .inner:has(> .intro + .timer-row + .panel){
    display:grid !important;
    grid-template-columns:minmax(300px,.78fr) minmax(520px,1.22fr) !important;
    gap:12px 18px !important;
    align-items:start !important;
  }

  .inner:has(> .intro + .timer-row + .panel) > .topbar{
    grid-column:1 / -1 !important;
  }

  .inner:has(> .intro + .timer-row + .panel) > .intro,
  .inner:has(> .intro + .timer-row + .panel) > .timer-row,
  .inner:has(> .intro + .timer-row + .panel) > .panel:nth-child(4),
  .inner:has(> .intro + .timer-row + .panel) > .panel:nth-child(6){
    grid-column:1 !important;
    margin:0 !important;
  }

  .inner:has(> .intro + .timer-row + .panel) > .panel:nth-child(5){
    grid-column:2 !important;
    grid-row:2 / span 4 !important;
    margin:0 !important;
  }

  .inner:has(> .intro + .timer-row + .panel) textarea{
    min-height:92px !important;
  }

  /* Listening and speaking practice rooms. */
  .layout,.exam-layout{
    gap:18px !important;
    align-items:start !important;
  }
  .audio-box{
    padding:18px !important;
    background:#f8fbfb !important;
  }
  .focus div,.q,.quick-item,.check,.diag-row,.diagnostic-row{
    font-size:16px !important;
    line-height:1.45 !important;
  }
  .card-head h2{font-size:24px !important}
  .cue-card{min-height:260px !important}
  .prompt{font-size:17px !important}
  .prompt b,.prompt strong{font-size:17px !important}
  .save-actions a,.linkrow a{
    min-height:40px !important;
    font-size:14px !important;
    border-radius:12px !important;
  }

  .inner:has(> .intro + .card.main + .card){
    display:grid !important;
    grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr) !important;
    grid-template-rows:auto auto minmax(0,1fr) auto auto !important;
    gap:14px 18px !important;
    align-items:start !important;
    height:calc(100vh - 84px) !important;
    overflow:hidden !important;
  }

  .inner:has(> .intro + .card.main + .card) > .topbar,
  .inner:has(> .intro + .card.main + .card) > .intro{
    grid-column:1 / -1 !important;
  }

  .inner:has(> .intro + .card.main + .card) > .card.main{
    grid-column:1 !important;
    grid-row:3 / span 3 !important;
    margin:0 !important;
    max-height:100% !important;
    overflow:auto !important;
  }

  .inner:has(> .intro + .card.main + .card) > .card:not(.main){
    grid-column:2 !important;
    margin:0 !important;
    max-height:calc((100vh - 255px) / 2) !important;
    overflow:auto !important;
  }

  .inner:has(> .intro + .card.main + .card) > #saveSprint,
  .inner:has(> .intro + .card.main + .card) > .save-note{
    grid-column:2 !important;
  }

  .inner:has(> .intro + .card.main + .card) .exam-layout{
    grid-template-columns:1fr !important;
  }

  .inner:has(> .intro + .card.main + .card) .cue-card{
    min-height:0 !important;
  }

  .inner:has(> .intro + .card.main + .card) .prompt{
    max-height:250px !important;
    overflow:auto !important;
    padding-right:8px !important;
  }

  .inner:has(> .intro + .card.main + .card) .checks{
    grid-template-columns:1fr !important;
  }

  .inner:has(> .intro + .card.main + .card) .quick-list{
    gap:8px !important;
  }

  .inner:has(> .intro + .card.main + .card) .quick-item{
    padding:9px 10px !important;
  }

  /* Report and stats pages: quiet table-like desktop. */
  .summary{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  .rows{gap:0 !important;border:1px solid #d5e2e0 !important;border-radius:16px !important;overflow:hidden !important}
  .row{
    grid-template-columns:130px minmax(0,1fr) auto !important;
    border-top:1px solid #e6eeee !important;
    padding:13px 14px !important;
    border-radius:0 !important;
    background:#fff !important;
  }
  .row:first-child{border-top:0 !important}
  .name{font-size:17px !important;font-weight:720 !important}
  .next{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .next div{font-size:16px !important;line-height:1.45 !important;padding:14px !important}
  .manage .controls,.manage .data-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .inner:has(#doneCount):has(#resetBtn){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(360px,.52fr) !important;
    gap:12px 16px !important;
  }
  .inner:has(#doneCount):has(#resetBtn) > .topbar,
  .inner:has(#doneCount):has(#resetBtn) > .hero{
    grid-column:1 / -1 !important;
  }
  .inner:has(#doneCount):has(#resetBtn) > .card:nth-of-type(1),
  .inner:has(#doneCount):has(#resetBtn) > .card:nth-of-type(2),
  .inner:has(#doneCount):has(#resetBtn) > .card:nth-of-type(3){
    grid-column:1 !important;
  }
  .inner:has(#doneCount):has(#resetBtn) > .card:nth-of-type(4),
  .inner:has(#doneCount):has(#resetBtn) > .card:nth-of-type(5),
  .inner:has(#doneCount):has(#resetBtn) > .card:nth-of-type(6){
    grid-column:2 !important;
  }
}

/* Homepage productized desktop close: keep the original JOY frame, focus on today -> status -> report. */
@media (min-width:900px){
  body:not(.writing-home) .page{
    padding:14px !important;
  }

  body:not(.writing-home) .app:has(.home-hero + .training-deck + .progress-board){
    width:min(1400px, calc(100vw - 28px)) !important;
    min-height:calc(100vh - 28px) !important;
    border-radius:24px !important;
    background:#fff !important;
    box-shadow:0 20px 56px rgba(36,43,58,.10) !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    padding:14px !important;
    display:grid !important;
    grid-template-columns:minmax(280px,.9fr) minmax(440px,1.28fr) minmax(300px,.9fr) !important;
    grid-template-rows:58px minmax(0,1fr) !important;
    gap:18px 20px !important;
    min-height:calc(100vh - 28px) !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .topbar{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    height:58px !important;
    margin:0 !important;
    padding:0 22px !important;
    border:1px solid #edf0f6 !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 10px 30px rgba(36,43,58,.07) !important;
  }

  .topbar .app-dot{
    display:none !important;
  }

  .topbar .app-title{
    display:flex !important;
    align-items:center !important;
    gap:18px !important;
  }

  .topbar .app-title b{
    color:#161529 !important;
    font-size:26px !important;
    line-height:1 !important;
    letter-spacing:-.03em !important;
  }

  .topbar .app-title b::first-letter{
    color:#8d6cf5 !important;
  }

  .topbar .app-title span{
    border-left:1px solid #e5e8ef !important;
    padding-left:18px !important;
    color:#747284 !important;
    font-size:15px !important;
    margin:0 !important;
  }

  .nav-mini{
    gap:10px !important;
  }

  .nav-mini button{
    height:38px !important;
    min-width:62px !important;
    padding:0 13px !important;
    border-radius:16px !important;
    border:1px solid #e7e5f0 !important;
    background:#fff !important;
    color:#4d4a5d !important;
    font-size:12.5px !important;
    font-weight:750 !important;
  }

  #langToggle{
    min-width:44px !important;
    color:#8a64ef !important;
    text-decoration:underline !important;
    text-underline-offset:8px !important;
    text-decoration-thickness:2px !important;
  }

  .home-hero,
  .training-deck,
  .progress-board{
    grid-row:2 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    border:1px solid #edf0f6 !important;
    border-radius:24px !important;
    background:#fff !important;
    box-shadow:0 14px 36px rgba(36,43,58,.06) !important;
  }

  .home-hero{
    grid-column:1 !important;
    position:relative !important;
    display:grid !important;
    grid-template-rows:auto auto minmax(0,1fr) !important;
    gap:22px !important;
    padding:32px 30px 0 !important;
    overflow:hidden !important;
  }

  .home-hero::before{
    content:none !important;
  }

  .home-hero .hero-copy{
    grid-row:1 !important;
  }

  .home-hero h1{
    margin:0 !important;
    color:#171426 !important;
    font-size:36px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }

  .home-hero .lead{
    margin:14px 0 0 !important;
    color:#747284 !important;
    font-size:18px !important;
    line-height:1.2 !important;
  }

  .priority-card{
    grid-row:2 !important;
    position:relative !important;
    padding:26px 24px 20px !important;
    border:1px solid #ede8fb !important;
    border-radius:24px !important;
    background:linear-gradient(145deg,#fbf8ff,#f7f2ff) !important;
  }

  .priority-head{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin-bottom:22px !important;
  }

  .priority-head h2{
    margin:0 !important;
    color:#171426 !important;
    font-size:24px !important;
    line-height:1.1 !important;
  }

  .priority-head span{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    height:34px !important;
    padding:0 13px !important;
    border-radius:9px !important;
    background:#21202a !important;
    color:#fff !important;
    font-size:12px !important;
    font-weight:700 !important;
    white-space:nowrap !important;
  }

  .priority-head span::after{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    bottom:-8px !important;
    transform:translateX(-50%) !important;
    border:8px solid transparent !important;
    border-top-color:#21202a !important;
    border-bottom:0 !important;
  }

  .priority-select-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 48px !important;
    gap:12px !important;
    margin-bottom:24px !important;
  }

  .priority-select-row select{
    height:48px !important;
    min-width:0 !important;
    border:1px solid #dddce8 !important;
    border-radius:13px !important;
    background:#fff !important;
    color:#2e2b3c !important;
    font-size:16px !important;
    font-weight:650 !important;
    padding:0 16px !important;
  }

  .task-picker{
    height:48px !important;
    width:48px !important;
    border:1px solid #dddce8 !important;
    border-radius:13px !important;
    background:#fff !important;
    color:#8d6cf5 !important;
    display:grid !important;
    place-items:center !important;
  }

  .task-picker span{
    position:relative !important;
    display:block !important;
    width:20px !important;
    height:2px !important;
    border-radius:2px !important;
    background:#8d6cf5 !important;
  }

  .task-picker span::before{
    content:"" !important;
    position:absolute !important;
    left:-4px !important;
    top:-3px !important;
    width:6px !important;
    height:6px !important;
    border-radius:50% !important;
    background:#8d6cf5 !important;
  }

  .priority-start{
    width:100% !important;
    height:56px !important;
    border-radius:13px !important;
    background:#8b63ee !important;
    color:#fff !important;
    font-size:20px !important;
    font-weight:750 !important;
    box-shadow:0 14px 28px rgba(139,99,238,.18) !important;
  }

  .priority-card p{
    margin:18px 0 0 !important;
    color:#8a8498 !important;
    text-align:center !important;
    font-size:15px !important;
  }

  .home-hero .coach-card{
    grid-row:3 !important;
    align-self:end !important;
    display:grid !important;
    grid-template-columns:minmax(120px,42%) minmax(0,1fr) !important;
    align-items:end !important;
    gap:14px !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    background:#fff !important;
  }

  .home-hero .avatar-wrap{
    height:235px !important;
    overflow:hidden !important;
    justify-content:flex-start !important;
    align-items:flex-end !important;
    margin:0 !important;
  }

  .home-hero .avatar{
    width:190px !important;
    max-width:none !important;
    transform:translate(-12px, 18px) !important;
  }

  .home-hero .coach-lines{
    align-self:center !important;
    margin:0 0 26px !important;
    max-width:190px !important;
  }

  .home-hero .coach-lines b{
    color:#8b63ee !important;
    font-family:"Segoe Print","Comic Sans MS","Bradley Hand ITC",cursive !important;
    font-size:22px !important;
    line-height:1.48 !important;
    font-weight:500 !important;
    transform:rotate(-5deg) !important;
  }

  .home-hero .coach-lines b::after{
    content:"" !important;
    display:block !important;
    width:168px !important;
    height:2px !important;
    margin:6px 0 0 18px !important;
    background:#8b63ee !important;
    transform:rotate(-8deg) !important;
  }

  .home-hero .coach-lines b span{
    color:inherit !important;
    display:block !important;
    white-space:nowrap !important;
  }

  .training-deck{
    grid-column:2 !important;
    padding:30px !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  .training-deck > .row-title{
    margin:0 0 18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:18px !important;
  }

  .training-deck > .row-title h2{
    color:#171426 !important;
    font-size:29px !important;
    line-height:1.05 !important;
    margin:0 !important;
  }

  .training-deck > .row-title small{
    display:inline-flex !important;
    align-items:center !important;
    height:30px !important;
    padding:0 15px !important;
    border-radius:999px !important;
    background:#f0eaff !important;
    color:#8b63ee !important;
    font-size:14px !important;
    font-weight:800 !important;
  }

  .task-list{
    display:grid !important;
    grid-template-rows:repeat(5,minmax(0,1fr)) !important;
    gap:14px !important;
    min-height:0 !important;
    flex:1 1 auto !important;
  }

  .daily-task{
    display:grid !important;
    grid-template-columns:72px 46px minmax(0,1fr) 20px !important;
    align-items:center !important;
    gap:16px !important;
    padding:16px 22px !important;
    border:1px solid #edf0f6 !important;
    border-radius:22px !important;
    background:#fff !important;
    color:#171426 !important;
    text-decoration:none !important;
  }

  .daily-task:hover{
    border-color:#d8cef9 !important;
    box-shadow:0 12px 24px rgba(36,43,58,.06) !important;
  }

  .daily-task img{
    width:58px !important;
    height:58px !important;
    object-fit:contain !important;
    border-radius:18px !important;
  }

  .task-no{
    font-size:23px !important;
    font-weight:800 !important;
    color:#8b63ee !important;
  }

  .daily-task.r .task-no{color:#5aa6ff !important}
  .daily-task.l .task-no{color:#f06b9a !important}
  .daily-task.w .task-no{color:#ff9f22 !important}
  .daily-task.s .task-no{color:#48bf7a !important}

  .task-copy{
    display:block !important;
    min-width:0 !important;
  }

  .task-copy b,
  .task-copy strong,
  .task-copy em{
    display:block !important;
    font-style:normal !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .task-copy b{
    color:#171426 !important;
    font-size:20px !important;
    line-height:1.18 !important;
    font-weight:820 !important;
    white-space:nowrap !important;
  }

  .task-copy strong{
    margin-top:8px !important;
    color:#282537 !important;
    font-size:16px !important;
    line-height:1.2 !important;
    font-weight:760 !important;
    white-space:nowrap !important;
  }

  .task-copy em{
    margin-top:8px !important;
    color:#747284 !important;
    font-size:13px !important;
    line-height:1.35 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
  }

  .task-arrow{
    color:#5b596b !important;
    font-size:32px !important;
    line-height:1 !important;
  }

  .progress-board{
    grid-column:3 !important;
    padding:30px 28px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
    overflow:hidden !important;
  }

  .progress-board h2{
    margin:0 !important;
    color:#171426 !important;
    font-size:27px !important;
    line-height:1.08 !important;
  }

  .status-tabs{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .status-tabs button{
    height:46px !important;
    border:1px solid #e5e8ef !important;
    border-radius:18px !important;
    background:#fff !important;
    color:#4d4a5d !important;
    font-size:14px !important;
    font-weight:780 !important;
  }

  .status-tabs button.active{
    background:#f1eaff !important;
    border-color:#e0d3ff !important;
    color:#8b63ee !important;
  }

  .progress-board h3{
    margin:0 !important;
    color:#171426 !important;
    font-size:20px !important;
    line-height:1.15 !important;
  }

  .progress-list{
    display:grid !important;
    grid-template-rows:repeat(5,52px) !important;
    gap:12px !important;
    padding:16px 18px !important;
    border:1px solid #edf0f6 !important;
    border-radius:22px !important;
    background:#fff !important;
  }

  .progress-row{
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) 46px !important;
    align-items:center !important;
    gap:12px !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
  }

  .status-icon{
    width:40px !important;
    height:40px !important;
    border-radius:13px !important;
    display:grid !important;
    place-items:center !important;
    background:#f1eaff !important;
    color:#8b63ee !important;
  }

  .progress-row.r .status-icon{background:#eaf4ff !important;color:#4f96f4 !important}
  .progress-row.l .status-icon{background:#fff0f6 !important;color:#f05f98 !important}
  .progress-row.w .status-icon{background:#fff2dc !important;color:#f4a028 !important}
  .progress-row.s .status-icon{background:#e9f8ef !important;color:#3fba73 !important}

  .status-icon svg{
    width:23px !important;
    height:23px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2.1 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  .progress-main{
    display:block !important;
    min-width:0 !important;
  }

  .progress-name{
    display:block !important;
    color:#171426 !important;
    font-size:15px !important;
    line-height:1.05 !important;
    font-weight:820 !important;
  }

  .progress-task{
    display:block !important;
    margin-top:5px !important;
    color:#747284 !important;
    font-size:13px !important;
    line-height:1.1 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .progress-track{
    display:block !important;
    height:5px !important;
    margin-top:7px !important;
    border-radius:999px !important;
    overflow:hidden !important;
    background:#eef0f6 !important;
  }

  .progress-track span{
    display:block !important;
    height:100% !important;
    border-radius:999px !important;
    background:currentColor !important;
    min-width:0 !important;
  }

  .progress-percent{
    display:grid !important;
    place-items:center !important;
    min-width:42px !important;
    height:34px !important;
    border-radius:14px !important;
    background:#f1eaff !important;
    color:#8b63ee !important;
    font-size:14px !important;
    font-weight:820 !important;
  }

  .progress-row.r .progress-percent{background:#eaf4ff !important;color:#4f96f4 !important}
  .progress-row.l .progress-percent{background:#fff0f6 !important;color:#f05f98 !important}
  .progress-row.w .progress-percent{background:#fff2dc !important;color:#f4a028 !important}
  .progress-row.s .progress-percent{background:#e9f8ef !important;color:#3fba73 !important}

  .next-step-card{
    padding:16px 18px !important;
    border:1px solid #edf0f6 !important;
    border-radius:22px !important;
    background:#fff !important;
  }

  .next-subjects{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin:12px 0 !important;
  }

  .next-subjects button{
    height:30px !important;
    padding:0 13px !important;
    border-radius:999px !important;
    background:#f5f6fa !important;
    color:#747284 !important;
    font-size:12px !important;
    font-weight:760 !important;
  }

  .next-subjects button.active{
    background:#fff !important;
    color:#8b63ee !important;
    box-shadow:inset 0 0 0 2px #d9cdfb !important;
  }

  .next-step-card p{
    margin:0 0 14px !important;
    color:#747284 !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }

  #continueTraining{
    width:100% !important;
    height:48px !important;
    border-radius:13px !important;
    background:#8b63ee !important;
    color:#fff !important;
    font-size:16px !important;
    font-weight:820 !important;
  }

  .report-entry-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    min-height:0 !important;
  }

  .report-entry{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:12px !important;
    align-items:start !important;
    min-height:112px !important;
    padding:16px !important;
    border:1px solid #edf0f6 !important;
    border-radius:20px !important;
    background:#fff !important;
    color:#171426 !important;
    text-decoration:none !important;
  }

  .report-entry i{
    width:42px !important;
    height:42px !important;
    border-radius:13px !important;
    display:grid !important;
    place-items:center !important;
    background:#f1eaff !important;
    color:#8b63ee !important;
    font-style:normal !important;
    font-size:26px !important;
    font-weight:850 !important;
  }

  .report-entry.analysis i{
    background:#e8f8f1 !important;
    color:#3fba73 !important;
  }

  .report-entry b{
    display:block !important;
    font-size:15px !important;
    line-height:1.22 !important;
    font-weight:820 !important;
  }

  .report-entry span{
    display:block !important;
    margin-top:8px !important;
    color:#747284 !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .report-entry em{
    grid-column:2 !important;
    color:#8b63ee !important;
    font-size:12px !important;
    font-style:normal !important;
    font-weight:820 !important;
  }
}

@media (min-width:900px) and (max-width:1300px){
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    grid-template-columns:minmax(260px,.86fr) minmax(410px,1.2fr) minmax(285px,.84fr) !important;
    gap:14px !important;
  }

  .home-hero{padding:26px 24px 0 !important}
  .priority-card{padding:22px 20px 18px !important}
  .priority-head h2{font-size:22px !important}
  .home-hero .avatar-wrap{height:210px !important}
  .home-hero .avatar{width:170px !important}
  .home-hero .coach-lines b{font-size:20px !important}

  .training-deck{padding:26px 24px !important}
  .training-deck > .row-title h2{font-size:25px !important}
  .daily-task{
    grid-template-columns:58px 38px minmax(0,1fr) 18px !important;
    gap:12px !important;
    padding:13px 16px !important;
    border-radius:18px !important;
  }
  .daily-task img{width:50px !important;height:50px !important}
  .task-no{font-size:21px !important}
  .task-copy b{font-size:17px !important}
  .task-copy strong{font-size:14px !important;margin-top:6px !important}
  .task-copy em{font-size:12px !important;margin-top:6px !important;-webkit-line-clamp:1 !important}

  .progress-board{padding:26px 20px !important;gap:13px !important}
  .progress-board h2{font-size:24px !important}
  .status-tabs{gap:8px !important}
  .status-tabs button{height:40px !important;font-size:13px !important}
  .progress-list{grid-template-rows:repeat(5,49px) !important;padding:14px !important;gap:10px !important}
  .progress-row{grid-template-columns:38px minmax(0,1fr) 42px !important;gap:10px !important}
  .status-icon{width:36px !important;height:36px !important}
  .progress-name{font-size:14px !important}
  .progress-task{font-size:12px !important}
  .progress-percent{min-width:40px;height:31px;font-size:13px !important}
  .next-step-card{padding:14px !important}
  .next-subjects{gap:6px !important}
  .next-subjects button{height:28px;padding:0 10px !important;font-size:11px !important}
  #continueTraining{height:44px !important}
  .report-entry{min-height:98px;padding:14px 12px !important;grid-template-columns:38px minmax(0,1fr) !important;gap:10px !important}
  .report-entry i{width:36px !important;height:36px !important;font-size:22px !important}
  .report-entry b{font-size:13px !important}
  .report-entry span{font-size:11px !important;margin-top:6px !important}
}

/* Homepage fit pass: match the approved reference proportions on 1280/1366/1440 desktops. */
@media (min-width:900px){
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    height:calc(100vh - 28px) !important;
    min-height:0 !important;
    grid-template-rows:58px minmax(0,1fr) !important;
    overflow:hidden !important;
  }

  .home-hero,
  .training-deck,
  .progress-board{
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .topbar .app-title b{
    font-size:23px !important;
  }

  .home-hero{
    padding:28px 28px 0 !important;
    gap:18px !important;
  }

  .home-hero h1{
    font-size:30px !important;
  }

  .home-hero .lead{
    margin-top:10px !important;
    font-size:16px !important;
  }

  .priority-card{
    padding:22px 20px 18px !important;
    border-radius:22px !important;
  }

  .priority-head{
    margin-bottom:18px !important;
  }

  .priority-head h2{
    font-size:22px !important;
  }

  .priority-select-row{
    margin-bottom:18px !important;
  }

  .priority-select-row select,
  .task-picker{
    height:44px !important;
  }

  .priority-select-row select{
    font-size:14px !important;
  }

  .priority-start{
    height:50px !important;
    font-size:18px !important;
  }

  .priority-card p{
    margin-top:14px !important;
    font-size:14px !important;
  }

  .home-hero .avatar-wrap{
    height:190px !important;
  }

  .home-hero .avatar{
    width:156px !important;
    transform:translate(-8px, 14px) !important;
  }

  .home-hero .coach-lines{
    margin-bottom:20px !important;
    max-width:175px !important;
  }

  .home-hero .coach-lines b{
    font-size:19px !important;
    line-height:1.42 !important;
  }

  .home-hero .coach-lines b::after{
    width:140px !important;
  }

  .training-deck{
    padding:24px 24px !important;
  }

  .training-deck > .row-title{
    margin-bottom:14px !important;
  }

  .training-deck > .row-title h2{
    font-size:24px !important;
  }

  .training-deck > .row-title small{
    height:26px !important;
    padding:0 12px !important;
    font-size:12px !important;
  }

  .task-list{
    gap:10px !important;
  }

  .daily-task{
    min-height:0 !important;
    grid-template-columns:50px 36px minmax(0,1fr) 16px !important;
    gap:12px !important;
    padding:10px 15px !important;
    border-radius:18px !important;
  }

  .daily-task img{
    width:46px !important;
    height:46px !important;
  }

  .task-no{
    font-size:19px !important;
  }

  .task-copy b{
    font-size:16px !important;
  }

  .task-copy strong{
    margin-top:5px !important;
    font-size:13px !important;
  }

  .task-copy em{
    margin-top:5px !important;
    font-size:11.5px !important;
    -webkit-line-clamp:1 !important;
  }

  .task-arrow{
    font-size:26px !important;
  }

  .progress-board{
    padding:22px 20px !important;
    gap:10px !important;
  }

  .progress-board h2{
    font-size:24px !important;
  }

  .status-tabs{
    gap:8px !important;
  }

  .status-tabs button{
    height:36px !important;
    border-radius:15px !important;
    font-size:12.5px !important;
  }

  .progress-board h3{
    font-size:18px !important;
  }

  .progress-list{
    grid-template-rows:repeat(5,36px) !important;
    gap:7px !important;
    padding:10px 14px !important;
    border-radius:20px !important;
  }

  .progress-row{
    grid-template-columns:32px minmax(0,1fr) 38px !important;
    gap:9px !important;
  }

  .status-icon{
    width:30px !important;
    height:30px !important;
    border-radius:11px !important;
  }

  .status-icon svg{
    width:18px !important;
    height:18px !important;
  }

  .progress-name{
    font-size:12.5px !important;
  }

  .progress-task{
    margin-top:2px !important;
    font-size:10.5px !important;
  }

  .progress-track{
    height:3px !important;
    margin-top:4px !important;
  }

  .progress-percent{
    min-width:36px !important;
    height:26px !important;
    border-radius:12px !important;
    font-size:11.5px !important;
  }

  .next-step-card{
    padding:11px 14px !important;
    border-radius:20px !important;
  }

  .next-subjects{
    margin:8px 0 !important;
    gap:5px !important;
  }

  .next-subjects button{
    height:24px !important;
    padding:0 8px !important;
    font-size:10.5px !important;
  }

  .next-step-card p{
    margin:8px 0 0 !important;
    font-size:11.5px !important;
  }

  .next-action-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 132px !important;
    gap:10px !important;
    align-items:center !important;
    margin-top:10px !important;
  }

  .next-select{
    width:100% !important;
    height:38px !important;
    border:1px solid #e0d8f7 !important;
    border-radius:13px !important;
    background:#fff !important;
    color:#4b465e !important;
    font-size:13px !important;
    font-weight:760 !important;
    padding:0 12px !important;
  }

  #continueTraining{
    height:38px !important;
    font-size:13px !important;
  }

  .report-entry-grid{
    gap:10px !important;
  }

  .report-entry{
    min-height:98px !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    grid-template-rows:auto auto auto !important;
    gap:6px 10px !important;
    padding:10px !important;
    border-radius:18px !important;
    align-items:start !important;
  }

  .report-entry i{
    width:32px !important;
    height:32px !important;
    border-radius:11px !important;
    font-size:20px !important;
  }

  .report-entry b{
    grid-column:2 !important;
    grid-row:1 !important;
    font-size:12.5px !important;
  }

  .report-entry span{
    grid-column:2 !important;
    grid-row:2 !important;
    margin-top:5px !important;
    font-size:10.5px !important;
    line-height:1.25 !important;
    max-width:100% !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
  }

  .report-entry em{
    font-size:10.5px !important;
    grid-column:2 !important;
    grid-row:3 !important;
    align-self:end !important;
    margin-top:2px !important;
  }
}

/* Homepage scroll correction: keep the compact layout, but never crop useful content. */
@media (min-width:900px){
  body:not(.writing-home) .app:has(.home-hero + .training-deck + .progress-board){
    overflow:visible !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    height:auto !important;
    min-height:calc(100vh - 28px) !important;
    overflow:visible !important;
  }

  .training-deck,
  .progress-board{
    height:auto !important;
    min-height:592px !important;
    overflow:visible !important;
  }

  .home-hero{
    min-height:592px !important;
  }

  .home-hero .avatar{
    transform:translate(-8px, -18px) !important;
  }

  .report-entry-grid{
    align-items:stretch !important;
  }

  .home-report-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:0 0 16px !important;
  }

  .home-report-grid .report-entry{
    min-height:92px !important;
    padding:10px !important;
    grid-template-columns:32px minmax(0,1fr) !important;
  }

  .side-report-entry{
    min-height:92px !important;
  }

  .report-entry{
    overflow:hidden !important;
  }
}

/* Homepage comfort pass: scrolling is allowed, so cards should not look flattened. */
@media (min-width:900px){
  .home-hero{
    grid-template-rows:auto auto auto auto !important;
    align-content:start !important;
    gap:12px !important;
  }

  .home-hero .coach-card{
    align-self:start !important;
    margin-top:-6px !important;
  }

  .home-hero .avatar-wrap{
    height:218px !important;
  }

  .home-hero .avatar{
    width:166px !important;
    transform:translate(-8px, -20px) !important;
  }

  .training-deck,
  .progress-board{
    min-height:680px !important;
  }

  .task-list{
    grid-template-rows:repeat(5,118px) !important;
    gap:13px !important;
  }

  .daily-task{
    padding:15px 18px !important;
  }

  .daily-task img{
    width:52px !important;
    height:52px !important;
  }

  .task-copy b{
    font-size:17px !important;
  }

  .task-copy strong{
    font-size:14px !important;
  }

  .task-copy em{
    font-size:12px !important;
    -webkit-line-clamp:1 !important;
  }

  .progress-list{
    grid-template-rows:repeat(5,54px) !important;
    gap:8px !important;
    padding:14px 16px !important;
  }

  .progress-row{
    grid-template-columns:38px minmax(0,1fr) 44px !important;
  }

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

  .status-icon svg{
    width:20px !important;
    height:20px !important;
  }

  .progress-name{
    font-size:14px !important;
  }

  .progress-task{
    font-size:12px !important;
  }

  .progress-track{
    height:4px !important;
    margin-top:6px !important;
  }

  .progress-percent{
    min-width:40px !important;
    height:30px !important;
    font-size:12px !important;
  }

  .next-step-card{
    padding:16px 18px !important;
  }

  .next-step-card p{
    font-size:13px !important;
    margin:8px 0 0 !important;
  }

  #continueTraining{
    height:46px !important;
    font-size:14px !important;
  }

  .report-entry{
    min-height:116px !important;
    padding:14px !important;
  }

  .report-entry b{
    font-size:13.5px !important;
  }

  .report-entry span{
    font-size:11.5px !important;
    -webkit-line-clamp:3 !important;
  }

  .report-entry em{
    font-size:11.5px !important;
  }
}

/* Homepage no-empty-space final override. */
@media (min-width:900px){
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    align-items:start !important;
  }

  .home-hero,
  .training-deck{
    min-height:0 !important;
    height:auto !important;
  }

  .progress-board{
    min-height:0 !important;
    height:auto !important;
  }

  .task-list{
    grid-template-rows:repeat(5,102px) !important;
    gap:10px !important;
  }

  .daily-task{
    padding:10px 16px !important;
  }

  .home-hero{
    padding-bottom:16px !important;
    gap:10px !important;
  }

  .home-hero .lead{
    margin-top:6px !important;
  }

  .priority-card{
    padding:18px 18px 15px !important;
  }

  .priority-head{
    margin-bottom:14px !important;
  }

  .priority-select-row{
    margin-bottom:14px !important;
  }

  .priority-start{
    height:46px !important;
  }

  .priority-card p{
    margin-top:10px !important;
  }

  .home-hero .coach-card{
    margin-top:-2px !important;
  }

  .home-hero .avatar-wrap{
    height:190px !important;
  }

  .home-hero .avatar{
    width:156px !important;
    transform:translate(-8px, 2px) !important;
  }

  .home-report-grid{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  .home-report-grid .report-entry,
  .side-report-entry{
    min-height:92px !important;
    padding:12px 14px !important;
    grid-template-columns:36px minmax(0,1fr) !important;
    grid-template-rows:auto auto auto !important;
    gap:2px 10px !important;
  }

  .home-report-grid .report-entry i,
  .side-report-entry i{
    grid-row:1 / 4 !important;
    width:34px !important;
    height:34px !important;
    border-radius:12px !important;
    font-size:21px !important;
  }

  .home-report-grid .report-entry b,
  .side-report-entry b{
    grid-column:2 !important;
    font-size:13px !important;
    line-height:1.18 !important;
  }

  .home-report-grid .report-entry span,
  .side-report-entry span{
    grid-column:2 !important;
    font-size:11px !important;
    line-height:1.28 !important;
    margin-top:0 !important;
    -webkit-line-clamp:2 !important;
  }

  .home-report-grid .report-entry em,
  .side-report-entry em{
    grid-column:2 !important;
    font-size:11px !important;
    margin-top:0 !important;
  }

  .progress-board{
    gap:10px !important;
    padding-bottom:18px !important;
  }

  .progress-list{
    align-self:stretch !important;
    height:auto !important;
    min-height:0 !important;
    grid-template-rows:repeat(5,48px) !important;
    gap:8px !important;
    padding:10px 14px !important;
    margin:0 !important;
  }

  .progress-row{
    min-height:48px !important;
  }

  .status-icon{
    width:34px !important;
    height:34px !important;
    border-radius:12px !important;
  }

  .status-icon svg{
    width:19px !important;
    height:19px !important;
  }

  .progress-name{
    font-size:13.5px !important;
    line-height:1.05 !important;
    font-weight:650 !important;
  }

  .progress-task{
    margin-top:2px !important;
    font-size:11.5px !important;
    line-height:1.05 !important;
  }

  .progress-track{
    height:4px !important;
    margin-top:7px !important;
  }

  .progress-percent{
    min-width:38px !important;
    height:28px !important;
    border-radius:12px !important;
    font-size:12px !important;
  }

  .next-step-card{
    padding:14px 16px !important;
  }

  .next-action-row{
    display:grid !important;
    grid-template-columns:minmax(0,1.2fr) minmax(108px,.72fr) !important;
    gap:10px !important;
    margin-top:10px !important;
  }

  .next-select,
  #continueTraining{
    height:42px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }
}

/* Module pages final desktop override. Keep this at the end. */
@media (min-width:900px){
  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .app{
    width:min(1220px, calc(100vw - 36px)) !important;
    max-width:none !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .inner{
    width:100% !important;
    display:grid !important;
    gap:16px !important;
    align-items:start !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .topbar{
    grid-column:1 / -1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:56px !important;
    margin:0 !important;
    padding:0 2px 12px !important;
    border-bottom:1px solid #f0edf8 !important;
  }

  .nav-mini{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex-wrap:wrap !important;
  }

  .nav-mini a,
  .nav-mini button{
    height:36px !important;
    padding:0 14px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid #e9e2f7 !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#4d4a5d !important;
    font-size:12px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
    box-shadow:0 5px 14px rgba(72,54,130,.035) !important;
  }

  .nav-mini button{
    color:#8b63ee !important;
    background:#fbf9ff !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .inner{
    grid-template-columns:minmax(270px,.82fr) minmax(440px,1.2fr) minmax(270px,.82fr) !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .hero,
  body:is(.listening-home,.writing-home,.speaking-home) .intro{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    min-height:178px !important;
    border-radius:24px !important;
  }

  .listening-home .section-title:first-of-type,
  .speaking-home .section-title:first-of-type{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 0 8px !important;
  }

  .listening-home #taskList{
    grid-column:2 !important;
    grid-row:2 / span 4 !important;
    display:grid !important;
    gap:10px !important;
    padding-top:48px !important;
  }

  .listening-home #startBtn,
  .listening-home #reportBtn{
    grid-column:2 !important;
    margin:0 !important;
  }

  .listening-home .note,
  .listening-home .progress{
    grid-column:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .listening-home .task{
    min-height:86px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .writing-home .task-card,
  .writing-home .section-title,
  .writing-home .task-link{
    grid-column:2 !important;
    margin:0 !important;
  }

  .writing-home .task-card{
    grid-row:2 !important;
    border-radius:24px !important;
  }

  .writing-home .task-link{
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .writing-home .rhythm{
    grid-column:3 !important;
    grid-row:2 / span 4 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .mode-card,
  .speaking-home .status-card{
    grid-column:1 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .task-card,
  .speaking-home #startSprint{
    grid-column:2 !important;
    margin:0 !important;
  }

  .speaking-home .task-card{
    min-height:88px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .speaking-home .task-card.main{
    grid-row:2 !important;
    padding-top:48px !important;
  }

  .speaking-home #reviewRecords,
  .speaking-home .tip,
  .speaking-home .progress{
    grid-column:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .reading-home .inner{
    grid-template-columns:minmax(300px,.92fr) minmax(450px,1.16fr) minmax(280px,.86fr) !important;
  }

  .reading-home .task-card.main{
    grid-column:1 / 3 !important;
    grid-row:2 !important;
    margin:0 !important;
    border-radius:24px !important;
  }

  .reading-home .rhythm-note,
  .reading-home .review-card{
    grid-column:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .reading-home .today-list{
    grid-column:1 / 3 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .reading-home .bank-list{
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .reading-home .section-title{
    grid-column:1 / -1 !important;
    margin:2px 0 -8px !important;
  }

  .reading-home .warm-note{
    grid-column:1 / -1 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .vocab-page .inner{
    grid-template-columns:minmax(260px,.8fr) minmax(440px,1.12fr) minmax(270px,.88fr) !important;
  }

  .vocab-page .hero,
  .vocab-page .progress,
  .vocab-page .meta{
    grid-column:1 !important;
    margin:0 !important;
  }

  .vocab-page .card{
    grid-column:2 !important;
    grid-row:2 / span 8 !important;
    margin:0 !important;
    border-radius:24px !important;
  }

  .vocab-page .actions,
  .vocab-page .stats,
  .vocab-page .queue{
    grid-column:3 !important;
    margin:0 !important;
  }

  .word-list-page .inner{
    grid-template-columns:minmax(300px,.72fr) minmax(560px,1.28fr) !important;
  }

  .word-list-page .hero,
  .word-list-page .controls,
  .word-list-page .summary,
  .word-list-page .more{
    grid-column:1 !important;
    margin:0 !important;
  }

  .word-list-page .list{
    grid-column:2 !important;
    grid-row:2 / span 5 !important;
    margin:0 !important;
    display:grid !important;
    gap:10px !important;
    align-content:start !important;
  }

  .word-list-page .card{
    border-radius:18px !important;
    padding:14px 16px !important;
  }

  .stats-page .inner{
    grid-template-columns:minmax(300px,.9fr) minmax(420px,1.1fr) minmax(280px,.9fr) !important;
  }

  .stats-page .hero{
    grid-column:1 / 3 !important;
    grid-row:3 !important;
    margin:0 !important;
    border-radius:24px !important;
  }

  .stats-page .card{
    margin:0 !important;
    border-radius:22px !important;
  }

  .stats-page .card:nth-of-type(1){
    grid-column:1 / 3 !important;
    grid-row:2 !important;
  }

  .stats-page .card:nth-of-type(2){
    grid-column:1 / 3 !important;
    grid-row:4 !important;
  }

  .stats-page .card:nth-of-type(3),
  .stats-page .card:nth-of-type(4){
    grid-column:3 !important;
  }

  .stats-page .card:nth-of-type(5),
  .stats-page .card:nth-of-type(6){
    grid-column:1 / -1 !important;
  }
}


/* Final launch cascade: keep this block last so old landscape rules cannot override it. */
@media (min-width:900px){
  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .page{
    padding:18px !important;
    align-items:flex-start !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .app{
    width:min(1240px, calc(100vw - 36px)) !important;
    max-width:none !important;
    border-radius:26px !important;
    overflow:visible !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .inner{
    width:100% !important;
    display:grid !important;
    gap:14px 18px !important;
    align-items:start !important;
    padding:18px 20px 22px !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .topbar{
    grid-column:1 / -1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 2px 12px !important;
    border-bottom:1px solid #f0edf8 !important;
  }

  .nav-mini{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }

  .nav-mini a,
  .nav-mini button{
    height:34px !important;
    padding:0 13px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid #e9e2f7 !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#4d4a5d !important;
    font-size:11.5px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
    box-shadow:0 5px 14px rgba(72,54,130,.035) !important;
  }

  .nav-mini button{
    min-width:44px !important;
    color:#8b63ee !important;
    background:#fbf9ff !important;
  }

  .vocab-page .inner{
    grid-template-columns:280px minmax(470px,520px) minmax(300px,1fr) !important;
  }

  .vocab-page .vocab-left{
    grid-column:1 !important;
    grid-row:2 !important;
    display:grid !important;
    gap:10px !important;
    align-content:start !important;
  }

  .vocab-page .vocab-main-card{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding:16px 18px !important;
    border-radius:22px !important;
    min-height:0 !important;
  }

  .vocab-page .vocab-right{
    grid-column:3 !important;
    grid-row:2 !important;
    display:grid !important;
    gap:12px !important;
    align-content:start !important;
  }

  .vocab-page .vocab-left .hero,
  .vocab-page .vocab-right .stats,
  .vocab-page .vocab-right .actions,
  .vocab-page .vocab-right .queue{
    margin:0 !important;
    border-radius:22px !important;
  }

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

  .vocab-page .vocab-left h1{
    font-size:25px !important;
    line-height:1.08 !important;
    max-width:230px !important;
  }

  .vocab-page .vocab-left .resume{
    grid-template-columns:1fr auto !important;
    margin-top:14px !important;
    padding:12px !important;
    border-radius:18px !important;
  }

  .vocab-page .vocab-left .progress{
    height:7px !important;
    margin:2px 4px 0 !important;
  }

  .vocab-page .vocab-left .meta{
    margin:0 4px !important;
    font-size:12px !important;
  }

  .vocab-page .word{
    font-size:26px !important;
  }

  .vocab-page .meaning{
    font-size:15px !important;
    padding:12px 0 !important;
  }

  .vocab-page .example{
    font-size:14px !important;
    line-height:1.45 !important;
  }

  .vocab-page .audio-grid,
  .vocab-page .repeat-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .vocab-page .audio-btn,
  .vocab-page .record-btn,
  .vocab-page .replay-btn,
  .vocab-page .action,
  .vocab-page .check{
    height:38px !important;
    border-radius:14px !important;
    font-size:12.5px !important;
  }

  .vocab-page .repeat-panel{
    padding:12px !important;
    border-radius:18px !important;
  }

  .vocab-page .spell{
    grid-template-columns:1fr 96px !important;
    gap:10px !important;
  }

  .vocab-page .spell input{
    height:40px !important;
    border-radius:14px !important;
    font-size:14px !important;
  }

  .vocab-page .vocab-right .stats{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .vocab-page .vocab-right .stat{
    min-height:76px !important;
    padding:12px !important;
    display:grid !important;
    grid-template-columns:34px 1fr !important;
    grid-template-rows:auto auto !important;
    gap:2px 10px !important;
    text-align:left !important;
    align-items:center !important;
  }

  .vocab-page .vocab-right .stat i{
    grid-row:1 / 3 !important;
    width:34px !important;
    height:34px !important;
    border-radius:13px !important;
    display:grid !important;
    place-items:center !important;
    background:rgba(255,255,255,.72) !important;
    font-size:18px !important;
    margin:0 !important;
  }

  .vocab-page .vocab-right .stat b{
    font-size:20px !important;
    line-height:1 !important;
    margin:0 !important;
  }

  .vocab-page .vocab-right .stat span{
    font-size:11.5px !important;
    line-height:1.15 !important;
  }

  .vocab-page .vocab-right .actions{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    gap:9px !important;
  }

  .vocab-page .vocab-right .queue{
    padding:15px !important;
  }

  .vocab-page .queue h2{
    font-size:17px !important;
  }

  .vocab-page .queue p{
    font-size:13px !important;
  }

  .vocab-page .queue #openReviewQueue{
    width:100% !important;
    height:38px !important;
    margin-top:10px !important;
  }

  .reading-home .inner{
    grid-template-columns:300px minmax(480px,1fr) 300px !important;
    grid-auto-flow:row dense !important;
  }

  .reading-home .task-card.main{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  .reading-home .task-card.main .card-row{
    grid-template-columns:34px 1fr !important;
    gap:12px !important;
  }

  .reading-home .task-card.main .primary{
    grid-column:1 / -1 !important;
    width:100% !important;
    height:40px !important;
    margin-top:10px !important;
  }

  .reading-home .rhythm-note{
    grid-column:1 !important;
    grid-row:3 !important;
    margin:0 !important;
    padding:15px !important;
    border-radius:22px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(1){
    grid-column:2 !important;
    grid-row:2 !important;
    margin:2px 0 -2px !important;
  }

  .reading-home .today-list{
    grid-column:2 !important;
    grid-row:3 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    margin:0 !important;
  }

  .reading-home .today-list .task-link{
    min-height:104px !important;
    padding:14px !important;
    border-radius:20px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(2){
    grid-column:3 !important;
    grid-row:2 !important;
    margin:2px 0 -2px !important;
  }

  .reading-home .review-card{
    grid-column:3 !important;
    grid-row:3 !important;
    margin:0 !important;
    padding:14px !important;
    border-radius:20px !important;
    min-height:104px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(3){
    grid-column:1 / -1 !important;
    grid-row:4 !important;
    margin:8px 0 -4px !important;
  }

  .reading-home .bank-list:nth-of-type(1){
    grid-column:1 / -1 !important;
    grid-row:5 !important;
  }

  .reading-home .inner > .section-title:nth-of-type(4){
    grid-column:1 / -1 !important;
    grid-row:6 !important;
    margin:2px 0 -4px !important;
  }

  .reading-home .bank-list:nth-of-type(2){
    grid-column:1 / -1 !important;
    grid-row:7 !important;
  }

  .reading-home .bank-list{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
    margin:0 !important;
  }

  .reading-home .bank-item{
    min-height:76px !important;
    padding:14px !important;
    border-radius:18px !important;
  }

  .reading-home .warm-note{
    grid-column:1 / -1 !important;
    grid-row:8 !important;
    margin:0 !important;
    padding:13px 16px !important;
    border-radius:20px !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .inner{
    grid-template-columns:285px minmax(470px,1fr) 300px !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .hero,
  body:is(.listening-home,.writing-home,.speaking-home) .intro{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    min-height:0 !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) h1{
    font-size:26px !important;
    line-height:1.08 !important;
  }

  .listening-home .section-title:first-of-type,
  .speaking-home .section-title:first-of-type{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:2px 0 -2px !important;
  }

  .listening-home #taskList{
    grid-column:2 !important;
    grid-row:3 / span 3 !important;
    display:grid !important;
    gap:10px !important;
    padding:0 !important;
  }

  .listening-home .task{
    min-height:90px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .listening-home #startBtn,
  .listening-home #reportBtn{
    grid-column:2 !important;
    width:auto !important;
    height:40px !important;
    margin:0 !important;
    border-radius:14px !important;
  }

  .listening-home .note{
    grid-column:3 !important;
    grid-row:2 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .listening-home .progress{
    grid-column:3 !important;
    grid-row:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .writing-home .task-card{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding:16px !important;
    border-radius:22px !important;
  }

  .writing-home > .section-title,
  .writing-home .inner > .section-title{
    grid-column:2 !important;
    margin:2px 0 -4px !important;
  }

  .writing-home .task-link{
    grid-column:2 !important;
    margin:0 !important;
    min-height:90px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .writing-home .rhythm{
    grid-column:3 !important;
    grid-row:2 / span 4 !important;
    margin:0 !important;
    padding:16px !important;
    border-radius:22px !important;
  }

  .writing-home .rhythm-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .speaking-home .mode-card{
    grid-column:1 !important;
    grid-row:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .status-card{
    grid-column:1 !important;
    grid-row:4 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .task-card{
    grid-column:2 !important;
    margin:0 !important;
    min-height:96px !important;
    padding:15px 16px !important;
    border-radius:18px !important;
  }

  .speaking-home .task-card.main{
    grid-row:auto !important;
    padding-top:15px !important;
  }

  .speaking-home #startSprint{
    grid-column:2 !important;
    width:auto !important;
    height:40px !important;
    margin:0 !important;
    border-radius:14px !important;
  }

  .speaking-home #reviewRecords,
  .speaking-home .tip,
  .speaking-home .progress{
    grid-column:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .progress{
    grid-row:2 / span 2 !important;
  }

  .word-list-page .inner{
    grid-template-columns:300px minmax(560px,1fr) !important;
  }

  .word-list-page .hero,
  .word-list-page .controls,
  .word-list-page .summary,
  .word-list-page .more{
    grid-column:1 !important;
    margin:0 !important;
  }

  .word-list-page .list{
    grid-column:2 !important;
    grid-row:2 / span 5 !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    align-content:start !important;
  }

  .word-list-page .card{
    margin:0 !important;
    min-height:88px !important;
    border-radius:18px !important;
    padding:14px 16px !important;
  }

  .stats-page .inner{
    grid-template-columns:285px minmax(470px,1fr) 300px !important;
  }

  .stats-page .hero{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  .stats-page .card{
    margin:0 !important;
    padding:16px !important;
    border-radius:22px !important;
  }

  .stats-page .card:nth-of-type(1){
    grid-column:2 !important;
    grid-row:2 !important;
  }

  .stats-page .card:nth-of-type(2){
    grid-column:2 !important;
    grid-row:3 !important;
  }

  .stats-page .card:nth-of-type(3){
    grid-column:3 !important;
    grid-row:2 !important;
  }

  .stats-page .card:nth-of-type(4){
    grid-column:3 !important;
    grid-row:3 / span 2 !important;
  }

  .stats-page .card:nth-of-type(5){
    grid-column:1 / 3 !important;
    grid-row:4 !important;
  }

  .stats-page .card:nth-of-type(6){
    grid-column:3 !important;
    grid-row:5 !important;
  }

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

  .stats-page .stat{
    min-height:74px !important;
    padding:11px !important;
    text-align:left !important;
  }

  .stats-page .rows{
    gap:9px !important;
  }

  .stats-page .row{
    grid-template-columns:68px 1fr auto !important;
    padding:10px 0 0 !important;
  }
}

@media (min-width:900px) and (max-width:1320px){
  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .app{
    width:calc(100vw - 28px) !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .inner{
    gap:12px !important;
    padding:16px !important;
  }

  .nav-mini a,
  .nav-mini button{
    height:32px !important;
    padding:0 11px !important;
    font-size:11px !important;
  }

  .vocab-page .inner{
    grid-template-columns:260px minmax(430px,500px) minmax(285px,1fr) !important;
  }

  .reading-home .inner,
  body:is(.listening-home,.writing-home,.speaking-home,.stats-page) .inner{
    grid-template-columns:270px minmax(430px,1fr) 285px !important;
  }
}

/* Vocab and Reading real desktop cleanup, based on accepted home standard. */
@media (min-width:900px){
  .vocab-page .inner{
    grid-template-columns:300px minmax(480px,560px) 300px !important;
    gap:16px 18px !important;
  }

  .vocab-page .hero{
    min-height:0 !important;
    padding:20px !important;
    border-radius:22px !important;
  }

  .vocab-page .hero h1{
    font-size:28px !important;
    line-height:1.05 !important;
    letter-spacing:-.045em !important;
    margin:0 0 14px !important;
  }

  .vocab-page .resume{
    padding:12px 14px !important;
    border-radius:18px !important;
  }

  .vocab-page .progress{
    height:8px !important;
    margin-top:12px !important;
    align-self:start !important;
  }

  .vocab-page .meta{
    align-self:start !important;
    font-size:12px !important;
  }

  .vocab-page .card{
    padding:22px !important;
    border-radius:24px !important;
    min-height:0 !important;
  }

  .vocab-page .word{
    font-size:28px !important;
    line-height:1.05 !important;
    margin:0 !important;
  }

  .vocab-page .ipa{
    font-size:14px !important;
    margin:8px 0 10px !important;
  }

  .vocab-page .meaning{
    font-size:20px !important;
    line-height:1.25 !important;
    padding:10px 0 !important;
  }

  .vocab-page .example-label{
    margin-top:10px !important;
  }

  .vocab-page .example{
    font-size:17px !important;
    line-height:1.45 !important;
    margin:8px 0 14px !important;
  }

  .vocab-page .audio-grid{
    gap:10px !important;
    margin-bottom:12px !important;
  }

  .vocab-page .audio-btn{
    height:42px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }

  .vocab-page .repeat-panel{
    padding:12px 14px !important;
    border-radius:18px !important;
  }

  .vocab-page .repeat-grid{
    gap:8px !important;
  }

  .vocab-page .record-btn,
  .vocab-page .replay-btn{
    height:38px !important;
    border-radius:13px !important;
    font-size:13px !important;
  }

  .vocab-page .spell{
    margin-top:12px !important;
    gap:8px !important;
  }

  .vocab-page .spell input,
  .vocab-page .check{
    height:44px !important;
    border-radius:14px !important;
    font-size:14px !important;
  }

  .vocab-page .stats{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .vocab-page .stat{
    min-height:92px !important;
    border-radius:18px !important;
    padding:14px !important;
  }

  .vocab-page .stat b{
    font-size:25px !important;
  }

  .vocab-page .queue{
    border-radius:22px !important;
    padding:16px !important;
  }

  .vocab-page .queue h2{
    font-size:18px !important;
  }

  .vocab-page .queue p{
    font-size:13px !important;
    line-height:1.4 !important;
  }

  .vocab-page #prev,
  .vocab-page #markNext,
  .vocab-page #markKnown{
    height:40px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }

  .reading-home .inner{
    grid-template-columns:330px minmax(430px,1fr) 330px !important;
    gap:16px !important;
  }

  .reading-home .task-card.main{
    grid-column:1 !important;
    grid-row:2 !important;
    min-height:0 !important;
    padding:18px !important;
  }

  .reading-home .task-card.main .card-row{
    grid-template-columns:34px minmax(0,1fr) !important;
    gap:12px !important;
  }

  .reading-home .task-card.main .primary{
    grid-column:1 / -1 !important;
    width:100% !important;
    height:42px !important;
    margin-top:10px !important;
  }

  .reading-home .rhythm-note{
    grid-column:1 !important;
    grid-row:3 !important;
    padding:16px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(1){
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
  }

  .reading-home .today-list{
    grid-column:2 !important;
    grid-row:2 !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding-top:48px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(2){
    grid-column:3 !important;
    grid-row:2 !important;
    margin:0 !important;
  }

  .reading-home .review-card{
    grid-column:3 !important;
    grid-row:2 !important;
    margin-top:48px !important;
    padding:16px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(3){
    grid-column:1 / -1 !important;
    grid-row:4 !important;
    margin:6px 0 -6px !important;
  }

  .reading-home .bank-list:nth-of-type(1){
    grid-column:1 / -1 !important;
    grid-row:5 !important;
  }

  .reading-home .inner > .section-title:nth-of-type(4){
    grid-column:1 / -1 !important;
    grid-row:6 !important;
    margin:2px 0 -6px !important;
  }

  .reading-home .bank-list:nth-of-type(2){
    grid-column:1 / -1 !important;
    grid-row:7 !important;
  }

  .reading-home .bank-list{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .reading-home .bank-item,
  .reading-home .task-link{
    min-height:82px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .vocab-page .vocab-left,
  .vocab-page .vocab-right{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    align-self:start !important;
  }

  .vocab-page .vocab-left{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  .vocab-page .vocab-main-card{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
  }

  .vocab-page .vocab-right{
    grid-column:3 !important;
    grid-row:2 !important;
  }

  .vocab-page .vocab-left .hero,
  .vocab-page .vocab-left .progress,
  .vocab-page .vocab-left .meta,
  .vocab-page .vocab-right .actions,
  .vocab-page .vocab-right .stats,
  .vocab-page .vocab-right .queue{
    grid-column:auto !important;
    grid-row:auto !important;
    margin:0 !important;
  }

  .vocab-page .vocab-left .progress{
    width:100% !important;
  }

  .vocab-page .vocab-left .meta{
    display:flex !important;
    justify-content:space-between !important;
    gap:12px !important;
  }

  .vocab-page .vocab-right .actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .vocab-page .vocab-right .actions #markKnown{
    grid-column:1 / -1 !important;
  }

  .vocab-page .audio-grid,
  .vocab-page .repeat-grid,
  .vocab-page .spell{
    grid-template-columns:1fr 1fr !important;
  }

  .vocab-page .spell input{
    min-width:0 !important;
  }

  .vocab-page .audio-btn,
  .vocab-page .record-btn,
  .vocab-page .replay-btn,
  .vocab-page .action,
  .vocab-page .check{
    width:auto !important;
    min-width:0 !important;
  }

  .vocab-page .queue .next-batch,
  .vocab-page .queue #openReviewQueue{
    height:40px !important;
    border-radius:14px !important;
  }

  .vocab-page .vocab-right .stats{
    order:1 !important;
  }

  .vocab-page .vocab-right .actions{
    order:2 !important;
  }

  .vocab-page .vocab-right .queue{
    order:3 !important;
  }
}

/* Absolute final placement fixes for module home pages. */
@media (min-width:900px){
  .listening-home #taskList{
    grid-row:2 !important;
    padding-top:48px !important;
    align-content:start !important;
  }

  .listening-home #taskList .task{
    height:auto !important;
    min-height:78px !important;
  }

  .writing-home > .page .inner > .task-card{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
    min-height:0 !important;
  }

  .writing-home > .page .inner > .rhythm{
    grid-column:3 !important;
    grid-row:2 / span 4 !important;
    margin:0 !important;
  }

  .speaking-home > .page .inner > .task-card.main{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding-top:48px !important;
  }

  .speaking-home > .page .inner > .mode-card{
    grid-column:1 !important;
    grid-row:3 !important;
  }

  .speaking-home > .page .inner > .status-card{
    grid-column:1 !important;
    grid-row:4 !important;
  }

  .writing-home > .page .inner > .task-card{
    grid-column:1 !important;
    grid-row:3 !important;
    min-height:0 !important;
  }

  .writing-home > .page .inner > .task-card .card-row{
    grid-template-columns:32px minmax(0,1fr) !important;
  }

  .writing-home > .page .inner > .task-card .primary{
    grid-column:1 / -1 !important;
    width:100% !important;
    height:40px !important;
  }

  .speaking-home > .page .inner > .task-card.main{
    grid-row:3 !important;
    padding-top:14px !important;
    align-self:start !important;
    height:auto !important;
    min-height:88px !important;
  }

  .speaking-home > .page .inner > .task-card:nth-of-type(2){
    grid-row:4 !important;
  }

  .speaking-home > .page .inner > .task-card:nth-of-type(3){
    grid-row:5 !important;
  }

  .speaking-home > .page .inner > #reviewRecords{
    grid-column:3 !important;
    grid-row:2 !important;
  }

  .speaking-home > .page .inner > .tip{
    grid-column:3 !important;
    grid-row:3 !important;
  }

  .speaking-home > .page .inner > .progress{
    grid-column:3 !important;
    grid-row:4 / span 2 !important;
  }
}

/* Launch polish: Vocab and Reading must look like desktop product pages, not stretched mobile screens. */
@media (min-width:900px){
  .vocab-page .inner{
    grid-template-columns:300px minmax(470px,520px) minmax(300px,1fr) !important;
    gap:18px !important;
    align-items:start !important;
  }

  .vocab-page .vocab-left{
    grid-column:1 !important;
    grid-row:2 !important;
    display:grid !important;
    gap:12px !important;
    align-self:start !important;
  }

  .vocab-page .vocab-left .hero{
    padding:18px 18px 16px !important;
    border-radius:22px !important;
    min-height:0 !important;
  }

  .vocab-page .vocab-left .hero h1{
    font-size:27px !important;
    line-height:1.08 !important;
    margin:0 0 14px !important;
  }

  .vocab-page .vocab-left .resume{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
    padding:12px !important;
    border-radius:18px !important;
  }

  .vocab-page .vocab-left .resume b{
    font-size:13px !important;
  }

  .vocab-page .vocab-left .resume span{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .vocab-page .vocab-left .progress{
    grid-column:auto !important;
    grid-row:auto !important;
    width:100% !important;
    height:8px !important;
    margin:0 !important;
  }

  .vocab-page .vocab-left .meta{
    grid-column:auto !important;
    grid-row:auto !important;
    display:flex !important;
    justify-content:space-between !important;
    color:#8b8499 !important;
    font-size:12px !important;
    margin:0 !important;
  }

  .vocab-page .vocab-main-card{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    padding:22px !important;
    border-radius:24px !important;
    min-height:0 !important;
  }

  .vocab-page .word{
    font-size:28px !important;
    line-height:1.05 !important;
    margin:0 !important;
  }

  .vocab-page .meaning{
    font-size:19px !important;
    line-height:1.28 !important;
    padding:9px 0 !important;
  }

  .vocab-page .example{
    font-size:16px !important;
    line-height:1.42 !important;
    margin:7px 0 14px !important;
  }

  .vocab-page .audio-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    margin-bottom:12px !important;
  }

  .vocab-page .audio-btn,
  .vocab-page .record-btn,
  .vocab-page .replay-btn,
  .vocab-page .action,
  .vocab-page .check{
    width:auto !important;
    min-width:0 !important;
    height:40px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }

  .vocab-page .repeat-panel{
    padding:12px !important;
    border-radius:18px !important;
    margin-bottom:12px !important;
  }

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

  .vocab-page .spell{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 118px !important;
    gap:8px !important;
    margin-top:0 !important;
  }

  .vocab-page .spell input{
    min-width:0 !important;
    height:42px !important;
    border-radius:14px !important;
  }

  .vocab-page .vocab-right{
    grid-column:3 !important;
    grid-row:2 !important;
    display:grid !important;
    gap:12px !important;
    align-self:start !important;
  }

  .vocab-page .vocab-right .stats,
  .vocab-page .vocab-right .actions,
  .vocab-page .vocab-right .queue{
    grid-column:auto !important;
    grid-row:auto !important;
    margin:0 !important;
  }

  .vocab-page .vocab-right .stats{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .vocab-page .vocab-right .stat{
    min-height:54px !important;
    padding:9px 10px !important;
    border-radius:16px !important;
    display:grid !important;
    grid-template-columns:22px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    gap:1px 8px !important;
  }

  .vocab-page .vocab-right .stat i{
    grid-row:1 / 3 !important;
    font-size:16px !important;
  }

  .vocab-page .vocab-right .stat b{
    font-size:18px !important;
    line-height:1 !important;
  }

  .vocab-page .vocab-right .stat span{
    font-size:11px !important;
    line-height:1.15 !important;
  }

  .vocab-page .vocab-right .actions{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    gap:8px !important;
  }

  .vocab-page .vocab-right .actions .action{
    height:38px !important;
    padding:0 8px !important;
  }

  .vocab-page .vocab-right .queue{
    padding:14px !important;
    border-radius:20px !important;
  }

  .vocab-page .queue-head{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
  }

  .vocab-page .queue h2{
    font-size:17px !important;
  }

  .vocab-page .queue p{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .vocab-page .queue .next-batch,
  .vocab-page .queue #openReviewQueue{
    width:auto !important;
    height:38px !important;
    border-radius:14px !important;
    padding:0 14px !important;
  }

  .reading-home .inner{
    grid-template-columns:310px minmax(470px,1fr) 300px !important;
    gap:18px !important;
  }

  .reading-home .task-card.main{
    grid-column:1 !important;
    grid-row:2 !important;
    min-height:0 !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  .reading-home .task-card.main .card-row{
    grid-template-columns:34px minmax(0,1fr) !important;
    gap:12px !important;
  }

  .reading-home .task-card.main .task-title{
    font-size:21px !important;
    line-height:1.08 !important;
  }

  .reading-home .task-card.main .task-note{
    font-size:14px !important;
    line-height:1.45 !important;
  }

  .reading-home .task-card.main .primary{
    grid-column:1 / -1 !important;
    width:auto !important;
    height:42px !important;
    margin-top:10px !important;
  }

  .reading-home .rhythm-note{
    grid-column:1 !important;
    grid-row:3 !important;
    padding:14px !important;
    border-radius:20px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(1){
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
  }

  .reading-home .today-list{
    grid-column:2 !important;
    grid-row:2 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    padding-top:46px !important;
  }

  .reading-home .today-list .task-link{
    min-height:112px !important;
    padding:14px !important;
    border-radius:18px !important;
    align-content:center !important;
  }

  .reading-home .inner > .section-title:nth-of-type(2){
    grid-column:3 !important;
    grid-row:2 !important;
    margin:0 !important;
  }

  .reading-home .review-card{
    grid-column:3 !important;
    grid-row:2 !important;
    margin-top:46px !important;
    padding:14px !important;
    border-radius:20px !important;
    min-height:112px !important;
  }

  .reading-home .inner > .section-title:nth-of-type(3){
    grid-column:1 / -1 !important;
    grid-row:4 !important;
    margin:4px 0 -8px !important;
  }

  .reading-home .bank-list:nth-of-type(1){
    grid-column:1 / -1 !important;
    grid-row:5 !important;
  }

  .reading-home .inner > .section-title:nth-of-type(4){
    grid-column:1 / -1 !important;
    grid-row:6 !important;
    margin:2px 0 -8px !important;
  }

  .reading-home .bank-list:nth-of-type(2){
    grid-column:1 / -1 !important;
    grid-row:7 !important;
  }

  .reading-home .bank-list{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .reading-home .bank-item{
    min-height:74px !important;
    padding:13px 16px !important;
    border-radius:18px !important;
  }
}

/* Productized desktop rules for module pages.
   Keep existing functions; only arrange the page like a desktop learning product. */
@media (min-width:900px){
  .nav-mini{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex-wrap:wrap !important;
  }

  .nav-mini a,
  .nav-mini button{
    height:36px !important;
    padding:0 14px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid #e9e2f7 !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#4d4a5d !important;
    font-size:12px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
    box-shadow:0 5px 14px rgba(72,54,130,.035) !important;
  }

  .nav-mini button{
    color:#8b63ee !important;
    background:#fbf9ff !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .topbar{
    grid-column:1 / -1 !important;
    min-height:54px !important;
    margin:0 !important;
    padding:0 4px 12px !important;
    border-bottom:1px solid #f0edf8 !important;
  }

  body:is(.reading-home,.listening-home,.writing-home,.speaking-home,.stats-page,.word-list-page,.vocab-page) .inner{
    width:100% !important;
    display:grid !important;
    gap:16px !important;
    align-items:start !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .inner{
    grid-template-columns:minmax(260px,.86fr) minmax(420px,1.16fr) minmax(260px,.86fr) !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .hero,
  body:is(.listening-home,.writing-home,.speaking-home) .intro{
    grid-column:1 !important;
    margin:0 !important;
    min-height:170px !important;
    border-radius:24px !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .section-title{
    margin:0 !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .task,
  body:is(.listening-home,.writing-home,.speaking-home) .task-card,
  body:is(.listening-home,.writing-home,.speaking-home) .task-link{
    border-radius:18px !important;
    padding:14px 16px !important;
  }

  body:is(.listening-home,.writing-home,.speaking-home) .primary{
    height:44px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }

  .listening-home #taskList{
    grid-column:2 !important;
    display:grid !important;
    gap:10px !important;
  }

  .listening-home .section-title:first-of-type{
    grid-column:2 !important;
  }

  .listening-home #startBtn,
  .listening-home #reportBtn{
    grid-column:2 !important;
    margin:0 !important;
  }

  .listening-home .note,
  .listening-home .progress{
    grid-column:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .writing-home .task-card,
  .writing-home .section-title,
  .writing-home .task-link{
    grid-column:2 !important;
    margin:0 !important;
  }

  .writing-home .rhythm{
    grid-column:3 !important;
    grid-row:2 / span 4 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .mode-card,
  .speaking-home .status-card{
    grid-column:1 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .speaking-home .section-title,
  .speaking-home .task-card,
  .speaking-home #startSprint{
    grid-column:2 !important;
    margin:0 !important;
  }

  .speaking-home #reviewRecords,
  .speaking-home .tip,
  .speaking-home .progress{
    grid-column:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .reading-home .inner{
    grid-template-columns:minmax(300px,.95fr) minmax(430px,1.15fr) minmax(270px,.82fr) !important;
  }

  .reading-home .task-card.main{
    grid-column:1 / 3 !important;
    margin:0 !important;
    border-radius:24px !important;
  }

  .reading-home .rhythm-note,
  .reading-home .review-card,
  .reading-home .warm-note{
    grid-column:3 !important;
    margin:0 !important;
    border-radius:22px !important;
  }

  .reading-home .today-list,
  .reading-home .bank-list{
    display:grid !important;
    gap:10px !important;
  }

  .reading-home .section-title{
    grid-column:1 / -1 !important;
    margin:4px 0 -4px !important;
  }

  .reading-home .today-list{
    grid-column:1 / 3 !important;
  }

  .reading-home .bank-list{
    grid-column:1 / -1 !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .reading-home .bank-item,
  .reading-home .task-link{
    border-radius:18px !important;
    padding:14px 16px !important;
  }

  .vocab-page .inner{
    grid-template-columns:minmax(260px,.8fr) minmax(440px,1.12fr) minmax(270px,.88fr) !important;
  }

  .vocab-page .hero,
  .vocab-page .progress,
  .vocab-page .meta{
    grid-column:1 !important;
    margin:0 !important;
  }

  .vocab-page .card{
    grid-column:2 !important;
    grid-row:2 / span 6 !important;
    margin:0 !important;
    border-radius:24px !important;
  }

  .vocab-page .actions,
  .vocab-page .stats,
  .vocab-page .queue{
    grid-column:3 !important;
    margin:0 !important;
  }

  .vocab-page .actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .vocab-page .action{
    height:42px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }

  .word-list-page .inner{
    grid-template-columns:minmax(290px,.72fr) minmax(560px,1.28fr) !important;
  }

  .word-list-page .hero,
  .word-list-page .controls,
  .word-list-page .summary,
  .word-list-page .more{
    grid-column:1 !important;
    margin:0 !important;
  }

  .word-list-page .list{
    grid-column:2 !important;
    grid-row:2 / span 5 !important;
    margin:0 !important;
    display:grid !important;
    gap:10px !important;
    align-content:start !important;
  }

  .word-list-page .card{
    border-radius:18px !important;
    padding:14px 16px !important;
  }

  .stats-page .inner{
    grid-template-columns:minmax(300px,.9fr) minmax(420px,1.1fr) minmax(280px,.9fr) !important;
  }

  .stats-page .hero{
    grid-column:1 !important;
    margin:0 !important;
    border-radius:24px !important;
  }

  .stats-page .card{
    margin:0 !important;
    border-radius:22px !important;
  }

  .stats-page .card:nth-of-type(2){
    grid-column:2 !important;
    grid-row:2 !important;
  }

  .stats-page .card:nth-of-type(3),
  .stats-page .card:nth-of-type(4){
    grid-column:3 !important;
  }

  .stats-page .card:nth-of-type(5),
  .stats-page .card:nth-of-type(6){
    grid-column:1 / -1 !important;
  }
}

/* Homepage final alignment: right status should not stretch into a tall empty card. */
@media (min-width:900px){
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    align-items:start !important;
  }

  .progress-board{
    min-height:0 !important;
    height:auto !important;
    align-self:start !important;
  }

  .progress-list{
    grid-template-rows:repeat(5,58px) !important;
    align-content:start !important;
    margin:4px 0 0 !important;
    padding:14px 16px !important;
  }

  .next-step-card{
    margin-top:0 !important;
  }

  .next-action-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    align-items:center !important;
    margin-top:12px !important;
  }

  .next-select{
    width:100% !important;
    height:44px !important;
    border:1px solid #dfd6f7 !important;
    border-radius:15px !important;
    background:#fff !important;
    color:#4b465e !important;
    font-size:13px !important;
    font-weight:760 !important;
    padding:0 14px !important;
  }

  #continueTraining{
    height:44px !important;
    white-space:nowrap !important;
    line-height:1.15 !important;
  }
}

/* Homepage final alignment: right status should not stretch into a tall empty card. */
@media (min-width:900px){
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    align-items:start !important;
  }

  .progress-board{
    min-height:0 !important;
    height:auto !important;
    align-self:start !important;
  }

  .progress-list{
    grid-template-rows:repeat(5,58px) !important;
    align-content:start !important;
    margin:4px 0 0 !important;
    padding:14px 16px !important;
  }

  .next-step-card{
    margin-top:0 !important;
  }

  .next-action-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    align-items:center !important;
    margin-top:12px !important;
  }

  .next-select{
    width:100% !important;
    height:44px !important;
    border:1px solid #dfd6f7 !important;
    border-radius:15px !important;
    background:#fff !important;
    color:#4b465e !important;
    font-size:13px !important;
    font-weight:760 !important;
    padding:0 14px !important;
  }

  #continueTraining{
    height:44px !important;
    white-space:normal !important;
    line-height:1.15 !important;
  }
}

*{box-sizing:border-box}

html{
  background:
    radial-gradient(circle at 12% 0%, rgba(242,237,255,.9), transparent 28%),
    radial-gradient(circle at 90% 16%, rgba(238,252,255,.9), transparent 30%),
    #f4f7f7;
}

body{
  margin:0;
  background:transparent !important;
  color:var(--joy-ink) !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif !important;
}

a{color:inherit;text-decoration:none}
button,a{font:inherit}

.page{
  min-height:100vh !important;
  padding:18px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  background:transparent !important;
}

.app{
  width:min(1220px, calc(100vw - 36px)) !important;
  max-width:none !important;
  min-height:calc(100vh - 36px) !important;
  background:rgba(255,254,250,.96) !important;
  border:1px solid rgba(222,215,244,.95) !important;
  border-radius:26px !important;
  box-shadow:0 18px 54px rgba(36,43,58,.1) !important;
  overflow:hidden !important;
}

.inner{
  padding:24px 26px 26px !important;
}

.topbar{
  min-height:46px !important;
  margin:0 0 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
}

.app-name,.brand{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  min-width:0 !important;
}

.app-dot,.dot{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
  border-radius:13px !important;
  display:grid !important;
  place-items:center !important;
  background:var(--joy-purple-soft) !important;
  color:var(--joy-purple) !important;
  font-size:18px !important;
  font-weight:850 !important;
}

.app-title b,.title b{
  display:block !important;
  color:var(--joy-ink) !important;
  font-size:19px !important;
  line-height:1.08 !important;
  letter-spacing:0 !important;
}

.app-title span,.title span{
  display:block !important;
  margin-top:3px !important;
  color:var(--joy-muted) !important;
  font-size:12.5px !important;
  line-height:1.25 !important;
}

.nav-mini,.topbar > div:last-child{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

/* Rebuilt buttons: original color mood, landscape proportions. */
.home,
.nav-mini button,
.primary,
.secondary,
.btn,
.submit,
.action{
  min-height:40px !important;
  border-radius:13px !important;
  padding:0 16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:15px !important;
  font-weight:780 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.home,
.nav-mini button,
.secondary{
  border:1px solid var(--joy-line) !important;
  background:#fff !important;
  color:#5c566d !important;
  box-shadow:none !important;
}

.primary{
  border:0 !important;
  background:linear-gradient(135deg,#24344f,#2f6f73) !important;
  color:#fff !important;
  box-shadow:0 12px 24px rgba(123,79,232,.17) !important;
}

.home:hover,
.nav-mini button:hover,
.secondary:hover,
.primary:hover,
.module:hover,
.tool-link:hover,
.task-link:hover{
  transform:translateY(-1px);
}

.hero,
.home-hero,
.intro,
.task-card,
.panel,
.progress-board,
.rhythm,
.task-link,
.mode-card,
.status-card,
.progress,
.card,
.queue,
.review{
  border:1px solid var(--joy-line-2) !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:none !important;
}

.home-hero,
.intro,
.task-card{
  background:
    radial-gradient(circle at 96% 0%, rgba(223,249,251,.82), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(255,245,223,.62), transparent 38%),
    linear-gradient(145deg,#fff,#fbfdfc) !important;
}

h1,h2,h3,p{letter-spacing:0 !important}
h1,h2,h3{color:var(--joy-ink) !important}
.lead{color:var(--joy-text) !important}

/* The horizontal skin does not use the old image as a layout pillar. */
.coach-card,
.avatar-wrap,
.avatar{
  display:none !important;
}

@media (min-width:900px){
  /* Home: original order, horizontal board. */
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    display:grid !important;
    grid-template-columns:minmax(300px,.92fr) minmax(470px,1.34fr) minmax(270px,.74fr) !important;
    grid-template-rows:auto minmax(0, auto) !important;
    gap:16px 18px !important;
    align-items:stretch !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .topbar{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .home-hero{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .training-deck{
    grid-column:2 !important;
    grid-row:2 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .progress-board{
    grid-column:3 !important;
    grid-row:2 !important;
  }

  .home-hero{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    gap:12px !important;
    height:clamp(500px, calc(100vh - 170px), 600px) !important;
    min-height:500px !important;
    margin:0 !important;
    padding:20px 22px !important;
    position:relative !important;
    overflow:hidden !important;
  }

  .training-deck{
    height:clamp(500px, calc(100vh - 170px), 600px) !important;
    min-height:500px !important;
    margin:0 !important;
    padding:18px 18px 16px !important;
    border:1px solid var(--joy-line-2) !important;
    border-radius:20px !important;
    background:
      linear-gradient(#fff,#fff) padding-box,
      repeating-linear-gradient(90deg, rgba(36,52,79,.08) 0 1px, transparent 1px 72px) border-box !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .home-hero::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:5px;
    background:linear-gradient(180deg,#24344f,#2f6f73 62%,#d99b34);
  }

  .home-hero .hero-copy{
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:0 !important;
    align-self:start !important;
  }

  .home-hero .hero-note-row{
    margin:0 0 10px !important;
  }

  .home-hero .hello-note{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:5px 9px !important;
  }

  .home-hero .hello-note b{
    color:var(--joy-ink) !important;
    font-size:25px !important;
    line-height:1 !important;
    font-weight:830 !important;
  }

  .home-hero .hello-note span{
    font-size:18px !important;
  }

  .home-hero .hello-note em{
    flex:0 0 100% !important;
    color:var(--joy-text) !important;
    font-size:14px !important;
    font-style:normal !important;
    line-height:1.25 !important;
  }

  .home-hero h1{
    margin:0 !important;
    font-size:34px !important;
    line-height:1.08 !important;
    white-space:normal !important;
  }

  .home-hero .lead{
    max-width:640px !important;
    margin:10px 0 0 !important;
    font-size:16.4px !important;
    line-height:1.42 !important;
  }

  .home-hero .task{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    min-height:0 !important;
    padding:14px 15px !important;
    display:flex !important;
    align-items:center !important;
    border:1px solid #cbdedb !important;
    border-radius:17px !important;
    background:
      linear-gradient(#fff,#fff) padding-box,
      repeating-linear-gradient(0deg, rgba(36,52,79,.08) 0 1px, transparent 1px 28px) border-box !important;
  }

  .home-hero .task span{
    color:#3c384b !important;
    font-size:15px !important;
    line-height:1.45 !important;
  }

  .home-hero .hero-action{
    grid-column:1 !important;
    grid-row:3 !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 112px !important;
    gap:10px !important;
    margin:0 !important;
    align-self:start !important;
  }

  .row-title,
  .review-tools-head,
  .section-title{
    display:flex !important;
    align-items:end !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin:0 0 10px !important;
  }

  .row-title h2,
  .review-tools-head h2,
  .section-title h2{
    margin:0 !important;
    font-size:24px !important;
    line-height:1.1 !important;
  }

  .row-title small,
  .review-tools-head small,
  .section-title span{
    color:var(--joy-muted) !important;
    font-size:12.5px !important;
    font-weight:670 !important;
  }

  .modules{
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0,1fr)) !important;
    gap:9px !important;
    margin:0 0 14px !important;
    flex:0 0 auto !important;
  }

  .module{
    min-height:118px !important;
    padding:16px 16px 14px !important;
    border:1px solid var(--joy-line-2) !important;
    border-radius:20px !important;
    color:var(--joy-ink) !important;
    position:relative !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    text-align:left !important;
  }

  .module::before{
    content:attr(data-step);
    position:absolute;
    top:14px;
    right:14px;
    color:#6f687e;
    font-size:12px;
    font-weight:850;
    letter-spacing:.08em;
  }

  .module::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background:var(--joy-teal);
    opacity:.65;
  }

  .module.v{background:#fbf9ff !important;border-color:#e5ddf4 !important}
  .module.r{background:#f0fbff !important;border-color:#d6edf4 !important}
  .module.l{background:#fff7f8 !important;border-color:#f0dfe5 !important}
  .module.w{background:#fff9ee !important;border-color:#ecd9b4 !important}
  .module.s{background:#f3fff8 !important;border-color:#d6efde !important}
  .module.w::after{background:var(--joy-amber)}
  .module.l::after{background:#b75f7a}
  .module.s::after{background:#40506f}

  .module strong{
    width:auto !important;
    min-width:28px !important;
    height:48px !important;
    margin:12px 0 8px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--joy-navy) !important;
    font-size:20px !important;
    font-weight:900 !important;
    line-height:1 !important;
  }

  .module strong svg{
    width:48px !important;
    height:48px !important;
    display:block !important;
  }

  .module span{
    display:block !important;
    font-size:16px !important;
    font-weight:850 !important;
    line-height:1 !important;
  }

  .module.active{
    border-color:#24212f !important;
    box-shadow:inset 0 0 0 1px #24212f, 0 12px 28px rgba(36,52,79,.1) !important;
  }

  .panel{
    padding:16px !important;
    background:#fff !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
  }

  .tool-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:10px !important;
    flex:1 1 auto !important;
    align-content:start !important;
  }

  .tool-link{
    height:auto !important;
    min-height:86px !important;
    padding:14px 14px !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    align-items:start !important;
    gap:10px !important;
    border:1px solid #eee9f8 !important;
    border-radius:18px !important;
    background:#fbf9ff !important;
    text-align:left !important;
    overflow:visible !important;
  }

  .tool-link:nth-child(2){background:#f0fbff !important;border-color:#d6edf4 !important}
  .tool-link:nth-child(3){background:#fff7f8 !important;border-color:#f0dfe5 !important}
  .tool-link:nth-child(4){background:#fff9ee !important;border-color:#ecd9b4 !important}
  .tool-link:nth-child(5){background:#f3fff8 !important;border-color:#d6efde !important}
  .tool-link:nth-child(6){background:#f4f7ff !important;border-color:#d9e1f2 !important}

  .tool-link i{
    width:28px !important;
    height:28px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--joy-teal) !important;
    font-style:normal !important;
    font-size:16px !important;
    font-weight:900 !important;
  }

  .tool-link b{
    display:block !important;
    font-size:15px !important;
    line-height:1.08 !important;
  }

  .tool-link span{
    display:block !important;
    margin-top:4px !important;
    color:#766f86 !important;
    font-size:12px !important;
    line-height:1.2 !important;
  }

  .progress-board{
    padding:16px 18px !important;
    height:clamp(500px, calc(100vh - 170px), 600px) !important;
    min-height:500px !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .progress-board h2{
    margin:0 0 10px !important;
    font-size:23px !important;
    line-height:1.1 !important;
  }

  .progress-list{
    flex:1 1 auto !important;
    display:grid !important;
    grid-template-rows:none !important;
    gap:10px !important;
    border-top:0 !important;
  }

  .progress-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto !important;
    column-gap:10px !important;
    row-gap:4px !important;
    align-items:center !important;
    min-height:78px !important;
    padding:13px 14px !important;
    border:1px solid #eee9f8 !important;
    border-bottom:1px solid #eee9f8 !important;
    border-radius:18px !important;
    background:#fbf9ff !important;
  }

  .progress-row.r{background:#f0fbff !important;border-color:#d6edf4 !important}
  .progress-row.w{background:#fff7f8 !important;border-color:#f0dfe5 !important}
  .progress-row.l{background:#fff9ee !important;border-color:#ecd9b4 !important}
  .progress-row.s{background:#f3fff8 !important;border-color:#d6efde !important}

  .progress-row:first-child{
    border-top:0 !important;
  }

  .progress-name{
    grid-column:1 !important;
    grid-row:1 !important;
    font-size:14.5px !important;
    font-weight:820 !important;
    color:#332f43 !important;
  }

  .progress-task{
    grid-column:1 !important;
    grid-row:2 !important;
    color:#6f687e !important;
    font-size:12.5px !important;
    line-height:1.28 !important;
  }

  .progress-state{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
    min-width:72px !important;
    padding:6px 10px !important;
    border-radius:999px !important;
    background:#f6f2fb !important;
    color:#766f86 !important;
    text-align:center !important;
    font-size:12px !important;
    font-weight:800 !important;
  }

  .progress-state.done{
    background:var(--joy-mint) !important;
    color:var(--joy-mint-ink) !important;
  }

  .progress-state.active{
    background:var(--joy-cream) !important;
    color:var(--joy-cream-ink) !important;
  }
}

@media (min-width:900px){
  /* Subject home pages: same vertical logic, turned horizontal. */
  body.writing-home .inner,
  body.listening-home .inner,
  body.speaking-home .inner{
    display:grid !important;
    grid-template-columns:minmax(390px, .9fr) minmax(0, 1.1fr) !important;
    grid-template-rows:auto auto auto !important;
    gap:16px 18px !important;
  }

  body.writing-home .topbar,
  body.listening-home .topbar,
  body.speaking-home .topbar{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }

  body.writing-home .intro,
  body.listening-home .hero,
  body.speaking-home .intro{
    grid-column:1 !important;
    grid-row:2 !important;
    min-height:178px !important;
    padding:24px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    margin:0 !important;
  }

  body.writing-home .intro h1,
  body.listening-home .hero h1,
  body.speaking-home .intro h1{
    font-size:31px !important;
    line-height:1.12 !important;
  }

  body.writing-home .intro .lead,
  body.listening-home .hero .lead,
  body.speaking-home .intro .lead{
    max-width:none !important;
    margin:12px 0 0 !important;
    font-size:17px !important;
    line-height:1.48 !important;
  }

  body.writing-home .task-card,
  body.speaking-home .task-card.main,
  body.listening-home .task.main{
    grid-column:1 !important;
    grid-row:3 !important;
    min-height:246px !important;
    padding:22px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
  }

  body.writing-home .card-row{
    width:100% !important;
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) 110px !important;
    gap:14px !important;
    align-items:center !important;
  }

  body.writing-home .icon,
  body.writing-home .mini-icon,
  body.speaking-home .mini-icon{
    width:36px !important;
    height:36px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:12px !important;
    background:var(--joy-purple-soft) !important;
    color:var(--joy-purple) !important;
    font-weight:850 !important;
  }

  body.writing-home .label{
    margin:0 0 6px !important;
    color:var(--joy-purple) !important;
    font-size:14px !important;
    font-weight:820 !important;
  }

  body.writing-home .task-title{
    margin:0 0 8px !important;
    font-size:24px !important;
    line-height:1.14 !important;
    font-weight:820 !important;
  }

  body.writing-home .fact{
    margin:3px 0 !important;
    color:#6f687e !important;
    font-size:14.5px !important;
    line-height:1.35 !important;
  }

  body.writing-home .fact i{
    display:inline-block !important;
    width:18px !important;
    color:var(--joy-purple) !important;
    font-style:normal !important;
  }

  body.writing-home .task-card .primary{
    min-height:46px !important;
    height:46px !important;
    border-radius:14px !important;
  }

  body.writing-home .inner > .section-title{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
  }

  body.writing-home .task-link{
    grid-column:2 !important;
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) auto !important;
    gap:13px !important;
    align-items:center !important;
    min-height:94px !important;
    padding:16px !important;
    margin:0 !important;
  }

  body.writing-home .task-link:nth-of-type(1){
    grid-row:2 !important;
    margin-top:42px !important;
  }

  body.writing-home .task-link:nth-of-type(2){
    grid-row:3 !important;
    align-self:start !important;
  }

  body.writing-home .task-link strong{
    display:block !important;
    margin-bottom:4px !important;
    font-size:17.5px !important;
    line-height:1.18 !important;
  }

  body.writing-home .task-link small{
    display:block !important;
    color:#6f687e !important;
    font-size:13.5px !important;
    line-height:1.3 !important;
  }

  body.writing-home .tag{
    min-height:26px !important;
    padding:0 10px !important;
    display:inline-flex !important;
    align-items:center !important;
    border-radius:999px !important;
    background:var(--joy-purple-soft) !important;
    color:var(--joy-purple) !important;
    font-size:12px !important;
    font-weight:820 !important;
  }

  body.writing-home .rhythm{
    grid-column:2 !important;
    grid-row:3 !important;
    margin:110px 0 0 !important;
    padding:16px !important;
  }

  body.writing-home .rhythm .section-title{
    display:flex !important;
    margin:0 0 10px !important;
  }

  body.writing-home .rhythm-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  body.writing-home .rhythm-item{
    min-height:74px !important;
    padding:10px !important;
    border:1px solid #eee9f8 !important;
    border-radius:14px !important;
    background:#fbfaff !important;
  }

  body.writing-home .rhythm-item b{
    display:block !important;
    margin-bottom:4px !important;
    color:var(--joy-purple) !important;
    font-size:22px !important;
    line-height:1 !important;
  }

  body.writing-home .rhythm-item span{
    color:#6f687e !important;
    font-size:11.5px !important;
    line-height:1.18 !important;
  }

  body.writing-home .note{
    display:none !important;
  }
}

@media (max-width:899px){
  .page{
    padding:0 !important;
    background:#fff !important;
  }

  .app{
    width:100% !important;
    min-height:100vh !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .inner{
    padding:16px 18px 26px !important;
  }

  .topbar{
    margin-bottom:14px !important;
  }

  .home,
  .nav-mini button{
    min-height:36px !important;
    padding:0 11px !important;
    font-size:12px !important;
  }

  .home-hero,
  .intro,
  .task-card,
  .panel,
  .progress-board,
  .rhythm{
    padding:16px !important;
    margin-bottom:12px !important;
  }

  .home-hero h1,
  .intro h1{
    font-size:25px !important;
    line-height:1.12 !important;
    white-space:normal !important;
  }

  .lead{
    font-size:13.5px !important;
    line-height:1.45 !important;
  }

  .home-hero .task{
    margin:12px 0 !important;
    padding:12px !important;
    border:1px solid var(--joy-line-2) !important;
    border-radius:15px !important;
  }

  .home-hero .hero-action{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:8px !important;
  }

  .modules{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .module{
    min-height:56px !important;
    border:1px solid var(--joy-line-2) !important;
    border-radius:14px !important;
    background:#fff !important;
    padding:6px 3px !important;
  }

  .module strong{
    width:23px !important;
    height:23px !important;
    margin:0 auto 4px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:8px !important;
    background:var(--tile,var(--joy-purple-soft)) !important;
    font-size:12px !important;
  }

  .module span{
    font-size:10px !important;
    font-weight:760 !important;
  }

  .tool-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .progress-row{
    display:grid !important;
    grid-template-columns:64px minmax(0,1fr) auto !important;
    gap:8px !important;
    padding:9px 0 !important;
  }

  body.writing-home .card-row{
    grid-template-columns:34px minmax(0,1fr) !important;
  }

  body.writing-home .task-card .primary{
    grid-column:1 / -1 !important;
    width:100% !important;
    margin-top:10px !important;
  }

  body.writing-home .rhythm-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
}

/* Final homepage pass: task-card style inspired by the existing JOY module pages. */
@media (min-width:900px){
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 330px !important;
    grid-template-rows:auto auto auto !important;
    gap:18px 20px !important;
    align-items:start !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .topbar{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .home-hero{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .training-deck{
    grid-column:1 !important;
    grid-row:3 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .progress-board{
    grid-column:2 !important;
    grid-row:2 / span 2 !important;
  }

  .home-hero{
    height:auto !important;
    min-height:220px !important;
    margin:0 !important;
    padding:28px 28px 26px 112px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 176px !important;
    grid-template-rows:auto auto !important;
    gap:16px 24px !important;
    border-radius:30px !important;
    border:2px solid #ded4ff !important;
    background:
      radial-gradient(circle at 92% 12%, rgba(223,249,251,.92), transparent 38%),
      linear-gradient(145deg,#fff,#fbf8ff) !important;
    position:relative !important;
    box-shadow:0 18px 50px rgba(64,80,111,.07) !important;
  }

  .home-hero::before{
    content:"✓" !important;
    position:absolute !important;
    left:28px !important;
    top:50% !important;
    width:56px !important;
    height:56px !important;
    transform:translateY(-50%) !important;
    display:grid !important;
    place-items:center !important;
    border-radius:22px !important;
    background:#f0e9ff !important;
    color:#7b4fe8 !important;
    font-size:34px !important;
    font-weight:650 !important;
  }

  .home-hero .hero-copy{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:start !important;
  }

  .home-hero .hello-note b{
    font-size:0 !important;
  }

  .home-hero .hello-note b::after{
    content:"Current sprint task";
    color:#7b4fe8;
    font-size:18px;
    line-height:1;
    font-weight:850;
  }

  body.zh .home-hero .hello-note b::after{
    content:"当前训练任务";
  }

  .home-hero .hello-note span,
  .home-hero .hello-note em{
    display:none !important;
  }

  .home-hero h1{
    margin:10px 0 0 !important;
    font-size:34px !important;
    line-height:1.1 !important;
    letter-spacing:0 !important;
  }

  .home-hero .lead{
    margin:12px 0 0 !important;
    max-width:650px !important;
    color:#6e6981 !important;
    font-size:21px !important;
    line-height:1.38 !important;
  }

  .home-hero .task{
    grid-column:1 !important;
    grid-row:2 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  .home-hero .task span{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    color:transparent !important;
    font-size:0 !important;
    line-height:1 !important;
  }

  .home-hero .task span::before,
  .home-hero .task span::after{
    display:inline-flex !important;
    align-items:center !important;
    min-height:36px !important;
    padding:0 16px !important;
    border-radius:999px !important;
    font-size:17px !important;
    font-weight:850 !important;
    line-height:1 !important;
  }

  .home-hero .task span::before{
    content:"Vocab 30 · Reading 4 steps";
    background:#f0e9ff !important;
    color:#7b4fe8 !important;
  }

  .home-hero .task span::after{
    content:"Listening · Writing · Speaking";
    background:#e8f7ef !important;
    color:#237a55 !important;
  }

  body.zh .home-hero .task span::before{
    content:"词汇 30 · 阅读四步";
  }

  body.zh .home-hero .task span::after{
    content:"听力 · 写作 · 口语";
  }

  .home-hero .hero-action{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin:0 !important;
  }

  .home-hero .hero-action .primary{
    min-height:64px !important;
    border-radius:999px !important;
    font-size:20px !important;
    background:#7b4fe8 !important;
    box-shadow:0 18px 36px rgba(123,79,232,.24) !important;
  }

  .home-hero .hero-action .secondary{
    min-height:50px !important;
    border-radius:999px !important;
    font-size:17px !important;
  }

  .training-deck{
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    display:block !important;
  }

  .training-deck > .row-title{
    margin:0 4px 12px !important;
  }

  .training-deck > .row-title h2{
    font-size:31px !important;
  }

  .training-deck > .row-title small{
    font-size:16px !important;
    color:#8b8499 !important;
  }

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

  .module{
    min-height:150px !important;
    padding:18px 18px 16px !important;
    border-radius:24px !important;
    border-width:2px !important;
    box-shadow:none !important;
  }

  .module::before{
    top:18px !important;
    left:18px !important;
    right:auto !important;
    color:#6e6981 !important;
    font-size:15px !important;
  }

  .module::after{
    height:5px !important;
    opacity:.55 !important;
  }

  .module strong{
    height:58px !important;
    margin:32px 0 10px !important;
  }

  .module strong svg{
    width:58px !important;
    height:58px !important;
  }

  .module span{
    font-size:18px !important;
    line-height:1.12 !important;
  }

  .panel{
    padding:24px !important;
    border-radius:28px !important;
    border:2px solid #ded4ff !important;
    background:
      radial-gradient(circle at 94% 0%, rgba(223,249,251,.72), transparent 36%),
      #fff !important;
  }

  .review-tools-head{
    margin:0 0 18px !important;
  }

  .review-tools-head h2{
    font-size:30px !important;
  }

  .review-tools-head small{
    font-size:15px !important;
  }

  .tool-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
  }

  .tool-link{
    min-height:100px !important;
    padding:16px !important;
    border-radius:20px !important;
    border-width:2px !important;
    grid-template-columns:30px minmax(0,1fr) !important;
    gap:13px !important;
  }

  .tool-link i{
    font-size:18px !important;
  }

  .tool-link b{
    font-size:17px !important;
  }

  .tool-link span{
    font-size:13px !important;
  }

  .progress-board{
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:24px 24px 18px !important;
    border-radius:30px !important;
    border:2px solid #ded4ff !important;
    background:
      radial-gradient(circle at 100% 2%, rgba(223,249,251,.78), transparent 32%),
      #fff !important;
  }

  .progress-board h2{
    font-size:30px !important;
    margin:0 0 14px !important;
  }

  .progress-list{
    gap:12px !important;
  }

  .progress-row{
    min-height:92px !important;
    border-radius:22px !important;
    padding:15px 16px !important;
    border-width:2px !important;
  }

  .progress-no{
    font-size:13px !important;
  }

  .progress-name{
    font-size:17px !important;
  }

  .progress-task{
    font-size:14px !important;
  }

  .progress-state{
    min-width:82px !important;
    min-height:32px !important;
    font-size:13px !important;
  }
}

/* Restore clear three-column homepage; use the provided module-card artwork only. */
@media (min-width:900px){
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    display:grid !important;
    grid-template-columns:minmax(300px,.92fr) minmax(470px,1.34fr) minmax(270px,.74fr) !important;
    grid-template-rows:auto minmax(0, auto) !important;
    gap:16px 18px !important;
    align-items:stretch !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .topbar{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .home-hero{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .training-deck{
    grid-column:2 !important;
    grid-row:2 !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .progress-board{
    grid-column:3 !important;
    grid-row:2 !important;
  }

  .home-hero,
  .training-deck,
  .progress-board{
    height:clamp(500px, calc(100vh - 170px), 600px) !important;
    min-height:500px !important;
    margin:0 !important;
  }

  .home-hero{
    padding:24px 24px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    gap:14px !important;
    border-radius:24px !important;
    border:1px solid var(--joy-line-2) !important;
    background:
      radial-gradient(circle at 96% 0%, rgba(223,249,251,.82), transparent 34%),
      radial-gradient(circle at 0% 100%, rgba(255,245,223,.62), transparent 38%),
      linear-gradient(145deg,#fff,#fbfdfc) !important;
  }

  .home-hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 auto 0 0 !important;
    width:5px !important;
    height:auto !important;
    transform:none !important;
    border-radius:0 !important;
    background:linear-gradient(180deg,#24344f,#2f6f73 62%,#d99b34) !important;
  }

  .home-hero .hero-copy,
  .home-hero .task,
  .home-hero .coach-card{
    grid-column:1 !important;
  }

  .home-hero .hero-copy{grid-row:1 !important}
  .home-hero .coach-card{grid-row:2 !important}
  .home-hero .task{grid-row:3 !important}

  .home-hero .hello-note b{
    font-size:25px !important;
  }

  .home-hero .hello-note b::after{
    content:none !important;
  }

  .home-hero .hello-note span,
  .home-hero .hello-note em{
    display:inline !important;
  }

  .home-hero .hello-note em{
    display:block !important;
    flex:0 0 100% !important;
    color:var(--joy-text) !important;
    font-size:14px !important;
    font-style:normal !important;
  }

  .home-hero h1{
    font-size:34px !important;
    margin:12px 0 0 !important;
  }

  .home-hero .lead{
    font-size:17px !important;
    line-height:1.42 !important;
    margin:10px 0 0 !important;
  }

  .home-hero .task{
    min-height:0 !important;
    padding:14px 16px !important;
    border:1px solid #cbdedb !important;
    border-radius:18px !important;
    background:#fff !important;
    display:flex !important;
    align-items:center !important;
  }

  .home-hero .task span{
    color:#3c384b !important;
    font-size:15.5px !important;
    line-height:1.35 !important;
    display:block !important;
  }

  .home-hero .task span::before,
  .home-hero .task span::after{
    content:none !important;
  }

  .home-hero .coach-card{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-height:156px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
  }

  .home-hero .avatar-wrap{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
    height:156px !important;
    margin:0 !important;
    overflow:visible !important;
  }

  .home-hero .avatar{
    display:block !important;
    width:134px !important;
    max-width:134px !important;
    height:auto !important;
    object-fit:contain !important;
    transform:none !important;
  }

  .home-hero .coach-lines{
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
    margin-left:12px !important;
    max-width:158px !important;
    align-self:center !important;
  }

  .home-hero .coach-lines b{
    color:#5f5a70 !important;
    font-family:"Segoe Print","Comic Sans MS","Bradley Hand ITC",cursive !important;
    font-size:18px !important;
    line-height:1.08 !important;
    font-weight:500 !important;
    white-space:normal !important;
  }

  .home-hero .coach-lines b span{
    display:block !important;
    color:#5f5a70 !important;
    font:inherit !important;
    white-space:nowrap !important;
  }

  .home-hero .coach-lines b span + span{
    margin-left:12px !important;
  }

  .home-hero .coach-lines span{
    color:#171426 !important;
    font-size:16px !important;
    line-height:1.18 !important;
    font-weight:820 !important;
    white-space:nowrap !important;
  }

  .training-deck{
    padding:18px !important;
    border:1px solid var(--joy-line-2) !important;
    border-radius:22px !important;
    background:#fff !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .training-deck > .row-title{
    margin:0 4px 12px !important;
  }

  .training-deck > .row-title h2{
    font-size:25px !important;
  }

  .training-deck > .row-title small{
    font-size:13px !important;
  }

  .modules{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:12px !important;
    margin:0 0 24px !important;
    flex:0 0 auto !important;
  }

  .module{
    min-height:132px !important;
    padding:14px 10px 12px !important;
    border:1px solid var(--joy-line-2) !important;
    border-radius:22px !important;
    background:#fbf9ff !important;
    overflow:visible !important;
    box-shadow:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
  }

  .module::before,
  .module::after{
    content:none !important;
  }

  .module strong{
    display:grid !important;
    place-items:center !important;
    width:58px !important;
    height:58px !important;
    margin:0 !important;
    border-radius:20px !important;
    background:rgba(255,255,255,.72) !important;
    color:#24344f !important;
    font-size:31px !important;
    line-height:1 !important;
    box-shadow:0 10px 22px rgba(36,52,79,.08) !important;
  }

  .module.v strong{color:#8d7cf6 !important}
  .module.r strong{color:#4f82df !important}
  .module.l strong{color:#d96b99 !important}
  .module.w strong{color:#d99b34 !important}
  .module.s strong{color:#47b877 !important}

  .module span{
    position:static !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    clip:auto !important;
    color:#241f35 !important;
    font-size:15px !important;
    font-weight:500 !important;
    line-height:1.1 !important;
  }

  .module.v{background:#fbf9ff !important;border-color:#e5ddf4 !important}
  .module.r{background:#f0fbff !important;border-color:#d6edf4 !important}
  .module.l{background:#fff7f8 !important;border-color:#f0dfe5 !important}
  .module.w{background:#fff9ee !important;border-color:#ecd9b4 !important}
  .module.s{background:#f3fff8 !important;border-color:#d6efde !important}

  .module.active{
    outline:0 !important;
    transform:translateY(-1px) !important;
    border-color:#a9d3cc !important;
    box-shadow:0 8px 18px rgba(47,111,115,.08), inset 0 0 0 1px rgba(47,111,115,.22) !important;
    filter:none !important;
  }

  .panel{
    flex:1 1 auto !important;
    min-height:0 !important;
    margin-top:4px !important;
    padding:18px !important;
    border-radius:22px !important;
    border:1px solid var(--joy-line-2) !important;
    background:#fff !important;
  }

  .review-tools-head h2{font-size:25px !important}
  .review-tools-head small{font-size:13px !important}

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

  .tool-link{
    min-height:68px !important;
    padding:11px 12px !important;
    border-radius:16px !important;
    border-width:1px !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    background:#fff !important;
  }

  .tool-link i{
    width:30px !important;
    height:30px !important;
    border-radius:12px !important;
    background:#f0e9ff !important;
    color:#7b4fe8 !important;
    font-size:14px !important;
  }

  .tool-link b{font-size:13.5px !important}
  .tool-link span{font-size:10.5px !important}

  .tool-link:nth-child(2) i{background:#e8fbff !important;color:#287986 !important}
  .tool-link:nth-child(3) i{background:#fff1f5 !important;color:#9b4d64 !important}
  .tool-link:nth-child(4) i{background:#fff5df !important;color:#a36514 !important}
  .tool-link:nth-child(5) i{background:#e8f7ef !important;color:#237a55 !important}
  .tool-link:nth-child(6) i{background:#eef4f4 !important;color:#40506f !important}

  .progress-board{
    padding:16px !important;
    border-radius:22px !important;
    border:1px solid var(--joy-line-2) !important;
    background:#fff !important;
  }

  .progress-board h2{font-size:25px !important}

  .progress-list{
    flex:1 1 auto !important;
    display:grid !important;
    grid-template-rows:repeat(5,minmax(76px,86px)) !important;
    align-content:start !important;
    gap:7px !important;
  }

  .progress-row{
    min-height:0 !important;
    height:auto !important;
    padding:8px 12px !important;
    border-radius:18px !important;
    border-width:1px !important;
  }

  .progress-name{
    font-size:15px !important;
    font-weight:620 !important;
  }
  .progress-task{
    font-size:11.5px !important;
    max-height:28px !important;
    overflow:hidden !important;
    font-weight:400 !important;
  }
  .progress-state{font-size:12px !important; min-width:74px !important}
}

/*
  Site-wide landscape desk layer
  Applies to module pages after their original styles. It changes layout/skin only.
*/
@media (min-width:900px){
  body:not(:has(.home-hero + .training-deck + .progress-board)) .app{
    width:min(1220px, calc(100vw - 36px)) !important;
    min-height:calc(100vh - 36px) !important;
    border-radius:24px !important;
    background:rgba(255,254,250,.96) !important;
    border:1px solid rgba(213,226,224,.96) !important;
    box-shadow:0 20px 58px rgba(36,43,58,.10) !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .inner{
    padding:22px 24px 24px !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .topbar{
    margin:0 0 18px !important;
    padding:0 !important;
    background:transparent !important;
    color:var(--joy-ink) !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .home,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .link{
    min-height:40px !important;
    border-radius:13px !important;
    border:1px solid var(--joy-line) !important;
    background:#fff !important;
    color:#5c566d !important;
    font-size:15px !important;
    font-weight:700 !important;
    padding:0 16px !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .intro,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .hero,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .task-card,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .card,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .queue,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .rhythm,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .review-card,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .task-link,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .bank-item,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .list-card,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .skill,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .mini,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .item,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .stat,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .row,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .q,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .audio-box,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .cue-card,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .exam-panel{
    border-radius:18px !important;
    border-color:#d5e2e0 !important;
    box-shadow:none !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .primary,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .btn.primary,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .data-btn{
    background:linear-gradient(135deg,#24344f,#2f6f73) !important;
    color:#fff !important;
    border-color:transparent !important;
    box-shadow:0 10px 22px rgba(47,111,115,.14) !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .secondary,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .btn.secondary,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .import{
    background:#fff !important;
    color:#24344f !important;
    border:1px solid #d5e2e0 !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) h1{
    font-size:clamp(30px, 2.4vw, 42px) !important;
    line-height:1.05 !important;
    font-weight:760 !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) h2{
    font-size:clamp(20px, 1.45vw, 26px) !important;
    line-height:1.12 !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .lead,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .sub,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .task-note,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .fact,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .item,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .detail,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .prompt,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .audio-note,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .note{
    font-size:17px !important;
    line-height:1.48 !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) .eyebrow,
  body:not(:has(.home-hero + .training-deck + .progress-board)) small,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .label,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .tag,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .pill,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .state,
  body:not(:has(.home-hero + .training-deck + .progress-board)) .badge{
    font-size:14px !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) textarea,
  body:not(:has(.home-hero + .training-deck + .progress-board)) input,
  body:not(:has(.home-hero + .training-deck + .progress-board)) select{
    min-height:42px !important;
    border-radius:12px !important;
    border-color:#cfdedb !important;
    font-size:16px !important;
  }

  body:not(:has(.home-hero + .training-deck + .progress-board)) audio{
    width:100% !important;
    height:46px !important;
  }

  /* Vocab training desk */
  .inner:has(> .hero + .progress + .meta + .card){
    display:grid !important;
    grid-template-columns:minmax(260px,.78fr) minmax(430px,1.34fr) minmax(260px,.78fr) !important;
    grid-template-rows:auto auto auto auto minmax(0,1fr) !important;
    gap:14px 18px !important;
    align-items:start !important;
  }
  .inner:has(> .hero + .progress + .meta + .card) > .topbar{grid-column:1 / -1 !important}
  .inner:has(> .hero + .progress + .meta + .card) > .hero{grid-column:1 !important;grid-row:2 !important;margin:0 !important}
  .inner:has(> .hero + .progress + .meta + .card) > .progress{grid-column:1 !important;grid-row:3 !important;margin:0 !important}
  .inner:has(> .hero + .progress + .meta + .card) > .meta{grid-column:1 !important;grid-row:4 !important;font-size:15px !important}
  .inner:has(> .hero + .progress + .meta + .card) > .card{grid-column:2 !important;grid-row:2 / 5 !important;margin:0 !important;padding:22px !important}
  .inner:has(> .hero + .progress + .meta + .card) > .actions{grid-column:2 !important;grid-row:5 !important;margin:0 !important}
  .inner:has(> .hero + .progress + .meta + .card) > .stats{grid-column:3 !important;grid-row:2 !important;margin:0 !important}
  .inner:has(> .hero + .progress + .meta + .card) > .queue{grid-column:3 !important;grid-row:3 / 6 !important;margin:0 !important}
  .word{font-size:clamp(46px, 5.4vw, 70px) !important;line-height:.95 !important}
  .meaning,.example{font-size:18px !important;line-height:1.55 !important}
  .audio-grid,.repeat-grid,.actions{gap:10px !important}
  .audio-btn,.record-btn,.replay-btn,.action,.check,.next-batch,.queue-toggle{
    min-height:42px !important;
    border-radius:13px !important;
    font-size:15px !important;
  }
  .stats{grid-template-columns:1fr 1fr !important;gap:10px !important}
  .stat{padding:14px !important}
  .stat b{font-size:28px !important}
  .stat span{font-size:15px !important}
  .queue h2{font-size:22px !important}
  .queue p,.queue-review,.queue-word{font-size:16px !important}

  /* Reading home: four-step sprint desk */
  .inner:has(> .task-card.main + .rhythm-note){
    display:grid !important;
    grid-template-columns:minmax(360px,.92fr) minmax(470px,1.08fr) !important;
    gap:14px 18px !important;
  }
  .inner:has(> .task-card.main + .rhythm-note) > .topbar{grid-column:1 / -1 !important}
  .inner:has(> .task-card.main + .rhythm-note) > .task-card.main{grid-column:1 !important;grid-row:2 !important;margin:0 !important}
  .inner:has(> .task-card.main + .rhythm-note) > .rhythm-note{grid-column:1 !important;grid-row:3 !important;margin:0 !important}
  .inner:has(> .task-card.main + .rhythm-note) > .section-title:nth-child(4){grid-column:2 !important;grid-row:2 !important;align-self:end !important}
  .inner:has(> .task-card.main + .rhythm-note) > .today-list{grid-column:2 !important;grid-row:3 !important}
  .inner:has(> .task-card.main + .rhythm-note) > .section-title:nth-child(6){grid-column:2 !important;grid-row:4 !important}
  .inner:has(> .task-card.main + .rhythm-note) > .review-card{grid-column:2 !important;grid-row:5 !important}
  .inner:has(> .task-card.main + .rhythm-note) > .bank-list,
  .inner:has(> .task-card.main + .rhythm-note) > .warm-note{grid-column:1 / -1 !important}
  .task-link.evidence{background:linear-gradient(145deg,#fff,#f4f1fb) !important}
  .task-link.para{background:linear-gradient(145deg,#fff,#e8f7ef) !important}
  .task-link.report,.review-card{background:linear-gradient(145deg,#fff,#fff5df) !important}

  /* Writing home: Daily Card and Writing Task are separate. */
  body.writing-home .inner{
    display:grid !important;
    grid-template-columns:minmax(360px,.92fr) minmax(470px,1.08fr) !important;
    gap:14px 18px !important;
  }
  body.writing-home .topbar{grid-column:1 / -1 !important}
  body.writing-home .intro,
  body.writing-home .task-card{grid-column:1 !important;margin:0 !important}
  body.writing-home .section-title,
  body.writing-home .task-link,
  body.writing-home .rhythm{grid-column:2 !important}
  body.writing-home .task-link:nth-of-type(1){background:linear-gradient(145deg,#fff,#e8f7ef) !important}
  body.writing-home .task-link:nth-of-type(2){background:linear-gradient(145deg,#fff,#fff5df) !important}

  .inner:has(> .intro + .timer-row + .panel){
    display:grid !important;
    grid-template-columns:minmax(300px,.78fr) minmax(520px,1.22fr) !important;
    gap:12px 18px !important;
    align-items:start !important;
  }

  .inner:has(> .intro + .timer-row + .panel) > .topbar{
    grid-column:1 / -1 !important;
  }

  .inner:has(> .intro + .timer-row + .panel) > .intro,
  .inner:has(> .intro + .timer-row + .panel) > .timer-row,
  .inner:has(> .intro + .timer-row + .panel) > .panel:nth-child(4),
  .inner:has(> .intro + .timer-row + .panel) > .panel:nth-child(6){
    grid-column:1 !important;
    margin:0 !important;
  }

  .inner:has(> .intro + .timer-row + .panel) > .panel:nth-child(5){
    grid-column:2 !important;
    grid-row:2 / span 4 !important;
    margin:0 !important;
  }

  .inner:has(> .intro + .timer-row + .panel) textarea{
    min-height:92px !important;
  }

  /* Listening and speaking practice rooms. */
  .layout,.exam-layout{
    gap:18px !important;
    align-items:start !important;
  }
  .audio-box{
    padding:18px !important;
    background:#f8fbfb !important;
  }
  .focus div,.q,.quick-item,.check,.diag-row,.diagnostic-row{
    font-size:16px !important;
    line-height:1.45 !important;
  }
  .card-head h2{font-size:24px !important}
  .cue-card{min-height:260px !important}
  .prompt{font-size:17px !important}
  .prompt b,.prompt strong{font-size:17px !important}
  .save-actions a,.linkrow a{
    min-height:40px !important;
    font-size:14px !important;
    border-radius:12px !important;
  }

  .inner:has(> .intro + .card.main + .card){
    display:grid !important;
    grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr) !important;
    grid-template-rows:auto auto minmax(0,1fr) auto auto !important;
    gap:14px 18px !important;
    align-items:start !important;
    height:calc(100vh - 84px) !important;
    overflow:hidden !important;
  }

  .inner:has(> .intro + .card.main + .card) > .topbar,
  .inner:has(> .intro + .card.main + .card) > .intro{
    grid-column:1 / -1 !important;
  }

  .inner:has(> .intro + .card.main + .card) > .card.main{
    grid-column:1 !important;
    grid-row:3 / span 3 !important;
    margin:0 !important;
    max-height:100% !important;
    overflow:auto !important;
  }

  .inner:has(> .intro + .card.main + .card) > .card:not(.main){
    grid-column:2 !important;
    margin:0 !important;
    max-height:calc((100vh - 255px) / 2) !important;
    overflow:auto !important;
  }

  .inner:has(> .intro + .card.main + .card) > #saveSprint,
  .inner:has(> .intro + .card.main + .card) > .save-note{
    grid-column:2 !important;
  }

  .inner:has(> .intro + .card.main + .card) .exam-layout{
    grid-template-columns:1fr !important;
  }

  .inner:has(> .intro + .card.main + .card) .cue-card{
    min-height:0 !important;
  }

  .inner:has(> .intro + .card.main + .card) .prompt{
    max-height:250px !important;
    overflow:auto !important;
    padding-right:8px !important;
  }

  .inner:has(> .intro + .card.main + .card) .checks{
    grid-template-columns:1fr !important;
  }

  .inner:has(> .intro + .card.main + .card) .quick-list{
    gap:8px !important;
  }

  .inner:has(> .intro + .card.main + .card) .quick-item{
    padding:9px 10px !important;
  }

  /* Report and stats pages: quiet table-like desktop. */
  .summary{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  .rows{gap:0 !important;border:1px solid #d5e2e0 !important;border-radius:16px !important;overflow:hidden !important}
  .row{
    grid-template-columns:130px minmax(0,1fr) auto !important;
    border-top:1px solid #e6eeee !important;
    padding:13px 14px !important;
    border-radius:0 !important;
    background:#fff !important;
  }
  .row:first-child{border-top:0 !important}
  .name{font-size:17px !important;font-weight:720 !important}
  .next{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .next div{font-size:16px !important;line-height:1.45 !important;padding:14px !important}
  .manage .controls,.manage .data-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .inner:has(#doneCount):has(#resetBtn){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(360px,.52fr) !important;
    gap:12px 16px !important;
  }
  .inner:has(#doneCount):has(#resetBtn) > .topbar,
  .inner:has(#doneCount):has(#resetBtn) > .hero{
    grid-column:1 / -1 !important;
  }
  .inner:has(#doneCount):has(#resetBtn) > .card:nth-of-type(1),
  .inner:has(#doneCount):has(#resetBtn) > .card:nth-of-type(2),
  .inner:has(#doneCount):has(#resetBtn) > .card:nth-of-type(3){
    grid-column:1 !important;
  }
  .inner:has(#doneCount):has(#resetBtn) > .card:nth-of-type(4),
  .inner:has(#doneCount):has(#resetBtn) > .card:nth-of-type(5),
  .inner:has(#doneCount):has(#resetBtn) > .card:nth-of-type(6){
    grid-column:2 !important;
  }
}

/* Homepage productized desktop close: keep the original JOY frame, focus on today -> status -> report. */
@media (min-width:900px){
  body:not(.writing-home) .page{
    padding:14px !important;
  }

  body:not(.writing-home) .app:has(.home-hero + .training-deck + .progress-board){
    width:min(1400px, calc(100vw - 28px)) !important;
    min-height:calc(100vh - 28px) !important;
    border-radius:24px !important;
    background:#fff !important;
    box-shadow:0 20px 56px rgba(36,43,58,.10) !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    padding:14px !important;
    display:grid !important;
    grid-template-columns:minmax(280px,.9fr) minmax(440px,1.28fr) minmax(300px,.9fr) !important;
    grid-template-rows:58px minmax(0,1fr) !important;
    gap:18px 20px !important;
    min-height:calc(100vh - 28px) !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board) > .topbar{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    height:58px !important;
    margin:0 !important;
    padding:0 22px !important;
    border:1px solid #edf0f6 !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 10px 30px rgba(36,43,58,.07) !important;
  }

  .topbar .app-dot{
    display:none !important;
  }

  .topbar .app-title{
    display:flex !important;
    align-items:center !important;
    gap:18px !important;
  }

  .topbar .app-title b{
    color:#161529 !important;
    font-size:26px !important;
    line-height:1 !important;
    letter-spacing:-.03em !important;
  }

  .topbar .app-title b::first-letter{
    color:#8d6cf5 !important;
  }

  .topbar .app-title span{
    border-left:1px solid #e5e8ef !important;
    padding-left:18px !important;
    color:#747284 !important;
    font-size:15px !important;
    margin:0 !important;
  }

  .nav-mini{
    gap:10px !important;
  }

  .nav-mini button{
    height:38px !important;
    min-width:62px !important;
    padding:0 13px !important;
    border-radius:16px !important;
    border:1px solid #e7e5f0 !important;
    background:#fff !important;
    color:#4d4a5d !important;
    font-size:12.5px !important;
    font-weight:750 !important;
  }

  #langToggle{
    min-width:44px !important;
    color:#8a64ef !important;
    text-decoration:underline !important;
    text-underline-offset:8px !important;
    text-decoration-thickness:2px !important;
  }

  .home-hero,
  .training-deck,
  .progress-board{
    grid-row:2 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    border:1px solid #edf0f6 !important;
    border-radius:24px !important;
    background:#fff !important;
    box-shadow:0 14px 36px rgba(36,43,58,.06) !important;
  }

  .home-hero{
    grid-column:1 !important;
    position:relative !important;
    display:grid !important;
    grid-template-rows:auto auto minmax(0,1fr) !important;
    gap:22px !important;
    padding:32px 30px 0 !important;
    overflow:hidden !important;
  }

  .home-hero::before{
    content:none !important;
  }

  .home-hero .hero-copy{
    grid-row:1 !important;
  }

  .home-hero h1{
    margin:0 !important;
    color:#171426 !important;
    font-size:36px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }

  .home-hero .lead{
    margin:14px 0 0 !important;
    color:#747284 !important;
    font-size:18px !important;
    line-height:1.2 !important;
  }

  .priority-card{
    grid-row:2 !important;
    position:relative !important;
    padding:26px 24px 20px !important;
    border:1px solid #ede8fb !important;
    border-radius:24px !important;
    background:linear-gradient(145deg,#fbf8ff,#f7f2ff) !important;
  }

  .priority-head{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin-bottom:22px !important;
  }

  .priority-head h2{
    margin:0 !important;
    color:#171426 !important;
    font-size:24px !important;
    line-height:1.1 !important;
  }

  .priority-head span{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    height:34px !important;
    padding:0 13px !important;
    border-radius:9px !important;
    background:#21202a !important;
    color:#fff !important;
    font-size:12px !important;
    font-weight:700 !important;
    white-space:nowrap !important;
  }

  .priority-head span::after{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    bottom:-8px !important;
    transform:translateX(-50%) !important;
    border:8px solid transparent !important;
    border-top-color:#21202a !important;
    border-bottom:0 !important;
  }

  .priority-select-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 48px !important;
    gap:12px !important;
    margin-bottom:24px !important;
  }

  .priority-select-row select{
    height:48px !important;
    min-width:0 !important;
    border:1px solid #dddce8 !important;
    border-radius:13px !important;
    background:#fff !important;
    color:#2e2b3c !important;
    font-size:16px !important;
    font-weight:650 !important;
    padding:0 16px !important;
  }

  .task-picker{
    height:48px !important;
    width:48px !important;
    border:1px solid #dddce8 !important;
    border-radius:13px !important;
    background:#fff !important;
    color:#8d6cf5 !important;
    display:grid !important;
    place-items:center !important;
  }

  .task-picker span{
    position:relative !important;
    display:block !important;
    width:20px !important;
    height:2px !important;
    border-radius:2px !important;
    background:#8d6cf5 !important;
  }

  .task-picker span::before{
    content:"" !important;
    position:absolute !important;
    left:-4px !important;
    top:-3px !important;
    width:6px !important;
    height:6px !important;
    border-radius:50% !important;
    background:#8d6cf5 !important;
  }

  .priority-start{
    width:100% !important;
    height:56px !important;
    border-radius:13px !important;
    background:#8b63ee !important;
    color:#fff !important;
    font-size:20px !important;
    font-weight:750 !important;
    box-shadow:0 14px 28px rgba(139,99,238,.18) !important;
  }

  .priority-card p{
    margin:18px 0 0 !important;
    color:#8a8498 !important;
    text-align:center !important;
    font-size:15px !important;
  }

  .home-hero .coach-card{
    grid-row:3 !important;
    align-self:end !important;
    display:grid !important;
    grid-template-columns:minmax(120px,42%) minmax(0,1fr) !important;
    align-items:end !important;
    gap:14px !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    background:#fff !important;
  }

  .home-hero .avatar-wrap{
    height:235px !important;
    overflow:hidden !important;
    justify-content:flex-start !important;
    align-items:flex-end !important;
    margin:0 !important;
  }

  .home-hero .avatar{
    width:190px !important;
    max-width:none !important;
    transform:translate(-12px, 18px) !important;
  }

  .home-hero .coach-lines{
    align-self:center !important;
    margin:0 0 26px !important;
    max-width:190px !important;
  }

  .home-hero .coach-lines b{
    color:#8b63ee !important;
    font-family:"Segoe Print","Comic Sans MS","Bradley Hand ITC",cursive !important;
    font-size:22px !important;
    line-height:1.48 !important;
    font-weight:500 !important;
    transform:rotate(-5deg) !important;
  }

  .home-hero .coach-lines b::after{
    content:"" !important;
    display:block !important;
    width:168px !important;
    height:2px !important;
    margin:6px 0 0 18px !important;
    background:#8b63ee !important;
    transform:rotate(-8deg) !important;
  }

  .home-hero .coach-lines b span{
    color:inherit !important;
    display:block !important;
    white-space:nowrap !important;
  }

  .training-deck{
    grid-column:2 !important;
    padding:30px !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  .training-deck > .row-title{
    margin:0 0 18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:18px !important;
  }

  .training-deck > .row-title h2{
    color:#171426 !important;
    font-size:29px !important;
    line-height:1.05 !important;
    margin:0 !important;
  }

  .training-deck > .row-title small{
    display:inline-flex !important;
    align-items:center !important;
    height:30px !important;
    padding:0 15px !important;
    border-radius:999px !important;
    background:#f0eaff !important;
    color:#8b63ee !important;
    font-size:14px !important;
    font-weight:800 !important;
  }

  .task-list{
    display:grid !important;
    grid-template-rows:repeat(5,minmax(0,1fr)) !important;
    gap:14px !important;
    min-height:0 !important;
    flex:1 1 auto !important;
  }

  .daily-task{
    display:grid !important;
    grid-template-columns:72px 46px minmax(0,1fr) 20px !important;
    align-items:center !important;
    gap:16px !important;
    padding:16px 22px !important;
    border:1px solid #edf0f6 !important;
    border-radius:22px !important;
    background:#fff !important;
    color:#171426 !important;
    text-decoration:none !important;
  }

  .daily-task:hover{
    border-color:#d8cef9 !important;
    box-shadow:0 12px 24px rgba(36,43,58,.06) !important;
  }

  .daily-task img{
    width:58px !important;
    height:58px !important;
    object-fit:contain !important;
    border-radius:18px !important;
  }

  .task-no{
    font-size:23px !important;
    font-weight:800 !important;
    color:#8b63ee !important;
  }

  .daily-task.r .task-no{color:#5aa6ff !important}
  .daily-task.l .task-no{color:#f06b9a !important}
  .daily-task.w .task-no{color:#ff9f22 !important}
  .daily-task.s .task-no{color:#48bf7a !important}

  .task-copy{
    display:block !important;
    min-width:0 !important;
  }

  .task-copy b,
  .task-copy strong,
  .task-copy em{
    display:block !important;
    font-style:normal !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .task-copy b{
    color:#171426 !important;
    font-size:20px !important;
    line-height:1.18 !important;
    font-weight:820 !important;
    white-space:nowrap !important;
  }

  .task-copy strong{
    margin-top:8px !important;
    color:#282537 !important;
    font-size:16px !important;
    line-height:1.2 !important;
    font-weight:760 !important;
    white-space:nowrap !important;
  }

  .task-copy em{
    margin-top:8px !important;
    color:#747284 !important;
    font-size:13px !important;
    line-height:1.35 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
  }

  .task-arrow{
    color:#5b596b !important;
    font-size:32px !important;
    line-height:1 !important;
  }

  .progress-board{
    grid-column:3 !important;
    padding:30px 28px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
    overflow:hidden !important;
  }

  .progress-board h2{
    margin:0 !important;
    color:#171426 !important;
    font-size:27px !important;
    line-height:1.08 !important;
  }

  .status-tabs{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .status-tabs button{
    height:46px !important;
    border:1px solid #e5e8ef !important;
    border-radius:18px !important;
    background:#fff !important;
    color:#4d4a5d !important;
    font-size:14px !important;
    font-weight:780 !important;
  }

  .status-tabs button.active{
    background:#f1eaff !important;
    border-color:#e0d3ff !important;
    color:#8b63ee !important;
  }

  .progress-board h3{
    margin:0 !important;
    color:#171426 !important;
    font-size:20px !important;
    line-height:1.15 !important;
  }

  .progress-list{
    display:grid !important;
    grid-template-rows:repeat(5,52px) !important;
    gap:12px !important;
    padding:16px 18px !important;
    border:1px solid #edf0f6 !important;
    border-radius:22px !important;
    background:#fff !important;
  }

  .progress-row{
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) 46px !important;
    align-items:center !important;
    gap:12px !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
  }

  .status-icon{
    width:40px !important;
    height:40px !important;
    border-radius:13px !important;
    display:grid !important;
    place-items:center !important;
    background:#f1eaff !important;
    color:#8b63ee !important;
  }

  .progress-row.r .status-icon{background:#eaf4ff !important;color:#4f96f4 !important}
  .progress-row.l .status-icon{background:#fff0f6 !important;color:#f05f98 !important}
  .progress-row.w .status-icon{background:#fff2dc !important;color:#f4a028 !important}
  .progress-row.s .status-icon{background:#e9f8ef !important;color:#3fba73 !important}

  .status-icon svg{
    width:23px !important;
    height:23px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2.1 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  .progress-main{
    display:block !important;
    min-width:0 !important;
  }

  .progress-name{
    display:block !important;
    color:#171426 !important;
    font-size:15px !important;
    line-height:1.05 !important;
    font-weight:820 !important;
  }

  .progress-task{
    display:block !important;
    margin-top:5px !important;
    color:#747284 !important;
    font-size:13px !important;
    line-height:1.1 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .progress-track{
    display:block !important;
    height:5px !important;
    margin-top:7px !important;
    border-radius:999px !important;
    overflow:hidden !important;
    background:#eef0f6 !important;
  }

  .progress-track span{
    display:block !important;
    height:100% !important;
    border-radius:999px !important;
    background:currentColor !important;
    min-width:0 !important;
  }

  .progress-percent{
    display:grid !important;
    place-items:center !important;
    min-width:42px !important;
    height:34px !important;
    border-radius:14px !important;
    background:#f1eaff !important;
    color:#8b63ee !important;
    font-size:14px !important;
    font-weight:820 !important;
  }

  .progress-row.r .progress-percent{background:#eaf4ff !important;color:#4f96f4 !important}
  .progress-row.l .progress-percent{background:#fff0f6 !important;color:#f05f98 !important}
  .progress-row.w .progress-percent{background:#fff2dc !important;color:#f4a028 !important}
  .progress-row.s .progress-percent{background:#e9f8ef !important;color:#3fba73 !important}

  .next-step-card{
    padding:16px 18px !important;
    border:1px solid #edf0f6 !important;
    border-radius:22px !important;
    background:#fff !important;
  }

  .next-subjects{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin:12px 0 !important;
  }

  .next-subjects button{
    height:30px !important;
    padding:0 13px !important;
    border-radius:999px !important;
    background:#f5f6fa !important;
    color:#747284 !important;
    font-size:12px !important;
    font-weight:760 !important;
  }

  .next-subjects button.active{
    background:#fff !important;
    color:#8b63ee !important;
    box-shadow:inset 0 0 0 2px #d9cdfb !important;
  }

  .next-step-card p{
    margin:0 0 14px !important;
    color:#747284 !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }

  #continueTraining{
    width:100% !important;
    height:48px !important;
    border-radius:13px !important;
    background:#8b63ee !important;
    color:#fff !important;
    font-size:16px !important;
    font-weight:820 !important;
  }

  .report-entry-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    min-height:0 !important;
  }

  .report-entry{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:12px !important;
    align-items:start !important;
    min-height:112px !important;
    padding:16px !important;
    border:1px solid #edf0f6 !important;
    border-radius:20px !important;
    background:#fff !important;
    color:#171426 !important;
    text-decoration:none !important;
  }

  .report-entry i{
    width:42px !important;
    height:42px !important;
    border-radius:13px !important;
    display:grid !important;
    place-items:center !important;
    background:#f1eaff !important;
    color:#8b63ee !important;
    font-style:normal !important;
    font-size:26px !important;
    font-weight:850 !important;
  }

  .report-entry.analysis i{
    background:#e8f8f1 !important;
    color:#3fba73 !important;
  }

  .report-entry b{
    display:block !important;
    font-size:15px !important;
    line-height:1.22 !important;
    font-weight:820 !important;
  }

  .report-entry span{
    display:block !important;
    margin-top:8px !important;
    color:#747284 !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .report-entry em{
    grid-column:2 !important;
    color:#8b63ee !important;
    font-size:12px !important;
    font-style:normal !important;
    font-weight:820 !important;
  }
}

@media (min-width:900px) and (max-width:1300px){
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    grid-template-columns:minmax(260px,.86fr) minmax(410px,1.2fr) minmax(285px,.84fr) !important;
    gap:14px !important;
  }

  .home-hero{padding:26px 24px 0 !important}
  .priority-card{padding:22px 20px 18px !important}
  .priority-head h2{font-size:22px !important}
  .home-hero .avatar-wrap{height:210px !important}
  .home-hero .avatar{width:170px !important}
  .home-hero .coach-lines b{font-size:20px !important}

  .training-deck{padding:26px 24px !important}
  .training-deck > .row-title h2{font-size:25px !important}
  .daily-task{
    grid-template-columns:58px 38px minmax(0,1fr) 18px !important;
    gap:12px !important;
    padding:13px 16px !important;
    border-radius:18px !important;
  }
  .daily-task img{width:50px !important;height:50px !important}
  .task-no{font-size:21px !important}
  .task-copy b{font-size:17px !important}
  .task-copy strong{font-size:14px !important;margin-top:6px !important}
  .task-copy em{font-size:12px !important;margin-top:6px !important;-webkit-line-clamp:1 !important}

  .progress-board{padding:26px 20px !important;gap:13px !important}
  .progress-board h2{font-size:24px !important}
  .status-tabs{gap:8px !important}
  .status-tabs button{height:40px !important;font-size:13px !important}
  .progress-list{grid-template-rows:repeat(5,49px) !important;padding:14px !important;gap:10px !important}
  .progress-row{grid-template-columns:38px minmax(0,1fr) 42px !important;gap:10px !important}
  .status-icon{width:36px !important;height:36px !important}
  .progress-name{font-size:14px !important}
  .progress-task{font-size:12px !important}
  .progress-percent{min-width:40px;height:31px;font-size:13px !important}
  .next-step-card{padding:14px !important}
  .next-subjects{gap:6px !important}
  .next-subjects button{height:28px;padding:0 10px !important;font-size:11px !important}
  #continueTraining{height:44px !important}
  .report-entry{min-height:98px;padding:14px 12px !important;grid-template-columns:38px minmax(0,1fr) !important;gap:10px !important}
  .report-entry i{width:36px !important;height:36px !important;font-size:22px !important}
  .report-entry b{font-size:13px !important}
  .report-entry span{font-size:11px !important;margin-top:6px !important}
}

/* Homepage fit pass: match the approved reference proportions on 1280/1366/1440 desktops. */
@media (min-width:900px){
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    height:calc(100vh - 28px) !important;
    min-height:0 !important;
    grid-template-rows:58px minmax(0,1fr) !important;
    overflow:hidden !important;
  }

  .home-hero,
  .training-deck,
  .progress-board{
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .topbar .app-title b{
    font-size:23px !important;
  }

  .home-hero{
    padding:28px 28px 0 !important;
    gap:18px !important;
  }

  .home-hero h1{
    font-size:30px !important;
  }

  .home-hero .lead{
    margin-top:10px !important;
    font-size:16px !important;
  }

  .priority-card{
    padding:22px 20px 18px !important;
    border-radius:22px !important;
  }

  .priority-head{
    margin-bottom:18px !important;
  }

  .priority-head h2{
    font-size:22px !important;
  }

  .priority-select-row{
    margin-bottom:18px !important;
  }

  .priority-select-row select,
  .task-picker{
    height:44px !important;
  }

  .priority-select-row select{
    font-size:14px !important;
  }

  .priority-start{
    height:50px !important;
    font-size:18px !important;
  }

  .priority-card p{
    margin-top:14px !important;
    font-size:14px !important;
  }

  .home-hero .avatar-wrap{
    height:190px !important;
  }

  .home-hero .avatar{
    width:156px !important;
    transform:translate(-8px, 14px) !important;
  }

  .home-hero .coach-lines{
    margin-bottom:20px !important;
    max-width:175px !important;
  }

  .home-hero .coach-lines b{
    font-size:19px !important;
    line-height:1.42 !important;
  }

  .home-hero .coach-lines b::after{
    width:140px !important;
  }

  .training-deck{
    padding:24px 24px !important;
  }

  .training-deck > .row-title{
    margin-bottom:14px !important;
  }

  .training-deck > .row-title h2{
    font-size:24px !important;
  }

  .training-deck > .row-title small{
    height:26px !important;
    padding:0 12px !important;
    font-size:12px !important;
  }

  .task-list{
    gap:10px !important;
  }

  .daily-task{
    min-height:0 !important;
    grid-template-columns:50px 36px minmax(0,1fr) 16px !important;
    gap:12px !important;
    padding:10px 15px !important;
    border-radius:18px !important;
  }

  .daily-task img{
    width:46px !important;
    height:46px !important;
  }

  .task-no{
    font-size:19px !important;
  }

  .task-copy b{
    font-size:16px !important;
  }

  .task-copy strong{
    margin-top:5px !important;
    font-size:13px !important;
  }

  .task-copy em{
    margin-top:5px !important;
    font-size:11.5px !important;
    -webkit-line-clamp:1 !important;
  }

  .task-arrow{
    font-size:26px !important;
  }

  .progress-board{
    padding:22px 20px !important;
    gap:10px !important;
  }

  .progress-board h2{
    font-size:24px !important;
  }

  .status-tabs{
    gap:8px !important;
  }

  .status-tabs button{
    height:36px !important;
    border-radius:15px !important;
    font-size:12.5px !important;
  }

  .progress-board h3{
    font-size:18px !important;
  }

  .progress-list{
    grid-template-rows:repeat(5,36px) !important;
    gap:7px !important;
    padding:10px 14px !important;
    border-radius:20px !important;
  }

  .progress-row{
    grid-template-columns:32px minmax(0,1fr) 38px !important;
    gap:9px !important;
  }

  .status-icon{
    width:30px !important;
    height:30px !important;
    border-radius:11px !important;
  }

  .status-icon svg{
    width:18px !important;
    height:18px !important;
  }

  .progress-name{
    font-size:12.5px !important;
  }

  .progress-task{
    margin-top:2px !important;
    font-size:10.5px !important;
  }

  .progress-track{
    height:3px !important;
    margin-top:4px !important;
  }

  .progress-percent{
    min-width:36px !important;
    height:26px !important;
    border-radius:12px !important;
    font-size:11.5px !important;
  }

  .next-step-card{
    padding:11px 14px !important;
    border-radius:20px !important;
  }

  .next-subjects{
    margin:8px 0 !important;
    gap:5px !important;
  }

  .next-subjects button{
    height:24px !important;
    padding:0 8px !important;
    font-size:10.5px !important;
  }

  .next-step-card p{
    margin:8px 0 0 !important;
    font-size:11.5px !important;
  }

  .next-action-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 132px !important;
    gap:10px !important;
    align-items:center !important;
    margin-top:10px !important;
  }

  .next-select{
    width:100% !important;
    height:38px !important;
    border:1px solid #e0d8f7 !important;
    border-radius:13px !important;
    background:#fff !important;
    color:#4b465e !important;
    font-size:13px !important;
    font-weight:760 !important;
    padding:0 12px !important;
  }

  #continueTraining{
    height:38px !important;
    font-size:13px !important;
  }

  .report-entry-grid{
    gap:10px !important;
  }

  .report-entry{
    min-height:98px !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    grid-template-rows:auto auto auto !important;
    gap:6px 10px !important;
    padding:10px !important;
    border-radius:18px !important;
    align-items:start !important;
  }

  .report-entry i{
    width:32px !important;
    height:32px !important;
    border-radius:11px !important;
    font-size:20px !important;
  }

  .report-entry b{
    grid-column:2 !important;
    grid-row:1 !important;
    font-size:12.5px !important;
  }

  .report-entry span{
    grid-column:2 !important;
    grid-row:2 !important;
    margin-top:5px !important;
    font-size:10.5px !important;
    line-height:1.25 !important;
    max-width:100% !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
  }

  .report-entry em{
    font-size:10.5px !important;
    grid-column:2 !important;
    grid-row:3 !important;
    align-self:end !important;
    margin-top:2px !important;
  }
}

/* Homepage scroll correction: keep the compact layout, but never crop useful content. */
@media (min-width:900px){
  body:not(.writing-home) .app:has(.home-hero + .training-deck + .progress-board){
    overflow:visible !important;
  }

  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    height:auto !important;
    min-height:calc(100vh - 28px) !important;
    overflow:visible !important;
  }

  .training-deck,
  .progress-board{
    height:auto !important;
    min-height:592px !important;
    overflow:visible !important;
  }

  .home-hero{
    min-height:592px !important;
  }

  .home-hero .avatar{
    transform:translate(-8px, -18px) !important;
  }

  .report-entry-grid{
    align-items:stretch !important;
  }

  .home-report-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:0 0 16px !important;
  }

  .home-report-grid .report-entry{
    min-height:92px !important;
    padding:10px !important;
    grid-template-columns:32px minmax(0,1fr) !important;
  }

  .side-report-entry{
    min-height:92px !important;
  }

  .report-entry{
    overflow:hidden !important;
  }
}

/* Homepage comfort pass: scrolling is allowed, so cards should not look flattened. */
@media (min-width:900px){
  .home-hero{
    grid-template-rows:auto auto auto auto !important;
    align-content:start !important;
    gap:12px !important;
  }

  .home-hero .coach-card{
    align-self:start !important;
    margin-top:-6px !important;
  }

  .home-hero .avatar-wrap{
    height:218px !important;
  }

  .home-hero .avatar{
    width:166px !important;
    transform:translate(-8px, -20px) !important;
  }

  .training-deck,
  .progress-board{
    min-height:680px !important;
  }

  .task-list{
    grid-template-rows:repeat(5,118px) !important;
    gap:13px !important;
  }

  .daily-task{
    padding:15px 18px !important;
  }

  .daily-task img{
    width:52px !important;
    height:52px !important;
  }

  .task-copy b{
    font-size:17px !important;
  }

  .task-copy strong{
    font-size:14px !important;
  }

  .task-copy em{
    font-size:12px !important;
    -webkit-line-clamp:1 !important;
  }

  .progress-list{
    grid-template-rows:repeat(5,54px) !important;
    gap:8px !important;
    padding:14px 16px !important;
  }

  .progress-row{
    grid-template-columns:38px minmax(0,1fr) 44px !important;
  }

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

  .status-icon svg{
    width:20px !important;
    height:20px !important;
  }

  .progress-name{
    font-size:14px !important;
  }

  .progress-task{
    font-size:12px !important;
  }

  .progress-track{
    height:4px !important;
    margin-top:6px !important;
  }

  .progress-percent{
    min-width:40px !important;
    height:30px !important;
    font-size:12px !important;
  }

  .next-step-card{
    padding:16px 18px !important;
  }

  .next-step-card p{
    font-size:13px !important;
    margin:8px 0 0 !important;
  }

  #continueTraining{
    height:46px !important;
    font-size:14px !important;
  }

  .report-entry{
    min-height:116px !important;
    padding:14px !important;
  }

  .report-entry b{
    font-size:13.5px !important;
  }

  .report-entry span{
    font-size:11.5px !important;
    -webkit-line-clamp:3 !important;
  }

  .report-entry em{
    font-size:11.5px !important;
  }
}

/* Homepage no-empty-space final override. */
@media (min-width:900px){
  body:not(.writing-home) .inner:has(> .home-hero + .training-deck + .progress-board){
    align-items:start !important;
  }

  .home-hero,
  .training-deck{
    min-height:0 !important;
    height:auto !important;
  }

  .progress-board{
    min-height:0 !important;
    height:auto !important;
  }

  .task-list{
    grid-template-rows:repeat(5,102px) !important;
    gap:10px !important;
  }

  .daily-task{
    padding:10px 16px !important;
  }

  .home-hero{
    padding-bottom:16px !important;
    gap:10px !important;
  }

  .home-hero .lead{
    margin-top:6px !important;
  }

  .priority-card{
    padding:18px 18px 15px !important;
  }

  .priority-head{
    margin-bottom:14px !important;
  }

  .priority-select-row{
    margin-bottom:14px !important;
  }

  .priority-start{
    height:46px !important;
  }

  .priority-card p{
    margin-top:10px !important;
  }

  .home-hero .coach-card{
    margin-top:-2px !important;
  }

  .home-hero .avatar-wrap{
    height:190px !important;
  }

  .home-hero .avatar{
    width:156px !important;
    transform:translate(-8px, 2px) !important;
  }

  .home-report-grid{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  .home-report-grid .report-entry,
  .side-report-entry{
    min-height:92px !important;
    padding:12px 14px !important;
    grid-template-columns:36px minmax(0,1fr) !important;
    grid-template-rows:auto auto auto !important;
    gap:2px 10px !important;
  }

  .home-report-grid .report-entry i,
  .side-report-entry i{
    grid-row:1 / 4 !important;
    width:34px !important;
    height:34px !important;
    border-radius:12px !important;
    font-size:21px !important;
  }

  .home-report-grid .report-entry b,
  .side-report-entry b{
    grid-column:2 !important;
    font-size:13px !important;
    line-height:1.18 !important;
  }

  .home-report-grid .report-entry span,
  .side-report-entry span{
    grid-column:2 !important;
    font-size:11px !important;
    line-height:1.28 !important;
    margin-top:0 !important;
    -webkit-line-clamp:2 !important;
  }

  .home-report-grid .report-entry em,
  .side-report-entry em{
    grid-column:2 !important;
    font-size:11px !important;
    margin-top:0 !important;
  }

  .progress-board{
    gap:10px !important;
    padding-bottom:18px !important;
  }

  .progress-list{
    align-self:stretch !important;
    height:auto !important;
    min-height:0 !important;
    grid-template-rows:repeat(5,48px) !important;
    gap:8px !important;
    padding:10px 14px !important;
    margin:0 !important;
  }

  .progress-row{
    min-height:48px !important;
  }

  .status-icon{
    width:34px !important;
    height:34px !important;
    border-radius:12px !important;
  }

  .status-icon svg{
    width:19px !important;
    height:19px !important;
  }

  .progress-name{
    font-size:13.5px !important;
    line-height:1.05 !important;
    font-weight:650 !important;
  }

  .progress-task{
    margin-top:2px !important;
    font-size:11.5px !important;
    line-height:1.05 !important;
  }

  .progress-track{
    height:4px !important;
    margin-top:7px !important;
  }

  .progress-percent{
    min-width:38px !important;
    height:28px !important;
    border-radius:12px !important;
    font-size:12px !important;
  }

  .next-step-card{
    padding:14px 16px !important;
  }

  .next-action-row{
    display:grid !important;
    grid-template-columns:minmax(0,1.2fr) minmax(108px,.72fr) !important;
    gap:10px !important;
    margin-top:10px !important;
  }

  .next-select,
  #continueTraining{
    height:42px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }
}


/* Final alignment fixes after visual pass. */
@media (min-width:900px){
  .vocab-page #queueText > span{
    display:block !important;
    margin-top:4px !important;
  }

  .vocab-page #queueText .queue-review{
    border-top:1px solid #f1eef7 !important;
    padding-top:8px !important;
    margin-top:8px !important;
  }

  .reading-home .reading-drill-title{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    margin:4px 0 0 !important;
  }

  .reading-home .today-list{
    grid-column:2 !important;
    grid-row:3 !important;
    align-self:start !important;
    margin:0 !important;
  }

  .reading-home .reading-review-title{
    grid-column:3 !important;
    grid-row:2 !important;
    align-self:start !important;
    margin:4px 0 0 !important;
  }

  .reading-home .review-card{
    grid-column:3 !important;
    grid-row:3 !important;
    align-self:start !important;
    margin:0 !important;
  }

  .reading-home .reading-bank-title{
    grid-column:1 / -1 !important;
    grid-row:4 !important;
    margin:10px 0 -4px !important;
  }

  .reading-home .reading-bank-primary{
    grid-column:1 / -1 !important;
    grid-row:5 !important;
  }

  .reading-home .reading-next-bank-title{
    grid-column:1 / -1 !important;
    grid-row:6 !important;
    margin:0 0 -4px !important;
  }

  .reading-home .reading-bank-next{
    grid-column:1 / -1 !important;
    grid-row:7 !important;
  }
}

/* Reading final three-column lock. */
@media (min-width:900px){
  body.reading-home .inner{
    grid-template-columns:270px minmax(430px,1fr) 285px !important;
    grid-auto-flow:row !important;
  }

  body.reading-home .task-card.main{
    grid-column:1 !important;
    grid-row:2 !important;
    width:auto !important;
    padding:16px !important;
  }

  body.reading-home .rhythm-note{
    grid-column:1 !important;
    grid-row:3 !important;
    width:auto !important;
  }

  body.reading-home .inner > .section-title.reading-drill-title{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:2px 0 0 !important;
  }

  body.reading-home .today-list{
    grid-column:2 !important;
    grid-row:3 !important;
    grid-template-columns:1fr !important;
  }

  body.reading-home .inner > .section-title.reading-review-title{
    grid-column:3 !important;
    grid-row:2 !important;
    margin:2px 0 0 !important;
  }

  body.reading-home .review-card{
    grid-column:3 !important;
    grid-row:3 !important;
    width:auto !important;
    min-height:0 !important;
  }

  body.reading-home .inner > .section-title.reading-bank-title{
    grid-column:1 / -1 !important;
    grid-row:4 !important;
    margin:8px 0 -4px !important;
  }

  body.reading-home .reading-bank-primary{
    grid-column:1 / -1 !important;
    grid-row:5 !important;
  }

  body.reading-home .inner > .section-title.reading-next-bank-title{
    grid-column:1 / -1 !important;
    grid-row:6 !important;
    margin:0 0 -4px !important;
  }

  body.reading-home .reading-bank-next{
    grid-column:1 / -1 !important;
    grid-row:7 !important;
  }
}

/* Homepage comparison micro-fixes for launch review. */
@media (min-width:900px){
  body.vocab-page:not(:has(.home-hero + .training-deck + .progress-board)) .inner{
    grid-template-columns:270px minmax(450px,500px) minmax(290px,1fr) !important;
    gap:16px !important;
  }

  body.vocab-page .vocab-main-card,
  body.vocab-page .vocab-left .hero,
  body.vocab-page .vocab-right .queue,
  body.vocab-page .vocab-right .stat{
    border-color:#e9e2f7 !important;
    box-shadow:none !important;
  }

  body.vocab-page .word,
  body.vocab-page .queue h2{
    font-weight:760 !important;
  }

  body.vocab-page .meaning,
  body.vocab-page .example,
  body.vocab-page .queue p,
  body.vocab-page .queue-review,
  body.vocab-page .queue-word,
  body.vocab-page .queue-item{
    font-weight:500 !important;
  }

  body.vocab-page .queue-word{
    font-size:12.5px !important;
    color:#4f4960 !important;
  }

  body.vocab-page .queue-list{
    display:none !important;
    max-height:168px !important;
    overflow:auto !important;
    margin-top:8px !important;
    padding-right:2px !important;
  }

  body.vocab-page .queue.open .queue-list{
    display:grid !important;
    gap:4px !important;
  }

  body.vocab-page #queueText > span.queue-list{
    display:none !important;
  }

  body.vocab-page .queue.open #queueText > span.queue-list{
    display:grid !important;
  }

  body.vocab-page .queue-item{
    grid-template-columns:18px minmax(0,1fr) auto !important;
    min-height:24px !important;
    align-items:center !important;
    border-top:1px solid #f2eef8 !important;
  }

  body.vocab-page .vocab-right .actions{
    grid-template-columns:1fr 1fr 1.15fr !important;
    gap:8px !important;
  }

  body.vocab-page .vocab-right .actions .action{
    min-width:0 !important;
    padding:0 8px !important;
    font-size:11.5px !important;
    font-weight:720 !important;
  }

  body.vocab-page #markKnown{
    background:#f2edff !important;
    color:#7b4fe8 !important;
    border-color:#d8cff8 !important;
  }

  body.vocab-page #queueText .queue-review{
    display:block !important;
  }

  html body.reading-home:not(:has(.home-hero + .training-deck + .progress-board)) .app > .inner{
    grid-template-columns:270px minmax(430px,1fr) 285px !important;
    gap:14px 18px !important;
  }

  html body.reading-home .task-card.main{
    grid-column:1 !important;
    grid-row:2 !important;
    width:auto !important;
    min-height:0 !important;
  }

  html body.reading-home .rhythm-note{
    grid-column:1 !important;
    grid-row:3 !important;
    width:auto !important;
  }

  html body.reading-home .inner > .section-title.reading-drill-title{
    grid-column:2 !important;
    grid-row:2 !important;
  }

  html body.reading-home .today-list{
    grid-column:2 !important;
    grid-row:3 !important;
    grid-template-columns:1fr 1fr !important;
  }

  html body.reading-home .inner > .section-title.reading-review-title{
    grid-column:3 !important;
    grid-row:2 !important;
  }

  html body.reading-home .review-card{
    grid-column:3 !important;
    grid-row:3 !important;
    width:auto !important;
  }

  html body.reading-home .inner > .section-title.reading-bank-title{
    grid-column:1 / -1 !important;
    grid-row:4 !important;
  }

  html body.reading-home .reading-bank-primary{
    grid-column:1 / -1 !important;
    grid-row:5 !important;
  }

  html body.reading-home .inner > .section-title.reading-next-bank-title{
    grid-column:1 / -1 !important;
    grid-row:6 !important;
  }

  html body.reading-home .reading-bank-next{
    grid-column:1 / -1 !important;
    grid-row:7 !important;
  }
}

/* Vocab micro layout: spelling belongs to the left task area, buttons stay compact. */
@media (min-width:900px){
  body.vocab-page .vocab-left{
    gap:9px !important;
  }

  body.vocab-page .vocab-spell{
    display:grid !important;
    grid-template-columns:1fr 74px !important;
    gap:8px !important;
    padding:10px !important;
    border:1px solid #e9e2f7 !important;
    border-radius:18px !important;
    background:#fff !important;
  }

  body.vocab-page .vocab-spell input{
    height:34px !important;
    border-radius:12px !important;
    font-size:12.5px !important;
    padding:0 11px !important;
  }

  body.vocab-page .vocab-feedback{
    min-height:22px !important;
    margin:0 !important;
    padding:0 4px !important;
    font-size:11.5px !important;
    line-height:1.35 !important;
    color:#746d82 !important;
  }

  body.vocab-page .vocab-main-card .spell,
  body.vocab-page .vocab-main-card .feedback{
    display:none !important;
  }

  body.vocab-page .audio-btn,
  body.vocab-page .record-btn,
  body.vocab-page .replay-btn,
  body.vocab-page .action,
  body.vocab-page .check{
    height:32px !important;
    border-radius:12px !important;
    font-size:11.2px !important;
    font-weight:720 !important;
  }

  body.vocab-page .audio-grid,
  body.vocab-page .repeat-grid{
    gap:8px !important;
  }

  body.vocab-page .repeat-panel{
    padding:10px !important;
  }

  body.vocab-page .vocab-right .actions{
    grid-template-columns:1fr 1fr 1fr !important;
    gap:8px !important;
  }

  body.vocab-page .vocab-right .actions .action{
    width:100% !important;
    min-width:0 !important;
    padding:0 7px !important;
  }

  body.vocab-page #markKnown{
    grid-column:auto !important;
  }

  body.vocab-page .queue-toggle,
  body.vocab-page .queue #openReviewQueue{
    height:32px !important;
    border-radius:12px !important;
    font-size:11.2px !important;
  }
}

/* Vocab button scale correction against homepage. */
@media (min-width:900px){
  body.vocab-page .vocab-spell{
    grid-template-columns:1fr 58px !important;
    padding:8px !important;
  }

  body.vocab-page .vocab-spell input{
    height:30px !important;
    font-size:11.8px !important;
  }

  body.vocab-page .vocab-spell .check{
    height:30px !important;
    min-width:0 !important;
    padding:0 8px !important;
    font-size:10.8px !important;
  }

  body.vocab-page .vocab-right .actions{
    grid-template-columns:1fr 72px 84px !important;
    justify-content:start !important;
    align-items:center !important;
  }

  body.vocab-page .vocab-right .actions .action{
    height:30px !important;
    border-radius:12px !important;
    padding:0 8px !important;
    font-size:10.8px !important;
  }

  body.vocab-page #prev{
    max-width:112px !important;
  }

  body.vocab-page #markNext{
    max-width:72px !important;
  }

  body.vocab-page #markKnown{
    max-width:84px !important;
  }

  body.vocab-page .audio-btn,
  body.vocab-page .record-btn,
  body.vocab-page .replay-btn{
    height:32px !important;
    font-size:11px !important;
  }

  body.vocab-page .queue #openReviewQueue{
    width:auto !important;
    min-width:132px !important;
    padding:0 12px !important;
  }
}

/* Vocab helper actions should stay quiet. */
@media (min-width:900px){
  body.vocab-page .audio-grid,
  body.vocab-page .repeat-grid{
    gap:6px !important;
  }

  body.vocab-page .audio-btn,
  body.vocab-page .record-btn,
  body.vocab-page .replay-btn{
    height:28px !important;
    border-radius:10px !important;
    font-size:10.4px !important;
    font-weight:690 !important;
    box-shadow:none !important;
  }

  body.vocab-page .audio-btn{
    background:#eefbfc !important;
    color:#287986 !important;
  }

  body.vocab-page .record-btn{
    background:#fff5f8 !important;
    color:#9b4d64 !important;
  }

  body.vocab-page .replay-btn{
    background:#fff9ee !important;
    color:#8a6d35 !important;
  }

  body.vocab-page .repeat-panel{
    padding:9px !important;
    border-radius:16px !important;
  }

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

  body.vocab-page .pronounce-note{
    margin-top:5px !important;
    font-size:10.4px !important;
  }
}

/* Vocab left target title should be compact. */
@media (min-width:900px){
  body.vocab-page .vocab-left h1{
    font-size:20px !important;
    line-height:1.12 !important;
    max-width:none !important;
    white-space:nowrap !important;
    letter-spacing:-.03em !important;
  }

  body.vocab-page .vocab-left .hero{
    padding:14px !important;
  }
}

/* Vocab final compact controls. */
@media (min-width:900px){
  body.vocab-page .vocab-main-card{
    padding:14px 16px !important;
  }

  body.vocab-page .word-info{
    display:grid !important;
    gap:4px !important;
    padding:8px 0 9px !important;
    margin:2px 0 9px !important;
    border-top:1px solid #f1eef7 !important;
    border-bottom:1px solid #f1eef7 !important;
  }

  body.vocab-page .ipa{
    margin:0 !important;
    font-size:11.5px !important;
    color:#817a91 !important;
  }

  body.vocab-page .meaning{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    font-size:13.2px !important;
    line-height:1.3 !important;
    color:#4f4960 !important;
    font-weight:520 !important;
  }

  body.vocab-page .example-label{
    font-size:10px !important;
    margin-bottom:4px !important;
  }

  body.vocab-page .example{
    font-size:12.8px !important;
    line-height:1.36 !important;
    margin-bottom:8px !important;
  }

  body.vocab-page .audio-btn,
  body.vocab-page .record-btn,
  body.vocab-page .replay-btn{
    height:26px !important;
    border-radius:10px !important;
    font-size:10px !important;
    padding:0 8px !important;
  }

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

  body.vocab-page .vocab-right .actions .action,
  body.vocab-page .vocab-spell .check,
  body.vocab-page .queue-toggle,
  body.vocab-page .queue #openReviewQueue{
    height:28px !important;
    border-radius:10px !important;
    font-size:10.2px !important;
    font-weight:700 !important;
  }

  body.vocab-page .vocab-right .actions{
    grid-template-columns:94px 54px 70px !important;
    justify-content:start !important;
  }

  body.vocab-page #prev,
  body.vocab-page #markNext,
  body.vocab-page #markKnown{
    max-width:none !important;
    width:100% !important;
  }

  body.vocab-page .vocab-spell{
    grid-template-columns:1fr 52px !important;
    padding:7px !important;
    border-radius:16px !important;
  }

  body.vocab-page .vocab-spell input{
    height:28px !important;
    font-size:11.4px !important;
    border-radius:10px !important;
  }

  body.vocab-page .queue h2{
    font-size:16px !important;
  }

  body.vocab-page .queue-list{
    display:none !important;
  }

  body.vocab-page .queue.open .queue-list{
    display:grid !important;
  }
}

/* Vocab proportion fix: readable sentence, quieter buttons. */
@media (min-width:900px){
  body.vocab-page .example{
    font-size:14.2px !important;
    line-height:1.48 !important;
    color:#514a5f !important;
    margin-bottom:10px !important;
  }

  body.vocab-page .audio-btn,
  body.vocab-page .record-btn,
  body.vocab-page .replay-btn{
    height:24px !important;
    border-radius:9px !important;
    font-size:9.6px !important;
    font-weight:660 !important;
    padding:0 7px !important;
  }

  body.vocab-page .audio-grid,
  body.vocab-page .repeat-grid{
    gap:5px !important;
  }

  body.vocab-page .vocab-right .actions .action,
  body.vocab-page .vocab-spell .check,
  body.vocab-page .queue-toggle,
  body.vocab-page .queue #openReviewQueue{
    height:26px !important;
    font-size:9.8px !important;
    border-radius:9px !important;
  }

  body.vocab-page .vocab-right .actions{
    grid-template-columns:88px 50px 66px !important;
    gap:6px !important;
  }
}

/* Vocab desktop correction: no overlap, comfortable text, quiet compact buttons. */
@media (min-width:900px){
  body.vocab-page .inner{
    grid-template-columns:300px minmax(430px,500px) minmax(280px,1fr) !important;
    column-gap:18px !important;
  }

  body.vocab-page .vocab-left,
  body.vocab-page .vocab-main-card,
  body.vocab-page .vocab-right{
    min-width:0 !important;
  }

  body.vocab-page .vocab-left .hero{
    overflow:hidden !important;
  }

  body.vocab-page .vocab-left h1{
    white-space:normal !important;
    font-size:19px !important;
    line-height:1.12 !important;
    max-width:100% !important;
  }

  body.vocab-page .resume b{
    font-size:12.5px !important;
    line-height:1.2 !important;
  }

  body.vocab-page .resume span{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  body.vocab-page .vocab-spell{
    grid-template-columns:1fr 56px !important;
    padding:8px !important;
  }

  body.vocab-page .vocab-spell input{
    height:34px !important;
    font-size:13px !important;
  }

  body.vocab-page .vocab-spell .check{
    height:34px !important;
    font-size:11px !important;
  }

  body.vocab-page .word{
    font-size:25px !important;
  }

  body.vocab-page .ipa{
    font-size:12.5px !important;
  }

  body.vocab-page .meaning{
    font-size:14px !important;
    line-height:1.34 !important;
  }

  body.vocab-page .example{
    font-size:14.5px !important;
    line-height:1.5 !important;
  }

  body.vocab-page .audio-btn,
  body.vocab-page .record-btn,
  body.vocab-page .replay-btn{
    height:30px !important;
    min-height:30px !important;
    border-radius:10px !important;
    font-size:11px !important;
  }

  body.vocab-page .vocab-right .actions{
    grid-template-columns:96px 52px 76px !important;
    gap:7px !important;
  }

  body.vocab-page .vocab-right .actions .action{
    height:30px !important;
    min-height:30px !important;
    font-size:11px !important;
    border-radius:10px !important;
    padding:0 7px !important;
  }

  body.vocab-page .queue-toggle,
  body.vocab-page .queue #openReviewQueue{
    height:30px !important;
    min-height:30px !important;
    font-size:11px !important;
  }

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

  body.vocab-page .vocab-right .stat span{
    font-size:11.5px !important;
  }
}

/* Vocab cohesion pass: three complete panels instead of scattered pieces. */
@media (min-width:900px){
  body.vocab-page .inner{
    grid-template-columns:300px minmax(440px,500px) minmax(300px,1fr) !important;
    align-items:stretch !important;
  }

  body.vocab-page .vocab-left,
  body.vocab-page .vocab-main-card,
  body.vocab-page .vocab-right{
    min-height:430px !important;
    border:1px solid #e9e2f7 !important;
    border-radius:22px !important;
    background:#fff !important;
    box-shadow:0 12px 28px rgba(72,54,130,.035) !important;
  }

  body.vocab-page .vocab-left{
    padding:16px !important;
    display:grid !important;
    grid-template-rows:auto auto auto auto 1fr !important;
    gap:10px !important;
  }

  body.vocab-page .vocab-left .hero{
    border:0 !important;
    background:linear-gradient(145deg,#fff,#fbf9ff) !important;
    padding:0 0 10px !important;
    border-radius:0 !important;
  }

  body.vocab-page .vocab-left h1{
    font-size:21px !important;
    line-height:1.12 !important;
    margin-bottom:10px !important;
  }

  body.vocab-page .vocab-left .resume{
    margin-top:0 !important;
    padding:11px !important;
    border-radius:16px !important;
    background:#fbf9ff !important;
  }

  body.vocab-page .vocab-spell{
    border-color:#e9e2f7 !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  body.vocab-page .vocab-main-card{
    padding:16px 18px !important;
  }

  body.vocab-page .vocab-right{
    padding:14px !important;
    display:grid !important;
    grid-template-rows:auto auto 1fr !important;
    gap:12px !important;
  }

  body.vocab-page .vocab-right .stats,
  body.vocab-page .vocab-right .actions,
  body.vocab-page .vocab-right .queue{
    margin:0 !important;
    border:0 !important;
    box-shadow:none !important;
  }

  body.vocab-page .vocab-right .stats{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  body.vocab-page .vocab-right .stat{
    min-height:58px !important;
    padding:9px !important;
    border-radius:16px !important;
    border:1px solid #f0edf7 !important;
  }

  body.vocab-page .vocab-right .stat i{
    width:28px !important;
    height:28px !important;
    font-size:15px !important;
    border-radius:10px !important;
  }

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

  body.vocab-page .vocab-right .actions{
    padding:0 !important;
    justify-content:start !important;
  }

  body.vocab-page .vocab-right .queue{
    padding:12px 0 0 !important;
    border-top:1px solid #f1eef7 !important;
    border-radius:0 !important;
    align-self:stretch !important;
  }

  body.vocab-page .queue-head{
    align-items:center !important;
  }

  body.vocab-page .queue h2{
    font-size:17px !important;
  }

  body.vocab-page .queue p{
    font-size:13px !important;
    line-height:1.38 !important;
  }

  body.vocab-page .audio-btn,
  body.vocab-page .record-btn,
  body.vocab-page .replay-btn,
  body.vocab-page .vocab-right .actions .action,
  body.vocab-page .vocab-spell .check,
  body.vocab-page .queue-toggle,
  body.vocab-page .queue #openReviewQueue{
    height:30px !important;
    min-height:30px !important;
    font-size:11.2px !important;
  }
}

/* Vocab word-card typography closer to dictionary sites. */
@media (min-width:900px){
  body.vocab-page .word-top{
    align-items:flex-start !important;
    margin-bottom:6px !important;
  }

  body.vocab-page .word{
    font-size:28px !important;
    line-height:1.05 !important;
    letter-spacing:-.025em !important;
  }

  body.vocab-page .tag{
    height:28px !important;
    padding:0 10px !important;
    display:inline-flex !important;
    align-items:center !important;
    border-radius:999px !important;
    font-size:11.5px !important;
    font-weight:720 !important;
  }

  body.vocab-page .word-info{
    display:block !important;
    padding:0 0 12px !important;
    margin:0 0 12px !important;
    border-top:0 !important;
    border-bottom:1px solid #f1eef7 !important;
  }

  body.vocab-page .ipa{
    display:inline-flex !important;
    align-items:center !important;
    min-height:22px !important;
    margin:0 0 5px !important;
    font-size:13px !important;
    line-height:1.2 !important;
    color:#8b8498 !important;
  }

  body.vocab-page .meaning{
    display:block !important;
    font-size:15px !important;
    line-height:1.42 !important;
    color:#3f394c !important;
    font-weight:520 !important;
  }

  body.vocab-page .example-label{
    margin-top:0 !important;
  }
}

/* Vocab panels should hug content, not fill empty height. */
@media (min-width:900px){
  body.vocab-page .vocab-left,
  body.vocab-page .vocab-main-card,
  body.vocab-page .vocab-right{
    min-height:0 !important;
    align-self:start !important;
  }

  body.vocab-page .vocab-left{
    grid-template-rows:auto auto auto auto !important;
  }

  body.vocab-page .app{
    min-height:0 !important;
  }

  body.vocab-page .inner{
    align-items:start !important;
  }
}

/* Reading micro-fix: keep title and cards in the same desktop row. */
@media (min-width:900px){
  body.reading-home .inner{
    grid-template-columns:270px minmax(430px,1fr) 285px !important;
    gap:14px 18px !important;
  }

  body.reading-home .task-card.main{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  body.reading-home .rhythm-note{
    grid-column:1 !important;
    grid-row:3 !important;
  }

  body.reading-home .inner > .section-title.reading-drill-title{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    margin:0 !important;
    z-index:2 !important;
  }

  body.reading-home .today-list{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    padding-top:42px !important;
    margin:0 !important;
    grid-template-columns:1fr 1fr !important;
    z-index:1 !important;
  }

  body.reading-home .inner > .section-title.reading-review-title{
    grid-column:3 !important;
    grid-row:2 !important;
    align-self:start !important;
    margin:0 !important;
    z-index:2 !important;
  }

  body.reading-home .review-card{
    grid-column:3 !important;
    grid-row:2 !important;
    align-self:start !important;
    padding-top:52px !important;
    margin:0 !important;
    z-index:1 !important;
  }

  body.reading-home .inner > .section-title.reading-bank-title{
    grid-column:1 / -1 !important;
    grid-row:4 !important;
    align-self:start !important;
    margin:8px 0 -4px !important;
    z-index:2 !important;
  }

  body.reading-home .reading-bank-primary{
    grid-column:1 / -1 !important;
    grid-row:5 !important;
    margin:0 !important;
    z-index:1 !important;
  }

  body.reading-home .inner > .section-title.reading-next-bank-title{
    grid-column:1 / -1 !important;
    grid-row:6 !important;
    align-self:start !important;
    margin:0 0 -4px !important;
  }

  body.reading-home .reading-bank-next{
    grid-column:1 / -1 !important;
    grid-row:7 !important;
    margin:0 !important;
  }

  body.reading-home .task-link,
  body.reading-home .review-card,
  body.reading-home .bank-item{
    font-weight:500 !important;
  }

  body.reading-home .task-link b,
  body.reading-home .review-card b,
  body.reading-home .bank-item b{
    font-weight:720 !important;
  }
}

/* Reading stable panel layout after container wrap. */
@media (min-width:900px){
  body.reading-home .inner{
    grid-template-columns:270px minmax(430px,1fr) 285px !important;
    gap:14px 18px !important;
    align-items:start !important;
  }

  body.reading-home .reading-left-panel{
    grid-column:1 !important;
    grid-row:2 !important;
    display:grid !important;
    gap:14px !important;
    align-content:start !important;
    min-width:0 !important;
  }

  body.reading-home .reading-main-panel{
    grid-column:2 !important;
    grid-row:2 !important;
    display:grid !important;
    gap:10px !important;
    align-content:start !important;
    min-width:0 !important;
  }

  body.reading-home .reading-side-panel{
    grid-column:3 !important;
    grid-row:2 !important;
    display:grid !important;
    gap:10px !important;
    align-content:start !important;
    min-width:0 !important;
  }

  body.reading-home .reading-left-panel .task-card.main,
  body.reading-home .reading-left-panel .rhythm-note,
  body.reading-home .reading-main-panel .reading-drill-title,
  body.reading-home .reading-main-panel .today-list,
  body.reading-home .reading-side-panel .reading-review-title,
  body.reading-home .reading-side-panel .review-card{
    grid-column:auto !important;
    grid-row:auto !important;
    margin:0 !important;
    width:auto !important;
    align-self:auto !important;
    z-index:auto !important;
  }

  body.reading-home .reading-main-panel .today-list{
    padding-top:0 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  body.reading-home .reading-side-panel .review-card{
    padding:14px !important;
    min-height:112px !important;
  }

  body.reading-home .reading-bank-title{
    grid-column:1 / -1 !important;
    grid-row:3 !important;
    margin:4px 0 -4px !important;
  }

  body.reading-home .reading-bank-primary{
    grid-column:1 / -1 !important;
    grid-row:4 !important;
    margin:0 !important;
  }

  body.reading-home .reading-next-bank-title{
    grid-column:1 / -1 !important;
    grid-row:5 !important;
    margin:0 0 -4px !important;
  }

  body.reading-home .reading-bank-next{
    grid-column:1 / -1 !important;
    grid-row:6 !important;
    margin:0 !important;
  }

  body.reading-home .warm-note{
    grid-column:1 / -1 !important;
    grid-row:7 !important;
    margin:0 !important;
  }
}