/* JOY IELTS Speaking polish layer 260730.
   Visual-only override: no submission, recording, or API logic is changed. */
:root{
  --joy-ink:#171326;
  --joy-text:#514b61;
  --joy-muted:#80778f;
  --joy-line:#e7e1f1;
  --joy-purple:#7350c7;
  --joy-purple-2:#8d6ae8;
  --joy-purple-soft:#f3effc;
  --joy-mint:#e8f7ef;
  --joy-green:#247456;
  --joy-blue:#edf8fb;
  --joy-amber:#fff5e4;
  --joy-paper:#fff;
  --joy-bg:#fbfbfe;
  --joy-shadow:0 10px 26px rgba(48,38,82,.075);
}

html{background:var(--joy-bg)}
body{
  color:var(--joy-ink);
  background:
    radial-gradient(circle at 0% 0%, rgba(232,247,239,.46), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(243,239,252,.62), transparent 32%),
    linear-gradient(135deg,#fff 0%,#fbfaff 54%,#f7fbfc 100%) !important;
}

.topbar{
  min-height:68px;
  border-bottom:1px solid rgba(232,224,243,.9) !important;
  box-shadow:none;
}

.app,
.page{
  background:transparent !important;
}

.workspace,
.layout,
.inner{
  gap:18px !important;
}

.app > .inner,
.rail,
.main,
.evidence,
.side,
.exam,
.question-card,
.controls,
.task-preview,
.mode-card,
.status-card,
.progress,
.start-panel,
.finish-panel{
  border-color:var(--joy-line) !important;
  border-radius:12px !important;
  box-shadow:var(--joy-shadow);
}

.app > .inner{
  box-shadow:none;
}

.mark,
.app-dot,
.examiner-avatar,
.primary,
.btn.primary,
.connect,
.submit,
.start-btn,
.startSprint,
.start-btn,
button.primary{
  background:linear-gradient(135deg,var(--joy-purple),var(--joy-purple-2)) !important;
}

.mark,
.app-dot{
  box-shadow:0 8px 18px rgba(115,80,199,.16);
}

.mark,
.examiner-avatar{
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  text-align:center !important;
  overflow:hidden !important;
}

.brand b,
.app-title b,
.rail h1,
.side h1,
.main-head h2,
.partbar h1,
.start-panel h1,
.finish-panel h1{
  letter-spacing:0 !important;
}

.eyebrow,
.kicker,
.question-label,
.part-label{
  color:var(--joy-purple) !important;
  letter-spacing:.08em !important;
}

.rail-lead,
.side-lead,
.evidence-intro,
.partbar p,
.lead,
.status-copy span,
.state span,
.status-text span{
  color:var(--joy-muted) !important;
}

.day-btn,
.task-tab,
.set-btn,
.top-actions a,
.ghost,
.nav a,
.btn,
.file-label,
.stage-btn,
.mode,
.feedback-link,
.home{
  border-color:var(--joy-line) !important;
  background:#fff !important;
  transition:box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.day-btn:hover,
.task-tab:hover,
.set-btn:hover,
.top-actions a:hover,
.ghost:hover,
.nav a:hover,
.btn:hover,
.file-label:hover,
.stage-btn:hover,
.mode:hover,
.feedback-link:hover,
.home:hover{
  border-color:#cdbfeb !important;
  box-shadow:0 7px 16px rgba(48,38,82,.06);
}

.day-btn.active,
.task-tab.active,
.set-btn.active,
.stage-btn.active,
.mode.active,
.step.active{
  border-color:#b9a8e8 !important;
  background:#f8f4ff !important;
  color:var(--joy-purple) !important;
}

.task-tab.active,
.btn.primary,
.primary,
.connect,
.submit,
.start-btn{
  color:#fff !important;
}

.question{
  max-width:980px !important;
  letter-spacing:0 !important;
}

.cue,
.cue-grid .cue,
.panel,
.bubble,
.requirement,
.server,
.proof-row,
.audio-box,
.field textarea{
  border-color:var(--joy-line) !important;
  border-radius:10px !important;
}

.cue,
.cue.show{
  background:linear-gradient(135deg,#fbf9ff,#f4f0fc) !important;
}

.cue-grid .cue,
.requirement,
.progress .step,
.proof-row,
.audio-box{
  background:#fbfbfd !important;
}

.rule,
.server-proof,
.proof.show{
  border-color:#cfe8dc !important;
  background:var(--joy-mint) !important;
  color:var(--joy-green) !important;
}

.warning,
.prep.show{
  border-color:#eddcb9 !important;
  background:var(--joy-amber) !important;
}

.prep.show{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.prep.show span,
.prep.show small{
  display:block;
}

.prep.show small{
  margin-top:3px;
  color:var(--joy-muted);
}

.prep-skip{
  flex:0 0 auto;
  min-height:40px;
  padding:0 18px;
  border:1px solid #d8c9f1;
  border-radius:8px;
  background:#fff;
  color:var(--joy-purple);
  font:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}

.prep-skip:hover{
  border-color:#bca5e4;
  background:#f8f4ff;
}

.conversation,
.task-view,
.question-card{
  scrollbar-color:#cdbfeb transparent;
}

.recordbar,
.exam-controls{
  border-top-color:var(--joy-line) !important;
}

.status-card,
.progress,
.side,
.evidence,
.rail,
.main,
.exam{
  background:rgba(255,255,255,.94) !important;
}

.task-card.main,
.intro{
  border-color:#d8cbf3 !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(232,247,239,.45), transparent 34%),
    linear-gradient(135deg,#fff,#fbf9ff) !important;
}

.feedback-link{
  min-height:42px;
  color:var(--joy-purple) !important;
  font-weight:850 !important;
}

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

.nav-mini a,
.nav-mini button{
  min-height:32px;
  border:1px solid var(--joy-line);
  border-radius:10px;
  background:#fff;
  color:#40394f;
  padding:7px 10px;
  font-size:12px;
  font-weight:780;
}

.task-preview{
  border:1px solid var(--joy-line);
  border-radius:12px;
  background:rgba(255,255,255,.96);
  padding:18px;
  box-shadow:var(--joy-shadow);
}

.preview-label{
  margin:0 0 10px;
  color:var(--joy-purple);
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.task-preview h3{
  margin:0 0 13px;
  font-size:clamp(22px,2.4vw,34px);
  line-height:1.12;
  letter-spacing:0;
}

.cue-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0 0 12px;
}

.cue-list > *,
.cue-list span,
.cue-list div{
  min-height:38px;
  border:1px solid var(--joy-line);
  border-radius:10px;
  background:#fbfbfd;
  padding:9px 10px;
  color:var(--joy-text);
  font-size:12px;
  line-height:1.35;
}

.preview-focus{
  margin:0 0 13px;
  border:1px solid #d7eae1;
  border-radius:10px;
  background:var(--joy-mint);
  color:var(--joy-green);
  padding:10px 11px;
  font-size:12px;
  font-weight:750;
}

.today-route{
  border:1px solid var(--joy-line);
  border-radius:10px;
  background:#fff;
  padding:12px;
}

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

.route-head b,
.route-head span{
  display:block;
}

.route-head b{
  font-size:13px;
}

.route-head span{
  margin-top:4px;
  color:var(--joy-muted);
  font-size:11px;
  line-height:1.35;
}

.route-head strong{
  min-width:42px;
  text-align:right;
  color:var(--joy-purple);
  font-size:18px;
}

.route-bar{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#eee9f7;
  margin:10px 0;
}

.route-bar i{
  display:block;
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--joy-purple),var(--joy-purple-2));
}

.route-list{
  display:grid;
  gap:6px;
}

.route-list span{
  display:block;
  border:1px solid #f0ebf7;
  border-radius:9px;
  background:#fbfbfd;
  padding:8px 9px;
  color:var(--joy-text);
  font-size:11px;
  line-height:1.35;
}

.more-practice{
  margin-top:10px;
  border:1px solid var(--joy-line);
  border-radius:10px;
  background:#fff;
  padding:9px 10px;
}

.more-practice summary{
  color:var(--joy-purple);
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}

.more-practice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:9px;
}

.more-practice-grid span{
  border:1px solid #f0ebf7;
  border-radius:9px;
  background:#fbfbfd;
  padding:8px;
  color:var(--joy-text);
  font-size:11px;
  line-height:1.35;
}

.primary,
.submit,
.connect,
.start-btn,
.btn.primary{
  box-shadow:0 9px 18px rgba(115,80,199,.16);
}

@media (max-width:820px){
  body{background:#fbfbfd !important}
  .workspace,
  .layout,
  .inner{
    padding:12px !important;
    gap:12px !important;
  }
  .topbar{
    min-height:auto;
    padding:12px 14px !important;
  }
  .rail,
  .main,
  .evidence,
  .side,
  .exam,
  .question-card,
  .controls{
    border-radius:12px !important;
    box-shadow:0 8px 24px rgba(48,38,82,.07);
  }
  .question{
    font-size:clamp(24px,8vw,34px) !important;
  }
  .day-list,
  .set-list,
  .requirements,
  .cue-list,
  .more-practice-grid{
    grid-template-columns:1fr !important;
  }
  .nav-mini{
    justify-content:flex-start;
  }
}