#speaking-full-mock-panel[hidden],
.ielts-mock-home[hidden],
.ielts-mock-session[hidden],
.ielts-mock-results[hidden],
.ielts-cue-prompts[hidden],
.ielts-prep-note[hidden],
.ielts-live-transcript[hidden],
.ielts-score-report[hidden] {
  display: none !important;
}

.speaking-full-mock-panel {
  margin-top: 22px;
}

.ielts-mock-studio {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: clamp(22px, 3.5vw, 42px);
  overflow: hidden;
  border: 1px solid #d7e0ef;
  border-radius: 30px;
  background:
    radial-gradient(circle at 96% 0, rgba(37, 99, 235, .12), transparent 27%),
    radial-gradient(circle at 0 100%, rgba(8, 145, 125, .1), transparent 28%),
    rgba(255, 255, 255, .94);
  box-shadow: 0 24px 64px rgba(24, 42, 74, .14);
}

.ielts-mock-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.ielts-mock-header h2,
.ielts-mock-results h2 {
  margin: 5px 0 9px;
  color: #10203a;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}

.ielts-mock-header p:last-child,
.ielts-mock-results header > p:last-child {
  max-width: 720px;
  margin: 0;
  color: #63738a;
  line-height: 1.6;
}

.ielts-mock-readiness {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  color: #7a5b20;
  font-size: .75rem;
  font-weight: 850;
  border: 1px solid #ead49e;
  border-radius: 999px;
  background: #fff9e9;
}

.ielts-mock-readiness span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d59a24;
}

.ielts-mock-readiness.is-ready {
  color: #087560;
  border-color: #a9dfd2;
  background: #effbf7;
}

.ielts-mock-readiness.is-ready span { background: #0a9b7b; }
.ielts-mock-readiness.is-error { color: #a63636; border-color: #efbcbc; background: #fff1f1; }
.ielts-mock-readiness.is-error span { background: #d84d4d; }

.ielts-mock-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.ielts-mock-route article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 2px 13px;
  align-items: center;
  min-height: 108px;
  padding: 17px;
  border: 1px solid #dae3f0;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 9px 23px rgba(32, 51, 86, .06);
}

.ielts-mock-route article > span {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #fff;
  font-weight: 950;
  border-radius: 15px;
  background: linear-gradient(135deg, #2563eb, #0b8cab);
}

.ielts-mock-route article > div { display: grid; gap: 4px; }
.ielts-mock-route strong { color: #17253d; font-size: 1rem; }
.ielts-mock-route small { color: #718096; font-weight: 700; line-height: 1.35; }
.ielts-mock-route b { grid-column: 2; color: #2461ad; font-size: .72rem; }

.ielts-mock-start-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  padding: 22px;
  color: #fff;
  border-radius: 22px;
  background: linear-gradient(135deg, #142b54, #176b84);
  box-shadow: 0 18px 34px rgba(23, 58, 100, .18);
}

.ielts-mock-start-card > div { display: grid; gap: 6px; }
.ielts-mock-start-card strong { font-size: 1.1rem; }
.ielts-mock-start-card span { max-width: 580px; color: #d6e6f4; font-size: .82rem; line-height: 1.5; }

.ielts-mock-start-card button,
.ielts-feedback-button {
  min-height: 52px;
  padding: 0 19px;
  color: #10284c;
  font: inherit;
  font-weight: 950;
  border: 0;
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 9px 22px rgba(0, 0, 0, .14);
}

.ielts-mock-privacy {
  margin: 12px 2px 0;
  color: #6d7c91;
  font-size: .73rem;
  font-weight: 700;
}

.ielts-history,
.ielts-playback {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #dce4ef;
}

.ielts-history-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.ielts-history h3,
.ielts-playback h3 {
  margin: 4px 0 0;
  color: #15243c;
  font-size: 1.25rem;
}

.ielts-history-head button,
.ielts-session-topbar > button,
.ielts-result-actions button {
  padding: 10px 13px;
  color: #607087;
  font: inherit;
  font-size: .75rem;
  font-weight: 850;
  border: 1px solid #d5dfeb;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
}

.ielts-history-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 16px;
}

.ielts-history-summary > div,
.ielts-completion-grid > div {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid #dce5ef;
  border-radius: 15px;
  background: #f9fbfd;
}

.ielts-history-summary strong,
.ielts-completion-grid strong { color: #16314a; font-size: 1.25rem; }
.ielts-history-summary span,
.ielts-completion-grid span { color: #738296; font-size: .72rem; font-weight: 800; }

.ielts-history-list { display: grid; gap: 10px; margin-top: 12px; }
.ielts-history-empty { margin: 0; padding: 16px; color: #7a8798; text-align: center; border: 1px dashed #cfd9e6; border-radius: 13px; background: #fbfcfe; }

.ielts-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, auto);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #dce4ef;
  border-radius: 14px;
  background: #fff;
}

.ielts-history-item div { display: grid; gap: 3px; }
.ielts-history-item strong { color: #1a2b43; }
.ielts-history-item small { color: #7a8798; }
.ielts-history-item b { color: #0a846f; font-size: 1.1rem; }
.ielts-history-item span { color: #607087; font-size: .75rem; font-weight: 800; }

.ielts-session-topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}

.ielts-session-progress {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto;
  gap: 11px;
  align-items: center;
  flex: 1;
}

.ielts-session-progress > span { color: #2461ad; font-size: .72rem; font-weight: 950; letter-spacing: .08em; }
.ielts-session-progress > div { height: 8px; overflow: hidden; border-radius: 999px; background: #e5ebf3; }
.ielts-session-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #0a9b7b); transition: width .25s ease; }
.ielts-session-progress strong { color: #607087; font-size: .78rem; }

.ielts-exam-card {
  position: relative;
  min-height: 310px;
  margin-top: 18px;
  padding: clamp(25px, 5vw, 52px);
  overflow: hidden;
  border: 1px solid #cedded;
  border-radius: 27px;
  background: linear-gradient(145deg, #f6faff, #f3fbf8);
  box-shadow: 0 15px 35px rgba(27, 61, 91, .09);
}

.ielts-exam-card.is-preparing { border-color: #e5c874; background: linear-gradient(145deg, #fffbef, #f7fbff); }
.ielts-exam-card.is-recording { border-color: #55bba9; box-shadow: 0 15px 38px rgba(8, 137, 116, .15); }

.ielts-exam-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ielts-exam-meta span { color: #17608e; font-size: .73rem; font-weight: 950; letter-spacing: .08em; }
.ielts-exam-meta strong { min-width: 90px; color: #fff; text-align: center; padding: 10px 13px; border-radius: 12px; background: #17385e; font-size: 1.22rem; font-variant-numeric: tabular-nums; }
.ielts-exam-card > p { margin: 38px 0 8px; color: #0a8e79; font-size: .72rem; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.ielts-exam-card > h2 { max-width: 850px; margin: 0; color: #10223c; font-size: clamp(1.55rem, 3.5vw, 2.6rem); line-height: 1.3; letter-spacing: -.03em; }

.ielts-cue-prompts { margin-top: 22px; padding: 19px 21px; border-left: 4px solid #2563eb; border-radius: 0 16px 16px 0; background: rgba(255,255,255,.78); }
.ielts-cue-prompts strong { color: #194f94; }
.ielts-cue-prompts ul { display: grid; gap: 7px; margin: 11px 0 0; padding-left: 21px; color: #24364e; font-weight: 750; }
.ielts-prep-note { display: flex; gap: 12px; align-items: center; margin-top: 22px; padding: 14px; color: #735816; border: 1px solid #ead28b; border-radius: 13px; background: #fff9e8; }
.ielts-prep-note span { font-size: .78rem; font-weight: 700; }

.ielts-recorder-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #d6e1ed;
  border-radius: 19px;
  background: #fff;
}

.ielts-recorder-status { display: flex; gap: 12px; align-items: center; }
.ielts-recorder-status > span { width: 13px; height: 13px; border: 3px solid #dfe8ef; border-radius: 50%; background: #8290a1; }
.ielts-recorder-status > span.is-recording { border-color: #ffd6d6; background: #e53e3e; animation: ielts-pulse 1.2s infinite; }
.ielts-recorder-status > div { display: grid; gap: 3px; }
.ielts-recorder-status strong { color: #17273e; }
.ielts-recorder-status small { color: #758398; font-weight: 700; }

.ielts-recorder-actions { display: flex; gap: 9px; }
.ielts-recorder-actions button {
  min-height: 46px;
  padding: 0 15px;
  color: #31506f;
  font: inherit;
  font-size: .8rem;
  font-weight: 900;
  border: 1px solid #cad9e7;
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
}
.ielts-recorder-actions button.is-primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, #176b84, #0a8f7d); }
.ielts-recorder-actions button.is-stop { background: linear-gradient(135deg, #d93f4f, #b91c35); }
.ielts-recorder-actions button:disabled { cursor: not-allowed; opacity: .48; }

.ielts-live-transcript { grid-column: 1 / -1; padding: 13px 15px; border-radius: 13px; background: #f3f8fc; }
.ielts-live-transcript span { color: #247099; font-size: .65rem; font-weight: 950; letter-spacing: .1em; }
.ielts-live-transcript p { margin: 5px 0 0; color: #4f6277; line-height: 1.5; }

#ielts-recording-list { display: grid; gap: 10px; margin-top: 14px; }
.ielts-recording-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(180px, 330px); gap: 13px; align-items: center; padding: 12px 14px; border: 1px solid #dce4ed; border-radius: 14px; background: #fff; }
.ielts-recording-item > span { display: grid; place-items: center; width: 38px; height: 38px; color: #176b84; font-weight: 950; border-radius: 11px; background: #e6f4f7; }
.ielts-recording-item div { display: grid; gap: 2px; min-width: 0; }
.ielts-recording-item strong { overflow: hidden; color: #1b2c43; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.ielts-recording-item small { color: #788699; }
.ielts-recording-item audio { width: 100%; height: 36px; }

.ielts-mock-results { margin-top: 28px; }
.ielts-completion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 22px; }
.ielts-feedback-button { width: 100%; margin-top: 15px; color: #fff; background: linear-gradient(135deg, #2563eb, #0a8f7d); }
.ielts-feedback-button:disabled { cursor: wait; opacity: .65; }
.ielts-feedback-status { margin-top: 12px; color: #65758a; text-align: center; font-size: .82rem; font-weight: 750; }

.ielts-score-report { margin-top: 19px; padding: 21px; border: 1px solid #d5e2ed; border-radius: 21px; background: #f8fbfd; }
.ielts-score-hero { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; }
.ielts-overall-band { display: grid; place-items: center; width: 116px; height: 116px; color: #fff; border-radius: 28px; background: linear-gradient(135deg, #2563eb, #0a8f7d); box-shadow: 0 15px 28px rgba(28, 104, 130, .2); }
.ielts-overall-band strong { font-size: 2.25rem; line-height: 1; }
.ielts-overall-band span { font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.ielts-score-hero h3 { margin: 0 0 6px; color: #152942; }
.ielts-score-hero p { margin: 0; color: #65768a; line-height: 1.55; }
.ielts-criteria-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.ielts-criterion { padding: 14px; border: 1px solid #dae3ec; border-radius: 14px; background: #fff; }
.ielts-criterion > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ielts-criterion strong { color: #21364d; font-size: .76rem; }
.ielts-criterion b { color: #087c69; }
.ielts-criterion p { margin: 7px 0 0; color: #738195; font-size: .72rem; line-height: 1.45; }
.ielts-next-steps { margin-top: 16px; padding: 16px; border-radius: 14px; background: #eef7fb; }
.ielts-next-steps strong { color: #173d5d; }
.ielts-next-steps ul { display: grid; gap: 7px; margin: 10px 0 0; padding-left: 20px; color: #536c81; font-size: .8rem; line-height: 1.45; }
.ielts-result-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }

@keyframes ielts-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, .32); }
  50% { box-shadow: 0 0 0 8px rgba(229, 62, 62, 0); }
}

@media (max-width: 800px) {
  .ielts-mock-header,
  .ielts-mock-start-card,
  .ielts-history-head { align-items: stretch; flex-direction: column; }
  .ielts-mock-readiness { width: fit-content; }
  .ielts-mock-route { grid-template-columns: 1fr; }
  .ielts-mock-route article { min-height: 94px; }
  .ielts-recorder-card { grid-template-columns: 1fr; }
  .ielts-recorder-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .ielts-recording-item { grid-template-columns: 38px minmax(0, 1fr); }
  .ielts-recording-item audio { grid-column: 1 / -1; }
  .ielts-criteria-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .ielts-mock-studio { padding: 17px; border-radius: 22px; }
  .ielts-history-summary,
  .ielts-completion-grid { grid-template-columns: 1fr; }
  .ielts-session-topbar { align-items: stretch; flex-direction: column; }
  .ielts-session-progress { grid-template-columns: 1fr auto; }
  .ielts-session-progress > div { grid-column: 1 / -1; grid-row: 2; }
  .ielts-exam-card { min-height: 280px; padding: 21px; }
  .ielts-exam-meta { align-items: flex-start; }
  .ielts-exam-meta strong { min-width: 78px; }
  .ielts-recorder-actions,
  .ielts-criteria-grid { grid-template-columns: 1fr; }
  .ielts-score-hero { grid-template-columns: 1fr; text-align: center; }
  .ielts-overall-band { margin: auto; }
  .ielts-result-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .ielts-session-progress i,
  .ielts-recorder-status > span.is-recording { transition: none; animation: none; }
}