/* Generated by scripts/build-frontend-entry-bundles.js. Do not edit.
 * bundle=coreCss; kind=css; manifest-sha256=d6a501c92bbd371c9f4363d0a1a7044e1e340f35fd1829a7fef03c10f10c5c68
 */

/* ---- styles.css ---- */
:root {
  --font-step: 1;
  --ink: #211916;
  --muted: #776a5d;
  --line: #eadfca;
  --paper: #fffaf0;
  --panel: #ffffff;
  --mint: #f6c542;
  --mint-dark: #b67900;
  --coral: #d95f43;
  --gold: #f6c542;
  --accent-text: #7f5200;
  --accent-soft: #fff2c2;
  --blue: #172a45;
  --violet: #5f4b32;
  --shadow: 0 18px 50px rgba(24, 33, 37, 0.12);
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading,
.feedback-panel.scoring .figma-scoring-loading {
  display: grid !important;
  justify-items: stretch !important;
  align-content: start !important;
  gap: 22px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-card,
.feedback-panel.scoring .figma-scoring-loading .scoring-waveform-card {
  display: grid !important;
  justify-items: center !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 8px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-status-line,
.feedback-panel.scoring .figma-scoring-loading .scoring-status-line {
  display: grid !important;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(280px, 100%) !important;
  margin: 0 auto 10px !important;
  color: #00a36e !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-status-line span,
.feedback-panel.scoring .figma-scoring-loading .scoring-status-line span {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0, 195, 163, 0.28), transparent) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-status-line strong,
.feedback-panel.scoring .figma-scoring-loading .scoring-status-line strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #00a36e !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 24px !important;
  white-space: nowrap !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-status-line strong::before,
.feedback-panel.scoring .figma-scoring-loading .scoring-status-line strong::before {
  content: "✦" !important;
  font-size: 17px !important;
  line-height: 1 !important;
  animation: scoringSparkle 1.8s ease-in-out infinite !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-analysis-copy,
.feedback-panel.scoring .figma-scoring-loading .scoring-analysis-copy {
  max-width: 320px !important;
  margin: 0 auto 22px !important;
  color: #646972 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  text-align: center !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-panel,
.feedback-panel.scoring .figma-scoring-loading .scoring-waveform-panel {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  height: 196px !important;
  border: 1px solid rgba(33, 224, 205, 0.22) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, rgba(209, 255, 244, 0.68), rgba(255, 255, 255, 0.02) 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 253, 251, 0.88)) !important;
  box-shadow: 0 18px 36px -30px rgba(14, 17, 23, 0.36) !important;
  overflow: hidden !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-grid,
.feedback-panel.scoring .figma-scoring-loading .scoring-waveform-grid {
  position: absolute !important;
  inset: 15px !important;
  z-index: 0 !important;
  opacity: 0.26 !important;
  background-image: radial-gradient(circle, rgba(73, 118, 115, 0.28) 1px, transparent 1.2px) !important;
  background-size: 10px 14px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars,
.feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars {
  position: absolute !important;
  inset: 28px 16px !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(3px, 1vw, 5px) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b,
.feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b {
  width: clamp(2px, 0.8vw, 3px) !important;
  height: calc(var(--bar) * 0.68px) !important;
  min-height: 8px !important;
  border-radius: 999px !important;
  background: rgba(196, 201, 207, 0.72) !important;
  transform-origin: center !important;
  animation: scoringWaveDrift 1.2s ease-in-out infinite !important;
  animation-delay: calc(var(--i) * 0.025s) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b:nth-child(-n + 22),
.feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b:nth-child(-n + 22) {
  background: #21e0cd !important;
  box-shadow: 0 0 8px rgba(33, 224, 205, 0.24) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b:nth-child(n + 19):nth-child(-n + 24),
.feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b:nth-child(n + 19):nth-child(-n + 24) {
  background: rgba(255, 255, 255, 0.9) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam,
.feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam {
  position: absolute !important;
  top: 17px !important;
  bottom: 17px !important;
  left: 48% !important;
  z-index: 2 !important;
  width: 22px !important;
  transform: translateX(-50%) !important;
  animation: scoringScanSweep 2.4s linear infinite !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam::before,
#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam::after,
.feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam::before,
.feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  z-index: 3 !important;
  width: 10px !important;
  height: 10px !important;
  border: 1px solid rgba(33, 224, 205, 0.66) !important;
  border-radius: 999px !important;
  background: #d8fff8 !important;
  box-shadow: 0 0 13px rgba(33, 224, 205, 0.6) !important;
  transform: translateX(-50%) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam::before,
.feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam::before {
  top: 0 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam::after,
.feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam::after {
  bottom: 0 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam i,
.feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam i {
  position: absolute !important;
  inset: 5px 10px !important;
  display: block !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: #41f4de !important;
  box-shadow: 0 0 18px rgba(33, 224, 205, 0.76) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam i::before,
.feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam i::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 -10px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(65, 244, 222, 0.24), transparent) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-metric-chips,
.feedback-panel.scoring .figma-scoring-loading .scoring-metric-chips {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 18px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-metric-chips span,
.feedback-panel.scoring .figma-scoring-loading .scoring-metric-chips span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(0, 163, 110, 0.22) !important;
  border-radius: 8px !important;
  color: #1d1d1f !important;
  background: rgba(255, 255, 255, 0.72) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 16px !important;
}

.figma-scoring-loading .chip-icon {
  position: relative !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  color: #00a36e !important;
}

.figma-scoring-loading .chip-icon.content {
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
}

.figma-scoring-loading .chip-icon.content::after {
  content: "" !important;
  position: absolute !important;
  right: -3px !important;
  bottom: -4px !important;
  width: 5px !important;
  height: 5px !important;
  border-left: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  border-radius: 0 0 0 2px !important;
}

.figma-scoring-loading .chip-icon.pronunciation::before,
.figma-scoring-loading .chip-icon.pronunciation::after,
.figma-scoring-loading .chip-icon.fluency::before,
.figma-scoring-loading .chip-icon.fluency::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px auto 2px 6px !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: -5px 4px 0 currentColor, 5px -2px 0 currentColor !important;
}

.figma-scoring-loading .chip-icon.fluency::before {
  inset: 6px 1px auto 1px !important;
  width: 12px !important;
  height: 2px !important;
  border-radius: 999px !important;
  transform: rotate(18deg) !important;
  box-shadow: 0 4px 0 rgba(0, 163, 110, 0.35) !important;
}

.figma-scoring-loading .chip-icon.fluency::after {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-step-card,
.feedback-panel.scoring .figma-scoring-loading .scoring-step-card {
  width: 100% !important;
  min-height: 0 !important;
  padding: 24px 20px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(219, 222, 227, 0.62) !important;
}

.figma-scoring-loading .scoring-step-timeline {
  position: relative !important;
  display: grid !important;
  gap: 26px !important;
}

.figma-scoring-loading .scoring-step-timeline::before {
  content: "" !important;
  position: absolute !important;
  top: 18px !important;
  bottom: 22px !important;
  left: 9px !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: #d9dee0 !important;
}

.figma-scoring-loading .scoring-step {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 18px !important;
  margin: 0 !important;
}

.figma-scoring-loading .scoring-step > i {
  position: relative !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #aeb6bc !important;
  border-radius: 999px !important;
  background: #fff !important;
}

.figma-scoring-loading .scoring-step.is-done > i,
.figma-scoring-loading .scoring-step.is-active > i {
  border-color: #00a36e !important;
  background: #00a36e !important;
}

.figma-scoring-loading .scoring-step.is-active > i {
  box-shadow: 0 0 0 9px rgba(0, 163, 110, 0.16) !important;
  animation: scoringStepPulse 1.45s ease-in-out infinite !important;
}

.figma-scoring-loading .scoring-step span {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.figma-scoring-loading .scoring-step strong {
  color: #111318 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 22px !important;
}

.figma-scoring-loading .scoring-step small {
  color: #646972 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
}

.figma-scoring-loading .scoring-step em {
  color: #00a36e !important;
  font-size: 17px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  letter-spacing: 1px !important;
}

.figma-scoring-loading .scoring-step.is-pending em {
  color: #9aa1aa !important;
}

.figma-scoring-loading .mini-wave {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 30px !important;
}

.figma-scoring-loading .mini-wave b {
  width: 3px !important;
  border-radius: 999px !important;
  background: #00a36e !important;
  animation: scoringMiniWave 0.82s ease-in-out infinite !important;
}

.figma-scoring-loading .mini-wave b:nth-child(1) { height: 18px !important; animation-delay: 0s !important; }
.figma-scoring-loading .mini-wave b:nth-child(2) { height: 28px !important; animation-delay: 0.1s !important; }
.figma-scoring-loading .mini-wave b:nth-child(3) { height: 22px !important; animation-delay: 0.2s !important; }
.figma-scoring-loading .mini-wave b:nth-child(4) { height: 15px !important; animation-delay: 0.3s !important; }

.figma-scoring-loading .scoring-privacy-note {
  margin: 32px 0 0 !important;
  color: #9aa1aa !important;
  font-size: 11px !important;
  line-height: 16px !important;
  text-align: center !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-return-button,
.feedback-panel.scoring .figma-scoring-loading .scoring-return-button {
  justify-self: start !important;
  min-height: 38px !important;
  margin-top: 4px !important;
}

@keyframes scoringScanSweep {
  0% { left: 18%; }
  100% { left: 82%; }
}

@keyframes scoringWaveDrift {
  0%, 100% {
    transform: scaleY(0.92);
    opacity: 0.78;
  }
  50% {
    transform: scaleY(1.08);
    opacity: 1;
  }
}

@keyframes scoringStepPulse {
  0%, 100% {
    box-shadow: 0 0 0 7px rgba(0, 163, 110, 0.14);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(0, 163, 110, 0.08);
  }
}

@keyframes scoringMiniWave {
  0%, 100% {
    transform: scaleY(0.72);
    opacity: 0.72;
  }
  50% {
    transform: scaleY(1.12);
    opacity: 1;
  }
}

@keyframes scoringSparkle {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@media (max-width: 520px) {
  #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-panel,
  .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-panel {
    height: 176px !important;
  }

  #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-metric-chips,
  .feedback-panel.scoring .figma-scoring-loading .scoring-metric-chips {
    gap: 8px !important;
  }

  #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-metric-chips span,
  .feedback-panel.scoring .figma-scoring-loading .scoring-metric-chips span {
    padding: 0 10px !important;
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .figma-scoring-loading .scoring-scan-beam,
  .figma-scoring-loading .scoring-waveform-bars b,
  .figma-scoring-loading .scoring-step.is-active > i,
  .figma-scoring-loading .mini-wave b,
  .figma-scoring-loading .scoring-status-line strong::before {
    animation: none !important;
  }
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
    background: #fffaf2;
  }

  .app-shell {
    display: block;
    min-height: 100vh;
  }

  .sidebar {
    display: none;
  }

  .main {
    width: 100%;
    min-width: 0;
    padding: 12px;
  }

  .view {
    min-width: 0;
  }

  .topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }

  .topbar p {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.35;
  }

  .topbar h1 {
    font-size: 30px;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .top-actions {
    display: flex;
    width: 100%;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .top-actions > * {
    flex: 0 0 auto;
  }

  .mobile-tabbar {
    display: grid;
  }

  .app-install-banner {
    display: none;
  }

  .panel,
  .question-card,
  .answer-workspace,
  .recorder,
  .question-browser,
  .feedback-panel,
  .practice-detail-hero,
  .practice-side-card,
  .type-card,
  .metric-card,
  .review-item,
  .course-card,
  .resource-item {
    border-radius: 8px !important;
  }

  .panel {
    padding: 14px;
  }

  .practice-dashboard-layout,
  .practice-detail-mode .practice-dashboard-layout,
  .practice-detail-mode .practice-dashboard-layout:has(.feedback-panel.speech-result-ready),
  .practice-detail-mode .practice-dashboard-layout:has(.feedback-panel.reading-report-mode),
  .stage-practice .practice-workbench,
  .stage-list .practice-workbench,
  .question-type-shell,
  .split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
  }

  .practice-left-rail,
  .practice-resizer,
  .skill-map,
  .practice-detail-hero > img,
  .estimated-score-card,
  .practice-detail-points {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading {
    padding: 16px;
    border-radius: 8px;
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading h2 {
    font-size: 28px;
    line-height: 1.12;
  }

  #practice:not(.practice-detail-mode) .type-card-grid,
  #practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card-grid,
  .practice-dashboard-layout .type-card-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  #practice:not(.practice-detail-mode) .type-card,
  #practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card,
  .practice-dashboard-layout .type-card {
    min-height: 84px;
    padding: 16px 14px 14px 72px;
  }

  #practice:not(.practice-detail-mode) .type-card::before,
  #practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card::before,
  .practice-dashboard-layout .type-card::before {
    top: 16px;
    left: 14px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  #practice:not(.practice-detail-mode) .type-card span,
  #practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card span,
  .practice-dashboard-layout .type-card span {
    font-size: 22px;
  }

  #practice:not(.practice-detail-mode) .type-card strong,
  #practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card strong,
  .practice-dashboard-layout .type-card strong {
    white-space: normal;
  }

  .practice-detail-hero {
    min-height: 0;
    margin-bottom: 12px;
    padding: 16px;
  }

  .practice-detail-copy h2 {
    font-size: 25px;
    line-height: 1.18;
  }

  .practice-detail-copy p {
    font-size: 14px;
    line-height: 1.55;
  }

  .stage-practice .question-browser {
    display: none;
  }

  .stage-practice .answer-stage {
    display: grid;
    gap: 12px;
  }

  .stage-list .question-browser {
    max-height: none;
    padding: 14px;
  }

  .stage-list .question-browser-head {
    align-items: center;
  }

  .stage-list .question-list-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .stage-list .question-list-tools > button {
    width: 100%;
  }

  .question-finder {
    gap: 10px;
  }

  .search-field {
    width: 100%;
  }

  .question-list {
    max-height: none;
    overflow: visible;
  }

  .question-row {
    min-height: 84px;
    padding: 12px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
  }

  .question-row .question-code {
    min-width: 66px;
  }

  .question-row-main strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
  }

  .practice-navigator {
    gap: 8px;
  }

  .question-card {
    padding: 16px;
  }

  .question-card h3 {
    font-size: 23px;
    line-height: 1.18;
  }

  .question-card p {
    font-size: 18px;
    line-height: 1.62;
  }

  .ra-mode-toolbar {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
  }

  .ra-mode-toolbar button {
    flex: 0 0 auto;
  }

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

  .question-tools .ghost-btn,
  .question-tools .primary-btn,
  .question-tools .secondary-btn {
    width: 100%;
    min-width: 0;
  }

  .ra-demo-player {
    padding: 12px;
  }

  .ra-demo-player-head {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
  }

  #raDemoSpeedSelect {
    width: 82px;
  }

  .ra-demo-player-controls {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  .practice-discussion {
    display: none;
  }

  .recorder {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .timer {
    justify-self: center;
    text-align: center;
  }

  .wave {
    min-height: 34px;
  }

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

  .recorder-actions button {
    width: 100%;
    min-height: 46px;
  }

  .feedback-panel {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .feedback-panel:not(.has-report) {
    display: none !important;
  }

  .feedback-panel.has-report {
    margin-top: 12px;
  }

  .feedback-list,
  .action-plan-list,
  .ai-breakdown,
  .solution-panel {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

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

  .report-actions button {
    width: 100%;
  }
}

.home-v2-desktop-trial > *,
.home-v2-mobile-trial > * {
  animation: home-section-rise 0.58s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.home-v2-desktop-trial > :nth-child(1),
.home-v2-mobile-trial > :nth-child(1) { animation-delay: 0.02s; }
.home-v2-desktop-trial > :nth-child(2),
.home-v2-mobile-trial > :nth-child(2) { animation-delay: 0.08s; }
.home-v2-desktop-trial > :nth-child(3),
.home-v2-mobile-trial > :nth-child(3) { animation-delay: 0.14s; }
.home-v2-mobile-trial > :nth-child(4) { animation-delay: 0.2s; }

@keyframes home-section-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.home-web-hero,
.home-web-card,
.home-web-metric,
.home-mobile-hero,
.home-mobile-section,
.home-mobile-metric {
  will-change: transform, box-shadow;
}

.home-web-card,
.home-web-metric,
.home-web-goal,
.home-mobile-section,
.home-mobile-metric {
  position: relative;
  overflow: hidden;
}

.home-web-card::after,
.home-web-metric::after,
.home-web-goal::after,
.home-mobile-section::after,
.home-mobile-metric::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.65), transparent 42%);
  transform: translateX(-18%);
  transition: opacity 0.28s ease, transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
  .home-web-card:hover::after,
  .home-web-metric:hover::after,
  .home-web-goal:hover::after,
  .home-mobile-section:hover::after,
  .home-mobile-metric:hover::after {
    opacity: 1;
    transform: translateX(0);
  }

  .home-web-metric:hover,
  .home-web-card:hover,
  .home-web-goal:hover {
    border-color: rgba(255, 255, 255, 0.92);
    transform: translateY(-3px);
  }

  .home-web-task:hover,
  .home-web-other button:hover,
  .home-web-quick button:hover,
  .home-web-posts button:hover {
    border-color: rgba(29, 29, 31, 0.14);
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.065);
  }

  .home-web-primary:hover,
  .home-web-compose button:hover {
    background: #000000;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  }

  .home-web-secondary:hover {
    border-color: #d1d1d6;
    background: #fbfbfd;
  }
}

.home-web-primary svg,
.home-web-secondary svg,
.home-web-task em,
.home-web-other em,
.home-web-quick em,
.home-web-posts em,
.home-mobile-task em,
.home-mobile-primary svg {
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease;
}

.home-web-primary:hover svg,
.home-web-secondary:hover svg,
.home-web-task:hover em,
.home-web-other button:hover em,
.home-web-quick button:hover em,
.home-web-posts button:hover em,
.home-mobile-task:hover em,
.home-mobile-primary:hover svg {
  transform: translateX(3px);
}

.home-web-metric i,
.home-mobile-metric i,
.home-web-weak-list i em {
  transform-origin: left center;
  animation: home-line-grow 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.home-web-metric:nth-child(1) i { animation-delay: 0.14s; }
.home-web-metric:nth-child(2) i { animation-delay: 0.2s; }
.home-web-metric:nth-child(3) i { animation-delay: 0.26s; }
.home-web-metric:nth-child(4) i { animation-delay: 0.32s; }

@keyframes home-line-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.home-web-goal-main i,
.home-mobile-ring {
  animation: home-ring-pop 0.82s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes home-ring-pop {
  from {
    opacity: 0;
    transform: scale(0.82) rotate(-12deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.home-web-chart .home-v2-multi > path,
.home-web-chart .home-v2-multi g path {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: home-chart-draw 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.home-web-chart .home-v2-multi g:nth-of-type(2) path { animation-delay: 0.08s; }
.home-web-chart .home-v2-multi g:nth-of-type(3) path { animation-delay: 0.16s; }

@keyframes home-chart-draw {
  to { stroke-dashoffset: 0; }
}

.home-web-task.active,
.home-mobile-task.active {
  box-shadow:
    inset 0 0 0 1px rgba(229, 229, 234, 0.72),
    0 12px 28px rgba(0, 0, 0, 0.045);
}

.home-web-task:focus-visible,
.home-web-primary:focus-visible,
.home-web-secondary:focus-visible,
.home-web-other button:focus-visible,
.home-web-quick button:focus-visible,
.home-web-posts button:focus-visible,
.home-mobile-primary:focus-visible,
.home-mobile-task:focus-visible,
.home-mobile-quick button:focus-visible {
  outline: 3px solid rgba(0, 122, 255, 0.28);
  outline-offset: 3px;
}

.home-v2-modal {
  backdrop-filter: blur(14px);
}

.home-v2-modal > div {
  transform: translateY(12px) scale(0.985);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.24s ease;
}

.home-v2-modal.open > div {
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .home-v2-desktop-trial *,
  .home-v2-desktop-trial *::before,
  .home-v2-desktop-trial *::after,
  .home-v2-mobile-trial *,
  .home-v2-mobile-trial *::before,
  .home-v2-mobile-trial *::after,
  .home-v2-modal,
  .home-v2-modal * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media (min-width: 981px) {
  body.view-practice .sidebar .brand {
    height: 56px;
    gap: 16px;
  }

  body.view-practice .sidebar .brand-copy strong {
    font-size: 23px !important;
    line-height: 29px !important;
  }

  body.view-practice .sidebar .exam-type-picker select {
    max-width: 136px;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  body.view-practice .sidebar .nav-list {
    gap: 12px;
    margin-top: 30px;
  }

  body.view-practice .sidebar .nav-link {
    width: 192px;
    min-height: 48px;
    padding: 0 14px;
    gap: 12px;
    font-size: 15.5px !important;
    line-height: 20px !important;
  }

  body.view-practice .sidebar .nav-link .icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  body.view-practice .sidebar-user-card strong {
    font-size: 15.5px !important;
  }

  body.view-practice .sidebar-user-card small {
    font-size: 12.5px !important;
  }

  #practice:not(.practice-detail-mode) .practice-dashboard-layout {
    grid-template-columns: minmax(228px, 244px) minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  #practice:not(.practice-detail-mode) .practice-side-card {
    width: 100% !important;
    padding: 22px 18px !important;
  }

  #practice:not(.practice-detail-mode) .practice-side-card h3 {
    margin-bottom: 18px !important;
    font-size: 28px !important;
    line-height: 34px !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list {
    gap: 12px !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    min-height: 60px !important;
    padding: 10px 12px !important;
    gap: 12px !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button span {
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button svg {
    width: 20px !important;
    height: 20px !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button strong {
    font-size: 17px !important;
    line-height: 22px !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button em {
    min-width: 42px !important;
    height: 30px !important;
    font-size: 15px !important;
    line-height: 30px !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  }
}

@media (max-width: 420px) {
  .main {
    padding: 10px;
  }

  .topbar h1 {
    font-size: 27px;
  }

  .question-card h3,
  .practice-detail-copy h2 {
    font-size: 22px;
  }

  .question-card p {
    font-size: 17px;
  }

  .question-tools,
  .recorder-actions,
  .report-actions {
    grid-template-columns: 1fr;
  }

  .ra-demo-player-head,
  .ra-demo-player-controls {
    grid-template-columns: 1fr;
  }

  #raDemoSpeedSelect,
  #raDemoProgress {
    width: 100%;
  }
}

html[data-font-scale="compact"] {
  --font-step: 0.94;
}

html[data-font-scale="large"] {
  --font-step: 1.08;
}

#practice:not(.practice-detail-mode) .practice-top-grid,
#practice:not(.practice-detail-mode) .practice-data-card,
#practice:not(.practice-detail-mode) .training-mode-strip,
#practice:not(.practice-detail-mode) .practice-flow-summary,
#practice:not(.practice-detail-mode) .practice-stats,
#practice:not(.practice-detail-mode) .skill-filter,
#practice:not(.practice-detail-mode) .compact-select {
  display: none !important;
}

#practice:not(.practice-detail-mode) .practice-dashboard-layout {
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: clamp(18px, 1.8vw, 28px);
  align-items: start;
}

#practice:not(.practice-detail-mode) .practice-left-rail {
  position: sticky;
  top: 92px;
}

#practice:not(.practice-detail-mode) .practice-side-card {
  padding: clamp(18px, 1.4vw, 24px);
  border-radius: 22px;
  background: linear-gradient(180deg, #fffefb, #fff8e8);
}

#practice:not(.practice-detail-mode) .practice-side-card h3 {
  margin-bottom: 16px;
  font-size: clamp(22px, 0.8vw + 14px, 30px);
}

#practice:not(.practice-detail-mode) .practice-category-list {
  gap: 12px;
}

#practice:not(.practice-detail-mode) .practice-category-list button {
  min-height: 66px;
  padding: 0 14px;
  border: 1px solid rgba(209, 144, 0, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 16px;
}

#practice:not(.practice-detail-mode) .practice-category-list button span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  color: #b67900;
  background: #fff2c9;
}

#practice:not(.practice-detail-mode) .practice-category-list button strong {
  font-size: 17px;
}

#practice:not(.practice-detail-mode) .practice-category-list button em {
  min-width: 34px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #6b5948;
  background: #fffaf0;
  font-style: normal;
  font-weight: 950;
}

#practice:not(.practice-detail-mode) .practice-category-list button.active,
#practice:not(.practice-detail-mode) .practice-category-list button:hover {
  color: #201815;
  border-color: rgba(209, 144, 0, 0.45);
  background: #fff3cf;
  box-shadow: 0 12px 26px rgba(82, 55, 20, 0.08);
}

#practice:not(.practice-detail-mode) .practice-category-list button.active span,
#practice:not(.practice-detail-mode) .practice-category-list button:hover span {
  color: #211916;
  background: #f6c542;
}

#practice:not(.practice-detail-mode) .practice-panel > .panel-heading {
  display: flex;
  margin-bottom: clamp(16px, 1.5vw, 24px);
  padding: clamp(18px, 1.5vw, 26px);
  border: 1px solid rgba(209, 144, 0, 0.2);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 0%, rgba(247, 198, 74, 0.2), transparent 34%),
    linear-gradient(135deg, #fffefb, #fff7e0);
}

#practice:not(.practice-detail-mode) .practice-panel > .panel-heading h2 {
  margin: 0;
  font-size: clamp(30px, 1.4vw + 16px, 44px);
}

#practice:not(.practice-detail-mode) .type-group + .type-group {
  margin-top: clamp(18px, 1.8vw, 28px);
}

#practice:not(.practice-detail-mode) .type-group-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding: 0 2px;
}

#practice:not(.practice-detail-mode) .type-group-title span {
  font-size: clamp(22px, 0.9vw + 14px, 32px);
}

#practice:not(.practice-detail-mode) .type-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 1.2vw, 20px);
}

#practice:not(.practice-detail-mode) .type-card {
  min-height: clamp(132px, 9vw, 168px);
  padding: 22px 22px 18px 94px;
  border-radius: 22px;
  box-shadow: 0 16px 34px rgba(82, 55, 20, 0.06);
}

#practice:not(.practice-detail-mode) .type-card::before {
  width: 58px;
  height: 58px;
  border-radius: 18px;
}

#practice:not(.practice-detail-mode) .type-card span {
  font-size: clamp(24px, 0.9vw + 15px, 34px);
}

#practice:not(.practice-detail-mode) .type-card strong {
  font-size: clamp(16px, 0.32vw + 13px, 20px);
}

#practice:not(.practice-detail-mode) .type-card-grid,
#practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, min(100%, 292px)));
  gap: clamp(14px, 1.2vw, 20px);
  justify-content: start;
}

#practice:not(.practice-detail-mode) .type-card,
#practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card {
  min-height: clamp(124px, 7.5vw, 148px);
  padding: 20px 18px 16px 86px;
  border-radius: 20px;
}

#practice:not(.practice-detail-mode) .type-card::before,
#practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card::before {
  width: 52px;
  height: 52px;
  border-radius: 17px;
}

#practice:not(.practice-detail-mode) .type-card span,
#practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card span {
  font-size: clamp(22px, 0.65vw + 15px, 30px);
}

#practice:not(.practice-detail-mode) .type-card strong,
#practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 980px) {
  #practice:not(.practice-detail-mode) .practice-dashboard-layout {
    grid-template-columns: 1fr;
  }

  #practice:not(.practice-detail-mode) .practice-left-rail {
    position: static;
  }

  #loginPanel .login-choice-grid,
  #loginPanel .phone-login-card {
    grid-template-columns: 1fr;
  }

  #loginPanel .phone-code-row {
    grid-template-columns: 1fr;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 30% 0%, rgba(246, 197, 66, 0.18), transparent 36%),
    #fffaf2;
  font-family:
    "Microsoft YaHei",
    "PingFang SC",
    Arial,
    sans-serif;
  font-size: calc(16px * var(--font-step));
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.answer-page-back-button {
  display: none;
}

.app-shell {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  width: 76px;
  height: calc(100vh - 48px);
  margin: 24px;
  padding: 24px 0;
  overflow: hidden;
  color: #777169;
  background: #131211;
  border-radius: 26px;
  box-shadow: 0 18px 42px -12px rgba(46, 38, 26, 0.14);
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
}

.brand {
  display: grid;
  width: 76px;
  height: 40px;
  place-items: center;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
}

.brand-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.brand-copy strong {
  line-height: 1;
  font-size: 21px;
}

.exam-type-picker {
  display: block;
}

.exam-type-picker select {
  width: 100%;
  max-width: 150px;
  min-height: 30px;
  padding: 0 28px 0 10px;
  border: 1px solid rgba(246, 197, 66, 0.25);
  border-radius: 999px;
  color: #fff0ba;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 800;
  outline: 0;
  cursor: pointer;
}

.exam-type-picker select option {
  color: #211916;
}

.brand-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: #f6c542;
  box-shadow: none;
  object-fit: contain;
}

.brand-icon * {
  pointer-events: none;
}

.nav-list {
  display: grid;
  justify-items: center;
  gap: 30px;
  margin-top: 56px;
}

.nav-group {
  margin: 10px 8px 2px;
  color: rgba(249, 255, 252, 0.42);
  font-size: 12px;
  font-weight: 900;
}

.nav-link {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  width: 50px;
  min-height: 56px;
  padding: 0;
  color: #777169;
  text-decoration: none;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 750;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #bdb5aa;
  background: #2e211a;
  box-shadow: none;
}

.nav-link:hover {
  transform: translateY(-1px);
}

.icon {
  display: none;
}

.icon svg,
[data-category-icon] svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-link.active .icon,
.nav-link:hover .icon {
  color: inherit;
  background: transparent;
}

.sidebar-upgrade-card {
  margin-top: auto;
  padding: 18px;
  border: 1px solid rgba(246, 197, 66, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(246, 197, 66, 0.18), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.04);
  display: grid;
  gap: 10px;
}

.sidebar-upgrade-card strong {
  color: #fff3c2;
}

.sidebar-upgrade-card span {
  color: rgba(249, 255, 252, 0.68);
  line-height: 1.55;
  font-size: 13px;
}

.sidebar-upgrade-card button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  color: #211916;
  background: linear-gradient(180deg, #ffe080, #f6b800);
  font-weight: 950;
}

.sidebar-user-card {
  margin-top: auto;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  color: #bdb5aa;
  background: rgba(46, 33, 26, 0.74);
  text-align: center;
}

.sidebar-user-card img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: contain;
  filter: none;
}

.sidebar-user-card span {
  display: none;
}

.sidebar-user-card strong {
  font-size: 15px;
}

.sidebar-user-card small {
  color: rgba(249, 255, 252, 0.68);
}

.sidebar-user-card b {
  display: none;
}

.app-module-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 18px;
}

.module-tile {
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  text-align: left;
  display: grid;
  align-content: space-between;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.module-tile span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.module-tile strong {
  font-size: 16px;
}

.module-tile.active,
.module-tile:hover {
  color: #211916;
  border-color: #f6c542;
  background: linear-gradient(180deg, #ffe081, #f6b800);
  box-shadow: 0 12px 26px rgba(180, 116, 0, 0.16);
  transform: translateY(-1px);
}

.module-tile.active span,
.module-tile:hover span {
  color: rgba(33, 25, 22, 0.64);
}

.section-subnav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 16px;
  padding-bottom: 4px;
}

.section-subnav button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-weight: 900;
}

.section-subnav button.active {
  color: #fff;
  border-color: var(--mint-dark);
  background: var(--mint-dark);
}

.coach-box {
  margin-top: auto;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.coach-box h2,
.panel h2,
.section-heading h2,
.consult-dialog h2 {
  margin: 0;
  letter-spacing: 0;
}

.coach-box p {
  color: rgba(249, 255, 252, 0.74);
  line-height: 1.7;
}

.wechat-qr-placeholder {
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  margin: 12px 0;
  border: 1px solid #e2c37f;
  border-radius: 8px;
  color: #9c6500;
  background:
    linear-gradient(90deg, rgba(185, 122, 0, 0.16) 10px, transparent 10px) 0 0 / 22px 22px,
    linear-gradient(rgba(185, 122, 0, 0.16) 10px, transparent 10px) 0 0 / 22px 22px,
    #fffaf0;
  font-weight: 950;
}

.main {
  padding: clamp(18px, 2.1vw, 30px) clamp(22px, 3vw, 42px);
  min-width: 0;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.topbar h1 {
  max-width: 780px;
  margin: 4px 0 0;
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.08;
  letter-spacing: 0;
}

.top-actions,
.recorder-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.top-actions {
  justify-content: flex-end;
}

.font-scale-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 10px;
  border: 1px solid rgba(234, 223, 202, 0.95);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 22px rgba(82, 55, 20, 0.06);
}

.font-scale-label {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #211916;
  background: #f6c542;
  font-size: 17px;
  font-weight: 950;
  box-shadow: 0 6px 14px rgba(198, 133, 0, 0.14);
}

.font-scale-control input[type="range"] {
  width: clamp(92px, 7vw, 132px);
  height: 6px;
  border-radius: 999px;
  accent-color: #c78300;
  cursor: pointer;
}

.font-scale-control output {
  min-width: 42px;
  color: #6f5d4f;
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff;
  background: #241b18;
  font-size: 13px;
  font-weight: 900;
}

.membership-badge {
  background: var(--coral);
}

.teacher-only.is-hidden {
  display: none;
}

.admin-access-only.is-hidden,
.admin-only.is-hidden {
  display: none !important;
}

#admin .panel-heading p:not(.eyebrow) {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

#admin .admin-tabs {
  padding: 8px;
  border: 1px solid rgba(209, 144, 0, 0.18);
  border-radius: 18px;
  background: rgba(255, 250, 240, 0.78);
}

#admin .admin-tab {
  border-radius: 14px;
}

#admin .admin-tab.active {
  box-shadow: 0 12px 26px rgba(82, 55, 20, 0.12);
}

.teacher-upload-zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  margin: 0 0 18px;
  padding: clamp(16px, 1.4vw, 24px);
  border: 1px dashed rgba(209, 144, 0, 0.48);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(247, 198, 74, 0.18), transparent 34%),
    linear-gradient(135deg, #fffefb, #fff4d8);
}

.teacher-upload-zone strong {
  display: block;
  margin-bottom: 5px;
  color: #201815;
  font-size: clamp(19px, 0.5vw + 15px, 25px);
}

.teacher-upload-zone p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.teacher-file-picker {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(209, 144, 0, 0.34);
  border-radius: 14px;
  color: #201815;
  background: #fff;
  font-weight: 900;
  cursor: pointer;
}

.teacher-file-picker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.teacher-upload-preview {
  grid-column: 1 / -1;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 16px;
  color: #7b5600;
  background: rgba(255, 255, 255, 0.76);
  font-weight: 850;
}

.bulk-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.bulk-preview-head strong {
  margin: 0;
  font-size: 18px;
}

.bulk-preview-head span {
  color: var(--muted);
}

.bulk-preview-table {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.bulk-preview-table article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto) 72px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(209, 144, 0, 0.16);
  border-radius: 14px;
  background: #fff;
}

.bulk-preview-table b {
  display: block;
  color: #201815;
}

.bulk-preview-table small,
.bulk-preview-table p {
  display: block;
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.bulk-preview-table select {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(209, 144, 0, 0.28);
  border-radius: 12px;
  background: #fffaf0;
  font: inherit;
  font-weight: 850;
}

.bulk-preview-table article > span {
  justify-self: end;
  padding: 6px 10px;
  border-radius: 999px;
  color: #7b5600;
  background: #fff3cf;
  font-weight: 950;
}

.topbar-hidden-control {
  display: none !important;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.primary-btn,
.secondary-btn,
.ghost-btn {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 800;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.primary-btn {
  color: #fff;
  background: var(--mint-dark);
  box-shadow: 0 10px 24px rgba(182, 121, 0, 0.24);
}

.secondary-btn {
  color: #fff;
  background: #241b18;
}

.ghost-btn {
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
}

.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover {
  transform: translateY(-1px);
}

.primary-btn:disabled,
.ghost-btn:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
  box-shadow: none;
}

.small {
  min-height: 36px;
  padding: 0 12px;
}

.compact {
  min-height: 34px;
  padding: 0 12px;
  font-size: 14px;
}

.full {
  width: 100%;
}

.view {
  display: none;
}

.active-view {
  display: block;
}

@media (max-width: 760px) {
  html:has(body.view-agent),
  body.view-agent {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    background: linear-gradient(180deg, #ffd52a 0%, #ffe98a 34%, #fff4c9 68%, #fffaf0 100%);
  }

  body.view-agent {
    padding: 0 !important;
  }

  body.view-agent .app-shell {
    display: block !important;
    width: 100vw;
    max-width: none;
    min-width: 0;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  body.view-agent .app-shell > .sidebar,
  body.view-agent .app-shell > .answer-page-back-button,
  body.view-agent .topbar,
  body.view-agent > .mobile-primary-dock,
  body.view-agent > .app-install-banner {
    display: none !important;
  }

  body.view-agent .app-shell > .main {
    display: block !important;
    width: 100vw;
    max-width: none;
    min-width: 0;
    min-height: 100dvh;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
    background: transparent;
  }

  body.view-agent #agent.ai-agent-view,
  body.view-agent #agent.ai-agent-view.active-view {
    position: relative;
    display: block;
    width: 100vw;
    max-width: none;
    min-width: 0;
    height: 100dvh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #ffd52a 0%, #ffe98a 34%, #fff4c9 68%, #fffaf0 100%);
  }

  body.view-agent #agent .ai-agent-root {
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    margin: 0 auto;
    overflow: hidden;
  }

  body.view-agent #agent .ai-agent-screen {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    color: #17212f;
    background: linear-gradient(180deg, #ffd52a 0%, #ffe98a 34%, #fff4c9 68%, #fffaf0 100%);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  }

  body.view-agent #agent .ai-agent-screen *,
  body.view-agent #agent .ai-agent-screen *::before,
  body.view-agent #agent .ai-agent-screen *::after {
    box-sizing: border-box;
  }

  body.view-agent #agent .ai-agent-welcome,
  body.view-agent #agent .ai-agent-plan {
    position: absolute;
    inset: 0;
    width: 390px;
    max-width: 100vw;
    height: 100dvh;
  }

  body.view-agent #agent .ai-agent-screen.ai-agent-welcome,
  body.view-agent #agent .ai-agent-screen.ai-agent-plan {
    position: relative;
    inset: auto;
    width: min(390px, 100vw);
    margin: 0 auto;
  }

  body.view-agent #agent :is(button, input) {
    appearance: none;
    margin: 0;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  body.view-agent #agent button {
    border: 0;
    cursor: pointer;
  }

  body.view-agent #agent button:active {
    transform: scale(0.98);
  }

  body.view-agent #agent img {
    display: block;
    max-width: none;
  }

  body.view-agent #agent .ai-agent-header {
    position: absolute;
    left: 20px;
    top: 18px;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 56px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    background: rgba(255, 254, 250, 0.52);
    box-shadow: 0 12px 26px -8px rgba(56, 41, 8, 0.12);
    backdrop-filter: blur(24px) saturate(1.22);
    -webkit-backdrop-filter: blur(24px) saturate(1.22);
  }

  body.view-agent #agent .ai-agent-welcome > .ai-agent-header.is-welcome-clean {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.view-agent #agent .ai-agent-welcome > .ai-agent-header.is-welcome-clean > :is(.ai-agent-back, .ai-agent-memory) {
    pointer-events: auto;
  }

  body.view-agent #agent .ai-agent-welcome > .ai-agent-header.is-welcome-clean > .ai-agent-header-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body.view-agent #agent :is(.ai-agent-back, .ai-agent-memory) {
    position: absolute;
    top: 7px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 20px;
    color: rgba(32, 40, 51, 0.88);
    background: rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }

  body.view-agent #agent .ai-agent-back { left: 7px; }
  body.view-agent #agent .ai-agent-memory { right: 7px; }
  body.view-agent #agent .ai-agent-memory.is-active {
    color: #0f9178;
    border-color: rgba(16, 157, 130, 0.26);
    background: rgba(222, 252, 241, 0.78);
  }

  body.view-agent #agent :is(.ai-agent-back, .ai-agent-memory) img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-header-title {
    max-width: 220px;
    overflow: hidden;
    color: rgba(23, 29, 38, 0.96);
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-composer {
    position: absolute;
    left: 20px;
    top: auto;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    right: 20px;
    width: auto;
    max-width: 620px;
    margin: 0 auto;
    height: 64px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 32px;
    background: rgba(255, 254, 250, 0.58);
    box-shadow: 0 12px 26px -8px rgba(56, 41, 8, 0.12);
    backdrop-filter: blur(28px) saturate(1.24);
    -webkit-backdrop-filter: blur(28px) saturate(1.24);
  }

  body.view-agent #agent :is(.ai-agent-attach, .ai-agent-voice, .ai-agent-send) {
    position: absolute;
    display: grid;
    place-items: center;
    padding: 0;
    color: rgba(39, 49, 62, 0.82);
    background: rgba(255, 255, 255, 0.46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
  }

  body.view-agent #agent .ai-agent-attach {
    left: 9px;
    top: 12px;
    width: 38px;
    height: 38px;
    border-radius: 19px;
  }

  body.view-agent #agent :is(.ai-agent-voice, .ai-agent-send) {
    left: auto;
    right: 9px;
    top: 9px;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    color: #17212f;
    background: linear-gradient(180deg, #ffe45f, #ffc928);
    box-shadow: 0 9px 18px -10px rgba(151, 103, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  }

  body.view-agent #agent :is(.ai-agent-attach, .ai-agent-voice, .ai-agent-send) img {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-send {
    display: none;
  }

  body.view-agent #agent .ai-agent-composer.has-text .ai-agent-voice {
    display: none;
  }

  body.view-agent #agent .ai-agent-composer.has-text .ai-agent-send {
    display: grid;
  }

  body.view-agent #agent .ai-agent-input {
    position: absolute;
    left: 57px;
    top: 8px;
    height: 48px;
    min-width: 0;
    right: 58px;
    width: auto;
    padding: 0;
    border: 0;
    outline: 0;
    color: rgba(25, 33, 44, 0.96);
    background: transparent;
    font-size: 14px;
    line-height: 20px;
  }

  body.view-agent #agent .ai-agent-input::placeholder {
    color: rgba(81, 91, 105, 0.58);
  }

  body.view-agent #agent .ai-agent-file {
    display: none;
  }

  body.view-agent #agent .ai-agent-voice.is-listening {
    animation: ai-agent-listening 900ms ease-in-out infinite alternate;
  }

  @keyframes ai-agent-listening {
    from { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(20, 166, 138, 0.2); }
    to { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(20, 166, 138, 0); }
  }

  body.view-agent #agent .ai-agent-aura {
    position: absolute;
    left: 120px;
    top: 118px;
    z-index: 1;
    width: 150px;
    height: 150px;
    pointer-events: none;
  }

  body.view-agent #agent .ai-agent-aura img {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
  }

  body.view-agent #agent .ai-agent-orb {
    position: absolute;
    left: 137px;
    top: 135px;
    z-index: 2;
    width: 116px;
    height: 116px;
    pointer-events: none;
  }

  body.view-agent #agent .ai-agent-orb img {
    position: absolute;
    inset: -8% -18% -28%;
    width: 136%;
    height: 136%;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-core {
    position: absolute;
    left: 151px;
    top: 149px;
    z-index: 3;
    width: 88px;
    height: 88px;
    overflow: hidden;
  }

  body.view-agent #agent .ai-agent-core img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.view-agent #agent .ai-agent-hero {
    position: absolute;
    left: 152px;
    top: 150px;
    z-index: 4;
    width: 86px;
    height: 86px;
    overflow: hidden;
    border-radius: 43px;
  }

  body.view-agent #agent .ai-agent-hero :is(img, video) {
    position: absolute;
    left: -19.44%;
    top: -11.11%;
    width: 138.89%;
    height: 138.89%;
    object-fit: cover;
  }

  body.view-agent #agent .ai-agent-online {
    position: absolute;
    left: 216px;
    top: 158px;
    z-index: 6;
    width: 16px;
    height: 16px;
  }

  body.view-agent #agent .ai-agent-online img {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-trust {
    position: absolute;
    left: 100px;
    top: 255px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 190px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    color: rgba(64, 72, 82, 0.76);
    background: rgba(255, 255, 255, 0.48);
    box-shadow: 0 12px 26px -8px rgba(56, 41, 8, 0.12);
    font-size: 11px;
    font-weight: 650;
    line-height: 16px;
    backdrop-filter: blur(20px) saturate(1.18);
    -webkit-backdrop-filter: blur(20px) saturate(1.18);
  }

  body.view-agent #agent .ai-agent-trust img {
    width: 6px;
    height: 6px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-greeting {
    position: absolute;
    left: 20px;
    top: 294px;
    width: 350px;
    height: 38px;
    margin: 0;
    overflow: hidden;
    color: rgba(20, 27, 37, 0.98);
    font-size: 28px;
    font-weight: 850;
    line-height: 38px;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-support {
    position: absolute;
    left: 36px;
    top: 340px;
    width: 318px;
    min-height: 44px;
    margin: 0;
    color: rgba(67, 76, 89, 0.72);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
  }

  body.view-agent #agent .ai-agent-chips {
    position: absolute;
    left: 20px;
    top: 382px;
    display: grid;
    grid-template-columns: repeat(3, 108px);
    gap: 13px;
    width: 350px;
    height: 34px;
  }

  body.view-agent #agent .ai-agent-chips > :is(button, span) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 17px;
    color: rgba(43, 52, 65, 0.82);
    background: rgba(255, 254, 250, 0.54);
    box-shadow: 0 12px 26px -8px rgba(56, 41, 8, 0.12);
    font-size: 12px;
    font-weight: 680;
    line-height: 17px;
    white-space: nowrap;
    backdrop-filter: blur(18px) saturate(1.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.16);
  }

  body.view-agent #agent .ai-agent-chips img {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-recommendation {
    position: absolute;
    left: 20px;
    top: 448px;
    width: 350px;
    height: 96px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 26px;
    color: rgba(35, 44, 56, 0.9);
    background: rgba(255, 254, 250, 0.55);
    box-shadow: 0 12px 26px -8px rgba(56, 41, 8, 0.12);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    text-align: left;
  }

  body.view-agent #agent .ai-agent-recommendation-art {
    position: absolute;
    left: 12px;
    top: 17px;
    width: 62px;
    height: 62px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 21px;
    background: #fff8e8;
    box-shadow: 0 10px 22px -16px rgba(112, 75, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  body.view-agent #agent .ai-agent-recommendation-art > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
  }

  body.view-agent #agent .ai-agent-recommendation > small {
    position: absolute;
    left: 88px;
    top: 14px;
    width: 190px;
    color: #14a38a;
    font-size: 11px;
    font-weight: 500;
    line-height: 17px;
  }

  body.view-agent #agent .ai-agent-recommendation > strong {
    position: absolute;
    left: 88px;
    top: 33px;
    width: 206px;
    overflow: hidden;
    color: #1c262e;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-recommendation > em {
    position: absolute;
    left: 88px;
    top: 60px;
    width: 206px;
    overflow: hidden;
    color: #6b7885;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-recommendation > .ai-agent-chevron {
    position: absolute;
    left: 313px;
    top: 37px;
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-prompt-label {
    position: absolute;
    left: 20px;
    top: 557px;
    width: 350px;
    height: 18px;
    margin: 0;
    color: #5c6b75;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
  }

  body.view-agent #agent .ai-agent-prompts {
    position: absolute;
    left: 20px;
    top: 578px;
    display: grid;
    grid-template-rows: repeat(3, 48px);
    gap: 8px;
    width: 350px;
    height: 160px;
  }

  body.view-agent #agent .ai-agent-prompt {
    position: relative;
    width: 350px;
    height: 48px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    color: #29363d;
    background: rgba(255, 254, 250, 0.6);
    box-shadow: 0 7px 18px -8px rgba(61, 46, 10, 0.07), inset 0 1px 1px rgba(255, 255, 255, 0.72);
    text-align: left;
    backdrop-filter: blur(20px) saturate(1.18);
    -webkit-backdrop-filter: blur(20px) saturate(1.18);
  }

  body.view-agent #agent .ai-agent-prompt > span {
    position: absolute;
    left: 51px;
    top: 11px;
    width: 240px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-prompt > .ai-agent-prompt-icon {
    position: absolute;
    left: 15px;
    top: 12px;
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-prompt > .ai-agent-prompt-chevron {
    position: absolute;
    left: 315px;
    top: 14px;
    width: 18px;
    height: 18px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-loading {
    position: absolute;
    left: 100px;
    top: 704px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 17px;
    color: #4d666e;
    background: rgba(255, 254, 250, 0.72);
    box-shadow: 0 7px 18px -8px rgba(61, 46, 10, 0.1);
    font-size: 11px;
    font-weight: 500;
    line-height: 17px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  body.view-agent #agent .ai-agent-loading b {
    display: block;
    margin: 0;
    font: inherit;
  }

  body.view-agent #agent .ai-agent-user-bubble {
    position: absolute;
    left: 88px;
    top: 126px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 238px;
    height: 54px;
    padding: 0 18px;
    overflow: hidden;
    border: 0;
    border-radius: 23px;
    color: #ffffff;
    background: rgba(26, 173, 145, 0.92);
    box-shadow: 0 8px 18px -6px rgba(10, 84, 71, 0.18);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    text-align: right;
  }

  body.view-agent #agent .ai-agent-user-bubble span {
    width: 202px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-user-bubble-avatar {
    position: absolute;
    left: 334px;
    top: 136px;
    z-index: 5;
    display: block;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 8px 16px -10px rgba(37, 54, 63, 0.3);
  }

  body.view-agent #agent .ai-agent-user-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: rgba(255, 255, 255, 0.58);
    background-image: var(--ai-agent-user-avatar), url("./assets/xingxing-logo-transparent-512.webp?v=startup-performance-p0-20260723");
    background-position: center;
    background-size: cover;
  }

  body.view-agent #agent .ai-agent-plan-avatar {
    position: absolute;
    left: 20px;
    top: 200px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    overflow: visible;
  }

  body.view-agent #agent .ai-agent-plan-avatar > span {
    position: absolute;
    inset: 0;
    width: 46px;
    height: 46px;
  }

  body.view-agent #agent .ai-agent-plan-avatar > span img {
    width: 46px;
    height: 46px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-plan-avatar > div {
    position: absolute;
    left: 6px;
    top: 6px;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 17px;
  }

  body.view-agent #agent .ai-agent-plan-avatar > div :is(img, video) {
    position: absolute;
    left: -19.44%;
    top: -11.11%;
    width: 138.89%;
    height: 138.89%;
    object-fit: cover;
  }

  body.view-agent #agent .ai-agent-reply {
    position: absolute;
    left: 74px;
    top: 190px;
    width: 296px;
    height: 76px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    color: #1f2930;
    background: rgba(255, 254, 250, 0.55);
    box-shadow: 0 12px 26px -8px rgba(56, 41, 8, 0.12);
    backdrop-filter: blur(22px) saturate(1.18);
    -webkit-backdrop-filter: blur(22px) saturate(1.18);
  }

  body.view-agent #agent .ai-agent-reply small {
    position: absolute;
    left: 17px;
    top: 11px;
    width: 180px;
    color: #14a68a;
    font-size: 11px;
    font-weight: 500;
    line-height: 17px;
  }

  body.view-agent #agent .ai-agent-reply strong {
    position: absolute;
    left: 17px;
    top: 32px;
    width: 250px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-reply em {
    position: absolute;
    left: 17px;
    top: 54px;
    width: 210px;
    overflow: hidden;
    color: #737d85;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-plan-card {
    position: absolute;
    left: 20px;
    top: 282px;
    width: 350px;
    height: 408px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 30px;
    color: rgba(35, 44, 56, 0.9);
    background: rgba(255, 254, 250, 0.54);
    box-shadow: 0 12px 26px -8px rgba(56, 41, 8, 0.12);
    backdrop-filter: blur(26px) saturate(1.2);
    -webkit-backdrop-filter: blur(26px) saturate(1.2);
  }

  body.view-agent #agent .ai-agent-plan-card::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 74px;
    width: 310px;
    height: 1px;
    background: rgba(80, 88, 99, 0.1);
  }

  body.view-agent #agent .ai-agent-plan-title {
    position: absolute;
    left: 19px;
    top: 17px;
    max-width: 210px;
    height: 27px;
    margin: 0;
    overflow: hidden;
    color: rgba(23, 30, 40, 0.96);
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-plan-basis {
    position: absolute;
    left: 19px;
    top: 46px;
    max-width: 210px;
    height: 18px;
    overflow: hidden;
    color: #6e7a82;
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-gain {
    position: absolute;
    left: 243px;
    top: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    color: #0f9178;
    background: rgba(212, 250, 235, 0.82);
    border-color: rgba(33, 176, 145, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
  }

  body.view-agent #agent .ai-agent-timeline {
    display: none;
  }

  body.view-agent #agent .ai-agent-tasks {
    position: absolute;
    left: 19px;
    right: 19px;
    top: 87px;
    bottom: 121px;
    z-index: 2;
    display: grid;
    grid-auto-rows: 60px;
    align-content: start;
    gap: 10px;
    width: auto;
    height: auto;
    padding-right: 3px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(44, 145, 124, 0.28) transparent;
    scrollbar-width: thin;
  }

  body.view-agent #agent .ai-agent-tasks::-webkit-scrollbar {
    width: 4px;
  }

  body.view-agent #agent .ai-agent-tasks::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(44, 145, 124, 0.28);
  }

  body.view-agent #agent .ai-agent-task,
  body.view-agent #agent .ai-agent-task:nth-child(1),
  body.view-agent #agent .ai-agent-task:nth-child(2),
  body.view-agent #agent .ai-agent-task:nth-child(3) {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 60px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.48);
    text-align: left;
  }

  body.view-agent #agent .ai-agent-task-step {
    position: absolute;
    left: -1px;
    top: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    color: #ffffff;
    background: #18ad91;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
  }

  body.view-agent #agent .ai-agent-task:nth-child(2) .ai-agent-task-step { background: #55c6ad; }
  body.view-agent #agent .ai-agent-task:nth-child(3) .ai-agent-task-step { background: #79b6a8; }
  body.view-agent #agent .ai-agent-task:nth-child(4) .ai-agent-task-step { background: #63a99a; }
  body.view-agent #agent .ai-agent-task:nth-child(5) .ai-agent-task-step { background: #4f8f83; }

  body.view-agent #agent .ai-agent-task-step img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-task-copy {
    position: absolute;
    left: 49px;
    top: 7px;
    width: 180px;
    height: 47px;
  }

  body.view-agent #agent .ai-agent-task-copy :is(strong, span, small) {
    display: block;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-task-copy strong {
    color: #242e36;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
  }

  body.view-agent #agent .ai-agent-task-copy :is(span, small) {
    margin-top: 5px;
    color: #707d85;
    font-size: 10px;
    font-weight: 520;
    line-height: 14px;
  }

  body.view-agent #agent .ai-agent-task-time {
    position: absolute;
    left: 237px;
    top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 26px;
    border-radius: 13px;
    color: #475c66;
    background: rgba(255, 255, 255, 0.52);
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-evidence {
    position: absolute;
    left: 19px;
    top: 299px;
    display: flex;
    align-items: center;
    width: 310px;
    height: 36px;
    padding: 0 14px;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    color: #755e29;
    background: rgba(252, 245, 199, 0.75);
    font-size: 10px;
    font-weight: 500;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-evidence img {
    width: 17px;
    height: 17px;
    margin-right: 8px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-task-scroll-hint {
    color: #0f9178;
    font: inherit;
    font-weight: 720;
  }

  body.view-agent #agent .ai-agent-plan-start {
    position: absolute;
    left: 19px;
    top: 347px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 310px;
    height: 48px;
    padding: 0 18px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(90deg, rgba(13, 176, 145, 0.9), rgba(64, 204, 171, 0.9));
    box-shadow: 0 12px 26px -5px rgba(8, 46, 38, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.86);
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
  }

  body.view-agent #agent .ai-agent-plan-start img {
    position: absolute;
    left: 266px;
    top: 15px;
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-plan-start:disabled {
    opacity: 0.64;
  }

  body.view-agent #agent .ai-agent-plan-summary {
    display: none;
  }

  body.view-agent #agent .ai-agent-loop-note {
    position: absolute;
    left: 44px;
    top: 706px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 302px;
    height: 34px;
    padding: 0 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 17px;
    color: rgba(67, 76, 88, 0.68);
    background: rgba(255, 254, 250, 0.52);
    box-shadow: 0 12px 26px -8px rgba(56, 41, 8, 0.12);
    font-size: 10.5px;
    font-weight: 580;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(18px) saturate(1.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.16);
  }

  body.view-agent #agent .ai-agent-loop-note img {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-chat-exit {
    position: absolute;
    left: 14px;
    top: calc(12px + env(safe-area-inset-top, 0px));
    z-index: 35;
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 50%;
    color: rgba(38, 52, 60, 0.72);
    background: rgba(255, 254, 250, 0.42);
    box-shadow: 0 10px 24px -16px rgba(70, 48, 3, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
  }

  body.view-agent #agent .ai-agent-chat-exit img {
    width: 17px;
    height: 17px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-chat-thread {
    position: absolute;
    left: 20px;
    top: calc(64px + env(safe-area-inset-top, 0px));
    right: 20px;
    width: auto;
    max-width: 620px;
    margin: 0 auto;
    height: auto;
    bottom: calc(94px + env(safe-area-inset-bottom, 0px));
    padding: 1px 2px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.view-agent #agent .ai-agent-chat-thread::-webkit-scrollbar {
    display: none;
  }

  body.view-agent #agent .ai-agent-chat-row {
    display: flex;
    align-items: flex-end;
    width: 100%;
    margin: 0 0 12px;
  }

  body.view-agent #agent .ai-agent-chat-row.is-user {
    justify-content: flex-end;
    gap: 8px;
    padding-left: 20px;
  }

  body.view-agent #agent .ai-agent-chat-row.is-assistant {
    justify-content: flex-start;
    gap: 8px;
    padding-right: 42px;
  }

  body.view-agent #agent .ai-agent-chat-avatar {
    position: relative;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.56);
    box-shadow: 0 7px 14px -8px rgba(56, 41, 8, 0.22);
  }

  body.view-agent #agent .ai-agent-chat-avatar :is(img, video) {
    position: absolute;
    left: -19.44%;
    top: -11.11%;
    width: 138.89%;
    height: 138.89%;
    object-fit: cover;
  }

  body.view-agent #agent .ai-agent-chat-bubble {
    max-width: min(520px, calc(100vw - 108px));
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 22px 22px 22px 8px;
    color: #27343c;
    background: rgba(255, 254, 250, 0.66);
    box-shadow: 0 10px 22px -12px rgba(56, 41, 8, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.76);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    overflow-wrap: anywhere;
    backdrop-filter: blur(22px) saturate(1.16);
    -webkit-backdrop-filter: blur(22px) saturate(1.16);
  }

  body.view-agent #agent .ai-agent-chat-row.is-user .ai-agent-chat-bubble {
    border-color: rgba(255, 255, 255, 0.34);
    border-radius: 22px 22px 8px 22px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(18, 164, 137, 0.94), rgba(60, 191, 163, 0.92));
    box-shadow: 0 9px 20px -10px rgba(8, 92, 75, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }

  body.view-agent #agent .ai-agent-chat-row.is-thinking .ai-agent-chat-bubble {
    color: #648078;
    font-size: 12px;
  }

  body.view-agent #agent .ai-agent-chat-row.is-error .ai-agent-chat-bubble {
    display: grid;
    gap: 10px;
    border-color: rgba(220, 158, 34, 0.2);
    color: #725525;
    background: rgba(255, 250, 231, 0.72);
  }

  body.view-agent #agent .ai-agent-chat-row.is-error .ai-agent-chat-bubble button {
    width: max-content;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid rgba(28, 155, 128, 0.2);
    border-radius: 16px;
    color: #167d69;
    background: rgba(255, 255, 255, 0.66);
    font: inherit;
    font-size: 12px;
    font-weight: 760;
  }

  body.view-agent #agent .ai-agent-chat-row.has-practice-card {
    align-items: flex-start;
    padding-right: 0;
  }

  body.view-agent #agent .ai-agent-chat-row.has-proposal-card {
    align-items: flex-start;
    padding-right: 0;
  }
  body.view-agent #agent .ai-agent-chat-row.has-proposal-card .ai-agent-chat-avatar {
    margin-top: 10px;
  }
  body.view-agent #agent .ai-agent-proposal-card {
    display: grid;
    width: 300px;
    gap: 7px;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 26px 26px 26px 10px;
    color: #26343c;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(247, 255, 251, 0.58));
    box-shadow: 0 17px 32px -19px rgba(35, 86, 71, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(28px) saturate(1.18);
    -webkit-backdrop-filter: blur(28px) saturate(1.18);
  }

  body.view-agent #agent .ai-agent-proposal-eyebrow { color: #278e77; font-size: 10.5px; font-weight: 780; line-height: 16px; }
  body.view-agent #agent .ai-agent-proposal-card > strong { color: #1e2d35; font-size: 19px; font-weight: 850; line-height: 25px; }
  body.view-agent #agent .ai-agent-proposal-card > small { color: rgba(61, 74, 82, 0.64); font-size: 11px; font-weight: 650; line-height: 17px; }
  body.view-agent #agent .ai-agent-proposal-card > p { margin: 1px 0 2px; color: rgba(55, 70, 78, 0.74); font-size: 11px; font-weight: 650; line-height: 18px; }
  body.view-agent #agent .ai-agent-proposal-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 3px; }
  body.view-agent #agent .ai-agent-proposal-overview span { display: grid; min-height: 42px; padding: 5px 4px; place-content: center; border: 1px solid rgba(33, 169, 141, 0.12); border-radius: 14px; color: rgba(58, 73, 80, 0.64); background: rgba(255, 255, 255, 0.5); font-size: 9px; font-style: normal; font-weight: 650; line-height: 12px; text-align: center; }
  body.view-agent #agent .ai-agent-proposal-overview b { color: #168d75; font-size: 14px; font-weight: 850; line-height: 17px; }
  body.view-agent #agent .ai-agent-proposal-days { display: grid; max-height: 246px; gap: 6px; margin: 2px -2px 0 0; padding-right: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(31, 163, 136, 0.26) transparent; scrollbar-width: thin; }
  body.view-agent #agent .ai-agent-proposal-day { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; min-height: 51px; padding: 7px 8px; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 16px; background: rgba(255, 255, 255, 0.44); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66); }
  body.view-agent #agent .ai-agent-proposal-day-index,
  body.view-agent #agent .ai-agent-proposal-day-main { display: grid; min-width: 0; gap: 1px; }
  body.view-agent #agent .ai-agent-proposal-day-index b { color: #168d75; font-size: 11px; font-weight: 840; line-height: 15px; }
  body.view-agent #agent .ai-agent-proposal-day-index small,
  body.view-agent #agent .ai-agent-proposal-day-main small { overflow: hidden; color: rgba(66, 80, 87, 0.58); font-size: 8.5px; font-weight: 620; line-height: 13px; text-overflow: ellipsis; white-space: nowrap; }
  body.view-agent #agent .ai-agent-proposal-day-main strong { overflow: hidden; color: #2d3a42; font-size: 9.5px; font-weight: 760; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
  body.view-agent #agent .ai-agent-proposal-day em { color: rgba(42, 58, 65, 0.6); font-size: 9px; font-style: normal; font-weight: 720; white-space: nowrap; }
  body.view-agent #agent .ai-agent-proposal-status { min-height: 34px; padding: 8px 10px; border-radius: 14px; color: #257a68; background: rgba(33, 169, 141, 0.08); font-size: 10px; font-weight: 680; line-height: 16px; text-align: center; }
  body.view-agent #agent .ai-agent-proposal-card > button { min-height: 42px; margin-top: 3px; border-radius: 21px; color: #fff; background: linear-gradient(90deg, #18ae91, #4ac9ae); box-shadow: 0 10px 20px -12px rgba(8, 106, 87, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.32); font-size: 12.5px; font-weight: 800; }

  body.view-agent #agent .ai-agent-chat-row.has-practice-card .ai-agent-chat-avatar {
    margin-top: 12px;
  }

  body.view-agent #agent .ai-agent-practice-set-stack { display: grid; width: 300px; gap: 8px; }

  body.view-agent #agent .ai-agent-practice-set-card {
    position: relative;
    display: block;
    width: 300px;
    min-height: 338px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 28px 28px 28px 10px;
    color: #26343c;
    background:
      radial-gradient(circle at 92% 3%, rgba(255, 222, 80, 0.24), transparent 31%),
      linear-gradient(155deg, rgba(255, 255, 255, 0.76), rgba(255, 253, 244, 0.58));
    box-shadow: 0 18px 34px -18px rgba(56, 41, 8, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    font: inherit;
    text-align: left;
    backdrop-filter: blur(28px) saturate(1.2);
    -webkit-backdrop-filter: blur(28px) saturate(1.2);
    transition: transform 160ms ease, box-shadow 160ms ease;
  }

  body.view-agent #agent .ai-agent-practice-set-card:active {
    transform: scale(0.985);
    box-shadow: 0 12px 24px -16px rgba(56, 41, 8, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  }

  body.view-agent #agent .ai-agent-practice-set-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  body.view-agent #agent .ai-agent-practice-set-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(218, 166, 0, 0.18);
    border-radius: 13px;
    color: #775d0a;
    background: rgba(255, 221, 74, 0.34);
    font-size: 10.5px;
    font-weight: 760;
    line-height: 16px;
  }

  body.view-agent #agent .ai-agent-practice-set-meta {
    color: rgba(61, 74, 82, 0.62);
    font-size: 10.5px;
    font-weight: 650;
    line-height: 16px;
  }

  body.view-agent #agent .ai-agent-practice-set-title {
    display: block;
    margin-top: 12px;
    color: #1e2d35;
    font-size: 20px;
    font-weight: 850;
    line-height: 26px;
    letter-spacing: -0.02em;
  }

  body.view-agent #agent .ai-agent-practice-set-subtitle {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: rgba(66, 78, 86, 0.58);
    font-size: 10.5px;
    font-weight: 560;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-practice-set-revision { display: block; margin-top: 8px; padding: 7px 9px; border: 1px solid rgba(29, 173, 145, 0.15); border-radius: 12px; color: #277b69; background: rgba(33, 185, 153, 0.08); font-size: 9.5px; font-weight: 700; line-height: 15px; }

  body.view-agent #agent .ai-agent-practice-set-items {
    display: grid;
    gap: 7px;
    margin-top: 13px;
  }

  body.view-agent #agent .ai-agent-practice-set-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 50px;
    padding: 7px 10px 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  body.view-agent #agent .ai-agent-practice-set-item > b {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(145deg, #1cb69a, #58cdb5);
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 7px 14px -8px rgba(16, 140, 116, 0.46);
  }

  body.view-agent #agent .ai-agent-practice-set-item > span {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  body.view-agent #agent .ai-agent-practice-set-item > span strong {
    color: #26343c;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 17px;
  }

  body.view-agent #agent .ai-agent-practice-set-item > span small {
    overflow: hidden;
    color: rgba(65, 78, 86, 0.56);
    font-size: 9.5px;
    font-weight: 550;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-practice-set-item > em {
    color: rgba(52, 66, 74, 0.68);
    font-size: 10px;
    font-style: normal;
    font-weight: 720;
    line-height: 16px;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-practice-set-evidence {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 11px 2px 0;
    overflow: hidden;
    color: rgba(66, 78, 86, 0.58);
    font-size: 9.5px;
    font-weight: 560;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-practice-set-evidence img {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-practice-set-evidence span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.view-agent #agent .ai-agent-practice-set-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin-top: 12px;
    border-radius: 23px;
    color: #ffffff;
    background: linear-gradient(90deg, #18ae91, #4ac9ae);
    box-shadow: 0 11px 22px -12px rgba(8, 106, 87, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    font-size: 13px;
    font-weight: 800;
    line-height: 20px;
  }

  body.view-agent #agent .ai-agent-practice-set-cta img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  body.view-agent #agent .ai-agent-chat-row.has-target-card { align-items: flex-start; padding-right: 18px; } body.view-agent #agent .ai-agent-chat-row.has-target-card .ai-agent-chat-avatar { margin-top: 10px; } body.view-agent #agent .ai-agent-target-card { position: relative; display: grid; width: 268px; min-height: 132px; padding: 17px 18px; border: 1px solid rgba(255,255,255,.92); border-radius: 25px 25px 25px 9px; color: #26343c; background: linear-gradient(145deg,rgba(255,255,255,.78),rgba(244,255,250,.62)); box-shadow: 0 16px 30px -18px rgba(22,91,73,.28); backdrop-filter: blur(26px) saturate(1.16); } body.view-agent #agent .ai-agent-target-card > span { color: #278e77; font-size: 11px; font-weight: 760; line-height: 16px; } body.view-agent #agent .ai-agent-target-card > strong { margin-top: 3px; color: #173c34; font-size: 28px; font-weight: 880; line-height: 34px; } body.view-agent #agent .ai-agent-target-card > small { margin-top: 2px; color: rgba(48,71,65,.58); font-size: 10px; font-weight: 600; line-height: 15px; } body.view-agent #agent .ai-agent-target-card > button { position: absolute; right: 14px; top: 14px; min-width: 48px; min-height: 28px; padding: 0 10px; border: 1px solid rgba(31,151,125,.18); border-radius: 14px; color: #278e77; background: rgba(37,181,150,.09); font: inherit; font-size: 10px; font-weight: 720; }
}

@media (min-width: 761px) {
  html:has(body.view-agent),
  body.view-agent {
    min-width: 0;
    min-height: 100%;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 18% 18%, rgba(255, 247, 182, 0.74), transparent 31%),
      radial-gradient(circle at 82% 12%, rgba(255, 224, 78, 0.56), transparent 34%),
      linear-gradient(180deg, #ffd52a 0%, #ffe889 35%, #fff2c1 67%, #fffaf0 100%);
  }
  body.view-agent {
    margin: 0;
    padding: 0;
  }
  body.view-agent .app-shell {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    margin: 0;
    background: transparent;
  }
  body.view-agent .app-shell > .sidebar,
  body.view-agent .app-shell > .answer-page-back-button,
  body.view-agent .topbar,
  body.view-agent > .mobile-primary-dock,
  body.view-agent > .app-install-banner {
    display: none;
  }
  body.view-agent .app-shell > .main {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    margin: 0;
    padding: 86px clamp(24px, 3vw, 48px) 16px;
    overflow: visible;
    background: transparent;
  }
  body.view-agent #agent.ai-agent-view,
  body.view-agent #agent.ai-agent-view.active-view {
    position: relative;
    display: block;
    width: min(1180px, 100%);
    min-width: 0;
    height: clamp(660px, calc(100dvh - 102px), 820px);
    min-height: 660px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 36px;
    background:
      radial-gradient(circle at 20% 30%, rgba(255, 250, 213, 0.62), transparent 29%),
      radial-gradient(circle at 78% 7%, rgba(255, 220, 52, 0.42), transparent 34%),
      linear-gradient(180deg, #ffd42c 0%, #ffe687 34%, #fff0bd 66%, #fffaf0 100%);
    box-shadow:
      0 34px 70px -44px rgba(104, 69, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }
  body.view-agent #agent .ai-agent-root,
  body.view-agent #agent .ai-agent-screen {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 660px;
    overflow: hidden;
    color: #17212f;
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  body.view-agent #agent .ai-agent-screen *,
  body.view-agent #agent .ai-agent-screen *::before,
  body.view-agent #agent .ai-agent-screen *::after {
    box-sizing: border-box;
  }
  body.view-agent #agent .ai-agent-welcome,
  body.view-agent #agent .ai-agent-plan,
  body.view-agent #agent .ai-agent-chat {
    position: absolute;
    inset: 0;
  }
  body.view-agent #agent :is(button, input) {
    appearance: none;
    margin: 0;
    font: inherit;
  }
  body.view-agent #agent button {
    border: 0;
    cursor: pointer;
  }
  body.view-agent #agent button:focus-visible,
  body.view-agent #agent input:focus-visible {
    outline: 3px solid rgba(23, 164, 136, 0.38);
    outline-offset: 2px;
  }
  body.view-agent #agent img {
    display: block;
    max-width: none;
  }
  body.view-agent #agent .ai-agent-header {
    position: absolute;
    left: 30px;
    right: 30px;
    top: 20px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 30px;
    background: rgba(255, 254, 250, 0.46);
    box-shadow: 0 16px 30px -18px rgba(91, 60, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(28px) saturate(1.2);
    -webkit-backdrop-filter: blur(28px) saturate(1.2);
  }

  body.view-agent #agent .ai-agent-welcome > .ai-agent-header.is-welcome-clean {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.view-agent #agent .ai-agent-welcome > .ai-agent-header.is-welcome-clean > :is(.ai-agent-back, .ai-agent-memory) {
    pointer-events: auto;
  }

  body.view-agent #agent .ai-agent-welcome > .ai-agent-header.is-welcome-clean > .ai-agent-header-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body.view-agent #agent :is(.ai-agent-back, .ai-agent-memory) {
    position: absolute;
    top: 7px;
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-radius: 50%;
    color: rgba(32, 40, 51, 0.88);
    background: rgba(255, 255, 255, 0.46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
    transition: transform 150ms ease, background 150ms ease;
  }
  body.view-agent #agent :is(.ai-agent-back, .ai-agent-memory):hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-1px);
  }
  body.view-agent #agent .ai-agent-back { left: 7px; }
  body.view-agent #agent .ai-agent-memory { right: 7px; }
  body.view-agent #agent .ai-agent-memory.is-active {
    color: #0f9178;
    border-color: rgba(16, 157, 130, 0.26);
    background: rgba(222, 252, 241, 0.78);
    box-shadow: 0 10px 20px -16px rgba(8, 92, 75, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  body.view-agent #agent :is(.ai-agent-back, .ai-agent-memory) img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
  body.view-agent #agent .ai-agent-header-title {
    max-width: 420px;
    margin: 0;
    overflow: hidden;
    color: rgba(23, 29, 38, 0.96);
    font-size: 17px;
    font-weight: 760;
    line-height: 24px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.view-agent #agent .ai-agent-composer {
    position: absolute;
    z-index: 35;
    height: 66px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 33px;
    background: rgba(255, 254, 250, 0.6);
    box-shadow: 0 16px 30px -18px rgba(91, 60, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(30px) saturate(1.22);
    -webkit-backdrop-filter: blur(30px) saturate(1.22);
  }
  body.view-agent #agent :is(.ai-agent-attach, .ai-agent-voice, .ai-agent-send) {
    position: absolute;
    display: grid;
    padding: 0;
    place-items: center;
    color: rgba(39, 49, 62, 0.82);
    background: rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
  }
  body.view-agent #agent .ai-agent-attach {
    left: 11px;
    top: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  body.view-agent #agent :is(.ai-agent-voice, .ai-agent-send) {
    right: 10px;
    top: 9px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #17212f;
    background: linear-gradient(180deg, #ffe45f, #ffc928);
    box-shadow: 0 10px 20px -11px rgba(151, 103, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
  body.view-agent #agent :is(.ai-agent-attach, .ai-agent-voice, .ai-agent-send) img {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
  body.view-agent #agent .ai-agent-send { display: none; }
  body.view-agent #agent .ai-agent-composer.has-text .ai-agent-voice { display: none; }
  body.view-agent #agent .ai-agent-composer.has-text .ai-agent-send { display: grid; }
  body.view-agent #agent .ai-agent-input {
    position: absolute;
    left: 64px;
    right: 66px;
    top: 8px;
    width: auto;
    min-width: 0;
    height: 50px;
    padding: 0;
    border: 0;
    outline: 0;
    color: rgba(25, 33, 44, 0.96);
    background: transparent;
    font-size: 15px;
    line-height: 22px;
  }
  body.view-agent #agent .ai-agent-input::placeholder { color: rgba(81, 91, 105, 0.58); }
  body.view-agent #agent .ai-agent-file { display: none; }
  body.view-agent #agent .ai-agent-voice.is-listening {
    animation: ai-agent-listening 900ms ease-in-out infinite alternate;
  }
  body.view-agent #agent .ai-agent-aura {
    position: absolute;
    left: 21%;
    top: 98px;
    z-index: 1;
    width: 214px;
    height: 214px;
    transform: translateX(-50%);
    pointer-events: none;
  }
  body.view-agent #agent .ai-agent-aura img {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
  }
  body.view-agent #agent .ai-agent-orb {
    position: absolute;
    left: 21%;
    top: 120px;
    z-index: 2;
    width: 170px;
    height: 170px;
    transform: translateX(-50%);
    pointer-events: none;
  }
  body.view-agent #agent .ai-agent-orb img {
    position: absolute;
    inset: -8% -18% -28%;
    width: 136%;
    height: 136%;
    object-fit: contain;
  }
  body.view-agent #agent .ai-agent-core {
    position: absolute;
    left: 21%;
    top: 141px;
    z-index: 3;
    width: 130px;
    height: 130px;
    overflow: hidden;
    transform: translateX(-50%);
  }
  body.view-agent #agent .ai-agent-core img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body.view-agent #agent .ai-agent-hero {
    position: absolute;
    left: 21%;
    top: 144px;
    z-index: 4;
    width: 124px;
    height: 124px;
    overflow: hidden;
    border-radius: 50%;
    transform: translateX(-50%);
  }
  body.view-agent #agent .ai-agent-hero :is(img, video) {
    position: absolute;
    left: -19.44%;
    top: -11.11%;
    width: 138.89%;
    height: 138.89%;
    object-fit: cover;
  }
  body.view-agent #agent .ai-agent-online {
    position: absolute;
    left: calc(21% + 43px);
    top: 156px;
    z-index: 6;
    width: 18px;
    height: 18px;
  }
  body.view-agent #agent .ai-agent-online img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }
  body.view-agent #agent .ai-agent-trust {
    position: absolute;
    left: 21%;
    top: 286px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 268px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 16px;
    color: rgba(64, 72, 82, 0.76);
    background: rgba(255, 255, 255, 0.48);
    box-shadow: 0 12px 26px -12px rgba(56, 41, 8, 0.16);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 17px;
    transform: translateX(-50%);
    backdrop-filter: blur(20px) saturate(1.18);
    -webkit-backdrop-filter: blur(20px) saturate(1.18);
  }
  body.view-agent #agent .ai-agent-trust img {
    width: 7px;
    height: 7px;
    object-fit: contain;
  }
  body.view-agent #agent .ai-agent-greeting {
    position: absolute;
    left: 30px;
    top: 329px;
    width: calc(42% - 60px);
    height: 44px;
    margin: 0;
    overflow: hidden;
    color: rgba(20, 27, 37, 0.98);
    font-size: clamp(28px, 2.4vw, 36px);
    font-weight: 860;
    line-height: 44px;
    letter-spacing: -0.03em;
    text-align: center;
    white-space: nowrap;
  }
  body.view-agent #agent .ai-agent-support {
    position: absolute;
    left: 42px;
    top: 380px;
    width: calc(42% - 84px);
    min-height: 48px;
    margin: 0;
    color: rgba(67, 76, 89, 0.72);
    font-size: 14px;
    font-weight: 520;
    line-height: 23px;
    text-align: center;
  }
  body.view-agent #agent .ai-agent-chips {
    position: absolute;
    left: 21%;
    top: 428px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: min(390px, calc(42% - 60px));
    height: 38px;
    transform: translateX(-50%);
  }
  body.view-agent #agent .ai-agent-chips > :is(button, span) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 38px;
    padding: 0 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 19px;
    color: rgba(43, 52, 65, 0.82);
    background: rgba(255, 254, 250, 0.54);
    box-shadow: 0 12px 26px -13px rgba(56, 41, 8, 0.15);
    font-size: 11.5px;
    font-weight: 680;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(18px) saturate(1.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.16);
  }
  body.view-agent #agent .ai-agent-chips img {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    object-fit: contain;
  }
  body.view-agent #agent .ai-agent-recommendation {
    position: absolute;
    left: 45%;
    right: 30px;
    top: 120px;
    height: 112px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 30px;
    color: rgba(35, 44, 56, 0.9);
    background: rgba(255, 254, 250, 0.56);
    box-shadow: 0 18px 34px -22px rgba(56, 41, 8, 0.22);
    text-align: left;
    backdrop-filter: blur(26px) saturate(1.2);
    -webkit-backdrop-filter: blur(26px) saturate(1.2);
    transition: transform 160ms ease, background 160ms ease;
  }
  body.view-agent #agent .ai-agent-recommendation:hover {
    background: rgba(255, 255, 255, 0.68);
    transform: translateY(-2px);
  }
  body.view-agent #agent .ai-agent-recommendation-art {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-radius: 24px;
    background: #fff8e8;
    box-shadow: 0 14px 28px -20px rgba(112, 75, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }
  body.view-agent #agent .ai-agent-recommendation-art > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
  }

  body.view-agent #agent .ai-agent-recommendation > small {
    position: absolute;
    left: 112px;
    top: 20px;
    color: #14a38a;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
  }

  body.view-agent #agent .ai-agent-recommendation > strong {
    position: absolute;
    left: 112px;
    right: 54px;
    top: 42px;
    overflow: hidden;
    color: #1c262e;
    font-size: 19px;
    font-weight: 760;
    line-height: 26px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-recommendation > em {
    position: absolute;
    left: 112px;
    right: 54px;
    top: 73px;
    overflow: hidden;
    color: #6b7885;
    font-size: 12px;
    font-style: normal;
    font-weight: 480;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-recommendation > .ai-agent-chevron {
    position: absolute;
    right: 22px;
    top: 46px;
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-prompt-label {
    position: absolute;
    left: 45%;
    right: 30px;
    top: 252px;
    height: 20px;
    margin: 0;
    color: #5c6b75;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
  }

  body.view-agent #agent .ai-agent-prompts {
    position: absolute;
    left: 45%;
    right: 30px;
    top: 278px;
    display: grid;
    grid-template-rows: repeat(3, 58px);
    gap: 10px;
    height: 194px;
  }

  body.view-agent #agent .ai-agent-prompt {
    position: relative;
    width: 100%;
    height: 58px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 29px;
    color: #29363d;
    background: rgba(255, 254, 250, 0.61);
    box-shadow: 0 12px 24px -18px rgba(61, 46, 10, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.72);
    text-align: left;
    backdrop-filter: blur(22px) saturate(1.18);
    -webkit-backdrop-filter: blur(22px) saturate(1.18);
    transition: transform 150ms ease, background 150ms ease;
  }

  body.view-agent #agent .ai-agent-prompt:hover {
    background: rgba(255, 255, 255, 0.74);
    transform: translateX(3px);
  }

  body.view-agent #agent .ai-agent-prompt > span {
    position: absolute;
    left: 60px;
    right: 48px;
    top: 17px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 560;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-prompt > .ai-agent-prompt-icon {
    position: absolute;
    left: 20px;
    top: 16px;
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-prompt > .ai-agent-prompt-chevron {
    position: absolute;
    right: 20px;
    top: 19px;
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-welcome > .ai-agent-composer {
    left: 45%;
    right: 30px;
    bottom: 26px;
  }

  body.view-agent #agent .ai-agent-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    color: #4d666e;
    background: rgba(255, 254, 250, 0.78);
    box-shadow: 0 12px 24px -16px rgba(61, 46, 10, 0.2);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  body.view-agent #agent .ai-agent-loading b {
    display: block;
    margin: 0;
    font: inherit;
  }

  body.view-agent #agent .ai-agent-user-bubble {
    position: absolute;
    left: 48px;
    top: 126px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: calc(42% - 104px);
    height: 58px;
    padding: 0 20px;
    overflow: hidden;
    border-radius: 25px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(18, 164, 137, 0.94), rgba(60, 191, 163, 0.92));
    box-shadow: 0 10px 20px -10px rgba(8, 92, 75, 0.28);
    font-size: 14px;
    font-weight: 560;
    line-height: 22px;
    text-align: right;
  }

  body.view-agent #agent .ai-agent-user-bubble span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-user-bubble-avatar {
    position: absolute;
    left: calc(42% - 44px);
    top: 136px;
    z-index: 6;
    display: block;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 8px 16px -10px rgba(37, 54, 63, 0.3);
  }

  body.view-agent #agent .ai-agent-user-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: rgba(255, 255, 255, 0.58);
    background-image: var(--ai-agent-user-avatar), url("./assets/xingxing-logo-transparent-512.webp?v=startup-performance-p0-20260723");
    background-position: center;
    background-size: cover;
  }

  body.view-agent #agent .ai-agent-plan-avatar {
    position: absolute;
    left: 48px;
    top: 222px;
    z-index: 4;
    display: grid;
    width: 50px;
    height: 50px;
    overflow: visible;
    place-items: center;
  }

  body.view-agent #agent .ai-agent-plan-avatar > span {
    position: absolute;
    inset: 0;
    width: 50px;
    height: 50px;
  }

  body.view-agent #agent .ai-agent-plan-avatar > span img {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-plan-avatar > div {
    position: absolute;
    left: 6px;
    top: 6px;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
  }

  body.view-agent #agent .ai-agent-plan-avatar > div :is(img, video) {
    position: absolute;
    left: -19.44%;
    top: -11.11%;
    width: 138.89%;
    height: 138.89%;
    object-fit: cover;
  }

  body.view-agent #agent .ai-agent-reply {
    position: absolute;
    left: 106px;
    top: 212px;
    width: calc(42% - 140px);
    height: 94px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 26px;
    color: #1f2930;
    background: rgba(255, 254, 250, 0.57);
    box-shadow: 0 14px 28px -16px rgba(56, 41, 8, 0.18);
    backdrop-filter: blur(24px) saturate(1.18);
    -webkit-backdrop-filter: blur(24px) saturate(1.18);
  }

  body.view-agent #agent .ai-agent-reply small,
  body.view-agent #agent .ai-agent-reply strong,
  body.view-agent #agent .ai-agent-reply em {
    position: absolute;
    left: 20px;
    right: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-reply small {
    top: 13px;
    color: #14a68a;
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
  }

  body.view-agent #agent .ai-agent-reply strong {
    top: 35px;
    color: #1f2930;
    font-size: 15px;
    font-weight: 760;
    line-height: 22px;
  }

  body.view-agent #agent .ai-agent-reply em {
    top: 62px;
    color: #737d85;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 480;
    line-height: 16px;
  }

  body.view-agent #agent .ai-agent-plan-summary {
    position: absolute;
    left: 106px;
    top: 326px;
    width: calc(42% - 140px);
    height: 170px;
    min-height: 144px;
    padding: 18px 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 26px;
    color: #28353d;
    background: rgba(255, 254, 250, 0.48);
    box-shadow: 0 16px 32px -22px rgba(56, 41, 8, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(24px) saturate(1.16);
    -webkit-backdrop-filter: blur(24px) saturate(1.16);
  }

  body.view-agent #agent .ai-agent-plan-summary header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  body.view-agent #agent .ai-agent-plan-summary header small {
    color: #68767e;
    font-size: 10.5px;
    font-weight: 620;
    line-height: 16px;
  }

  body.view-agent #agent .ai-agent-plan-summary header strong {
    color: #118f78;
    font-size: 12px;
    font-weight: 760;
    line-height: 18px;
  }

  body.view-agent #agent .ai-agent-plan-summary > p {
    margin: 7px 0 12px;
    color: #23313a;
    font-size: 15px;
    font-weight: 760;
    line-height: 22px;
  }

  body.view-agent #agent .ai-agent-plan-summary-progress {
    display: flex;
    gap: 5px;
    height: 6px;
  }

  body.view-agent #agent .ai-agent-plan-summary-progress i {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 999px;
    background: rgba(73, 105, 98, 0.14);
  }

  body.view-agent #agent .ai-agent-plan-summary-progress i.is-current {
    background: #47c7aa;
    box-shadow: 0 0 0 3px rgba(71, 199, 170, 0.12);
  }

  body.view-agent #agent .ai-agent-plan-summary-progress i.is-completed {
    background: #18ad91;
  }

  body.view-agent #agent .ai-agent-plan-summary-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 15px;
  }

  body.view-agent #agent .ai-agent-plan-summary-types span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid rgba(37, 151, 128, 0.14);
    border-radius: 12px;
    color: #397166;
    background: rgba(232, 250, 243, 0.58);
    font-size: 9.5px;
    font-weight: 680;
    line-height: 14px;
  }

  body.view-agent #agent .ai-agent-plan-card {
    position: absolute;
    left: 44%;
    right: 30px;
    top: 92px;
    bottom: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 32px;
    color: rgba(35, 44, 56, 0.9);
    background: rgba(255, 254, 250, 0.57);
    box-shadow: 0 18px 36px -22px rgba(56, 41, 8, 0.22);
    backdrop-filter: blur(28px) saturate(1.2);
    -webkit-backdrop-filter: blur(28px) saturate(1.2);
  }

  body.view-agent #agent .ai-agent-plan-card::after {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    top: 76px;
    height: 1px;
    background: rgba(80, 88, 99, 0.1);
  }

  body.view-agent #agent .ai-agent-plan-title {
    position: absolute;
    left: 26px;
    right: 150px;
    top: 20px;
    height: 28px;
    margin: 0;
    overflow: hidden;
    color: rgba(23, 30, 40, 0.96);
    font-size: 20px;
    font-weight: 780;
    line-height: 28px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-plan-basis {
    position: absolute;
    left: 26px;
    right: 150px;
    top: 50px;
    height: 18px;
    margin: 0;
    overflow: hidden;
    color: #6e7a82;
    font-size: 11px;
    font-weight: 480;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-gain {
    position: absolute;
    right: 26px;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(33, 176, 145, 0.2);
    border-radius: 17px;
    color: #0f9178;
    background: rgba(212, 250, 235, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
    font-size: 11px;
    font-weight: 760;
    line-height: 18px;
  }

  body.view-agent #agent .ai-agent-timeline { display: none; }

  body.view-agent #agent .ai-agent-tasks {
    position: absolute;
    left: 26px;
    right: 26px;
    top: 90px;
    bottom: 124px;
    display: grid;
    grid-auto-rows: 60px;
    align-content: start;
    gap: 8px;
    height: auto;
    padding-right: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(44, 145, 124, 0.26) transparent;
    scrollbar-width: thin;
  }

  body.view-agent #agent .ai-agent-tasks::-webkit-scrollbar {
    width: 5px;
  }

  body.view-agent #agent .ai-agent-tasks::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(44, 145, 124, 0.26);
  }

  body.view-agent #agent .ai-agent-task,
  body.view-agent #agent .ai-agent-task:nth-child(1),
  body.view-agent #agent .ai-agent-task:nth-child(2),
  body.view-agent #agent .ai-agent-task:nth-child(3) {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 60px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.5);
    text-align: left;
    transition: transform 150ms ease, background 150ms ease;
  }

  body.view-agent #agent .ai-agent-task:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.74);
    transform: translateX(2px);
  }

  body.view-agent #agent .ai-agent-task-step {
    position: absolute;
    left: 12px;
    top: 12px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #18ad91;
    font-size: 12px;
    font-weight: 760;
    line-height: 18px;
  }

  body.view-agent #agent .ai-agent-task:nth-child(2) .ai-agent-task-step { background: #55c6ad; }
  body.view-agent #agent .ai-agent-task:nth-child(3) .ai-agent-task-step { background: #79b6a8; }
  body.view-agent #agent .ai-agent-task:nth-child(4) .ai-agent-task-step { background: #63a99a; }
  body.view-agent #agent .ai-agent-task:nth-child(5) .ai-agent-task-step { background: #4f8f83; }

  body.view-agent #agent .ai-agent-task-step img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-task-copy {
    position: absolute;
    left: 62px;
    right: 94px;
    top: 7px;
    height: 47px;
  }

  body.view-agent #agent .ai-agent-task-copy :is(strong, span, small) {
    display: block;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-task-copy strong {
    color: #242e36;
    font-size: 13.5px;
    font-weight: 760;
    line-height: 20px;
  }

  body.view-agent #agent .ai-agent-task-copy :is(span, small) {
    margin-top: 4px;
    color: #707d85;
    font-size: 10.5px;
    font-weight: 520;
    line-height: 15px;
  }

  body.view-agent #agent .ai-agent-task-time {
    position: absolute;
    right: 12px;
    top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    color: #475c66;
    background: rgba(255, 255, 255, 0.58);
    font-size: 10px;
    font-weight: 560;
    line-height: 16px;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-evidence {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 78px;
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    overflow: hidden;
    border-radius: 19px;
    color: #755e29;
    background: rgba(252, 245, 199, 0.78);
    font-size: 10.5px;
    font-weight: 540;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-evidence img {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-task-scroll-hint { display: none; }

  body.view-agent #agent .ai-agent-plan-start {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 48px 0 20px;
    border-radius: 25px;
    color: #ffffff;
    background: linear-gradient(90deg, rgba(13, 176, 145, 0.92), rgba(64, 204, 171, 0.92));
    box-shadow: 0 14px 28px -10px rgba(8, 46, 38, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 760;
    line-height: 22px;
  }

  body.view-agent #agent .ai-agent-plan-start img {
    position: absolute;
    right: 22px;
    top: 15px;
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-plan-start:disabled { opacity: 0.64; }

  body.view-agent #agent .ai-agent-loop-note {
    position: absolute;
    left: 48px;
    bottom: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(42% - 96px);
    height: 38px;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 19px;
    color: rgba(67, 76, 88, 0.7);
    background: rgba(255, 254, 250, 0.53);
    box-shadow: 0 12px 26px -14px rgba(56, 41, 8, 0.14);
    font-size: 10.5px;
    font-weight: 580;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(18px) saturate(1.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.16);
  }

  body.view-agent #agent .ai-agent-loop-note img {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-plan > .ai-agent-composer {
    left: 30px;
    bottom: 26px;
    width: calc(42% - 60px);
  }

  body.view-agent #agent .ai-agent-chat-exit { position: absolute; left: 18px; top: 18px; z-index: 35; display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%; color: rgba(38, 52, 60, 0.7); background: rgba(255, 254, 250, 0.4); box-shadow: 0 12px 26px -18px rgba(70, 48, 3, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.74); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease; }
  body.view-agent #agent .ai-agent-chat-exit:hover { background: rgba(255, 255, 255, 0.64); box-shadow: 0 14px 28px -17px rgba(70, 48, 3, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.84); transform: translateY(-1px); }
  body.view-agent #agent .ai-agent-chat-exit img { width: 18px; height: 18px; object-fit: contain; }

  body.view-agent #agent .ai-agent-chat-thread {
    position: absolute;
    left: 50%;
    top: 76px;
    bottom: 108px;
    width: min(900px, calc(100% - 96px));
    padding: 2px 8px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 118, 106, 0.22) transparent;
    overscroll-behavior: contain;
    transform: translateX(-50%);
  }

  body.view-agent #agent .ai-agent-chat-thread::-webkit-scrollbar { width: 6px; }
  body.view-agent #agent .ai-agent-chat-thread::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(74, 118, 106, 0.22);
  }

  body.view-agent #agent .ai-agent-chat-row {
    display: flex;
    align-items: flex-end;
    width: 100%;
    margin: 0 0 14px;
  }

  body.view-agent #agent .ai-agent-chat-row.is-user {
    justify-content: flex-end;
    gap: 10px;
    padding-left: 80px;
  }

  body.view-agent #agent .ai-agent-chat-row.is-assistant {
    justify-content: flex-start;
    gap: 10px;
    padding-right: 80px;
  }

  body.view-agent #agent .ai-agent-chat-avatar {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 8px 16px -9px rgba(56, 41, 8, 0.24);
  }

  body.view-agent #agent .ai-agent-chat-avatar :is(img, video) {
    position: absolute;
    left: -19.44%;
    top: -11.11%;
    width: 138.89%;
    height: 138.89%;
    object-fit: cover;
  }

  body.view-agent #agent .ai-agent-chat-user-avatar .ai-agent-user-avatar-image {
    position: static;
    width: 100%;
    height: 100%;
  }

  body.view-agent #agent .ai-agent-chat-bubble {
    max-width: 650px;
    padding: 13px 17px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 23px 23px 23px 9px;
    color: #27343c;
    background: rgba(255, 254, 250, 0.67);
    box-shadow: 0 12px 24px -15px rgba(56, 41, 8, 0.17), inset 0 1px 1px rgba(255, 255, 255, 0.76);
    font-size: 14px;
    font-weight: 520;
    line-height: 23px;
    overflow-wrap: anywhere;
    backdrop-filter: blur(24px) saturate(1.16);
    -webkit-backdrop-filter: blur(24px) saturate(1.16);
  }

  body.view-agent #agent .ai-agent-chat-row.is-user .ai-agent-chat-bubble {
    border-color: rgba(255, 255, 255, 0.34);
    border-radius: 23px 23px 9px 23px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(18, 164, 137, 0.95), rgba(60, 191, 163, 0.93));
    box-shadow: 0 10px 22px -12px rgba(8, 92, 75, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }

  body.view-agent #agent .ai-agent-chat-row.is-thinking .ai-agent-chat-bubble {
    color: #648078;
    font-size: 12px;
  }

  body.view-agent #agent .ai-agent-chat-row.is-error .ai-agent-chat-bubble {
    display: grid;
    gap: 10px;
    border-color: rgba(220, 158, 34, 0.2);
    color: #725525;
    background: rgba(255, 250, 231, 0.72);
  }

  body.view-agent #agent .ai-agent-chat-row.is-error .ai-agent-chat-bubble button {
    width: max-content;
    min-height: 34px;
    padding: 0 15px;
    border: 1px solid rgba(28, 155, 128, 0.2);
    border-radius: 17px;
    color: #167d69;
    background: rgba(255, 255, 255, 0.66);
    font: inherit;
    font-size: 12px;
    font-weight: 760;
    cursor: pointer;
  }

  body.view-agent #agent .ai-agent-chat > .ai-agent-composer {
    left: 50%;
    bottom: 25px;
    width: min(900px, calc(100% - 96px));
    transform: translateX(-50%);
  }

  body.view-agent #agent .ai-agent-chat-row.has-practice-card,
  body.view-agent #agent .ai-agent-chat-row.has-target-card {
    align-items: flex-start;
    padding-right: 0;
  }

  body.view-agent #agent .ai-agent-chat-row.has-proposal-card {
    align-items: flex-start;
    padding-left: 0;
    padding-right: 0;
  }

  body.view-agent #agent .ai-agent-chat-row.has-proposal-card .ai-agent-chat-avatar { margin-top: 12px; }
  body.view-agent #agent .ai-agent-proposal-card { display: grid; width: min(520px, calc(100% - 50px)); gap: 8px; padding: 20px 22px; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 28px 28px 28px 10px; color: #26343c; background: linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(247, 255, 251, 0.58)); box-shadow: 0 20px 38px -22px rgba(35, 86, 71, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.9); backdrop-filter: blur(30px) saturate(1.18); -webkit-backdrop-filter: blur(30px) saturate(1.18); }
  body.view-agent #agent .ai-agent-proposal-eyebrow { color: #278e77; font-size: 11px; font-weight: 780; line-height: 17px; }
  body.view-agent #agent .ai-agent-proposal-card > strong { color: #1e2d35; font-size: 22px; font-weight: 850; line-height: 29px; }
  body.view-agent #agent .ai-agent-proposal-card > small { color: rgba(61, 74, 82, 0.64); font-size: 12px; font-weight: 650; line-height: 18px; }
  body.view-agent #agent .ai-agent-proposal-card > p { margin: 1px 0 3px; color: rgba(55, 70, 78, 0.74); font-size: 12px; font-weight: 650; line-height: 19px; }
  body.view-agent #agent .ai-agent-proposal-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
  body.view-agent #agent .ai-agent-proposal-overview span { display: flex; min-height: 44px; align-items: baseline; justify-content: center; gap: 3px; border: 1px solid rgba(33, 169, 141, 0.12); border-radius: 15px; color: rgba(58, 73, 80, 0.62); background: rgba(255, 255, 255, 0.5); font-size: 10px; font-weight: 650; line-height: 42px; }
  body.view-agent #agent .ai-agent-proposal-overview b { color: #168d75; font-size: 16px; font-weight: 850; }
  body.view-agent #agent .ai-agent-proposal-days { display: grid; max-height: 278px; gap: 7px; margin: 3px -3px 0 0; padding-right: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(31, 163, 136, 0.26) transparent; scrollbar-width: thin; }
  body.view-agent #agent .ai-agent-proposal-day { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; min-height: 56px; padding: 8px 12px; align-items: center; gap: 12px; border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 17px; background: rgba(255, 255, 255, 0.44); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66); }
  body.view-agent #agent .ai-agent-proposal-day-index,
  body.view-agent #agent .ai-agent-proposal-day-main { display: grid; min-width: 0; gap: 2px; }
  body.view-agent #agent .ai-agent-proposal-day-index b { color: #168d75; font-size: 12px; font-weight: 840; line-height: 16px; }
  body.view-agent #agent .ai-agent-proposal-day-index small,
  body.view-agent #agent .ai-agent-proposal-day-main small { overflow: hidden; color: rgba(66, 80, 87, 0.58); font-size: 9.5px; font-weight: 620; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
  body.view-agent #agent .ai-agent-proposal-day-main strong { overflow: hidden; color: #2d3a42; font-size: 11px; font-weight: 760; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
  body.view-agent #agent .ai-agent-proposal-day em { color: rgba(42, 58, 65, 0.6); font-size: 10px; font-style: normal; font-weight: 720; white-space: nowrap; }
  body.view-agent #agent .ai-agent-proposal-status { width: max-content; max-width: 100%; min-height: 34px; padding: 8px 12px; border-radius: 15px; color: #257a68; background: rgba(33, 169, 141, 0.08); font-size: 10.5px; font-weight: 680; line-height: 17px; }
  body.view-agent #agent .ai-agent-proposal-card > button { width: max-content; min-width: 150px; min-height: 42px; margin-top: 4px; padding: 0 18px; border-radius: 21px; color: #fff; background: linear-gradient(90deg, #18ae91, #4ac9ae); box-shadow: 0 10px 20px -12px rgba(8, 106, 87, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.32); font-size: 12.5px; font-weight: 800; }

  body.view-agent #agent .ai-agent-chat-row.has-practice-card .ai-agent-chat-avatar,
  body.view-agent #agent .ai-agent-chat-row.has-target-card .ai-agent-chat-avatar {
    margin-top: 12px;
  }

  body.view-agent #agent .ai-agent-practice-set-stack { display: grid; width: min(620px, calc(100% - 50px)); gap: 9px; }

  body.view-agent #agent .ai-agent-practice-set-card {
    position: relative;
    display: block;
    width: 100%;
    min-height: 354px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 30px 30px 30px 11px;
    color: #26343c;
    background:
      radial-gradient(circle at 92% 3%, rgba(255, 222, 80, 0.24), transparent 31%),
      linear-gradient(155deg, rgba(255, 255, 255, 0.78), rgba(255, 253, 244, 0.6));
    box-shadow: 0 20px 38px -20px rgba(56, 41, 8, 0.24), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    font: inherit;
    text-align: left;
    backdrop-filter: blur(30px) saturate(1.2);
    -webkit-backdrop-filter: blur(30px) saturate(1.2);
    transition: transform 160ms ease, box-shadow 160ms ease;
  }

  body.view-agent #agent .ai-agent-practice-set-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 42px -20px rgba(56, 41, 8, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  }

  body.view-agent #agent .ai-agent-practice-set-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  body.view-agent #agent .ai-agent-practice-set-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(218, 166, 0, 0.18);
    border-radius: 14px;
    color: #775d0a;
    background: rgba(255, 221, 74, 0.34);
    font-size: 11px;
    font-weight: 760;
    line-height: 17px;
  }

  body.view-agent #agent .ai-agent-practice-set-meta {
    color: rgba(61, 74, 82, 0.62);
    font-size: 11px;
    font-weight: 650;
    line-height: 17px;
  }

  body.view-agent #agent .ai-agent-practice-set-title {
    display: block;
    margin-top: 13px;
    color: #1e2d35;
    font-size: 22px;
    font-weight: 850;
    line-height: 28px;
    letter-spacing: -0.02em;
  }

  body.view-agent #agent .ai-agent-practice-set-subtitle {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: rgba(66, 78, 86, 0.58);
    font-size: 11px;
    font-weight: 560;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-practice-set-items {
    display: grid;
    gap: 8px;
    margin-top: 14px;
  }

  body.view-agent #agent .ai-agent-practice-set-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 12px 8px 9px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  body.view-agent #agent .ai-agent-practice-set-item > b {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(145deg, #1cb69a, #58cdb5);
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 7px 14px -8px rgba(16, 140, 116, 0.46);
  }

  body.view-agent #agent .ai-agent-practice-set-item > span {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  body.view-agent #agent .ai-agent-practice-set-item > span strong {
    color: #26343c;
    font-size: 13px;
    font-weight: 800;
    line-height: 18px;
  }

  body.view-agent #agent .ai-agent-practice-set-item > span small {
    overflow: hidden;
    color: rgba(65, 78, 86, 0.56);
    font-size: 10px;
    font-weight: 550;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-practice-set-item > em {
    color: rgba(52, 66, 74, 0.68);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 720;
    line-height: 16px;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-practice-set-evidence {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 2px 0;
    overflow: hidden;
    color: rgba(66, 78, 86, 0.58);
    font-size: 10px;
    font-weight: 560;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.view-agent #agent .ai-agent-practice-set-evidence img {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    object-fit: contain;
  }

  body.view-agent #agent .ai-agent-practice-set-evidence span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.view-agent #agent .ai-agent-practice-set-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    margin-top: 13px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(90deg, #18ae91, #4ac9ae);
    box-shadow: 0 11px 22px -12px rgba(8, 106, 87, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    font-size: 13px;
    font-weight: 800;
    line-height: 20px;
  }

  body.view-agent #agent .ai-agent-practice-set-cta img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  body.view-agent #agent .ai-agent-target-card {
    position: relative;
    display: grid;
    width: 380px;
    min-height: 144px;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 27px 27px 27px 10px;
    color: #26343c;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(244, 255, 250, 0.64));
    box-shadow: 0 18px 32px -18px rgba(22, 91, 73, 0.28);
    backdrop-filter: blur(28px) saturate(1.16);
    -webkit-backdrop-filter: blur(28px) saturate(1.16);
  }

  body.view-agent #agent .ai-agent-target-card > span {
    color: #278e77;
    font-size: 11.5px;
    font-weight: 760;
    line-height: 17px;
  }

  body.view-agent #agent .ai-agent-target-card > strong {
    margin-top: 4px;
    color: #173c34;
    font-size: 32px;
    font-weight: 880;
    line-height: 38px;
  }

  body.view-agent #agent .ai-agent-target-card > small {
    margin-top: 3px;
    color: rgba(48, 71, 65, 0.58);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 16px;
  }

  body.view-agent #agent .ai-agent-target-card > button {
    position: absolute;
    right: 16px;
    top: 16px;
    min-width: 52px;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(31, 151, 125, 0.18);
    border-radius: 15px;
    color: #278e77;
    background: rgba(37, 181, 150, 0.09);
    font-size: 10.5px;
    font-weight: 720;
  }
}

.ai-agent-practice-progress { display: grid; gap: 10px; width: 100%; margin-top: 12px; padding: 14px; border-radius: 16px; background: rgba(38,183,151,.09); } .ai-agent-practice-progress > strong { color: #24584d; font-size: 13px; line-height: 20px; } .ai-agent-practice-progress > button { width: 100%; }
@media (max-width: 389px) {
  body.view-agent #agent .ai-agent-root {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) scale(calc(100vw / 390));
    transform-origin: top center;
    width: 390px;
  }
  body.view-agent #agent .ai-agent-screen,
  body.view-agent #agent .ai-agent-screen.ai-agent-welcome,
  body.view-agent #agent .ai-agent-screen.ai-agent-plan {
    width: 390px;
    max-width: none;
  }
  body.view-agent #agent .ai-agent-chat-bubble {
    max-width: 282px;
  }
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.home-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(350px, 0.92fr);
  gap: 18px;
  margin-bottom: 18px;
  align-items: stretch;
}

.home-overview-card {
  padding: 22px;
  border: 1px solid rgba(234, 223, 202, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 40px rgba(24, 33, 37, 0.08);
}

.home-overview-card .metrics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0;
}

.home-overview-card .metric-card {
  min-height: 118px;
  border-radius: 12px;
  box-shadow: none;
}

.home-overview-card .metric-card.dark {
  color: var(--ink);
  background: linear-gradient(135deg, #fff7e2, #ffffff);
}

.home-overview-card .metric-card.dark span,
.home-overview-card .metric-card.dark small {
  color: var(--muted);
}

.overview-metric strong {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.overview-metric strong em {
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.admin-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 18px;
  padding-bottom: 4px;
}

.admin-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  font-weight: 900;
}

.admin-tab.active {
  color: #fff;
  border-color: #241b18;
  background: #241b18;
}

.admin-section {
  display: none;
}

.admin-grid.admin-section {
  display: none;
}

.active-admin-section {
  display: block;
}

.active-admin-section.admin-grid {
  display: grid;
}

.admin-todo-panel {
  margin-bottom: 18px;
}

.metric-card,
.panel,
.course-card,
.resource-item {
  border: 1px solid rgba(234, 223, 202, 0.92);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 10px 34px rgba(24, 33, 37, 0.07);
}

.metric-card {
  min-height: 112px;
  padding: 16px;
  display: grid;
  align-content: space-between;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fffdf8, #f7efe1);
}

.metric-card span,
.metric-card small {
  color: var(--muted);
}

.metric-card strong {
  font-size: 30px;
  letter-spacing: 0;
}

.metric-card.accent {
  background: linear-gradient(135deg, #fff0c2, #fffaf0);
}

.metric-card.warm {
  background: linear-gradient(135deg, #ffe2d5, #fff7ed);
}

.metric-card.dark {
  color: #fff;
  background: linear-gradient(135deg, #241b18, #49332a);
}

.metric-card.dark span,
.metric-card.dark small {
  color: rgba(255, 255, 255, 0.72);
}

.home-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 18px;
  align-items: center;
  min-height: 318px;
  margin-bottom: 0;
  padding: 36px 38px 34px 42px;
  overflow: hidden;
  border: 1px solid rgba(246, 197, 66, 0.46);
  border-radius: 16px;
  color: #211916;
  cursor: pointer;
  background:
    linear-gradient(120deg, rgba(255, 247, 199, 0.96), rgba(246, 197, 66, 0.92)),
    #f6c542;
  box-shadow: 0 20px 46px rgba(180, 116, 0, 0.16);
}

.home-banner::before {
  content: "";
  position: absolute;
  width: 680px;
  height: 180px;
  right: 80px;
  bottom: 30px;
  border-top: 8px solid rgba(180, 116, 0, 0.16);
  border-radius: 50%;
  transform: rotate(-13deg);
}

.home-banner h2 {
  position: relative;
  max-width: 560px;
  margin: 8px 0 14px;
  font-size: clamp(36px, 3.8vw, 56px);
  line-height: 1.05;
  font-weight: 950;
}

.home-banner p {
  position: relative;
  max-width: 640px;
  margin: 0;
  color: #6a4a11;
  line-height: 1.7;
  font-size: 18px;
  font-weight: 800;
}

.home-banner .eyebrow {
  position: relative;
  color: #7f5200;
}

.banner-actions {
  position: relative;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 28px;
}

.banner-art {
  position: relative;
  min-height: 270px;
  display: grid;
  place-items: center;
}

.banner-art img {
  width: min(340px, 92%);
  border-radius: 50%;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(75, 43, 0, 0.18));
}

.art-target,
.art-score {
  position: absolute;
  color: rgba(148, 94, 0, 0.2);
  font-weight: 950;
}

.art-target {
  top: 18px;
  right: 28px;
  font-size: 64px;
}

.art-score {
  left: 0;
  bottom: 22px;
  font-size: 54px;
  transform: rotate(-12deg);
}

.home-focus-grid {
  display: grid;
  grid-template-columns: minmax(210px, 1.32fr) minmax(170px, 0.8fr) minmax(190px, 0.98fr) minmax(190px, 1fr) minmax(260px, 1.36fr);
  gap: 14px;
  margin: 8px 0 18px;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.trust-strip article {
  min-height: 96px;
  padding: 16px;
  border: 1px solid rgba(234, 223, 202, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(24, 33, 37, 0.055);
}

.trust-strip strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}

.trust-strip span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.home-focus-card {
  position: relative;
  min-height: 170px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(234, 223, 202, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(24, 33, 37, 0.07);
  display: grid;
  align-content: space-between;
  gap: 12px;
}

.home-focus-card span {
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 950;
}

.home-focus-card strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
  line-height: 1.06;
}

.home-focus-card p {
  max-width: 220px;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 13px;
}

.home-focus-card.interactive {
  cursor: pointer;
}

.home-focus-card:hover {
  border-color: rgba(246, 197, 66, 0.92);
  box-shadow: 0 16px 36px rgba(180, 116, 0, 0.12);
}

.task-focus {
  background:
    linear-gradient(135deg, rgba(255, 248, 223, 0.95), rgba(255, 255, 255, 0.96)),
    #fff;
}

.task-focus img {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(70, 42, 0, 0.14));
}

.task-focus strong,
.task-focus p {
  max-width: calc(100% - 76px);
}

.task-focus .mini-progress,
.target-focus .mini-progress,
.home-focus-card .mini-progress {
  height: 8px;
  border-radius: 999px;
  background: #eee5d6;
  overflow: hidden;
}

.task-focus .mini-progress i,
.target-focus .mini-progress i,
.home-focus-card .mini-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e6a800, #ffc107);
}

.target-focus {
  background: linear-gradient(180deg, #fffdf8, #fff4d3);
}

.streak-focus,
.curve-focus {
  background: linear-gradient(180deg, #ffffff, #fffaf0);
}

.weakness-focus strong {
  color: #d83b32;
}

.weakness-focus {
  background:
    linear-gradient(135deg, rgba(255, 236, 216, 0.84), rgba(255, 255, 255, 0.95)),
    #fff;
}

.curve-focus {
  min-width: 0;
}

.curve-focus strong {
  font-size: 18px;
}

.home-focus-card .metric-curve {
  height: 48px;
  margin: 0;
  color: #efaa00;
}

.banner-dots {
  position: absolute;
  right: 18px;
  bottom: 14px;
  display: flex;
  gap: 6px;
}

.banner-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
}

.banner-dots button.active {
  width: 20px;
  border-radius: 999px;
  background: #ffd447;
}

.metric-card.interactive {
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.metric-card.interactive:hover {
  border-color: var(--gold);
  box-shadow: 0 14px 34px rgba(33, 25, 22, 0.1);
  transform: translateY(-1px);
}

.metric-select,
.metric-input {
  width: 100%;
  min-height: 32px;
  margin-top: 10px;
  padding: 0 8px;
  border: 1px solid rgba(234, 223, 202, 0.95);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  font-weight: 900;
}

.metric-curve {
  width: 100%;
  height: 42px;
  margin-top: 8px;
  color: #18a89b;
}

.metric-card.dark .metric-curve {
  color: #ffd447;
}

.learning-detail-card {
  padding: 16px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(24, 33, 37, 0.06);
}

.learning-detail-card strong {
  display: block;
  margin-bottom: 12px;
}

.learning-bars {
  height: 150px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.learning-bars span {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 6px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.learning-bars i {
  align-self: end;
  width: 100%;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, #f6c542, #241b18);
}

.learning-bars b,
.learning-bars em {
  font-style: normal;
  font-weight: 900;
}

.metric-curve circle {
  fill: currentColor;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.8fr);
  gap: 18px;
}

.study-overview,
.profile-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.8fr);
  gap: 18px;
  margin-bottom: 18px;
}

.profile-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.plan-board,
.weakness-list,
.quick-action-list,
.next-step-list {
  display: grid;
  gap: 12px;
}

.plan-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plan-step,
.weakness-item,
.quick-action,
.profile-summary-card,
.skill-progress-card,
.next-step-list article {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.plan-step {
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: 168px;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(24, 33, 37, 0.045);
}

.plan-step span,
.weakness-item span,
.quick-action span,
.profile-summary-card span,
.profile-summary-card small,
.skill-progress-card span,
.next-step-list span {
  color: var(--muted);
}

.plan-step strong,
.quick-action strong,
.skill-progress-card strong,
.next-step-list strong {
  display: block;
  margin-top: 6px;
}

.plan-step p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.mini-progress {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #f2ead8;
}

.mini-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint-dark), var(--gold));
}

.weakness-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(24, 33, 37, 0.04);
}

.weakness-item b {
  color: var(--coral);
  white-space: nowrap;
}

.weakness-item[data-weak-view] {
  cursor: pointer;
}

.weakness-item.curve-item .metric-curve {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.quick-action {
  width: 100%;
  min-height: 72px;
  padding: 16px;
  text-align: left;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-action:hover {
  border-color: #f6c542;
  box-shadow: 0 12px 28px rgba(180, 116, 0, 0.12);
  transform: translateY(-1px);
}

.daily-goal-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(246, 197, 66, 0.18), transparent),
    #fffaf0;
}

.daily-goal-card span {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 950;
}

.daily-goal-card strong {
  display: block;
  margin: 5px 0;
  color: var(--ink);
}

.home-v2 {
  --home-font: calc(clamp(15px, 0.22vw + 12.4px, 17px) * var(--font-step));
  --home-small: calc(clamp(13px, 0.12vw + 11.5px, 14.5px) * var(--font-step));
  --home-title: calc(clamp(20px, 0.55vw + 15px, 26px) * var(--font-step));
  --home-subtitle: calc(clamp(16px, 0.28vw + 13px, 19px) * var(--font-step));
  --home-radius: clamp(18px, 1vw, 26px);
  --home-gap: clamp(14px, 1.15vw, 22px);
  width: 100%;
  max-width: none;
  margin: 0 auto;
  color: #201815;
  padding-bottom: 20px;
  font-size: var(--home-font);
}

.home-v2 button {
  font: inherit;
}

.home-v2-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.home-v2-welcome,
.home-v2-card,
.home-v2-helper {
  border: 1px solid #eedfc8;
  border-radius: 22px;
  background: #fffdf9;
  box-shadow: 0 8px 24px rgba(82, 55, 20, 0.05);
}

.home-v2-welcome {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(280px, clamp(300px, 25vw, 338px));
  gap: clamp(14px, 1.4vw, 20px);
  min-height: auto;
  margin-bottom: clamp(12px, 1.2vw, 16px);
  padding: clamp(14px, 1.4vw, 18px) clamp(18px, 1.8vw, 24px);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(247, 198, 74, 0.16), transparent 30%),
    linear-gradient(135deg, #fffefb 0%, #fff8e7 100%);
}

.home-v2-welcome::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 520px;
  height: 220px;
  border-top: 8px solid rgba(209, 144, 0, 0.06);
  border-radius: 50%;
  transform: rotate(-10deg);
}

.home-v2-welcome-copy {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.home-v2-welcome-copy img {
  width: clamp(86px, 7vw, 104px);
  height: clamp(86px, 7vw, 104px);
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(82, 55, 20, 0.12));
  transition: transform 0.22s ease;
}

.home-v2-welcome:hover .home-v2-welcome-copy img {
  transform: translateY(-2px);
}

.home-v2-pill {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #7b5600;
  background: #fff5dc;
  font-size: 13px;
  font-weight: 900;
}

.home-v2-welcome h2 {
  margin: 9px 0 5px;
  font-size: clamp(22px, 1.8vw, 25px);
  line-height: 1.18;
  font-weight: 850;
}

.home-v2-welcome p,
.home-v2-card p,
.home-v2-card small {
  margin: 0;
  color: #6e6256;
  line-height: 1.6;
}

.home-v2-target {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  padding: 14px 16px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #eedfc8;
  border-radius: 17px;
  text-align: left;
  color: #201815;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.home-v2-target::after {
  content: "";
  position: absolute;
  right: -30px;
  top: 14px;
  width: 120px;
  height: 120px;
  border: 14px double rgba(209, 144, 0, 0.07);
  border-radius: 50%;
}

.home-v2-target span,
.home-v2-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.home-v2-target span {
  align-items: center;
  color: #766a5d;
  font-size: 13px;
  font-weight: 900;
}

.home-v2-target span b {
  margin-left: auto;
  color: #d19000;
}

.home-v2-target strong {
  color: #201815;
  font-size: 32px;
  line-height: 1;
}

.home-v2-target i,
.home-v2-stages i {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #f0e6d5;
}

.home-v2-target i em,
.home-v2-stages i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, #f7c64a 0%, #c98500 100%);
  animation: home-progress-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-v2-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(10px, 1vw, 14px);
  margin-bottom: clamp(12px, 1.2vw, 16px);
}

.home-v2-card {
  position: relative;
  padding: clamp(14px, 1.2vw, 18px);
  border-radius: 18px;
  text-align: left;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.home-v2-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  opacity: 0.72;
  background: linear-gradient(90deg, rgba(209, 144, 0, 0.72), rgba(247, 198, 74, 0));
}

.home-v2-card:hover,
.home-v2-helper:hover {
  border-color: rgba(209, 144, 0, 0.55);
  box-shadow: 0 12px 32px rgba(82, 55, 20, 0.09);
  transform: translateY(-2px);
}

.home-v2-card > span,
.home-v2-card > button,
.home-v2-head p {
  color: #6e6256;
  font-size: 13px;
  font-weight: 750;
}

.home-v2-card strong {
  color: #201815;
}

.home-v2-metrics > .home-v2-card {
  min-height: clamp(132px, 11vw, 154px);
  display: grid;
  align-content: space-between;
  background:
    linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
}

.home-v2-ring {
  display: grid;
  width: 72px;
  height: 72px;
  margin: 8px 0 6px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fffdf9 0 49%, transparent 50%),
    conic-gradient(#c98500 var(--value), #eadfca 0);
  box-shadow: inset 0 0 0 1px rgba(201, 133, 0, 0.08);
  animation: home-ring-in 0.9s ease both;
}

.home-v2-ring strong,
.home-v2-gauge strong {
  font-size: 23px;
  color: #201815 !important;
  font-weight: 900;
  opacity: 1;
}

.home-v2-card > button,
.home-v2-link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  padding: 0;
  border: 0;
  color: #d19000;
  background: transparent;
  font-weight: 950;
  cursor: pointer;
}

.home-v2-streak {
  position: relative;
  overflow: hidden;
}

.home-v2-streak > div,
.home-v2-weak > div {
  display: grid;
  width: 38px;
  height: 38px;
  margin: 8px 0;
  place-items: center;
  border-radius: 14px;
  color: #b67800;
  background: #fff3cf;
  box-shadow: inset 0 0 0 1px rgba(209, 144, 0, 0.08);
}

.home-v2-streak > div {
  animation: home-flame 2s ease-in-out infinite;
}

.home-v2-streak > strong {
  display: block;
  font-size: 29px;
}

.home-v2-streak img {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 38px;
  opacity: 0.82;
}

.home-v2-gauge {
  display: grid;
  width: 84px;
  height: 50px;
  margin: 8px 0 6px;
  place-items: end center;
  border-radius: 96px 96px 12px 12px;
  background:
    radial-gradient(circle at 50% 100%, #fffdf9 0 39%, transparent 40%),
    conic-gradient(from 270deg, #c98500 0 248deg, #eadfca 0);
}

.home-v2-weak {
  cursor: pointer;
}

.home-v2-weak em,
.home-v2-weak-list em {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  color: #9b3f16;
  background: #fff0e7;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.home-v2-trend span {
  display: flex;
  justify-content: space-between;
}

.home-v2-line {
  width: 100%;
  height: 62px;
  margin: 8px 0 4px;
  color: #d19000;
}

.home-v2-line path:first-child {
  fill: rgba(209, 144, 0, 0.16);
  stroke: none;
}

.home-v2-line path:nth-child(2),
.home-v2-multi > path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: home-line-in 0.9s ease both;
}

.home-v2-line circle {
  fill: currentColor;
}

.home-v2-grid {
  display: grid;
  grid-template-columns: minmax(min(100%, 620px), 1.38fr) minmax(340px, 0.92fr);
  gap: clamp(12px, 1.2vw, 16px);
  align-items: stretch;
}

.home-v2-column {
  display: grid;
  gap: clamp(12px, 1.2vw, 16px);
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  min-width: 0;
}

.home-v2-plan,
.home-v2-path {
  min-height: 0;
  background: #fffefb;
}

.home-v2-head h3 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.2;
}

.home-v2-head button,
.home-v2-head select {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #eedfc8;
  border-radius: 12px;
  color: #201815;
  background: #fffaf0;
  font-weight: 900;
}

.home-v2-stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.home-v2-stages button {
  display: grid;
  gap: 9px;
  min-height: 142px;
  padding: 14px;
  border: 1px solid #eedfc8;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #fffdf8);
  text-align: left;
  cursor: pointer;
}

.home-v2-stages button.active {
  border-color: rgba(209, 144, 0, 0.7);
  background: linear-gradient(180deg, #fff9e8, #fffdf8);
  box-shadow: inset 0 0 0 1px rgba(209, 144, 0, 0.1);
}

.home-v2-stages button > div {
  display: flex;
  justify-content: space-between;
  color: #d19000;
}

.home-v2-stages button > div span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #fff5dc;
  font-weight: 950;
}

.home-v2-stages p {
  font-size: 13px;
  color: #6e6256;
  line-height: 1.45;
}

.home-v2-stages b {
  opacity: 0;
  color: #d19000;
  font-size: 13px;
}

.home-v2-stages button:hover b {
  opacity: 1;
}

.home-v2-stage-detail {
  display: none;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: #fffaf0;
}

.home-v2-stage-detail.open {
  display: flex;
  flex-wrap: wrap;
}

.home-v2-stage-detail span {
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: #766a5d;
  font-size: 12px;
  font-weight: 900;
}

.home-v2-stage-detail button {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #c98500;
  font-weight: 950;
}

.home-v2-multi {
  width: 100%;
  height: clamp(112px, 12vw, 132px);
  margin: 6px 0 4px;
  color: #201815;
}

.home-v2-multi g path {
  stroke: rgba(32, 24, 21, 0.08);
}

.home-v2-multi > path {
  stroke: var(--line);
}

.home-v2-multi circle {
  fill: var(--line);
}

.home-v2-weak-list {
  display: grid;
  gap: 9px;
}

.home-v2-weak-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #eedfc8;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.home-v2-weak-list span {
  color: #766a5d;
  font-size: 12px;
}

.home-v2-weak-list em {
  grid-row: span 2;
}

.home-v2-task-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.home-v2-task-list button.extra {
  display: none;
}

.home-v2-task-list.expanded button.extra {
  display: grid;
}

.home-v2-task-list button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 13px;
  border: 1px solid #eedfc8;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #fffdf8);
  text-align: left;
  cursor: pointer;
}

.home-v2-task-list button.active,
.home-v2-task-list button:hover {
  border-color: rgba(209, 144, 0, 0.52);
  background: #fff5dc;
}

.home-v2-task-list button > span,
.home-v2-quick button > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 14px;
  color: #d19000;
  background: #fff5dc;
}

.home-v2-task-list b {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #d19000;
}

.home-v2-quick > div:last-child {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.home-v2-quick button {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 88px;
  padding: 12px;
  border: 1px solid #eedfc8;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.home-v2-quick button:hover {
  border-color: #d19000;
}

.home-v2-overview.pulse {
  animation: home-card-pulse 0.9s ease both;
}

.home-v2-streak {
  cursor: pointer;
}

.home-v2-quick button i {
  position: absolute;
  right: 12px;
  top: 12px;
  color: #d19000;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.home-v2-quick button:hover i {
  opacity: 1;
  transform: translateX(3px);
}

.home-v2-helper {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  margin-top: 18px;
  padding: 12px 18px;
  color: #201815;
  text-align: left;
  background: linear-gradient(90deg, #fff5dc, #fff);
}

.home-v2-helper img {
  width: 42px;
  height: 42px;
}

.home-v2-helper span {
  flex: 1;
}

.home-v2-helper small {
  display: block;
  color: #766a5d;
}

.home-v2-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  background: rgba(32, 24, 21, 0.28);
}

.home-v2-modal.open {
  display: grid;
}

.home-v2-modal > div {
  display: grid;
  gap: 14px;
  width: min(420px, calc(100vw - 32px));
  padding: 22px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(32, 24, 21, 0.18);
}

.home-v2-modal label {
  display: grid;
  gap: 8px;
  color: #766a5d;
  font-weight: 900;
}

.home-v2-modal input,
.home-v2-modal select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #eedfc8;
  border-radius: 12px;
  font: inherit;
}

.home-v2-modal > div > div {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@keyframes home-progress-in {
  from { width: 0; }
}

@keyframes home-ring-in {
  from { opacity: 0; transform: scale(0.94); }
}

@keyframes home-line-in {
  from { stroke-dasharray: 0 600; }
  to { stroke-dasharray: 600 0; }
}

@keyframes home-card-pulse {
  0% { box-shadow: 0 16px 36px rgba(87, 63, 23, 0.08); }
  45% { box-shadow: 0 0 0 4px rgba(209, 144, 0, 0.16), 0 22px 42px rgba(87, 63, 23, 0.12); }
  100% { box-shadow: 0 16px 36px rgba(87, 63, 23, 0.08); }
}

@keyframes home-flame {
  50% { transform: scale(1.05); opacity: 0.9; }
}

.home-v2 {
  container-type: inline-size;
}

.home-v2-welcome,
.home-v2-card,
.home-v2-helper {
  border-color: rgba(209, 144, 0, 0.22);
  border-radius: var(--home-radius);
  box-shadow: 0 18px 45px rgba(82, 55, 20, 0.07);
}

.home-v2-welcome {
  grid-template-columns: minmax(480px, 1fr) minmax(300px, clamp(320px, 23vw, 390px));
  gap: var(--home-gap);
  margin-bottom: var(--home-gap);
  padding: clamp(18px, 1.55vw, 28px) clamp(22px, 2.1vw, 34px);
  background:
    radial-gradient(circle at 13% 15%, rgba(247, 198, 74, 0.2), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(255, 225, 143, 0.52), transparent 30%),
    linear-gradient(135deg, #fffefb 0%, #fff7e0 100%);
}

.home-v2-welcome-copy {
  gap: clamp(16px, 1.4vw, 24px);
}

.home-v2-welcome-copy img {
  width: clamp(96px, 7.2vw, 132px);
  height: clamp(96px, 7.2vw, 132px);
}

.home-v2-pill {
  min-height: clamp(32px, 2.1vw, 38px);
  padding: 0 clamp(12px, 1vw, 18px);
  font-size: var(--home-small);
}

.home-v2-welcome h2 {
  margin: clamp(10px, 0.9vw, 16px) 0 7px;
  font-size: clamp(28px, 1.35vw + 15px, 42px);
  letter-spacing: -0.04em;
}

.home-v2-welcome p {
  font-size: clamp(15.5px, 0.32vw + 12px, 18px);
}

.home-v2-target {
  gap: clamp(8px, 0.75vw, 13px);
  padding: clamp(16px, 1.35vw, 24px);
  border-radius: clamp(18px, 1vw, 24px);
}

.home-v2-target span,
.home-v2-card > span,
.home-v2-head p,
.home-v2-card small,
.home-v2-card p,
.home-v2-modal label,
.home-v2-helper small {
  font-size: var(--home-small);
}

.home-v2-target strong {
  font-size: clamp(34px, 1.4vw + 18px, 48px);
}

.home-v2-metrics {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--home-gap);
  margin-bottom: var(--home-gap);
}

.home-v2-card {
  padding: clamp(17px, 1.25vw, 24px);
  border-radius: clamp(18px, 1vw, 24px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 252, 245, 0.98));
}

.home-v2-metrics > .home-v2-card {
  min-height: clamp(154px, 11vw, 188px);
}

.home-v2-card:hover,
.home-v2-helper:hover {
  box-shadow: 0 22px 54px rgba(82, 55, 20, 0.11);
}

.home-v2-ring {
  width: clamp(82px, 5.2vw, 98px);
  height: clamp(82px, 5.2vw, 98px);
}

.home-v2-ring strong,
.home-v2-gauge strong {
  font-size: clamp(25px, 0.8vw + 15px, 34px);
}

.home-v2-streak > div,
.home-v2-weak > div,
.home-v2-task-list button > span,
.home-v2-quick button > span {
  width: clamp(42px, 2.7vw, 52px);
  height: clamp(42px, 2.7vw, 52px);
  border-radius: 16px;
}

.home-v2-streak > strong {
  font-size: clamp(31px, 1.1vw + 17px, 43px);
}

.home-v2-streak img {
  width: clamp(42px, 2.6vw, 54px);
}

.home-v2-gauge {
  width: clamp(94px, 6vw, 116px);
  height: clamp(58px, 3.9vw, 72px);
}

.home-v2-grid {
  grid-template-columns: minmax(min(100%, 720px), 1.5fr) minmax(410px, 0.9fr);
  gap: var(--home-gap);
  align-items: stretch;
}

.home-v2-column {
  gap: var(--home-gap);
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
}

.home-v2-path,
.home-v2-quick {
  min-height: 100%;
}

.home-v2-path {
  display: flex;
  flex-direction: column;
}

.home-v2-path-extra {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1vw, 16px);
  margin-top: auto;
  padding-top: clamp(18px, 1.5vw, 28px);
}

.home-v2-path-extra section {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: clamp(168px, 12vw, 230px);
  padding: clamp(15px, 1vw, 20px);
  border: 1px solid rgba(209, 144, 0, 0.2);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(247, 198, 74, 0.16), transparent 38%),
    linear-gradient(180deg, #fffaf0 0%, #fffefb 100%);
}

.home-v2-path-extra span {
  display: grid;
  width: clamp(42px, 2.7vw, 52px);
  height: clamp(42px, 2.7vw, 52px);
  place-items: center;
  border-radius: 16px;
  color: #d19000;
  background: #fff3cf;
}

.home-v2-path-extra strong {
  display: block;
  margin-bottom: 7px;
  color: #201815;
  font-size: clamp(16.5px, 0.36vw + 13px, 21px);
  line-height: 1.32;
}

.home-v2-path-extra p {
  margin: 0;
  color: #6e6256;
  font-size: var(--home-small);
  line-height: 1.65;
}

.home-v2-head h3 {
  font-size: var(--home-title);
  letter-spacing: -0.035em;
}

.home-v2-head button,
.home-v2-head select {
  min-height: clamp(42px, 2.7vw, 50px);
  padding: 0 clamp(15px, 1vw, 20px);
  border-radius: 15px;
  font-size: var(--home-small);
}

.home-v2-stages {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1vw, 16px);
  margin-top: clamp(16px, 1.2vw, 22px);
}

.home-v2-stages button {
  gap: clamp(10px, 0.75vw, 14px);
  min-height: clamp(162px, 10.2vw, 196px);
  padding: clamp(16px, 1.05vw, 22px);
  border-radius: 20px;
}

.home-v2-stages button > div span {
  width: clamp(32px, 2vw, 40px);
  height: clamp(32px, 2vw, 40px);
  font-size: var(--home-small);
}

.home-v2-stages strong,
.home-v2-task-list strong,
.home-v2-quick strong,
.home-v2-weak-list strong {
  font-size: clamp(16.5px, 0.36vw + 13px, 21px);
  line-height: 1.32;
}

.home-v2-stages p,
.home-v2-stages b,
.home-v2-stage-detail span,
.home-v2-weak-list span,
.home-v2-weak em,
.home-v2-weak-list em {
  font-size: var(--home-small);
}

.home-v2-stage-detail {
  padding: clamp(14px, 1.1vw, 20px);
  border-radius: 18px;
}

.home-v2-multi {
  height: clamp(150px, 12vw, 190px);
  margin: clamp(12px, 1vw, 18px) 0 clamp(10px, 0.8vw, 16px);
}

.home-v2-weak-list,
.home-v2-task-list {
  gap: clamp(11px, 0.85vw, 16px);
}

.home-v2-weak-list button {
  padding: clamp(14px, 1vw, 18px);
  border-radius: 18px;
}

.home-v2-task-list {
  margin-top: clamp(16px, 1.2vw, 22px);
}

.home-v2-task-list button {
  grid-template-columns: clamp(42px, 2.7vw, 52px) minmax(0, 1fr) auto;
  gap: clamp(13px, 1vw, 18px);
  min-height: clamp(88px, 5.8vw, 112px);
  padding: clamp(15px, 1.05vw, 20px);
  border-radius: 20px;
}

.home-v2-task-list p,
.home-v2-quick small {
  font-size: var(--home-small);
}

.home-v2-task-list b,
.home-v2-link {
  font-size: clamp(15.5px, 0.28vw + 12px, 18px);
}

.home-v2-quick > div:last-child {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(11px, 0.9vw, 16px);
  margin-top: clamp(16px, 1.2vw, 22px);
}

.home-v2-quick button {
  min-height: clamp(108px, 7vw, 132px);
  padding: clamp(15px, 1vw, 20px);
  border-radius: 18px;
}

.home-v2-helper {
  min-height: clamp(84px, 5.4vw, 104px);
  margin-top: var(--home-gap);
  padding: clamp(14px, 1.1vw, 20px) clamp(18px, 1.4vw, 26px);
}

.home-v2-helper img {
  width: clamp(48px, 3.1vw, 62px);
  height: clamp(48px, 3.1vw, 62px);
}

.home-v2-helper strong {
  font-size: var(--home-subtitle);
}

.home-forum-card {
  margin-top: var(--home-gap);
  display: grid;
  gap: 16px;
}

.home-forum-compose {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(140px, 0.45fr) auto;
  gap: 10px;
  align-items: start;
}

.home-forum-compose input,
.home-forum-compose select,
.home-forum-compose textarea {
  width: 100%;
  border: 1px solid #ead9bf;
  border-radius: 14px;
  background: #fffaf0;
  color: #211916;
  font: inherit;
  font-size: var(--home-small);
  outline: 0;
}

.home-forum-compose input,
.home-forum-compose select {
  min-height: 42px;
  padding: 0 13px;
}

.home-forum-compose textarea {
  grid-column: 1 / 3;
  min-height: 78px;
  padding: 12px 13px;
  resize: vertical;
}

.home-forum-compose input:focus,
.home-forum-compose select:focus,
.home-forum-compose textarea:focus {
  border-color: rgba(209, 144, 0, 0.75);
  box-shadow: 0 0 0 4px rgba(246, 197, 66, 0.15);
}

.home-forum-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.home-forum-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #ead9bf;
  border-radius: 999px;
  color: #7b6755;
  background: #fffdf9;
  font-size: var(--home-small);
  font-weight: 850;
  cursor: pointer;
}

.home-forum-tabs button.active {
  color: #211916;
  border-color: rgba(246, 197, 66, 0.95);
  background: #fff2c9;
}

.home-forum-list {
  display: grid;
  gap: 10px;
}

.home-forum-post {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(234, 217, 191, 0.9);
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff, #fffaf0);
}

.home-forum-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #211916;
  background: #ffe7a1;
  font-weight: 950;
}

.home-forum-post-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.home-forum-post-head strong {
  color: #211916;
  font-size: clamp(16px, 0.35vw + 14px, 19px);
}

.home-forum-post-head span {
  padding: 3px 8px;
  border-radius: 999px;
  color: #b66d00;
  background: #fff1c8;
  font-size: 12px;
  font-weight: 900;
}

.home-forum-post p {
  margin: 7px 0 6px;
  color: #5f5147;
  line-height: 1.65;
  font-size: var(--home-small);
}

.home-forum-post small {
  color: #8b7d70;
}

.home-forum-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.home-forum-actions button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #ead9bf;
  border-radius: 999px;
  color: #7b6755;
  background: #fffdf9;
  font-weight: 850;
  cursor: pointer;
}

.home-forum-replies {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 246, 222, 0.72);
}

.home-forum-replies > div:not(.home-forum-reply-box) {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: #5f5147;
  font-size: var(--home-small);
  line-height: 1.55;
}

.home-forum-replies b {
  flex: 0 0 auto;
  color: #b66d00;
}

.home-forum-reply-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.home-forum-reply-box input {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #ead9bf;
  border-radius: 999px;
  background: #fffdf9;
  color: #211916;
  outline: 0;
}

.home-forum-reply-box button {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  color: #211916;
  background: #f6c542;
  font-weight: 950;
  cursor: pointer;
}

.home-v2 .home-v2-metrics {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.home-v2 .home-v2-metrics > .home-v2-card {
  min-height: clamp(124px, 9.5vw, 146px);
}

.home-v2 .home-v2-card {
  overflow: hidden;
}

.home-v2 .home-v2-head h3,
.home-v2 .home-v2-task-list strong,
.home-v2 .home-v2-quick strong,
.home-v2 .home-v2-weak-list strong {
  overflow-wrap: anywhere;
}

.home-v2 .home-v2-task-list button {
  grid-template-columns: 36px minmax(0, 1fr) auto;
}

.home-v2 .home-v2-task-list b {
  white-space: nowrap;
}

@container (max-width: 1180px) {
  .home-v2-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-v2-trend {
    grid-column: 1 / -1;
  }

  .home-v2-grid {
    grid-template-columns: 1fr;
  }
}

@container (max-width: 760px) {
  .home-v2-welcome {
    grid-template-columns: 1fr;
  }

  .home-v2-welcome-copy {
    align-items: flex-start;
  }

  .home-v2-metrics,
  .home-v2-stages,
  .home-v2-quick > div:last-child {
    grid-template-columns: 1fr;
  }

  .home-v2-task-list button {
    grid-template-columns: clamp(42px, 12vw, 52px) minmax(0, 1fr);
  }

  .home-v2-task-list b {
    grid-column: 2;
  }

  .home-v2-path-extra {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 *,
  .home-v2 *::before,
  .home-v2 *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 1320px) {
  .home-v2-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-v2-column {
    gap: var(--home-gap);
  }

  .home-v2-overview {
    order: initial;
  }

  .home-v2-quick > div:last-child {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 1180px) {
  .home-v2-welcome {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-v2-target {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .home-v2-target i {
    grid-column: 1 / -1;
  }
}

.daily-goal-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.72fr);
  gap: 18px;
  align-items: start;
}

.practice-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid rgba(234, 223, 202, 0.92);
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(182, 121, 0, 0.96), rgba(36, 49, 48, 0.98) 56%, rgba(23, 42, 69, 0.78)),
    #241b18;
  box-shadow: 0 16px 42px rgba(24, 33, 37, 0.13);
}

.practice-hero h2,
.practice-hero p {
  margin: 0;
}

.practice-hero h2 {
  font-size: 28px;
}

.practice-hero p {
  margin-top: 10px;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.7;
}

.practice-hero .eyebrow {
  color: #ffe08a;
}

.practice-hero-actions {
  min-width: 230px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.09);
}

.practice-hero-actions span {
  color: rgba(255, 255, 255, 0.72);
}

.practice-hero-actions strong {
  display: block;
  margin: 8px 0 14px;
  font-size: 21px;
}

.training-mode-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 14px;
  padding-bottom: 4px;
}

.mode-chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-weight: 900;
}

.mode-chip.active {
  color: #fff;
  border-color: #241b18;
  background: #241b18;
}

.practice-console {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.practice-flow-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.practice-flow-summary article {
  min-height: 82px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  gap: 5px;
}

.practice-flow-summary article.active {
  color: #fff;
  border-color: var(--ink);
  background: var(--ink);
}

.practice-flow-summary span {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 950;
}

.practice-flow-summary strong,
.practice-flow-summary small {
  color: inherit;
}

.practice-flow-summary small {
  line-height: 1.45;
  opacity: 0.72;
}

.console-tile {
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  display: grid;
  align-content: space-between;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.console-tile:hover,
.console-tile.active {
  border-color: var(--mint-dark);
  box-shadow: 0 12px 26px rgba(182, 121, 0, 0.12);
  transform: translateY(-1px);
}

.console-tile span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.console-tile strong {
  color: var(--mint-dark);
  font-size: 15px;
}

.practice-flow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.practice-flow-steps article {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.practice-flow-steps article.active {
  color: #fff;
  border-color: #241b18;
  background: #241b18;
}

.practice-flow-steps span {
  color: var(--accent-text);
  font-weight: 900;
}

.practice-flow-steps small {
  color: var(--muted);
}

.practice-flow-steps article.active small {
  color: rgba(255, 255, 255, 0.72);
}

.practice-workbench {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 0.66fr);
  gap: 14px;
  align-items: start;
}

.question-type-shell {
  display: grid;
  grid-template-columns: minmax(190px, 0.22fr) minmax(0, 0.78fr);
  gap: 14px;
  align-items: start;
}

.skill-map {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 10px;
}

.skill-map-item {
  min-height: 86px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  display: grid;
  align-content: space-between;
}

.skill-map-item span {
  color: var(--mint-dark);
  font-size: 16px;
  font-weight: 950;
}

.skill-map-item strong,
.skill-map-item small {
  color: var(--muted);
  font-size: 13px;
}

.skill-map-item.active {
  color: #fff;
  border-color: var(--ink);
  background: var(--ink);
}

.skill-map-item.active span,
.skill-map-item.active strong,
.skill-map-item.active small {
  color: #fff;
}

.question-type-grid {
  display: grid;
  gap: 14px;
}

.type-group {
  display: grid;
  gap: 10px;
}

.type-group-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.type-group-title span {
  color: var(--mint-dark);
  font-weight: 900;
}

.type-group-title strong {
  color: var(--muted);
  font-size: 13px;
}

.type-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.type-card {
  min-height: 112px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  display: grid;
  align-content: space-between;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.type-card:hover {
  border-color: var(--mint-dark);
  box-shadow: 0 12px 26px rgba(182, 121, 0, 0.12);
  transform: translateY(-1px);
}

.type-card span {
  color: var(--accent-text);
  font-weight: 900;
}

.type-card small {
  color: var(--muted);
}

.practice-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.34fr);
  gap: 18px;
  margin-bottom: 18px;
}

.practice-top-grid .practice-hero {
  min-height: 220px;
  margin: 0;
  padding: 32px 34px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.36fr);
  border: 0;
  border-radius: 14px;
  background:
    radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.56), transparent 22%),
    linear-gradient(120deg, #ffe9a4, #ffd16a);
  box-shadow: 0 16px 36px rgba(184, 112, 0, 0.14);
  overflow: hidden;
}

.practice-top-grid .practice-hero h2 {
  max-width: 660px;
  margin: 8px 0 10px;
  color: #17120e;
  font-size: clamp(32px, 3.2vw, 48px);
}

.practice-top-grid .practice-hero h2 span {
  display: inline-grid;
  min-width: 34px;
  min-height: 26px;
  margin-left: 8px;
  place-items: center;
  border-radius: 8px;
  color: #ad7200;
  background: rgba(255, 255, 255, 0.62);
  font-size: 16px;
}

.practice-top-grid .practice-hero p {
  color: #6a4a11;
  font-weight: 800;
}

.practice-top-grid .practice-hero > img {
  align-self: end;
  justify-self: center;
  width: min(260px, 100%);
  max-height: 220px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 24px 30px rgba(88, 50, 0, 0.22));
}

.practice-hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.practice-hero-points article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.practice-hero-points b {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(124, 80, 0, 0.28);
  border-radius: 50%;
  color: #915c00;
  background: rgba(255, 255, 255, 0.48);
}

.practice-hero-points strong {
  color: #4c3300;
  line-height: 1.2;
}

.practice-hero-points small {
  color: #76551a;
  line-height: 1.4;
}

.practice-plan-card {
  position: relative;
  display: grid;
  align-content: space-between;
  min-height: 220px;
  padding: 24px;
  border: 1px solid rgba(222, 174, 59, 0.42);
  border-radius: 18px;
  color: #261b12;
  background:
    radial-gradient(circle at 88% 16%, rgba(255, 203, 64, 0.42), transparent 26%),
    linear-gradient(135deg, #fffaf0 0%, #ffe39b 58%, #f8bd2b 100%);
  box-shadow: 0 18px 36px rgba(152, 96, 0, 0.14);
  overflow: hidden;
}

.practice-plan-card::before {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

.practice-plan-card::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 22px;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.practice-plan-card > div {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.practice-plan-card span,
.practice-plan-card p {
  position: relative;
  z-index: 1;
  color: #6d4f18;
}

.practice-plan-card > div > span {
  display: inline-flex;
  width: max-content;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #7f5600;
  background: rgba(255, 255, 255, 0.62);
  font-weight: 950;
}

.practice-plan-card .ghost-btn {
  border-color: rgba(145, 100, 21, 0.26);
  color: #7b5200;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

.practice-plan-card .ghost-btn:hover {
  color: #241b18;
  background: #fff;
}

.practice-plan-card strong {
  position: relative;
  z-index: 1;
  display: block;
  margin: 20px 0 8px;
  color: #1f1712;
  font-size: 26px;
  line-height: 1.18;
  white-space: nowrap;
}

.practice-plan-card .primary-btn {
  position: relative;
  z-index: 1;
  width: max-content;
  min-width: 178px;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #251a14, #8b5d00);
  box-shadow: 0 10px 22px rgba(91, 58, 0, 0.2);
}

.practice-dashboard-layout {
  grid-template-columns: minmax(230px, 0.26fr) minmax(0, 1fr);
  align-items: start;
}

.practice-dashboard-layout:not(.single-practice-column) {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.42fr);
}

.practice-dashboard-layout:not(.single-practice-column) .practice-left-rail {
  display: none;
}

.practice-left-rail {
  display: grid;
  gap: 18px;
}

.practice-side-card {
  padding: 18px;
  border: 1px solid rgba(234, 223, 202, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(24, 33, 37, 0.055);
}

.practice-side-card h3 {
  margin: 0 0 14px;
}

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

.practice-category-list button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  font-weight: 900;
}

.practice-category-list button.active,
.practice-category-list button:hover {
  color: #875800;
  background: linear-gradient(90deg, #fff0c5, #fff8e8);
}

.practice-category-list span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #9a6a00;
}

.practice-category-list em {
  color: var(--muted);
  font-style: normal;
}

.practice-data-card .panel-heading {
  margin-bottom: 14px;
}

.practice-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.practice-data-grid article {
  display: grid;
  gap: 5px;
  min-height: 68px;
}

.practice-data-grid article:nth-child(3) {
  grid-column: 1 / -1;
}

.practice-data-grid span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.practice-data-grid strong {
  font-size: 28px;
}

.practice-dashboard-layout .practice-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.practice-dashboard-layout .practice-panel > .panel-heading {
  margin-bottom: 12px;
}

.practice-dashboard-layout .training-mode-strip {
  margin: 0 0 18px;
}

.practice-dashboard-layout .mode-chip {
  min-width: 168px;
  min-height: 58px;
  border-radius: 10px;
  background: #fff;
}

.practice-dashboard-layout .mode-chip.active {
  color: #fff;
  background: linear-gradient(135deg, #241b18, #14100f);
}

.practice-dashboard-layout .practice-flow-summary {
  display: none;
}

.practice-dashboard-layout .question-type-shell {
  display: block;
}

.practice-dashboard-layout .skill-map {
  display: none;
}

.practice-dashboard-layout .type-group {
  display: block;
}

.practice-dashboard-layout .type-group-title {
  display: none;
}

.practice-dashboard-layout .type-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.practice-dashboard-layout .type-card {
  position: relative;
  min-height: 112px;
  padding: 18px 18px 14px 86px;
  border-color: color-mix(in srgb, var(--type-color, #6b3de8) 24%, #eadfca);
  border-radius: 12px;
  color: var(--type-color, #6b3de8);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--type-bg, #eee5ff) 72%, #fff) 0%, #fff 72%);
  overflow: hidden;
}

.practice-dashboard-layout .type-card::before {
  content: attr(data-type);
  position: absolute;
  left: 18px;
  top: 20px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--type-color, #6b3de8);
  background: var(--type-bg, #eee5ff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--type-color, #6b3de8) 18%, transparent);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0;
  white-space: nowrap;
}

.practice-dashboard-layout .type-card[data-type="FIB-RW"]::before,
.practice-dashboard-layout .type-card[data-type="R-MCM"]::before,
.practice-dashboard-layout .type-card[data-type="R-FIB"]::before,
.practice-dashboard-layout .type-card[data-type="R-MCS"]::before,
.practice-dashboard-layout .type-card[data-type="L-MCM"]::before,
.practice-dashboard-layout .type-card[data-type="L-FIB"]::before,
.practice-dashboard-layout .type-card[data-type="L-MCS"]::before {
  font-size: 11px;
}

.practice-dashboard-layout .type-card[data-type="RA"] { --type-color: #7b45d9; --type-bg: #efe4ff; }
.practice-dashboard-layout .type-card[data-type="RS"] { --type-color: #15955b; --type-bg: #dff8eb; }
.practice-dashboard-layout .type-card[data-type="DI"] { --type-color: #246fca; --type-bg: #e2f0ff; }
.practice-dashboard-layout .type-card[data-type="RL"] { --type-color: #0c947f; --type-bg: #dcf8f1; }
.practice-dashboard-layout .type-card[data-type="ASQ"] { --type-color: #31a344; --type-bg: #e4f9dc; }
.practice-dashboard-layout .type-card[data-type="SGD"] { --type-color: #8a55d7; --type-bg: #f0e5ff; }
.practice-dashboard-layout .type-card[data-type="RTS"] { --type-color: #d64a42; --type-bg: #ffe4df; }
.practice-dashboard-layout .type-card[data-type="SWT"] { --type-color: #2f73d8; --type-bg: #e4edff; }
.practice-dashboard-layout .type-card[data-type="WE"] { --type-color: #b67200; --type-bg: #fff1c9; }
.practice-dashboard-layout .type-card[data-type="FIB-RW"] { --type-color: #c05621; --type-bg: #ffe6d6; }
.practice-dashboard-layout .type-card[data-type="R-MCM"] { --type-color: #6d8f00; --type-bg: #eef8cf; }
.practice-dashboard-layout .type-card[data-type="ROP"] { --type-color: #a85b00; --type-bg: #ffedd6; }
.practice-dashboard-layout .type-card[data-type="R-FIB"] { --type-color: #4f8b2f; --type-bg: #e6f6dc; }
.practice-dashboard-layout .type-card[data-type="R-MCS"] { --type-color: #7a7f12; --type-bg: #f3f4d6; }
.practice-dashboard-layout .type-card[data-type="SST"] { --type-color: #df5c21; --type-bg: #ffe3d4; }
.practice-dashboard-layout .type-card[data-type="L-MCM"] { --type-color: #008cba; --type-bg: #dcf4fb; }
.practice-dashboard-layout .type-card[data-type="L-FIB"] { --type-color: #006fa8; --type-bg: #dff1ff; }
.practice-dashboard-layout .type-card[data-type="HCS"] { --type-color: #005aa8; --type-bg: #dcecff; }
.practice-dashboard-layout .type-card[data-type="L-MCS"] { --type-color: #3b66c4; --type-bg: #e3eaff; }
.practice-dashboard-layout .type-card[data-type="SMW"] { --type-color: #5961c8; --type-bg: #e8e9ff; }
.practice-dashboard-layout .type-card[data-type="HIW"] { --type-color: #9b4ab8; --type-bg: #f5e1ff; }
.practice-dashboard-layout .type-card[data-type="WFD"] { --type-color: #0f6cb8; --type-bg: #e1f0ff; }

.practice-dashboard-layout .type-card::after {
  content: "";
  position: absolute;
  left: 86px;
  right: 18px;
  bottom: 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--type-color, #6b3de8), color-mix(in srgb, var(--type-color, #6b3de8) 18%, #fff));
}

.practice-dashboard-layout .type-card span {
  display: block;
  max-width: 100%;
  color: var(--type-color, #6b3de8);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-dashboard-layout .type-card strong {
  display: block;
  margin-top: 3px;
  color: #201814;
  font-size: 15px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-dashboard-layout .type-card small {
  display: block;
  margin-top: 10px;
  padding-bottom: 12px;
  color: #7d7267;
  line-height: 1.35;
}

.practice-detail-hero {
  display: none;
}

.stage-types .practice-workbench,
.stage-types + .feedback-panel,
.stage-list .question-type-shell,
.stage-list .answer-stage,
.stage-list + .feedback-panel,
.stage-practice .question-type-shell {
  display: none;
}

.stage-list .practice-workbench {
  grid-template-columns: minmax(0, 1fr);
}

.split-layout.single-practice-column {
  grid-template-columns: minmax(0, 1fr);
}

.practice-dashboard-layout.single-practice-column {
  grid-template-columns: minmax(230px, 0.26fr) minmax(0, 1fr);
}

.feedback-panel {
  display: none;
}

.feedback-panel.has-report {
  display: block;
}

.feedback-panel.speech-report-mode > .eyebrow,
.feedback-panel.speech-report-mode > h2,
.feedback-panel.speech-report-mode > .ai-breakdown {
  display: none;
}

.feedback-panel.speech-report-mode {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.solution-panel:empty {
  display: none;
}

.solution-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
  display: grid;
  gap: 12px;
}

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

.solution-head h3 {
  margin: 2px 0 0;
}

.solution-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.solution-tags span {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
}

.solution-tags strong {
  color: var(--ink);
}

.solution-compare {
  display: grid;
  gap: 10px;
}

.solution-compare article {
  padding: 12px;
  border-radius: 8px;
  background: #fff;
}

.solution-compare span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.solution-compare p {
  margin: 6px 0 0;
  color: var(--ink);
  line-height: 1.55;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.question-browser {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 180px);
  overflow: hidden;
}

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

.question-browser h3 {
  margin: 0;
}

.answer-stage {
  min-width: 0;
}

.panel {
  padding: 22px;
}

.panel-heading,
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.task-list {
  display: grid;
  gap: 12px;
}

.mock-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 8px;
  background: #fff7e5;
}

.exam-center-grid,
.profile-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

#mock .exam-center-grid {
  display: none;
}

.profile-insight-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
}

.exam-card {
  min-height: 166px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  align-content: space-between;
}

.exam-card.active {
  color: #fff;
  border-color: #241b18;
  background: #241b18;
  box-shadow: 0 16px 34px rgba(24, 33, 37, 0.13);
}

.exam-card span {
  color: var(--accent-text);
  font-weight: 900;
}

.exam-card p {
  margin: 8px 0;
  color: var(--muted);
  line-height: 1.65;
}

.exam-card.active p {
  color: rgba(255, 255, 255, 0.72);
}

.exam-card b {
  color: var(--mint-dark);
}

.exam-card.active b {
  color: #ffe08a;
}

.mock-paper-workbench {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(280px, 0.38fr);
  gap: 14px;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 18px 42px rgba(33, 25, 22, 0.06);
}

.mock-paper-tabs {
  display: grid;
  gap: 8px;
  align-content: start;
}

.mock-paper-tabs button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.8);
  text-align: left;
  font-weight: 950;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.mock-paper-tabs button.active {
  color: #fff;
  border-color: var(--ink);
  background: var(--ink);
}

.mock-paper-tabs button:hover {
  border-color: rgba(33, 25, 22, 0.28);
  transform: translateX(2px);
}

.mock-paper-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mock-paper-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}

.compact-search {
  min-height: 42px;
}

.mock-paper-filters {
  display: flex;
  gap: 8px;
}

.mock-paper-card {
  min-height: 106px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: start;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mock-paper-card.active {
  border-color: rgba(33, 25, 22, 0.78);
  box-shadow: 0 16px 32px rgba(33, 25, 22, 0.12);
  transform: translateY(-1px);
}

.mock-paper-card.active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--gold), var(--mint-dark));
}

.mock-paper-card:hover {
  border-color: rgba(33, 25, 22, 0.34);
  box-shadow: 0 14px 26px rgba(33, 25, 22, 0.08);
}

.mock-paper-card span {
  color: var(--accent-text);
  font-weight: 950;
}

.mock-paper-card strong,
.mock-paper-card p {
  grid-column: 1;
}

.mock-paper-card small {
  grid-row: 1 / span 3;
  grid-column: 2;
  align-self: center;
  min-width: 90px;
  padding: 8px;
  border-radius: 8px;
  color: var(--ink);
  background: var(--accent-soft);
  text-align: center;
  font-weight: 900;
}

.mock-paper-card p,
.mock-paper-card small {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.mock-paper-detail {
  position: sticky;
  top: 18px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    radial-gradient(circle at top right, rgba(246, 197, 66, 0.16), transparent 42%),
    linear-gradient(180deg, #2b211d, #1e1512);
  color: #fff;
  display: grid;
  gap: 14px;
  align-content: start;
  box-shadow: 0 22px 48px rgba(33, 25, 22, 0.18);
}

.mock-paper-detail h3,
.mock-paper-detail p {
  margin: 0;
}

.mock-paper-detail p {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
}

.paper-detail-meta,
.paper-status-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.paper-detail-meta span,
.paper-status-summary article {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
}

.paper-status-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.paper-status-summary article {
  min-height: 58px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  align-content: center;
  gap: 4px;
}

.paper-status-summary span {
  color: rgba(255, 255, 255, 0.64);
}

.paper-status-summary strong {
  color: #fff;
}

.mock-command-center {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.mock-command-center article {
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  display: grid;
  align-content: space-between;
  box-shadow: 0 10px 24px rgba(33, 25, 22, 0.045);
}

.mock-command-center article:first-child,
.mock-command-center article:last-child {
  background: linear-gradient(180deg, #fff, #fff8e5);
}

.mock-command-center span,
.mock-command-center small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.mock-command-center strong {
  display: block;
  margin: 4px 0;
  color: var(--ink);
  font-size: 18px;
}

.radar-list,
.teacher-note-card {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.radar-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.radar-item span {
  color: var(--muted);
}

.radar-item strong {
  display: block;
  margin-top: 2px;
  font-size: 22px;
}

.teacher-note-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff7e5;
}

.teacher-note-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.mock-hero h3,
.mock-hero p {
  margin: 0;
}

.mock-hero p {
  color: var(--muted);
  line-height: 1.7;
}

.mock-timer span {
  color: var(--mint-dark);
}

.mock-task-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.mock-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.mock-task span,
.mock-task small {
  color: var(--muted);
}

.mock-task-index {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: var(--mint-dark) !important;
  background: #fff3cf;
  display: grid;
  place-items: center;
  font-weight: 950;
}

.mock-task strong {
  display: block;
  margin-bottom: 5px;
}

.mock-exam-card {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.mock-exam-topline,
.mock-exam-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.mock-exam-topline span,
.mock-exam-actions span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.mock-question-progress {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 8px;
}

.mock-question-progress button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.mock-question-progress button.active {
  border-color: var(--mint-dark);
  background: var(--mint-dark);
  color: #fff;
}

.mock-question-progress button.done:not(.active) {
  border-color: #bbe3d3;
  background: #fff3cf;
  color: var(--mint-dark);
}

.mock-question-stem {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
}

.mock-question-stem strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
}

.mock-question-stem p {
  margin: 0;
  color: var(--text);
  line-height: 1.75;
}

.mock-answer-area textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  font: inherit;
  resize: vertical;
}

.mock-answer-box {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
}

.mock-answer-box p {
  margin: 0;
  color: var(--muted);
}

.mock-choice-grid {
  display: grid;
  gap: 10px;
}

.mock-question-report {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.mock-question-report h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.mock-question-report article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
}

.mock-question-report span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff3cf;
  color: var(--mint-dark);
  font-weight: 900;
}

.mock-question-report strong,
.mock-question-report small {
  display: block;
}

.mock-question-report small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.45;
}

.mock-question-report b {
  font-size: 20px;
  color: var(--mint-dark);
}

.mock-skill-report {
  margin-top: 14px;
}

.mock-skill-report:empty {
  display: none;
}

#mock .mock-session-area aside .score-ring {
  display: none;
}

#mock.mock-exam-focus .exam-center-grid,
#mock.mock-exam-focus .mock-paper-workbench,
#mock.mock-exam-focus .mock-command-center,
#mock.mock-exam-focus .mock-session-area > aside {
  display: none;
}

#mock.mock-exam-focus .mock-session-area {
  grid-template-columns: 1fr;
}

#mock.mock-exam-focus .mock-session-area > .panel {
  min-height: calc(100vh - 150px);
  border-radius: 0;
  box-shadow: none;
}

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

.mock-skill-grid article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
  display: grid;
  gap: 8px;
}

.mock-skill-grid article > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.mock-skill-grid span,
.mock-skill-grid small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.mock-skill-grid strong {
  color: var(--mint-dark);
  font-size: 22px;
}

.mock-page-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.mock-page-head h2 {
  margin: 0;
  color: #1f1712;
  font-size: 34px;
  line-height: 1.12;
}

.mock-page-head p {
  margin: 8px 0 0;
  color: #5f564d;
  font-weight: 800;
}

.mock-page-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mock-center-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.34fr);
  gap: 24px;
  align-items: start;
}

.mock-main-column,
.mock-right-column {
  display: grid;
  gap: 18px;
}

#mock .mock-paper-workbench {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(234, 223, 202, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(33, 25, 22, 0.06);
}

#mock .mock-paper-tabs {
  display: flex;
  gap: 22px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

#mock .mock-paper-tabs button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  white-space: nowrap;
  text-align: center;
}

#mock .mock-paper-tabs button.active {
  border-color: #c88300;
  background: linear-gradient(135deg, #c68100, #e3a500);
  box-shadow: 0 10px 18px rgba(190, 123, 0, 0.18);
}

#mock .mock-paper-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  padding: 16px 20px 6px;
}

#mock .mock-paper-list {
  gap: 14px;
  padding: 10px 20px 16px;
}

#mock .mock-paper-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 105px 116px;
  gap: 16px;
  align-items: center;
  min-height: 136px;
  padding: 22px 22px 22px 24px;
  border-radius: 12px;
  background: #fff;
  text-align: left;
}

#mock .mock-paper-card.active {
  border-color: rgba(214, 154, 18, 0.5);
  box-shadow: 0 16px 32px rgba(188, 126, 0, 0.11);
}

#mock .mock-paper-card.active::before {
  width: 0;
}

.mock-paper-ribbon {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 0 0 8px 0;
  color: #fff !important;
  background: #ff8f3d;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 950;
}

#mock .mock-paper-card.tone-mint .mock-paper-ribbon {
  background: #21c7b8;
}

#mock .mock-paper-card.tone-violet .mock-paper-ribbon {
  background: #8273f2;
}

.mock-paper-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #b67900;
  background: radial-gradient(circle at 50% 40%, #fff8dd 0 38%, #ffe8a6 39% 100%);
  box-shadow: inset 0 0 0 1px rgba(201, 137, 0, 0.16);
  font-size: 30px;
  font-weight: 950;
}

.tone-mint .mock-paper-icon {
  color: #0aa99a;
  background: radial-gradient(circle at 50% 40%, #effffb 0 38%, #bff4ec 39% 100%);
}

.tone-violet .mock-paper-icon {
  color: #6658e8;
  background: radial-gradient(circle at 50% 40%, #f7f4ff 0 38%, #d9d1ff 39% 100%);
}

.mock-paper-copy {
  display: block;
  min-width: 0;
}

#mock .mock-paper-copy strong {
  display: inline-block;
  margin-right: 8px;
  color: #1f1712;
  font-size: 21px;
}

.mock-paper-copy em {
  display: inline-flex;
  min-height: 24px;
  margin: 0 4px 8px 0;
  padding: 0 8px;
  align-items: center;
  border-radius: 999px;
  color: #b67900;
  background: #fff2cd;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

#mock .mock-paper-copy p {
  margin: 0 0 12px;
  color: #6d6359;
  line-height: 1.55;
}

#mock .mock-paper-copy small {
  color: #786b5d;
  font-weight: 850;
}

.mock-paper-meta {
  display: grid;
  gap: 10px;
  color: #5f6670;
  font-weight: 850;
}

.mock-paper-meta span {
  color: inherit !important;
}

#mock .mock-paper-card > i {
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid #d89513;
  border-radius: 8px;
  color: #bd7a00;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 950;
}

#mock .mock-paper-detail {
  position: relative;
  top: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 20px 20px;
  padding: 0 22px 0 0;
  border: 1px solid rgba(234, 223, 202, 0.96);
  border-radius: 12px;
  color: #1f1712;
  background:
    radial-gradient(circle at 84% 42%, rgba(246, 197, 66, 0.18), transparent 25%),
    linear-gradient(105deg, #fffaf0, #fff5dc);
  box-shadow: none;
  overflow: hidden;
}

.mock-ai-card-copy {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.mock-ai-card-copy img {
  width: 128px;
  align-self: end;
  margin-left: 6px;
}

.mock-ai-card-copy h3,
.mock-ai-card-copy p {
  margin: 0;
}

.mock-ai-card-copy h3 {
  font-size: 23px;
}

.mock-ai-card-copy p {
  margin-top: 8px;
  color: #6f6254;
}

.dark-action-btn {
  min-height: 46px;
  padding: 0 28px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #211815;
  font-weight: 950;
  cursor: pointer;
}

.dark-action-btn span {
  margin-left: 10px;
}

.mock-flow-panel,
.mock-status-card,
.mock-report-panel,
.mock-tip-card {
  border: 1px solid rgba(234, 223, 202, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(32, 24, 18, 0.055);
}

.mock-flow-panel {
  padding: 20px;
}

.mock-flow-panel h3 {
  margin: 0 0 16px;
  font-size: 22px;
}

#mock .mock-flow-panel .mock-task-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

#mock .mock-flow-panel .mock-task {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 86px;
  padding: 14px;
  box-shadow: none;
}

#mock .mock-flow-panel .mock-task > span:last-child {
  grid-column: 2;
  font-size: 12px;
  font-weight: 900;
}

.mock-command-center {
  display: block;
  margin: 0;
}

.mock-command-center article {
  box-shadow: none;
}

.mock-status-card {
  padding: 22px;
  display: grid;
  gap: 18px;
}

.mock-status-card h3 {
  margin: 0;
  font-size: 18px;
}

.mock-status-ring {
  width: 210px;
  height: 210px;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 58%, transparent 59%),
    conic-gradient(#f0a510 0deg var(--mock-status), #f1ece3 var(--mock-status) 360deg);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.mock-status-ring strong {
  color: #1f1712;
  font-size: 34px;
  line-height: 1;
}

.mock-status-ring span {
  margin-top: 6px;
  color: #8a8177;
  font-size: 13px;
  font-weight: 850;
}

.mock-status-ring em {
  margin-top: 6px;
  color: #e29a00;
  font-style: normal;
  font-size: 20px;
  font-weight: 950;
}

.mock-status-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mock-status-stats article {
  min-height: 58px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
}

.mock-status-stats article:last-child {
  border-right: 0;
}

.mock-status-stats strong {
  color: #211815;
  font-size: 22px;
}

.mock-status-stats span {
  color: #6f6254;
  font-size: 13px;
  font-weight: 850;
}

.mock-report-panel {
  padding: 22px;
}

.mock-report-panel .score-ring {
  display: none;
}

.mock-latest-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.mock-latest-head strong,
.mock-latest-head span {
  display: block;
}

.mock-latest-head span {
  margin-top: 6px;
  color: #7c7167;
  font-size: 13px;
}

.mock-latest-head em {
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: #009d73;
  background: #dff8ef;
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
}
.mock-latest-score {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  margin-bottom: 12px;
}

.mock-latest-score span,
.mock-latest-score b {
  color: #6f6254;
  font-size: 13px;
}

.mock-latest-score strong {
  grid-row: 2;
  color: #1f1712;
  font-size: 32px;
}

.mock-latest-score small {
  color: #6f6254;
  font-size: 15px;
}

.mock-latest-score b {
  grid-row: 2;
  align-self: center;
  font-weight: 900;
}

.mock-single-chart {
  height: 118px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  padding: 8px 0 2px;
  border-bottom: 1px solid #eadfcd;
}

.mock-single-chart i {
  position: relative;
  height: var(--score);
  min-height: 22px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #ffb21f, rgba(255, 178, 31, 0.14));
}

.mock-single-chart span {
  position: absolute;
  left: 50%;
  bottom: -24px;
  color: #6f6254;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  transform: translateX(-50%);
}

.mock-latest-empty {
  padding: 16px;
  border-radius: 12px;
  background: #fff8e8;
}

.mock-latest-empty strong,
.mock-latest-empty p {
  margin: 0;
}

.mock-latest-empty p {
  margin-top: 8px;
  color: #6f6254;
}

.mock-tip-card {
  padding: 22px;
  background: linear-gradient(135deg, #fff9ec, #f9f0df);
}

.mock-tip-card span {
  display: block;
  margin-bottom: 12px;
  color: #1f1712;
  font-size: 18px;
  font-weight: 950;
}

.mock-tip-card p {
  margin: 0 0 18px;
  color: #55483c;
  line-height: 1.75;
}

#mock:not(.mock-exam-focus) .mock-session-area {
  display: none;
}

#mock.mock-exam-focus .mock-page-head,
#mock.mock-exam-focus .mock-center-layout {
  display: none;
}

#mock.mock-exam-focus .mock-session-area {
  display: grid;
}

.task-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(24, 33, 37, 0.04);
}

.task-item h3,
.course-card h3,
.resource-item h3 {
  margin: 0 0 6px;
}

.task-item p,
.course-card p,
.resource-item p,
.feedback-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.task-status {
  width: 14px;
  height: 14px;
  border: 2px solid var(--mint);
  border-radius: 50%;
  background: #fff7d4;
}

.task-item.done .task-status {
  background: var(--mint);
}

.starter-list,
.plain-list {
  margin: 14px 0 22px;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.9;
}

.question-card {
  padding: 22px;
  border-radius: 8px;
  background: #fff7e5;
}

.practice-navigator {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.practice-navigator strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
}

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

.mini-question-nav button {
  min-width: 68px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  font-weight: 950;
}

.compact-practice-nav span {
  min-width: 70px;
  color: #6f6254;
  font-size: 13px;
  font-weight: 950;
  text-align: center;
}

.compact-practice-nav button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mini-question-nav button.done {
  color: var(--mint-dark);
  background: #fff3cf;
}

.mini-question-nav button.active {
  color: #fff;
  border-color: var(--ink);
  background: var(--ink);
}

.question-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 14px;
}

.question-card p {
  margin: 0;
  color: #3f4546;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: 0;
}

.question-card .question-meaning {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eadfca;
  color: #6f6254;
  font-size: 15px;
  line-height: 1.65;
}

.question-card .question-meaning.is-hidden {
  display: none;
}

.danger-btn {
  color: #9f2f24;
  border-color: #f0c6bd;
  background: #fff6f3;
}

.reading-inline-mode .active-question {
  display: grid;
}

.reading-inline-mode .answer-workspace {
  margin-top: 0;
}

.reading-integrated-head,
.reading-integrated-question {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: #fffaf0;
}

.reading-integrated-question {
  gap: 7px;
  padding: 15px 17px;
  border-color: rgba(13, 148, 136, 0.2);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(244, 253, 250, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.reading-question-label {
  color: #128477;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reading-integrated-head strong {
  color: var(--ink);
  font-size: 15px;
}

.reading-integrated-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.reading-integrated-question p {
  margin: 0;
  color: #26363d;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.55;
}

.reading-passage {
  display: grid;
  gap: 18px;
}

.reading-passage p {
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.audio-prompt {
  margin-top: 14px;
}

.audio-prompt:empty {
  display: none;
}

.audio-prompt {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.audio-play-button {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--ink);
  font-weight: 950;
}

#practice .stage-practice .audio-play-button {
  position: relative !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #050607 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.65) !important;
}

#practice .stage-practice .audio-play-button::before {
  content: "" !important;
  position: absolute !important;
  top: 54% !important;
  left: 57% !important;
  width: 11px !important;
  height: 13px !important;
  margin: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: #fff !important;
  clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
  transform: translate(-50%, -50%) !important;
}

#practice .stage-practice .audio-play-button.is-playing::before {
  width: 4px !important;
  height: 14px !important;
  margin: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: #fff !important;
  box-shadow: 7px 0 0 #fff !important;
  transform: translate(-6px, -50%) !important;
}

#practice .stage-practice .audio-play-button.is-playing {
  box-shadow: 0 0 0 4px rgba(5, 6, 7, 0.12), 0 10px 20px -12px rgba(0, 0, 0, 0.75) !important;
}

.audio-track {
  height: 8px;
  border-radius: 999px;
  background: #f2ead8;
  overflow: hidden;
}

.audio-track span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--mint);
  transform: translateX(-100%);
}

.audio-prompt.playing .audio-track span {
  animation: audio-progress 1.6s linear forwards;
}

.audio-prompt small {
  color: var(--muted);
  font-weight: 800;
}

@keyframes audio-progress {
  to {
    transform: translateX(240%);
  }
}

.question-tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.answer-workspace {
  order: 2;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.answer-workspace h3 {
  margin: 0 0 12px;
}

.answer-hint-bar {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--muted);
  background: #fffaf0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.ra-mode-control {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.ra-mode-inline {
  margin: 0 0 18px;
  padding: 10px 12px;
  border: 0;
  background: #fffaf0;
}

.ra-mode-control span {
  color: #2a211b;
  font-weight: 950;
}

.ra-mode-control button {
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid #eadfca;
  border-radius: 999px;
  color: #5d5148;
  background: #fffdf8;
  font-weight: 950;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ra-mode-control button:hover {
  border-color: rgba(182, 121, 0, 0.45);
  box-shadow: 0 8px 18px rgba(45, 32, 22, 0.08);
  transform: translateY(-1px) scale(1.04);
}

.ra-mode-control button.active {
  color: #fff;
  border-color: #211715;
  background: #211715;
}

.ra-mode-control small {
  color: var(--muted);
  font-weight: 850;
}

.stage-practice .question-tools .ghost-btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.stage-practice .question-tools .ghost-btn:hover {
  border-color: rgba(182, 121, 0, 0.42);
  background: #fffaf0;
  box-shadow: 0 8px 18px rgba(45, 32, 22, 0.08);
  transform: translateY(-1px) scale(1.04);
}

.text-answer {
  display: none;
  width: 100%;
  min-height: 150px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff7e5;
  resize: vertical;
}

.text-mode:not(.fill-mode) .text-answer {
  display: block;
}

#practice.practice-detail-mode .practice-panel[data-active-type="SWT"] .answer-workspace {
  display: grid !important;
}

#practice.practice-detail-mode .practice-panel[data-active-type="SWT"] .text-answer {
  display: block !important;
  min-height: 170px !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

#practice.practice-detail-mode .practice-panel[data-active-type="WE"] .answer-workspace {
  display: grid !important;
  gap: 12px;
}

#practice.practice-detail-mode .practice-panel[data-active-type="WE"] .text-answer {
  display: block !important;
  min-height: 340px !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  background: #fffdf8;
}

.we-word-status {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.we-word-status strong {
  color: #171412;
  font-size: 20px;
}

.we-word-status span,
.we-word-status em {
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
}

.we-word-status.ok em {
  color: #0f7a55;
}

.we-word-status.warn em {
  color: #9a6200;
}

.we-word-status.danger em {
  color: #b42318;
}

.fill-mode .text-answer {
  display: block;
  min-height: 52px;
  margin-top: 10px;
}

.reading-inline-mode.fill-mode .text-answer {
  display: none;
}

.fib-answer {
  display: none;
}

.fill-mode .fib-answer {
  display: grid;
  gap: 14px;
  position: relative;
}

.embedded-fib-question {
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff7e5;
  color: var(--ink);
  font-size: 21px;
  line-height: 2.25;
}

.fib-blank {
  min-width: 112px;
  min-height: 38px;
  margin: 0 5px;
  padding: 6px 12px;
  border: 1px dashed var(--mint-dark);
  border-radius: 8px;
  color: var(--mint-dark);
  background: #fff;
  font-weight: 950;
  vertical-align: middle;
}

.fib-blank.active {
  border-style: solid;
  color: #1f1815;
  border-color: #1fc9a9;
  background: #eafff8;
  box-shadow: 0 0 0 3px rgba(31, 201, 169, 0.14);
}

.fib-blank[data-value]:not([data-value=""]) {
  border-style: solid;
  color: #8a6100;
  border-color: #e8c36a;
  background: #fff6dc;
}

.fib-blank.is-correct {
  color: #0f5130;
  border-color: #1fa86a;
  background: #dff7e8;
  box-shadow: inset 0 0 0 2px rgba(31, 168, 106, 0.18);
}

.fib-blank.is-wrong {
  color: #8a1f16;
  border-color: #dc4d3d;
  background: #ffe5df;
  box-shadow: inset 0 0 0 2px rgba(220, 77, 61, 0.18);
}

.fib-blank.is-missed {
  color: #765100;
  border-color: #f0ca62;
  background: #fff7d6;
}

.fib-blank small {
  display: block;
  margin-top: 4px;
  color: inherit;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 950;
}

.fib-blank-choice-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(31, 201, 169, 0.22);
  border-radius: 8px;
  background: linear-gradient(145deg, #f7fffc, #fffdf8);
}

.fib-blank-choice-panel[hidden] {
  display: none;
}

.fib-floating-panel {
  position: absolute;
  z-index: 20;
  width: min(360px, calc(100% - 16px));
  box-shadow: 0 18px 38px rgba(24, 33, 37, 0.18);
}

.fib-blank-choice-panel > strong,
.fib-blank-choice-panel > span {
  color: #078f78;
  font-size: 13px;
  font-weight: 950;
}

.fib-blank-choice-panel > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.fib-word-bank {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.fib-option {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-weight: 900;
}

.fib-option.selected {
  color: #8c8378;
  border-color: #e2d6c5;
  background: #f7f3eb;
  box-shadow: inset 0 0 0 1px rgba(141, 128, 108, 0.08);
}

.fib-option.active,
.fib-option.dragging {
  color: #111;
  border-color: #1fc9a9;
  background: #eafff8;
  box-shadow: 0 0 0 3px rgba(31, 201, 169, 0.14);
}

.fib-option[draggable="true"] {
  cursor: grab;
}

.fib-option[draggable="true"]:active {
  cursor: grabbing;
}

.speech-mode .answer-workspace {
  display: none;
}

.choice-answer,
.order-answer {
  display: none;
  gap: 10px;
}

.choice-mode .choice-answer,
.order-mode .order-answer {
  display: grid;
}

.choice-mode .choice-answer {
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.choice-option,
.order-block {
  width: 100%;
  min-height: 54px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff7e5;
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.choice-option {
  min-height: 58px;
  padding: 14px 16px;
  border: 1px solid #dce5e7;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px -22px rgba(15, 53, 58, 0.65);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.choice-option span,
.order-block span {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--mint-dark);
  background: #fff;
  display: grid;
  place-items: center;
  font-weight: 950;
}

.choice-option span {
  width: 32px;
  height: 32px;
  border: 1px solid #d5e1e2;
  border-radius: 11px;
  color: #5b6b73;
  background: #f8fbfb;
  font-size: 13px;
}

.choice-option strong,
.order-block strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.choice-option strong {
  color: #17252b;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.5;
}

.choice-option:hover {
  border-color: rgba(13, 148, 136, 0.46);
  background: #fff;
  box-shadow: 0 14px 28px -22px rgba(10, 91, 84, 0.62);
  transform: translateY(-1px);
}

.choice-option:focus-visible {
  outline: 3px solid rgba(13, 148, 136, 0.18);
  outline-offset: 2px;
}

.choice-option.selected,
.order-block.selected {
  border-color: var(--mint);
  background: #fff3cf;
}

.choice-option.selected {
  border-color: rgba(13, 148, 136, 0.62);
  background: linear-gradient(145deg, #effcf8, #f8fffc);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.11), 0 14px 28px -24px rgba(10, 91, 84, 0.7);
}

.choice-option.selected span,
.order-block.selected span {
  color: #fff;
  background: var(--mint-dark);
}

.choice-option.selected span {
  color: #fff;
  border-color: #009c6b;
  background: #009c6b;
}

.order-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.72fr);
  gap: 14px;
}

.order-pool,
.order-result {
  display: grid;
  gap: 10px;
  align-content: start;
}

.order-result {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
}

.order-slots {
  display: grid;
  gap: 8px;
  color: var(--muted);
}

.order-slots span {
  padding: 10px;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 800;
}

.order-help {
  color: var(--muted);
  line-height: 1.6;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  color: var(--mint-dark);
  background: #fff3cf;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.recorder {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.text-mode .recorder {
  display: none;
}

.practice-panel:not(.speech-mode) .recorder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  border: 0;
  margin-top: 12px;
}

.practice-panel:not(.speech-mode) .timer,
.practice-panel:not(.speech-mode) .wave,
.practice-panel:not(.speech-mode) #recordButton {
  display: none;
}

.practice-panel:not(.speech-mode) .recorder-actions {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(180px, 1fr) minmax(180px, 1fr);
  justify-content: stretch;
}

.timer {
  display: grid;
  gap: 2px;
}

.timer span {
  font-size: 32px;
  font-weight: 900;
}

.timer small {
  color: var(--muted);
}

.wave {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 248, 232, 0.9), rgba(255, 255, 255, 0.74));
  box-shadow: inset 0 0 0 1px rgba(194, 133, 0, 0.08);
}

.wave span {
  flex: 1;
  max-width: 9px;
  min-width: 3px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f6b51f, #b97a00);
  opacity: 0.24;
  transition: height 80ms linear, opacity 80ms linear;
}

.recording .wave span {
  opacity: 0.78;
}

@keyframes pulse {
  from {
    height: 16px;
  }
  to {
    height: 50px;
  }
}

.score-ring {
  width: 156px;
  height: 156px;
  margin: 22px auto;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  text-align: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 56%, transparent 57%),
    conic-gradient(var(--coral) 0deg, var(--gold) 0deg, #f2ead8 0deg);
}

.score-ring strong {
  font-size: 38px;
  line-height: 1;
  transform: translateY(2px);
}

.score-ring span {
  color: var(--muted);
  line-height: 1.2;
}

.feedback-list {
  display: grid;
  gap: 10px;
}

.ai-breakdown {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}

.score-bar {
  display: grid;
  gap: 7px;
}

.score-bar-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
}

.score-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #f2ead8;
}

.score-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--mint);
}

.feedback-point {
  padding: 12px;
  border-radius: 8px;
  background: #f7f4ee;
  color: var(--ink);
}

.swt-report-card {
  display: grid;
  gap: 12px;
}

.swt-score-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

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

.swt-score-grid article,
.we-score-grid article,
.swt-answer-review,
.swt-issue-explain,
.swt-keypoint-grid article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.swt-score-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.swt-score-grid strong,
.we-score-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 20px;
}

.we-score-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.swt-answer-review > strong,
.swt-keypoint-grid strong {
  display: block;
  margin-bottom: 8px;
}

.swt-answer-review p {
  margin: 0;
  color: var(--ink);
  line-height: 1.8;
}

.writing-idle-ai-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 16px 14px 18px;
  border: 1px solid rgba(219, 222, 227, 0.68);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #fbfffd);
  text-align: center;
}

.writing-idle-ai-card .ai-report-illustration {
  position: relative;
  width: min(236px, 100%);
  aspect-ratio: 276 / 190;
  margin: 0 auto;
  animation: ai-idle-float 4.2s ease-in-out infinite;
}

.writing-idle-ai-card .ai-report-illustration svg {
  display: block;
  width: 100%;
  height: 100%;
}

.writing-idle-ai-card .ai-report-illustration svg rect[x="169"] {
  transform-box: fill-box;
  transform-origin: center;
  animation: ai-core-shadow-pulse 2.2s ease-in-out infinite;
}

.writing-idle-ai-card .ai-report-illustration svg rect[x="171"],
.writing-idle-ai-card .ai-report-illustration svg rect[x="178"],
.writing-idle-ai-card .ai-report-illustration svg rect[x="185"],
.writing-idle-ai-card .ai-report-illustration svg rect[x="192"],
.writing-idle-ai-card .ai-report-illustration svg rect[x="199"],
.writing-idle-ai-card .ai-report-illustration svg rect[x="206"],
.writing-idle-ai-card .ai-report-illustration svg rect[x="213"],
.writing-idle-ai-card .ai-report-illustration svg rect[x="220"],
.writing-idle-ai-card .ai-report-illustration svg rect[x="227"],
.writing-idle-ai-card .ai-report-illustration svg rect[x="234"],
.writing-idle-ai-card .ai-report-illustration svg rect[x="241"],
.writing-idle-ai-card .ai-report-illustration svg rect[x="248"] {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: ai-idle-wave 1.15s ease-in-out infinite;
}

.writing-idle-ai-card .ai-report-illustration svg rect[x="178"] { animation-delay: 0.06s; }
.writing-idle-ai-card .ai-report-illustration svg rect[x="185"] { animation-delay: 0.12s; }
.writing-idle-ai-card .ai-report-illustration svg rect[x="192"] { animation-delay: 0.18s; }
.writing-idle-ai-card .ai-report-illustration svg rect[x="199"] { animation-delay: 0.24s; }
.writing-idle-ai-card .ai-report-illustration svg rect[x="206"] { animation-delay: 0.3s; }
.writing-idle-ai-card .ai-report-illustration svg rect[x="213"] { animation-delay: 0.36s; }
.writing-idle-ai-card .ai-report-illustration svg rect[x="220"] { animation-delay: 0.42s; }
.writing-idle-ai-card .ai-report-illustration svg rect[x="227"] { animation-delay: 0.48s; }
.writing-idle-ai-card .ai-report-illustration svg rect[x="234"] { animation-delay: 0.54s; }
.writing-idle-ai-card .ai-report-illustration svg rect[x="241"] { animation-delay: 0.6s; }
.writing-idle-ai-card .ai-report-illustration svg rect[x="248"] { animation-delay: 0.66s; }

.writing-idle-ai-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.25;
}

.writing-idle-ai-card p {
  max-width: 300px;
  margin: 6px auto 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.swt-ok-segment {
  color: #16805b;
  font-weight: 850;
  background: rgba(35, 175, 122, 0.08);
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.swt-issue-mark {
  display: inline;
  margin: 0 1px;
  padding: 1px 5px;
  border: 0;
  border-radius: 5px;
  color: #b42318;
  background: #ffe5e2;
  font: inherit;
  font-weight: 950;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.swt-issue-mark:hover,
.swt-issue-mark.is-active {
  color: #fff;
  background: #b42318;
}

.swt-issue-card {
  display: none;
  gap: 4px;
}

.swt-issue-card.active,
.swt-issue-card:not([data-swt-issue-card]) {
  display: grid;
}

.swt-issue-card span {
  width: max-content;
  padding: 2px 7px;
  border-radius: 999px;
  color: #b42318;
  background: #ffe5e2;
  font-size: 12px;
  font-weight: 900;
}

.swt-issue-card.active {
  border-color: #f3b3ad;
  background: #fff7f5;
}

.swt-issue-card p,
.swt-keypoint-grid p,
.swt-keypoint-grid li {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 13px;
}

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

.swt-keypoint-grid.single {
  grid-template-columns: 1fr;
}

.swt-keypoint-grid ul {
  margin: 0;
  padding-left: 18px;
}

.swt-report-headline {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #d8eadf;
  border-radius: 8px;
  background: #f8fcf8;
}

.swt-report-headline strong {
  color: var(--ink);
  font-size: 18px;
}

.swt-report-headline span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

#practice.practice-detail-mode .feedback-panel.swt-report-mode {
  align-content: start !important;
  align-items: stretch !important;
  overflow-y: auto !important;
  gap: 14px !important;
}

#practice.practice-detail-mode .feedback-panel.we-report-mode {
  align-content: start !important;
  align-items: stretch !important;
  overflow-y: auto !important;
  gap: 14px !important;
}

#practice.practice-detail-mode .feedback-panel.swt-report-mode > h2,
#practice.practice-detail-mode .feedback-panel.we-report-mode > h2 {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
}

#practice.practice-detail-mode .feedback-panel.swt-report-mode .score-ring,
#practice.practice-detail-mode .feedback-panel.we-report-mode .score-ring {
  justify-self: start !important;
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
}

#practice.practice-detail-mode .feedback-panel.swt-report-mode .score-ring strong,
#practice.practice-detail-mode .feedback-panel.we-report-mode .score-ring strong {
  font-size: 28px !important;
}

#practice.practice-detail-mode .feedback-panel.swt-report-mode .ai-breakdown,
#practice.practice-detail-mode .feedback-panel.we-report-mode .ai-breakdown {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}

#practice.practice-detail-mode .feedback-panel.swt-report-mode .feedback-list,
#practice.practice-detail-mode .feedback-panel.we-report-mode .feedback-list {
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#practice.practice-detail-mode .feedback-panel.swt-report-mode .feedback-point,
#practice.practice-detail-mode .feedback-panel.we-report-mode .feedback-point {
  background: #fffaf0;
  border: 1px solid #eadfca;
}

.we-answer-review p {
  white-space: pre-wrap;
}

.reading-ai-review {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8eadf;
  border-radius: 8px;
  background: #f8fcf8;
}

.reading-ai-review.pending {
  background: #fffdf8;
}

.reading-ai-review.pending button {
  width: fit-content;
}

.reading-ai-review.loading {
  justify-items: start;
  background: #fffaf0;
}

.reading-review-loader {
  display: flex;
  gap: 6px;
  align-items: center;
  min-height: 22px;
}

.reading-review-loader span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c58600;
  animation: reading-review-pulse 0.9s ease-in-out infinite alternate;
}

.reading-review-loader span:nth-child(2) {
  animation-delay: 0.15s;
}

.reading-review-loader span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes reading-review-pulse {
  from {
    opacity: 0.35;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(-5px);
  }
}

.reading-ai-review h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
}

.reading-ai-review p {
  margin: 0;
  color: #3f3932;
  font-size: 18px;
  line-height: 1.85;
}

.reading-mistake-list {
  display: grid;
  gap: 10px;
}

.reading-mistake-list article {
  display: grid;
  gap: 11px;
  padding: 16px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: #fffdf8;
}

.reading-mistake-list strong {
  color: #8c2f24;
  font-size: 18px;
}

.reading-mistake-list span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: #185a3c;
  background: #e9f9ef;
  font-size: 13px;
  font-weight: 950;
}

.reading-mistake-list b {
  color: var(--ink);
}

.reading-mistake-list em {
  color: #765100;
  font-size: 16px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.7;
}

.reading-next-practice {
  display: grid;
  gap: 8px;
}

.reading-next-practice b {
  padding-left: 10px;
  border-left: 3px solid #18c9b8;
  color: #4f5558;
  font-size: 17px;
  line-height: 1.75;
}

.practice-detail-mode .practice-dashboard-layout {
  align-items: start;
}

.practice-detail-mode .feedback-panel.reading-report-mode {
  display: grid;
  gap: 16px;
  padding: 20px;
  min-width: 0;
  max-height: none;
  position: relative;
  top: auto;
  align-self: start;
  overflow: visible;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 133, 0, 0.42) rgba(255, 250, 240, 0.8);
  background: rgba(255, 253, 248, 0.96);
}

.practice-detail-mode .feedback-panel.reading-report-mode::-webkit-scrollbar {
  width: 8px;
}

.practice-detail-mode .feedback-panel.reading-report-mode::-webkit-scrollbar-track {
  background: rgba(255, 250, 240, 0.8);
  border-radius: 999px;
}

.practice-detail-mode .feedback-panel.reading-report-mode::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(196, 133, 0, 0.42);
}

.practice-detail-mode .feedback-panel.reading-report-mode .feedback-list {
  display: grid;
  gap: 14px;
  margin: 0;
}

.reading-inline-mode .answer-workspace {
  padding: 20px;
  border-color: #dde8e6;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px -32px rgba(19, 61, 58, 0.5);
}

.reading-inline-mode .answer-workspace h3 {
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.25;
}

.reading-integrated-head,
.reading-integrated-question,
.answer-hint-bar {
  border-radius: 14px;
}

.reading-inline-mode .answer-hint-bar {
  color: #6f5d3e;
  background: #fff7e6;
}

.embedded-fib-question {
  position: relative;
  max-height: min(52vh, 540px);
  overflow: auto;
  padding: 24px 20px;
  border-color: #efdcb7;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.96), rgba(255, 246, 222, 0.92)),
    #fff7e5;
  scrollbar-width: thin;
  scrollbar-color: #d6a541 #fff4dc;
}

.reading-ai-analyzing .embedded-fib-question::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 192, 56, 0.14) 46%, rgba(255, 192, 56, 0.22) 50%, transparent 56%);
  transform: translateX(-100%);
  animation: reading-ai-scan 1.45s ease-in-out infinite;
}

.fib-blank {
  border-radius: 12px;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.fib-blank.focus-linked {
  box-shadow: 0 0 0 4px rgba(211, 151, 0, 0.18);
  transform: translateY(-1px);
}

.reading-ai-analyzing .fib-blank.is-wrong {
  animation: reading-pulse-wrong 1s ease-in-out infinite;
}

.reading-ai-analyzing .fib-blank.is-correct {
  animation: reading-pulse-correct 1.15s ease-in-out infinite;
}

.fib-word-bank {
  gap: 10px;
}

.fib-option {
  border-radius: 12px;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.fib-option:hover:not(:disabled) {
  border-color: #d7a536;
  background: #fffaf0;
  box-shadow: 0 8px 18px rgba(82, 59, 19, 0.08);
  transform: translateY(-1px);
}

.embedded-fib-question .fib-blank.is-correct,
.embedded-fib-question .fib-blank.is-correct[data-value]:not([data-value=""]) {
  color: #0b4f2d !important;
  border-color: #138a50 !important;
  background: #d9f8e5 !important;
  box-shadow:
    inset 0 0 0 2px rgba(19, 138, 80, 0.2),
    0 8px 18px rgba(19, 138, 80, 0.12) !important;
}

.embedded-fib-question .fib-blank.is-wrong,
.embedded-fib-question .fib-blank.is-wrong[data-value]:not([data-value=""]) {
  color: #8a1f16 !important;
  border-color: #d63828 !important;
  background: #ffe0da !important;
  box-shadow:
    inset 0 0 0 2px rgba(214, 56, 40, 0.2),
    0 8px 18px rgba(214, 56, 40, 0.12) !important;
}

.embedded-fib-question .fib-blank.is-missed {
  color: #765100 !important;
  border-color: #d9a514 !important;
  background: #fff3c5 !important;
}

.reading-report-card,
.reading-ai-review {
  border: 1px solid #eadfca;
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: 0 12px 28px rgba(52, 39, 19, 0.06);
}

.reading-report-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.reading-score-card {
  padding: 18px;
  border-color: #eadabf;
  background:
    linear-gradient(135deg, rgba(255, 247, 229, 0.98), rgba(255, 253, 248, 0.98)),
    #fffaf0;
}

.reading-score-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
}

.reading-score-main span {
  color: #77664d;
  font-size: 14px;
  font-weight: 950;
}

.reading-score-main strong {
  grid-row: span 2;
  color: #be7b00;
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: 0;
  white-space: nowrap;
}

.reading-score-main strong i {
  color: #6f6251;
  font-size: 24px;
  font-style: normal;
}

.reading-score-main b {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  color: #185a3c;
  background: #e7f7ee;
  font-size: 13px;
  line-height: 1;
}

.reading-report-head,
.reading-ai-review-title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.reading-report-head h3,
.reading-report-card h3,
.reading-ai-review-title h3 {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.3;
}

.reading-report-head .eyebrow {
  margin: 0 0 4px;
  color: #9a6d00;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.reading-report-bot {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  color: #765100;
  background: #fff0c9;
  font-size: 12px;
  font-weight: 950;
}

.reading-score-summary {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.reading-score-summary b {
  display: block;
  color: #15905e;
  font-size: 17px;
}

.reading-score-summary span {
  display: block;
  margin-top: 4px;
  color: #6c6256;
  font-size: 13px;
  line-height: 1.5;
}

.reading-score-arc {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #fffdf8 0 58%, transparent 59%),
    conic-gradient(#d39200 var(--score), #f0e5d2 0);
}

.reading-score-arc strong {
  color: #8a6100;
  font-size: 28px;
  line-height: 1;
}

.reading-score-arc small {
  margin-top: -26px;
  margin-left: 34px;
  color: #8d8174;
  font-size: 12px;
  font-weight: 850;
}

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

.reading-metric-grid article {
  min-height: 64px;
  padding: 12px;
  border: 1px solid #efe3d1;
  border-radius: 12px;
  background: #fffaf2;
}

.reading-metric-grid span,
.reading-answer-compare span,
.reading-vocab-chips > span {
  display: block;
  color: #766a5c;
  font-size: 12px;
  font-weight: 850;
}

.reading-metric-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 17px;
}

.reading-answer-compare {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #faf6ee;
}

.reading-answer-compare p {
  margin: 3px 0 0;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.45;
}

.reading-answer-flow {
  display: grid;
  gap: 8px;
}

.reading-answer-flow span {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8f5ee;
}

.reading-answer-flow span.ok {
  color: #185a3c;
  background: #eaf8ef;
}

.reading-answer-flow span.bad {
  color: #8c2f24;
  background: #fff0ec;
}

.reading-answer-flow i {
  color: inherit;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.reading-auto-judge {
  margin: 0;
  color: #6b6258;
  font-size: 13px;
  line-height: 1.55;
}

.reading-ai-review {
  padding: 18px;
  min-height: 132px;
  overflow: auto;
}

.reading-ai-review.pending,
.reading-ai-review.loading {
  background: #fffdf8;
}

.reading-ai-review.pending button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 950;
}

.reading-ai-review.loading {
  position: relative;
  overflow: hidden;
}

.reading-ai-review.loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  transform: translateX(-100%);
  animation: reading-shimmer 1.2s ease-in-out infinite;
}

.reading-ai-review.expanded {
  animation: reading-fade-up 0.28s ease-out both;
}

.reading-mistake-list article {
  border-radius: 14px;
  background: #fffaf2;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.reading-mistake-list article:hover {
  border-color: #d7a536;
  box-shadow: 0 10px 24px rgba(91, 65, 15, 0.1);
  transform: translateY(-1px);
}

.reading-vocab-chips {
  display: grid;
  gap: 8px;
}

.reading-vocab-chips div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.reading-learning-points div {
  display: grid;
  gap: 10px;
}

.reading-learning-points article {
  padding: 12px 14px;
  border: 1px solid #eadfca;
  border-radius: 12px;
  background: #fffaf2;
}

.reading-learning-points article strong {
  display: block;
  margin-bottom: 6px;
  color: #7a4d00;
  font-size: 14px;
}

.reading-learning-points article p,
.reading-mistake-list .reading-contrast {
  margin: 6px 0 0;
  color: #44392f;
  font-size: 14px;
  line-height: 1.65;
}

.reading-mistake-list .reading-contrast {
  padding: 10px 12px;
  border-left: 3px solid #d08a00;
  border-radius: 10px;
  background: #fff4dc;
}

.reading-vocab-chips button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #eadfca;
  border-radius: 999px;
  color: #6b5840;
  background: #fffaf2;
  font-size: 12px;
  font-weight: 850;
}

.reading-core-tip {
  padding: 13px 14px;
  border-radius: 12px;
  color: #4e5e4f;
  background: #eef8ed;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.65;
}

@keyframes reading-ai-scan {
  to {
    transform: translateX(100%);
  }
}

@keyframes reading-pulse-wrong {
  50% {
    box-shadow: 0 0 0 5px rgba(216, 82, 61, 0.18);
  }
}

@keyframes reading-pulse-correct {
  50% {
    box-shadow: 0 0 0 5px rgba(28, 162, 92, 0.16);
  }
}

@keyframes reading-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reading-shimmer {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reading-ai-analyzing .embedded-fib-question::after,
  .reading-ai-analyzing .fib-blank.is-wrong,
  .reading-ai-analyzing .fib-blank.is-correct,
  .reading-ai-review.loading::before,
  .reading-ai-review.expanded {
    animation: none;
  }
}

.feedback-idle-card {
  min-height: 320px;
  padding: 28px 20px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 20%, rgba(246, 197, 66, 0.18), transparent 32%),
    #fffaf0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
}

.ai-orb {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff8d7, #f6c542 48%, #241b18 50%, #241b18 100%);
  display: grid;
  place-items: center;
  color: #f6c542;
  box-shadow: 0 22px 40px rgba(36, 27, 24, 0.16);
}

.ai-orb span {
  transform: translateY(16px);
  font-weight: 950;
}

.ai-orb.spinning {
  animation: aiSpin 1s linear infinite;
}

.feedback-idle-card h3,
.feedback-idle-card p {
  margin: 0;
}

.speech-scoring-loading {
  min-height: 360px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 16px;
  padding: 34px 22px;
  border: 1px solid rgba(234, 223, 202, 0.96);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 22%, rgba(246, 197, 66, 0.2), transparent 32%),
    linear-gradient(180deg, #fff, #fff8ed);
  text-align: center;
  box-shadow: 0 16px 34px rgba(32, 24, 18, 0.06);
}

.speech-scoring-loading h3,
.speech-scoring-loading p,
.speech-scoring-loading small {
  margin: 0;
}

.speech-scoring-loading p,
.speech-scoring-loading small {
  max-width: 430px;
  color: #7d7267;
  line-height: 1.65;
}

.speech-scoring-failed {
  background:
    radial-gradient(circle at 50% 22%, rgba(217, 95, 67, 0.12), transparent 32%),
    linear-gradient(180deg, #fff, #fff8ed);
}

.speech-failure-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.scoring-orbit {
  position: relative;
  width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #fff 44%, transparent 45%),
    conic-gradient(from 0deg, #f6c542, #fff0c5, #f6c542);
  color: #241b18;
  font-size: 25px;
  font-weight: 950;
  box-shadow: 0 18px 34px rgba(194, 128, 0, 0.16);
  animation: scoringSpin 1.4s linear infinite;
}

.scoring-orbit span {
  animation: scoringCounterSpin 1.4s linear infinite;
}

.scoring-orbit i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c88800;
}

.scoring-orbit i:nth-child(2) {
  top: 8px;
}

.scoring-orbit i:nth-child(3) {
  right: 8px;
}

.scoring-orbit i:nth-child(4) {
  bottom: 8px;
}

.scoring-wave {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
}

.scoring-wave b {
  width: 6px;
  height: 12px;
  border-radius: 999px;
  background: #e6a600;
  animation: scoringWave 0.72s ease-in-out infinite alternate;
}

.scoring-wave b:nth-child(2) { animation-delay: 0.08s; }
.scoring-wave b:nth-child(3) { animation-delay: 0.16s; }
.scoring-wave b:nth-child(4) { animation-delay: 0.24s; }
.scoring-wave b:nth-child(5) { animation-delay: 0.32s; }
.scoring-wave b:nth-child(6) { animation-delay: 0.4s; }
.scoring-wave b:nth-child(7) { animation-delay: 0.48s; }

@keyframes scoringSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes scoringCounterSpin {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes scoringWave {
  from {
    height: 10px;
    opacity: 0.48;
  }
  to {
    height: 34px;
    opacity: 1;
  }
}

.teacher-voice-bubble {
  width: fit-content;
  max-width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: inset 0 0 0 1px #eadfca;
}

.teacher-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f6c542;
  color: #241b18;
  display: grid;
  place-items: center;
  font-weight: 950;
}

.teacher-voice-bubble button {
  border: 0;
  color: #241b18;
  background: transparent;
  font-weight: 950;
}

.teacher-voice-bubble small {
  color: var(--muted);
  font-weight: 900;
}

.course-contact-card {
  margin: 12px 0;
  padding: 16px;
  border: 1px solid #f6c542;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff1be, #fffaf0);
}

.course-contact-card span,
.course-contact-card p {
  color: var(--muted);
}

.course-contact-card strong {
  display: block;
  margin: 6px 0;
  color: var(--ink);
  font-size: 18px;
}

.course-contact-card p {
  margin: 0;
  line-height: 1.6;
}

.feedback-idle-card p {
  max-width: 360px;
  color: var(--muted);
  line-height: 1.65;
}

.idle-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.idle-steps span {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  color: #5d554b;
  font-size: 12px;
  font-weight: 950;
}

@keyframes aiSpin {
  to {
    transform: rotate(360deg);
  }
}

.speech-original-report {
  display: grid;
  gap: 12px;
}

.speech-result-redesign {
  gap: 14px;
}

.speech-result-summary,
.speech-result-redesign .speech-player-card,
.speech-result-redesign .speech-detail-card,
.speech-result-redesign .speech-power-card {
  border: 1px solid rgba(234, 223, 202, 0.96);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 34px rgba(32, 24, 18, 0.06);
}

.speech-result-summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-height: auto;
  padding: 18px;
  background:
    radial-gradient(circle at 92% 10%, rgba(246, 181, 31, 0.15), transparent 30%),
    linear-gradient(180deg, #fffdf8, #fff6e6);
  overflow: hidden;
}

.speech-result-title h2 {
  margin: 0 0 8px;
  color: #1f1712;
  font-size: 24px;
  line-height: 1.18;
}

.speech-result-title span {
  color: #7d7267;
  font-weight: 800;
}

.speech-result-actions {
  display: flex;
  gap: 10px;
  align-self: start;
  justify-content: flex-end;
}

.speech-result-summary .speech-score-card {
  grid-template-columns: 120px minmax(0, 1fr) 118px;
  min-height: 132px;
  padding: 8px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.speech-result-summary .speech-score-card > img {
  position: static;
  width: 118px;
  align-self: end;
  filter: drop-shadow(0 12px 18px rgba(74, 54, 33, 0.15));
}

.speech-report-top {
  display: grid;
  grid-template-columns: minmax(260px, 0.62fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: stretch;
}

.speech-score-card,
.speech-player-card,
.speech-power-card,
.speech-detail-card {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(38, 44, 42, 0.08);
}

.speech-score-card {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.speech-total-ring {
  width: 108px;
  height: 108px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 58%, transparent 59%),
    conic-gradient(#d18b00 0deg var(--score), #f3eadb var(--score) 360deg);
  text-align: center;
}

.speech-total-ring strong {
  display: block;
  color: #241b18;
  font-size: 32px;
  line-height: 1;
  transform: translateY(2px);
}

.speech-total-ring span {
  color: #8a5a00;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 950;
}

.speech-score-lines {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.speech-score-lines p {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  color: var(--muted);
}

.speech-score-lines strong {
  color: #1f1712;
}

.speech-score-lines small {
  color: #6f6254;
  font-weight: 900;
}

.speech-player-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 24px;
}

.speech-result-redesign > .speech-player-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.speech-player-heading {
  color: #241b18;
  font-weight: 950;
}

.speech-player-heading span::before {
  content: "▮";
  margin-right: 8px;
  color: #d08a00;
}

.speech-native-audio {
  width: 100%;
  min-height: 48px;
  accent-color: #e6a600;
}

.speech-player-missing {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px dashed #e3c27e;
  border-radius: 10px;
  color: #8a6d36;
  background: #fff8e8;
  font-weight: 850;
}

.speech-play-button {
  width: 34px;
  height: 34px;
  border: 2px solid #d18b00;
  border-radius: 50%;
  color: #b87800;
  background: #fff;
  font-weight: 950;
  cursor: pointer;
}

.speech-player-line {
  height: 4px;
  border-radius: 999px;
  background: #f0e4cf;
}

.speech-player-line span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #d18b00;
}

.speech-player-card small {
  color: #4f5558;
  white-space: nowrap;
}

.speech-report-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(260px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.speech-ability-card-full {
  grid-column: 1 / -1;
}

.speech-power-card {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.speech-power-card h3 {
  margin: 0;
  font-size: 20px;
}

.speech-power-card p,
.speech-power-card small {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.speech-ability-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px 18px;
}

.speech-provider-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.speech-provider-detail-grid article {
  min-height: 112px;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 14px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: #fffaf0;
}

.speech-provider-detail-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.speech-provider-detail-grid strong {
  color: #201814;
  font-size: 24px;
  line-height: 1;
}

.speech-provider-detail-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.speech-ai-summary-card {
  display: grid;
  gap: 12px;
  padding: 22px 24px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: #fffdf8;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.speech-ai-summary-card:hover,
.speech-player-card:hover,
.speech-detail-card:hover,
.speech-power-card:hover {
  border-color: rgba(240, 182, 46, 0.58);
  box-shadow: 0 14px 30px rgba(32, 24, 18, 0.08);
  transform: translateY(-2px) scale(1.003);
}

.speech-ai-loading-inline {
  min-height: 180px;
  padding: 10px 0;
}

.speech-ai-summary-card h3 {
  margin: 0;
  color: #1f1712;
  font-size: 20px;
}

.speech-ai-summary-card .speech-ai-summary-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.speech-ai-analysis-btn {
  min-width: 86px;
}

.speech-ai-summary-card p {
  margin: 0;
  color: #3f3932;
  line-height: 1.7;
}

.speech-ai-summary-card div {
  display: grid;
  gap: 8px;
}

.speech-ai-summary-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.speech-ai-summary-card em {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  color: #3d342c;
  background: #f7f1e7;
  font-size: 14px;
  font-style: normal;
  line-height: 1.65;
}

.speech-ai-summary-card b {
  padding-left: 10px;
  border-left: 3px solid #18c9b8;
  color: #4f5558;
  font-size: 13px;
  line-height: 1.6;
}

.speech-ai-phoneme-focus article {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #d8eadf;
  border-radius: 8px;
  background: #f7fcf8;
}

.speech-ai-phoneme-focus article strong {
  color: #185a3c;
  font-size: 15px;
}

.speech-ai-phoneme-focus article small {
  color: #6d6258;
  font-size: 12px;
  font-weight: 850;
}

.speech-ai-phoneme-focus article p {
  margin: 0;
  color: #3f3932;
  font-size: 13px;
  line-height: 1.55;
}

.speech-ai-summary-card > strong {
  padding: 12px;
  border-radius: 8px;
  color: #185a3c;
  background: #effbf4;
  line-height: 1.6;
}

.speech-phoneme-guide-card { display: grid; gap: 12px; padding: 14px; border: 1px solid rgba(0, 163, 110, 0.18); border-radius: 18px; background: radial-gradient(circle at 100% 0%, rgba(0, 163, 110, 0.08), transparent 34%), #fff; }
.speech-phoneme-guide-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.speech-phoneme-guide-head div, .speech-phoneme-guide-grid, .speech-phoneme-guide-copy { display: grid; gap: 8px; min-width: 0; }
.speech-phoneme-guide-head span, .speech-phoneme-guide-copy p span { color: #0b6d86; font-size: 12px; font-weight: 950; }
.speech-phoneme-guide-head h3 { margin: 0; color: #162d3d; font-size: 16px; line-height: 1.3; }
.speech-phoneme-guide-head em { padding: 7px 10px; border-radius: 999px; color: #0b5d78; background: #dff4fb; font-size: 12px; font-style: normal; font-weight: 950; white-space: nowrap; }
.speech-phoneme-guide-intro { margin: 0; color: #415361; font-size: 12px; line-height: 1.7; }
.speech-phoneme-problem-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.speech-phoneme-problem-strip span { display: inline-flex; gap: 7px; align-items: center; max-width: 100%; padding: 7px 10px; border-radius: 999px; color: #103b52; background: #eef9fb; font-size: 12px; font-weight: 950; }
.speech-phoneme-problem-strip small { min-width: 0; color: #687b88; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speech-phoneme-guide-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; padding: 10px; border: 1px solid #d6e5ee; border-radius: 8px; background: #fff; }
.speech-phoneme-guide-copy > div { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.speech-phoneme-guide-copy strong { color: #103b52; font-size: 18px; line-height: 1; }
.speech-phoneme-guide-copy small { color: #687b88; font-size: 12px; font-weight: 900; }
.speech-phoneme-guide-copy b, .speech-phoneme-guide-demo-block b { color: #1d3444; font-size: 14px; line-height: 1.45; }
.speech-phoneme-guide-copy p, .speech-phoneme-guide-detail p { margin: 0; color: #40515e; font-size: 13px; line-height: 1.55; }
.speech-phoneme-guide-demo-block, .speech-phoneme-guide-detail { display: grid; gap: 8px; min-width: 0; } .speech-phoneme-guide-demo-block > span { display: none; }
.speech-project-mouth-widget { display: grid; gap: 10px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #13244a; }
.speech-project-mouth-head { display: none; }
.speech-project-mouth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; min-width: 0; } .speech-project-panel { display: grid; gap: 0; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.speech-project-panel-title { display: none; }
.speech-project-side-svg, .speech-project-front-svg { display: block; width: 100%; height: auto; overflow: visible; border-radius: 8px; } .speech-project-side-tongue, .speech-project-front-tongue { transform-box: fill-box; transform-origin: center; animation: speechProjectTongue 2.4s ease-in-out infinite; } .speech-project-air, .speech-project-front-air, .speech-project-nasal { animation: speechProjectAir 1.2s linear infinite; }
.speech-project-voice { transform-box: fill-box; transform-origin: center; animation: speechProjectVoice 1.35s ease-out infinite; } .speech-project-checklist { display: grid; gap: 6px; padding: 10px; border: 1px solid #cfdceb; border-radius: 10px; background: #f7fbff; color: #13244a; font-size: 12px; font-weight: 900; line-height: 1.4; } .speech-project-checklist strong { font-size: 13px; font-weight: 950; } .speech-project-checklist span { display: flex; gap: 7px; align-items: flex-start; min-width: 0; } .speech-project-checklist i { flex: 0 0 10px; width: 10px; height: 10px; margin-top: 4px; border-radius: 3px; }
@keyframes speechProjectTongue { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.015); } } @keyframes speechProjectAir { to { stroke-dashoffset: -42; } } @keyframes speechProjectVoice { 0% { opacity: .45; transform: scale(.96); } 72%, 100% { opacity: 1; transform: scale(1.04); } }
@media (max-width: 720px) { .speech-phoneme-guide-card { padding: 18px; } .speech-phoneme-guide-head { flex-direction: column; } .speech-phoneme-guide-item { grid-template-columns: 1fr; } .speech-project-mouth-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .speech-project-side-tongue, .speech-project-front-tongue, .speech-project-air, .speech-project-front-air, .speech-project-nasal, .speech-project-voice { animation: none; } }

.speech-metric-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: center;
  color: #4f5558;
  font-size: 13px;
  font-weight: 900;
}

.speech-metric-row i {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #eff2ef;
}

.speech-metric-row b {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.speech-metric-row b.teal {
  background: #18c9b8;
}

.speech-metric-row b.gold {
  background: #f2bd4d;
}

.speech-detail-card {
  padding: 22px 24px 28px;
}

.speech-detail-card h3,
.speech-power-card h3 {
  margin: 0;
  color: #1f1712;
  font-size: 20px;
}

.speech-mini-radar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.speech-mini-radar span {
  min-height: 72px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #0f8f7c;
  background: #e6fbf6;
  font-weight: 950;
  text-align: center;
}

.speech-ability-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.speech-radar-chart {
  width: 180px;
  height: 180px;
}

.speech-radar-chart polygon {
  fill: rgba(246, 197, 66, 0.08);
  stroke: rgba(216, 168, 54, 0.35);
  stroke-width: 1;
}

.speech-radar-chart line {
  stroke: rgba(216, 168, 54, 0.24);
  stroke-width: 1;
}

.speech-radar-chart .student-shape {
  fill: rgba(24, 201, 184, 0.22);
  stroke: #18c9b8;
  stroke-width: 3;
}

.speech-radar-list {
  display: grid;
  gap: 10px;
}

.speech-radar-list span {
  display: grid;
  grid-template-columns: minmax(76px, 0.8fr) minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  color: #5d554b;
  font-size: 12px;
  font-weight: 900;
}

.speech-radar-list em {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speech-radar-list i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1ef;
}

.speech-radar-list b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #18c9b8;
}

.speech-radar-list b.teal {
  background: linear-gradient(90deg, #18c9b8, #45dccb);
}

.speech-radar-list b.gold {
  background: #f2bd4d;
}

.speech-radar-list strong {
  color: #201814;
  text-align: right;
}

.speech-tabs {
  display: flex;
  gap: 28px;
  margin-bottom: 18px;
  color: #9aa09f;
  font-weight: 900;
}

.speech-tabs span {
  position: relative;
  padding-bottom: 10px;
}

.speech-tabs .active {
  color: #b87800;
}

.speech-tabs .active::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: #18c9b8;
  content: "";
}

.speech-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

.speech-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #5e6465;
  font-size: 14px;
  font-weight: 900;
}

.speech-legend span::before {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  content: "";
}

.speech-legend .good::before {
  background: #18c9b8;
}

.speech-legend .okay::before {
  background: #ffd447;
}

.speech-legend .weak::before {
  background: #a32020;
}

.speech-legend .pause::before {
  border-radius: 3px;
  background: #e47b23;
}

.speech-reference {
  margin: 0;
  color: #756a60;
  font-size: 20px;
  line-height: 1.45;
}

.speech-word {
  cursor: pointer;
  font-weight: 850;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.speech-word:hover {
  border-radius: 3px;
  background: rgba(24, 201, 184, 0.1);
  box-shadow: 0 0 0 3px rgba(24, 201, 184, 0.1);
}

.speech-word.good {
  color: #00b83f;
}

.speech-word.okay {
  color: #f0a000;
}

.speech-word.weak {
  color: #bd2420;
}

.speech-word.missing {
  color: #bd2420;
  text-decoration: underline wavy rgba(189, 36, 32, 0.72);
  text-underline-offset: 4px;
}

.speech-word.mismatch {
  text-decoration: underline wavy rgba(141, 23, 23, 0.62);
  text-underline-offset: 4px;
}

.speech-word.pending {
  color: #f0a000;
}

.speech-coach-report {
  display: grid;
  gap: 16px;
  color: #211915;
}

.coach-invalid-alert,
.coach-hero-card,
.coach-card,
.coach-audio-card,
.coach-pte-card {
  border: 1px solid rgba(234, 207, 156, 0.95);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 34px rgba(33, 25, 22, 0.07);
}

.coach-invalid-alert {
  padding: 18px 20px;
  background: linear-gradient(135deg, #fff2d9, #fff);
}

.coach-invalid-alert strong {
  display: block;
  margin-bottom: 6px;
  color: #a94522;
  font-size: 18px;
}

.coach-invalid-alert p {
  margin: 0;
  color: #6f6254;
  line-height: 1.7;
}

.coach-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 92% 10%, rgba(246, 197, 66, 0.3), transparent 28%),
    linear-gradient(135deg, #fff8df, #ffd979);
}

.coach-kicker {
  color: #8a5a00;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
}

.coach-hero-card h2 {
  margin: 8px 0 8px;
  font-size: 30px;
  letter-spacing: 0;
}

.coach-hero-card p,
.coach-hero-card strong {
  display: block;
  margin: 0;
  line-height: 1.7;
}

.coach-hero-card p {
  color: #6c5b45;
}

.coach-hero-card strong {
  margin-top: 10px;
  color: #241b18;
  font-size: 16px;
}

.coach-score-orb {
  width: 138px;
  height: 138px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0 58%, transparent 59%),
    conic-gradient(#17b883 0deg var(--score), rgba(255, 255, 255, 0.48) var(--score) 360deg);
  box-shadow: 0 16px 30px rgba(23, 184, 131, 0.2);
}

.coach-score-orb b {
  margin-top: 18px;
  font-size: 42px;
  line-height: 1;
}

.coach-score-orb span {
  margin-top: -28px;
  color: #7f6f5e;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.coach-pte-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.coach-pte-card {
  min-height: 152px;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 6px;
}

.coach-pte-card span {
  color: #8a5a00;
  font-size: 12px;
  font-weight: 950;
}

.coach-pte-card strong {
  font-size: 30px;
}

.coach-pte-card small {
  color: #7f6f5e;
  font-size: 14px;
}

.coach-pte-card b {
  color: #211915;
}

.coach-pte-card p {
  margin: 0;
  color: #6f6254;
  line-height: 1.55;
}

.coach-audio-card,
.coach-card {
  padding: 20px;
}

.coach-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.coach-section-head span {
  color: #211915;
  font-size: 22px;
  font-weight: 950;
}

.coach-section-head small {
  color: #8a7b6b;
  font-weight: 850;
}

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

.coach-check-item {
  border: 1px solid #efe2c8;
  border-radius: 12px;
  background: #fffaf0;
  overflow: hidden;
}

.coach-check-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  min-height: 78px;
  padding: 14px;
  cursor: pointer;
}

.coach-check-item summary span {
  font-size: 17px;
  font-weight: 950;
}

.coach-check-item summary b {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
}

.coach-check-item summary em {
  grid-column: 1 / -1;
  color: #6f6254;
  font-style: normal;
  line-height: 1.5;
}

.coach-check-item.good summary b {
  color: #12755e;
  background: #def8ee;
}

.coach-check-item.minor summary b {
  color: #9a6900;
  background: #fff0bd;
}

.coach-check-item.warn summary b {
  color: #a95c00;
  background: #ffe1bc;
}

.coach-check-item.danger summary b {
  color: #a72b22;
  background: #ffe0dc;
}

.coach-check-item ul {
  margin: 0;
  padding: 0 16px 16px 30px;
  color: #5f5247;
  line-height: 1.7;
}

.coach-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.coach-legend span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: #fff7e8;
  color: #6f6254;
  font-size: 12px;
  font-weight: 900;
}

.coach-reference {
  margin: 0;
}

.coach-analysis-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.coach-radar {
  width: 190px;
  height: 190px;
}

.coach-metric-list {
  display: grid;
  gap: 12px;
}

.coach-metric-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 62px;
  gap: 10px;
  align-items: center;
  color: #5f5247;
  font-weight: 900;
}

.coach-metric-row i {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #f0eadf;
}

.coach-metric-row b {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.coach-metric-row b.teal {
  background: linear-gradient(90deg, #18c9b8, #45dccb);
}

.coach-metric-row b.green {
  background: linear-gradient(90deg, #16b884, #47d7a5);
}

.coach-metric-row b.gold {
  background: linear-gradient(90deg, #c98500, #f6c542);
}

.coach-metric-row b.blue {
  background: linear-gradient(90deg, #4388e8, #7fb3ff);
}

.coach-metric-row strong {
  color: #241b18;
  text-align: right;
}

.speech-word.stress-risk {
  box-shadow: inset 0 -2px 0 #3b82f6;
}

.speech-word.speed-risk {
  border-bottom: 2px dashed #c98500;
}

.speech-word.coach-word-focus {
  animation: coachWordFocus 1.1s ease;
}

@keyframes coachWordFocus {
  0%,
  100% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-4px);
    box-shadow: 0 0 0 6px rgba(246, 197, 66, 0.28);
  }
}

.coach-fragment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.coach-fragment-grid article {
  padding: 14px;
  border-radius: 12px;
  background: #fffaf0;
}

.coach-fragment-grid p {
  margin: 6px 0 0;
  color: #6f6254;
  line-height: 1.6;
}

.coach-top-issues,
.coach-next-steps {
  display: grid;
  gap: 12px;
}

.coach-top-issues .coach-section-head,
.coach-next-steps .coach-section-head {
  margin-bottom: 2px;
}

.coach-top-issues article,
.coach-next-steps article {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid #f0dfbd;
  border-radius: 12px;
  background: #fffaf0;
}

.coach-top-issues article {
  cursor: pointer;
}

.coach-top-issues article > b,
.coach-next-steps article > b {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #c98500;
}

.coach-top-issues strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}

.coach-top-issues p,
.coach-top-issues small,
.coach-next-steps p {
  margin: 0;
  color: #5f5247;
  line-height: 1.65;
}

.coach-top-issues span {
  color: #9a6900;
  font-weight: 950;
}

.coach-word-popover {
  max-width: 340px;
}

.coach-word-popover-head span {
  color: #9a6900;
}

.coach-word-actions {
  margin-top: 12px;
}

.coach-phoneme-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 8px;
}

.coach-phoneme-strip span {
  min-width: 48px;
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid #eadfca;
  background: #fffaf0;
}

.coach-phoneme-strip b {
  color: #201915;
  font-size: 15px;
}

.coach-phoneme-strip em {
  color: #6f6254;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.coach-phoneme-strip .good {
  border-color: #9fe8cf;
  background: #e7fbf3;
}

.coach-phoneme-strip .okay {
  border-color: #f4cf73;
  background: #fff5d8;
}

.coach-phoneme-strip .weak {
  border-color: #f0a7a2;
  background: #fff0ee;
}

.coach-phoneme-strip .weak b,
.coach-phoneme-strip .weak em {
  color: #ae2f26;
}

.coach-phoneme-strip .pending {
  border-style: dashed;
  opacity: 0.78;
}

.coach-phoneme-note,
.coach-phone-advice,
.coach-phoneme-empty {
  display: block;
  margin: 8px 0 0;
  color: #6f6254;
  line-height: 1.55;
  font-size: 12px;
}

.coach-phone-advice {
  padding: 10px;
  border-radius: 10px;
  color: #7f5300;
  background: #fff7e3;
}

.speech-punctuation {
  color: var(--muted);
}

.speech-pause-mark {
  display: inline-block;
  margin: 0 4px;
  color: #f0a000;
  font-weight: 950;
}

.speech-pause-mark.strong {
  color: #bd2420;
}

.speech-tip {
  margin: 0 0 12px;
  color: #9aa09f;
  font-size: 13px;
}

.speech-transcript,
.speech-status-line {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 8px;
  background: #fff7e5;
}

.speech-status-line {
  background: #f7f4ee;
}

.speech-transcript span,
.speech-status-line span,
.speech-note {
  color: var(--muted);
}

.speech-transcript strong,
.speech-status-line strong {
  color: var(--ink);
  line-height: 1.55;
}

.speech-note {
  margin: 0;
  line-height: 1.6;
}

.speech-note.warning {
  color: #8c2f24;
}

.speech-reference-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 20px;
}

.speech-reference-card .speech-tabs,
.speech-reference-card .speech-legend,
.speech-reference-card .speech-tip,
.speech-reference-card .speech-reference {
  grid-column: 1;
}

.speech-ai-advice {
  grid-column: 2;
  grid-row: 1 / 5;
  align-self: end;
  padding: 20px;
  border: 1px solid rgba(234, 203, 147, 0.9);
  border-radius: 14px;
  background: linear-gradient(135deg, #fffaf1, #fff5df);
}

.speech-ai-advice strong {
  color: #b87800;
}

.speech-ai-advice p {
  color: #5d4d3e;
  line-height: 1.7;
}

.speech-result-bottom article {
  background: #fff;
  border: 1px solid rgba(234, 223, 202, 0.96);
  border-radius: 14px;
}

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

.speech-followup-grid article {
  display: grid;
  gap: 7px;
  padding: 14px;
  border-radius: 8px;
  background: #f7f4ee;
}

.speech-followup-grid span {
  color: #18a89b;
  font-size: 12px;
  font-weight: 950;
}

.speech-followup-grid p {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
}

.feedback-panel.speech-report-mode .score-ring {
  width: 116px;
  height: 116px;
  margin: 0 auto 14px;
}

.feedback-panel.speech-report-mode .score-ring strong {
  font-size: 30px;
  line-height: 1;
  transform: translateY(2px);
}

.feedback-panel.speech-report-mode .speech-original-report {
  gap: 12px;
}

.feedback-panel.speech-report-mode .speech-report-top,
.feedback-panel.speech-report-mode .speech-report-grid,
.feedback-panel.speech-report-mode .speech-followup-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.feedback-panel.speech-report-mode .speech-score-card {
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 14px;
}

.feedback-panel.speech-report-mode .speech-total-ring {
  width: 88px;
  height: 88px;
}

.feedback-panel.speech-report-mode .speech-total-ring strong {
  font-size: 25px;
}

.feedback-panel.speech-report-mode .speech-score-lines {
  gap: 6px;
  padding-left: 12px;
}

.feedback-panel.speech-report-mode .speech-player-card {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 14px;
}

.feedback-panel.speech-report-mode .speech-power-card,
.feedback-panel.speech-report-mode .speech-detail-card {
  padding: 16px;
}

.feedback-panel.speech-report-mode .speech-tabs {
  gap: 18px;
  margin-bottom: 12px;
  overflow-x: auto;
  white-space: nowrap;
}

.feedback-panel.speech-report-mode .speech-reference {
  font-size: 17px;
  line-height: 1.55;
}

.feedback-panel.speech-report-mode .speech-transcript,
.feedback-panel.speech-report-mode .speech-status-line {
  padding: 10px;
}

.feedback-panel.speech-report-mode.speech-result-ready .speech-report-grid {
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  gap: 18px;
}

.feedback-panel.speech-report-mode.speech-result-ready .speech-ability-card-full {
  grid-column: 1 / -1;
}

.feedback-panel.speech-report-mode.speech-result-ready .speech-power-card,
.feedback-panel.speech-report-mode.speech-result-ready .speech-detail-card {
  padding: 22px 24px 28px;
}

.feedback-panel.speech-report-mode.speech-result-ready .speech-power-card {
  align-self: stretch;
}

.feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready {
  padding: 0;
  min-width: 0;
  contain: inline-size;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready *,
.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready *::before,
.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready *::after {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-original-report {
  gap: 16px;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-result-summary {
  grid-template-columns: 1fr;
  min-height: 0;
  padding: 22px;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-result-title h2 {
  font-size: 26px;
  line-height: 1.18;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-result-title span {
  display: block;
  margin-top: 4px;
  line-height: 1.45;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-result-actions {
  grid-row: 3;
  width: 100%;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-result-actions button {
  flex: 1;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-result-summary .speech-score-card {
  grid-column: auto;
  grid-template-columns: 116px minmax(0, 1fr);
  min-height: 0;
  gap: 16px;
  padding: 6px 0 0;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-result-summary .speech-score-card > img {
  display: none;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines {
  gap: 10px;
  padding-left: 16px;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines p {
  display: flex;
  gap: 12px;
  line-height: 1.4;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-player-card {
  grid-template-columns: 1fr;
  padding: 20px 22px;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-report-grid,
.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card,
.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-followup-grid {
  grid-template-columns: 1fr;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card .speech-tabs,
.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card .speech-legend,
.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card .speech-tip,
.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card .speech-reference,
.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-advice {
  grid-column: 1;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-advice {
  grid-row: auto;
  align-self: stretch;
  margin-top: 6px;
  padding: 18px;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-power-card,
.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-detail-card {
  padding: 22px;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-power-card {
  gap: 16px;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-power-card p {
  font-size: 14px;
  line-height: 1.75;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-detail-card h3,
.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-power-card h3 {
  font-size: 21px;
  line-height: 1.25;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ability-layout {
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  gap: 18px;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-chart {
  width: 190px;
  height: 190px;
  margin: 0;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list {
  gap: 12px;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list span {
  grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1fr) 46px;
  gap: 10px;
  font-size: 13px;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list i {
  height: 9px;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-metric-row {
  grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1fr) 50px;
  gap: 14px;
  min-height: 32px;
  font-size: 14px;
  line-height: 1.35;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-metric-row + .speech-metric-row {
  margin-top: 8px;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-metric-row i {
  height: 11px;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-metric-row strong {
  text-align: right;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference {
  font-size: 16.5px;
  line-height: 1.75;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference .speech-word,
.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference .speech-punctuation,
.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference .speech-pause-mark {
  display: inline;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-tabs {
  gap: 20px;
  margin-bottom: 14px;
  overflow: visible;
  white-space: normal;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-legend {
  gap: 16px;
  margin-bottom: 14px;
}

.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-tip {
  max-width: 420px;
  margin-bottom: 16px;
  line-height: 1.65;
}

.practice-discussion {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #ecd7af;
  border-radius: 8px;
  background:
    radial-gradient(circle at 8% 0%, rgba(246, 181, 31, 0.12), transparent 32%),
    #fffefb;
  box-shadow: 0 18px 44px rgba(80, 52, 12, 0.06);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

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

.discussion-head h3 {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: 0;
}

.discussion-head h3::before {
  content: "●";
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid #f1c875;
  border-radius: 50%;
  color: #b97a00;
  background: #fff4d7;
  font-size: 14px;
}

.discussion-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #eadcc5;
  border-radius: 8px 8px 0 0;
  background: #fff;
}

.discussion-tabs button {
  min-height: 54px;
  padding: 0 18px;
  border: 0;
  border-right: 1px solid #eadcc5;
  border-radius: 0;
  color: #7f746a;
  background: #fff;
  font-size: 15px;
  letter-spacing: 0;
  font-weight: 900;
}

.discussion-tabs button:last-child {
  border-right: 0;
}

.discussion-tabs button.active {
  color: #b97a00;
  background: linear-gradient(180deg, #fff6dc, #fffaf0);
  box-shadow: inset 0 -2px 0 #d18b00;
}

.discussion-filter {
  display: none;
}

.discussion-list {
  display: grid;
  gap: 12px;
}

.practice-entry {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 20px;
  border: 1px solid #efe1cc;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(80, 52, 12, 0.05);
}

.discussion-post {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  padding: 20px;
  border: 1px solid #efe1cc;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(80, 52, 12, 0.05);
}

.discussion-post p {
  margin: 10px 0 18px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.78;
}

.practice-entry-title span,
.practice-entry-title em {
  padding: 2px 7px;
  border-radius: 999px;
  color: #9c6500;
  background: #fff2cf;
  font-size: 12px;
  font-style: normal;
}

.discussion-comment-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.discussion-comment-box input {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #eadcc5;
  border-radius: 999px;
  background: #fffdf8;
}

.discussion-comment-box button {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #b97a00, #e5a900);
  font-weight: 900;
}

.practice-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 3px solid #f2bd37;
  border-radius: 50%;
  color: #211916;
  background:
    radial-gradient(circle at 50% 35%, #fff7dd, #f7bc2b 62%, #bd7c00 100%);
  box-shadow: 0 8px 18px rgba(187, 124, 0, 0.18);
  font-weight: 950;
}

.practice-entry-main {
  display: grid;
  gap: 9px;
}

.practice-entry-title {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
  color: #211916;
  font-weight: 950;
  letter-spacing: 0;
}

.practice-entry-title small {
  color: #a0a4a4;
}

.practice-entry-note {
  margin: 0;
  color: #6f665d;
  line-height: 1.65;
}

.practice-audio-pill {
  width: min(430px, 100%);
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f8f2e7;
  color: #4f5558;
}

.practice-audio-pill b {
  color: #111;
}

.practice-audio-line {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #bd7c00, #f0c14a 45%, #e6d8c0);
}

.practice-entry-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.practice-entry-tags span,
.practice-entry-tags button {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid #e5c382;
  border-radius: 999px;
  color: #9c6500;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.practice-entry-actions {
  display: flex;
  gap: 10px;
  color: var(--muted);
}

.practice-entry-actions button {
  width: 34px;
  height: 34px;
  border: 1px solid #eadcc5;
  border-radius: 50%;
  color: inherit;
  background: #fffaf0;
  font-size: 17px;
}

.action-plan-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.action-plan-heading h3 {
  margin: 0 0 6px;
}

.action-plan-item {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.action-plan-item span {
  color: var(--mint-dark);
  font-size: 12px;
  font-weight: 900;
}

.action-plan-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.course-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.course-choice-card {
  min-height: 150px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  box-shadow: var(--shadow);
}

.course-choice-card.active {
  color: #fff;
  border-color: #241b18;
  background: #241b18;
}

.course-choice-card span {
  color: var(--accent-text);
  font-weight: 950;
}

.course-choice-card strong {
  display: block;
  margin: 8px 0;
  font-size: 24px;
}

.course-choice-card p {
  margin: 0;
  color: inherit;
  line-height: 1.65;
  opacity: 0.76;
}

.service-overview-grid,
.resource-category-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.service-overview-grid {
  grid-template-columns: 1.1fr 1fr 1fr;
}

.resource-category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-overview-card,
.resource-category {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.service-overview-card {
  min-height: 150px;
  padding: 18px;
  display: grid;
  align-content: space-between;
}

.service-overview-card.dark {
  color: #fff;
  background: #241b18;
}

.service-overview-card span,
.resource-category span {
  color: var(--muted);
  font-weight: 900;
}

.service-overview-card.dark span {
  color: rgba(255, 255, 255, 0.72);
}

.service-overview-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.service-overview-card.dark p {
  color: rgba(255, 255, 255, 0.72);
}

.course-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 14px;
  margin-bottom: 18px;
}

.course-diagnosis-panel,
.student-fit-panel {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.course-diagnosis-panel h3,
.course-diagnosis-panel p,
.student-fit-panel p {
  margin: 0;
}

.course-diagnosis-panel p,
.student-fit-panel p {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.65;
}

.diagnosis-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.diagnosis-steps span {
  min-height: 42px;
  padding: 9px;
  border-radius: 8px;
  color: var(--mint-dark);
  background: #fff3cf;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 13px;
  font-weight: 950;
}

.student-fit-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.student-fit-panel span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.student-fit-panel strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 20px;
}

.resource-category {
  min-height: 82px;
  padding: 14px;
  display: grid;
  align-content: space-between;
}

.resource-category.active {
  color: #fff;
  border-color: var(--mint-dark);
  background: var(--mint-dark);
}

.resource-category.active span {
  color: rgba(255, 255, 255, 0.72);
}

.course-path-board {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.course-recommend,
.course-stage,
.service-strip article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.course-recommend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px;
}

.course-recommend h3,
.course-recommend p {
  margin: 0;
}

.course-recommend p {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.7;
}

.course-current-plan {
  min-width: 220px;
  padding: 18px;
  border-radius: 8px;
  color: #fff;
  background: #241b18;
}

.course-current-plan span {
  color: rgba(255, 255, 255, 0.72);
}

.course-current-plan strong {
  display: block;
  margin: 8px 0 14px;
  font-size: 24px;
}

.course-stage-list,
.service-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.course-stage {
  min-height: 172px;
  padding: 16px;
  display: grid;
  align-content: space-between;
}

.course-stage span {
  color: var(--accent-text);
  font-weight: 900;
}

.course-stage p {
  margin: 8px 0;
  color: var(--muted);
  line-height: 1.65;
}

.course-stage b {
  color: var(--mint-dark);
}

.service-strip article {
  padding: 15px;
}

.service-strip span {
  color: var(--muted);
}

.service-strip strong {
  display: block;
  margin-top: 6px;
}

.course-card {
  min-height: 310px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.course-card.featured {
  color: #fff;
  background: #241b18;
}

.course-card.featured p {
  color: rgba(255, 255, 255, 0.72);
}

.course-card button {
  margin-top: auto;
}

.course-feature-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.45;
}

.course-card.featured .course-feature-list {
  color: rgba(255, 255, 255, 0.78);
}

.resource-list {
  display: grid;
  gap: 12px;
}

.resource-funnel {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.resource-hero-panel,
.resource-step-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.resource-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px;
}

.resource-hero-panel h3,
.resource-hero-panel p {
  margin: 0;
}

.resource-hero-panel p {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.7;
}

.resource-lead-card {
  min-width: 220px;
  padding: 18px;
  border-radius: 8px;
  color: #fff;
  background: #241b18;
}

.resource-lead-card span {
  color: rgba(255, 255, 255, 0.72);
}

.resource-lead-card strong {
  display: block;
  margin: 8px 0 14px;
  font-size: 32px;
}

.resource-step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.resource-step-list article {
  padding: 16px;
}

.resource-step-list span {
  color: var(--accent-text);
  font-weight: 900;
}

.resource-step-list strong {
  display: block;
  margin-top: 8px;
}

.resource-step-list p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.question-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: min(620px, calc(100vh - 330px));
  overflow-y: auto;
  padding: 2px 6px 4px 0;
  margin-bottom: 0;
  scrollbar-color: #241b18 #f4efe6;
}

.question-finder {
  display: grid;
  gap: 10px;
}

.search-field {
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.search-field span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.search-field input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  background: transparent;
}

.question-list-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.filter-chip {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.filter-chip:hover {
  border-color: rgba(182, 121, 0, 0.45);
  box-shadow: 0 8px 18px rgba(45, 32, 22, 0.08);
  transform: translateY(-1px) scale(1.04);
}

.filter-chip.active {
  color: #fff;
  border-color: var(--ink);
  background: var(--ink);
}

.type-guide-panel {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #fffaf0, #fff);
  display: grid;
  gap: 12px;
  box-shadow: 0 12px 28px rgba(49, 38, 24, 0.06);
}

.type-guide-panel h4 {
  margin: 3px 0 6px;
  color: var(--ink);
  font-size: 18px;
}

.type-guide-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.type-guide-panel small {
  color: var(--muted);
  line-height: 1.5;
}

.guide-metrics,
.guide-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.guide-metrics span,
.guide-points span {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.guide-points span {
  color: var(--mint-dark);
  background: #fff3cf;
}

.practice-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.practice-stat {
  position: relative;
  min-height: 92px;
  padding: 18px 16px 16px 68px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(24, 33, 37, 0.04);
}

.practice-stat::before {
  content: attr(data-icon);
  position: absolute;
  left: 18px;
  top: 22px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #b67600;
  background: #fff2cf;
  font-weight: 950;
}

.practice-stat span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.practice-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
}

.skill-filter {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 14px;
  padding-bottom: 4px;
}

.skill-pill {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-weight: 900;
}

.skill-pill.active {
  color: #fff;
  border-color: var(--mint-dark);
  background: var(--mint-dark);
}

.question-row {
  min-height: 82px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.compact-question-row {
  min-height: 64px;
  grid-template-columns: 42px minmax(0, 1fr);
  border-color: #ece3d4;
  background: linear-gradient(180deg, #ffffff, #fffaf2);
}

.compact-question-row .question-row-main {
  display: grid;
  gap: 8px;
}

.compact-question-row strong {
  color: #2f2722;
  font-size: 15px;
  line-height: 1.35;
}

.compact-question-row em {
  margin-top: 0;
}

.compact-question-row .question-index {
  width: 38px;
  height: 38px;
  font-size: 14px;
  background: #241b18;
  color: #f6c542;
}

.compact-question-row.selected {
  border-color: #f0b62e;
  background: #fff3cf;
}

.question-row small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.question-row b {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--ink);
  background: #eef2ed;
  align-items: center;
  font-size: 12px;
  font-weight: 950;
}

.question-row em {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--accent-text);
  background: #fff6df;
  align-items: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.question-row strong {
  color: var(--mint-dark);
  font-size: 15px;
}

.active-question h3 {
  margin: 12px 0 10px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
}

.question-index {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  color: var(--mint-dark);
  background: #fff3cf;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 950;
}

.question-row-main {
  min-width: 0;
}

.question-row-action {
  min-width: 82px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--mint-dark);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 950;
}

.question-row.locked .question-row-action {
  color: var(--muted);
  background: #f3f4ef;
}

.question-row.selected {
  border-color: var(--mint);
  background: #fff3cf;
  box-shadow: 0 12px 26px rgba(182, 121, 0, 0.12);
}

.question-row:hover {
  border-color: rgba(182, 121, 0, 0.42);
  transform: translateY(-1px);
}

.compact-select {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-weight: 800;
}

.resource-item {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
}

.resource-item > span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  color: #fff;
  background: var(--coral);
  font-weight: 900;
}

.history-table {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.history-table [role="row"] {
  display: grid;
  grid-template-columns: 0.9fr 0.8fr 1.5fr 0.7fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: #fff7e5;
}

.history-table [role="row"]:first-child {
  color: var(--muted);
  font-weight: 800;
  background: transparent;
}

html body.view-mistakes{position:relative;isolation:isolate;background:#fffdf7;color:#17212f}
html body.view-mistakes::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(520px 420px at calc(50% - 500px) 120px,rgba(255,222,76,.42),transparent 72%),radial-gradient(520px 520px at calc(50% + 540px) 620px,rgba(187,255,224,.16),transparent 72%),linear-gradient(180deg,#ffd11a 0%,#ffe36d 20%,#fff0aa 40%,#fff8dd 60%,#fffdf7 80%,#fff 100%)}
html body.view-mistakes .app-shell{position:relative;z-index:1;background:transparent}
html body.view-mistakes .main{background:transparent}
body.view-mistakes #mistakes{min-height:100vh;margin:0;background:transparent}
.wrongbook-v2{--wb-ink:#17212f;--wb-copy:#576573;--wb-muted:#8996a1;--wb-line:rgba(238,242,245,.72);position:relative;min-height:1144px;color:var(--wb-ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;font-feature-settings:"kern" 1,"tnum" 1;font-variant-numeric:tabular-nums;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.wrongbook-v2 *{box-sizing:border-box}
.wrongbook-v2 button,.wrongbook-v2 input,.wrongbook-v2 textarea{font:inherit}
.wrongbook-v2 button:focus-visible,.wrongbook-v2 input:focus-visible,.wrongbook-v2 textarea:focus-visible{outline:2px solid rgba(32,143,119,.72);outline-offset:3px}
.wb-screen{width:min(1264px,100%);min-height:1080px;margin:0 auto;padding:32px 0 60px}
.wb-screen h1,.wb-screen h2,.wb-screen h3,.wb-screen p,.wb-screen dl,.wb-screen dd{margin:0}
.wb-screen :is(h1,h2,h3,strong){font-family:ui-rounded,"SF Pro Rounded","SF Pro Display",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:-.012em;text-shadow:0 1px 0 rgba(255,255,255,.38)}
.wb-icon{display:block;width:24px;height:24px;object-fit:contain;flex:0 0 auto}
.wb-glass-card{border:1px solid rgba(255,255,255,.66);background:rgba(255,255,255,.3);box-shadow:0 18px 42px -16px rgba(94,71,26,.11),inset 0 1px 1px rgba(255,255,255,.68);backdrop-filter:blur(24px) saturate(1.16);-webkit-backdrop-filter:blur(24px) saturate(1.16)}
.wb-reading-surface{border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.62);box-shadow:0 12px 30px -18px rgba(18,26,38,.1),inset 0 1px 1px rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(1.08);-webkit-backdrop-filter:blur(20px) saturate(1.08)}
.wb-button{position:relative;display:inline-flex;height:48px;padding:12px 18px;align-items:center;justify-content:center;gap:8px;overflow:hidden;border:1px solid rgba(255,255,255,.84);border-radius:24px;color:#14171c;font-size:14px;font-weight:700;line-height:20px;white-space:nowrap;box-shadow:inset 0 1px 2px rgba(255,255,255,.96);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.wb-button .wb-icon{width:20px;height:20px}.wb-button:hover{transform:translateY(-1px);filter:saturate(1.04)}.wb-button:active{transform:translateY(1px) scale(.985)}
.wb-button-primary{background:linear-gradient(180deg,rgba(255,214,46,.18),rgba(255,242,158,.16) 48%,rgba(255,255,255,.1));box-shadow:0 12px 26px -8px rgba(189,120,0,.25),inset 0 1px 2px rgba(255,255,255,.96)}
.wb-button-secondary{background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(237,250,247,.42));box-shadow:0 18px 42px -10px rgba(94,71,26,.1),inset 0 1px 1px rgba(255,255,255,.72)}
.wb-button-tertiary{background:rgba(255,255,255,.28);box-shadow:0 16px 36px -28px rgba(15,23,33,.16),inset 0 1px 1px rgba(255,255,255,.86)}
.wb-icon-button{display:grid;width:48px;height:48px;padding:0;place-items:center;border:1px solid rgba(237,241,244,.97);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.34));box-shadow:0 18px 42px -10px rgba(94,71,26,.1),inset 0 1px 1px rgba(255,255,255,.72)}
.wb-icon-button .wb-icon{width:22px;height:22px}.wb-icon-button:active{transform:scale(.96);opacity:.88}
.wb-page-heading{display:flex;height:82px;align-items:flex-start;gap:14px}
.wb-heading-icon{display:grid;width:48px;height:48px;place-items:center;border:1px solid rgba(255,255,255,.82);border-radius:18px;background:rgba(255,255,255,.7);box-shadow:0 18px 42px -10px rgba(94,71,26,.1),inset 0 1px 1px rgba(255,255,255,.72)}
.wb-page-heading h1{font-size:38px;font-weight:740;line-height:48px;letter-spacing:-.02em}.wb-page-heading p{color:rgba(55,70,84,.76);font-size:14px;line-height:24px}.wb-page-heading small{display:none}.wb-settings-button{display:grid;margin-left:auto}
.wb-today-card{display:grid;height:188px;margin:0 4px;padding:26px 31px;grid-template-columns:minmax(0,1fr) 400px;overflow:hidden;border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.38),rgba(255,250,226,.16))}
.wb-today-copy>span{color:#7a6a2a;font-size:14px;font-weight:600}.wb-today-copy h2{margin-top:8px;font-size:30px;line-height:42px}.wb-today-copy h2 em{font-style:normal}.wb-today-mobile-copy{display:none}.wb-today-copy p{color:#5c6b78;font-size:14px;line-height:24px}.wb-today-copy .wb-button{margin-top:10px;height:48px}
.wb-today-progress{display:flex;align-items:center;justify-content:flex-end;gap:34px}.wb-progress-ring{position:relative;width:108px;height:108px}.wb-progress-ring>img{position:absolute;inset:0;width:108px;height:108px}.wb-progress-ring strong,.wb-progress-ring small{position:absolute;left:0;width:100%;text-align:center}.wb-progress-ring strong{top:39px;color:#6b5100;font-size:23px}.wb-progress-ring small{top:68px;color:#7f8b95;font-size:11px}
.wb-today-progress dl{width:148px}.wb-today-progress dt{margin-bottom:12px;color:#344250;font-size:13px;font-weight:600}.wb-today-progress dd{display:flex;margin-top:8px;justify-content:space-between;color:#6b7885;font-size:12px}.wb-today-progress dd b{color:#6b5100;font-size:20px}.wb-today-progress dd b.is-risk{color:#d84c3f}.wb-mobile-progress{display:none}
.wb-metrics{display:grid;margin-top:38px;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.wb-stat-card{display:flex;height:112px;padding:16px 18px;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.88);border-radius:24px;box-shadow:0 18px 42px -10px rgba(94,71,26,.1),inset 0 1px 1px rgba(255,255,255,.72)}
.wb-stat-card.is-pending{background:linear-gradient(180deg,rgba(255,255,255,.54),rgba(255,245,194,.28))}.wb-stat-card.is-repeat{background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,237,232,.14))}.wb-stat-card.is-mastered{background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(229,252,240,.14))}.wb-stat-card.is-streak{background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(232,245,255,.14))}
.wb-stat-card>.wb-icon{width:28px;height:28px}.wb-stat-card div{display:grid;gap:2px}.wb-stat-card span{color:#4d5966;font-size:12px;line-height:18px}.wb-stat-card strong{font-size:30px;line-height:36px}.wb-stat-card small{color:rgba(87,102,120,.72);font-size:11px}.wb-stat-card.is-pending strong{color:#664500}.wb-stat-card.is-repeat strong{color:#e03329}.wb-stat-card.is-mastered strong{color:#1a6e59}.wb-stat-card.is-streak strong{color:#1a5eb8}
.wb-dashboard-grid{display:grid;margin-top:32px;grid-template-columns:minmax(0,824px) minmax(0,416px);gap:24px}
.wb-priority-panel,.wb-insight-panel{height:542px;overflow:hidden;border-radius:30px}.wb-priority-panel{padding:16px 23px;background:rgba(255,255,255,.18)}.wb-insight-panel{padding:23px;background:rgba(255,255,255,.26)}
.wb-section-heading{display:grid;grid-template-columns:minmax(0,1fr) 420px;align-items:center}.wb-section-heading h2{font-size:22px;line-height:30px}.wb-section-heading p{color:#82909c;font-size:12px}.wb-view-all{display:none;border:0;background:transparent;color:#5c6a76}
.wb-search-field{display:flex;height:50px;padding:13px 14px 13px 16px;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.84);border-radius:25px;background:rgba(255,255,255,.62);box-shadow:0 18px 42px -10px rgba(94,71,26,.1),inset 0 1px 1px rgba(255,255,255,.72)}
.wb-search-field:focus-within{border-color:rgba(51,168,140,.72);box-shadow:0 0 10px rgba(31,166,135,.16),inset 0 1px 1px rgba(255,255,255,.72)}.wb-search-field>span .wb-icon{width:20px;height:20px}.wb-search-field input{min-width:0;flex:1;border:0;outline:0;color:#2b3845;background:transparent;font-size:13px}.wb-search-field input::placeholder{color:rgba(92,107,125,.72)}.wb-search-field>button{display:grid;width:24px;height:24px;padding:0;place-items:center;border:0;background:transparent}.wb-search-field>button .wb-icon{width:20px;height:20px}
.wb-filter-chips{display:flex;margin:12px 0 10px;gap:10px}.wb-filter-chips button{display:inline-flex;height:34px;padding:0 14px;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.82);border-radius:17px;color:#576573;background:rgba(255,255,255,.52);font-size:12px}.wb-filter-chips button .wb-icon{width:16px;height:16px}.wb-filter-chips button.is-active{border-color:rgba(255,210,61,.78);color:#6d5300;background:rgba(255,241,168,.82)}
.wb-question-list{display:grid;gap:8px}.wb-question-card{position:relative;display:grid;height:132px;padding:16px 18px 16px 20px;grid-template-columns:52px minmax(0,1fr) 116px 120px 24px;align-items:center;gap:14px;overflow:hidden;border:1px solid rgba(255,255,255,.92);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,252,242,.14));box-shadow:0 10px 30px -12px rgba(18,26,38,.08),inset 0 1px 1px rgba(255,255,255,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer}
.wb-question-card.is-repeat{background:linear-gradient(180deg,rgba(255,255,255,.19),rgba(255,245,240,.15))}.wb-question-card.is-reviewing{background:linear-gradient(180deg,rgba(255,255,255,.19),rgba(240,248,255,.15))}.wb-question-card.is-mastered{background:linear-gradient(180deg,rgba(255,255,255,.19),rgba(240,255,247,.15))}.wb-question-accent{position:absolute;left:0;top:23px;width:4px;height:84px;border-radius:2px;background:#ffc72e}.wb-question-card.is-repeat .wb-question-accent{background:#ff6657}.wb-question-card.is-reviewing .wb-question-accent{background:#2470c9}.wb-question-card.is-mastered .wb-question-accent{background:#217d69}
.wb-type-badge,.wb-type-badge.is-rs,.wb-type-badge.is-sst,.wb-type-badge.is-ra{display:grid;width:52px;height:52px;place-items:center;border:1px solid rgba(255,255,255,.76);border-radius:14px;color:#101722;background:rgba(255,240,173,.62);box-shadow:0 12px 28px rgba(82,64,13,.12);font-size:13px;font-weight:800}
.wb-question-copy{min-width:0}.wb-question-copy>strong{display:block;overflow:hidden;font-size:17px;line-height:24px;text-overflow:ellipsis;white-space:nowrap}.wb-question-copy>p{margin-top:3px;overflow:hidden;color:#697783;font-size:12px;line-height:18px;text-overflow:ellipsis;white-space:nowrap}.wb-question-meta{display:flex;margin-top:8px;gap:8px;color:#8a96a1;font-size:10px}.wb-question-meta span{display:inline-flex;align-items:center;gap:4px}.wb-question-meta .wb-icon{width:14px;height:14px}.wb-question-meta span.is-repeat{color:#e03329}.wb-question-meta span.is-mastered{color:#1a6e59}.wb-question-meta span.is-pending{color:#a66e00}
.wb-question-score{text-align:right}.wb-question-score strong{display:block;font-size:22px;line-height:28px}.wb-question-score strong small{font-size:14px}.wb-question-score>span{color:#8a96a1;font-size:10px}
.wb-status-chip{display:inline-flex;height:34px;padding:7px 12px 7px 11px;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(255,255,255,.86);border-radius:18px;font-size:12px;font-weight:600;box-shadow:0 12px 28px -18px rgba(82,64,13,.22),inset 0 1px 1px rgba(255,255,255,.72)}.wb-status-chip .wb-icon{width:16px;height:16px}.wb-status-chip.is-pending{color:#a66e00;background:rgba(255,240,168,.72)}.wb-status-chip.is-reviewing{color:#1a5eb8;background:rgba(214,237,255,.72)}.wb-status-chip.is-repeat{color:#e03329;background:rgba(255,214,207,.72)}.wb-status-chip.is-mastered{color:#1a6e59;background:rgba(199,247,217,.72)}
.wb-more-button{display:grid;width:24px;height:24px;padding:0;place-items:center;border:0;background:transparent}.wb-more-button .wb-icon{width:18px;height:18px}
.wb-insight-title{display:flex;align-items:center;gap:12px}.wb-insight-title>span{display:grid;width:48px;height:48px;place-items:center;border-radius:17px;background:#e7faf3}.wb-insight-title h2{font-size:21px}.wb-insight-title p{color:#85929d;font-size:11px}.wb-insight-bars{margin-top:29px}.wb-insight-bars h3{display:flex;margin-bottom:19px;justify-content:space-between;font-size:13px}.wb-insight-bars h3 small{color:#8996a1;font-weight:400}.wb-insight-bars>div{margin-bottom:18px}.wb-insight-bars p{display:flex;justify-content:space-between;font-size:12px}.wb-insight-bars p b{font-size:11px}.wb-insight-bars i{display:block;height:8px;margin-top:8px;overflow:hidden;border-radius:4px;background:#edf0f2}.wb-insight-bars i span{display:block;height:100%;border-radius:inherit}.wb-insight-bars .is-yellow{background:#f2bb19}.wb-insight-bars .is-coral{background:#ef6a5b}.wb-insight-bars .is-mint{background:#2ea987}.wb-insight-bars>div>small{color:#9aa5ae;font-size:10px}
.wb-ai-recommendation{margin-top:28px;padding:17px;border:1px solid rgba(255,255,255,.64);border-radius:22px;background:rgba(250,252,251,.58);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.wb-ai-recommendation strong{display:flex;align-items:center;gap:8px;color:#16846b;font-size:12px}.wb-ai-recommendation .wb-icon{width:17px;height:17px}.wb-ai-recommendation p{margin-top:14px;color:#4f5d68;font-size:12px;line-height:22px}.wb-ai-recommendation small{display:block;margin-top:10px;color:#16846b;font-size:10px}
.wb-empty-state{display:grid;min-height:350px;padding:54px 24px;place-items:center;align-content:center;text-align:center}.wb-empty-state .wb-empty-icon{width:48px;height:48px}.wb-empty-state h3{margin-top:14px;font-size:20px}.wb-empty-state p{max-width:410px;margin-top:8px;color:#63717e;font-size:13px}.wb-empty-state .wb-button{margin-top:20px}.wb-empty-state small{margin-top:12px;color:#8996a1}
.wb-mobile-header{display:none}.wb-list-screen{padding-top:104px}.wb-list-screen>.wb-search-field,.wb-list-screen>.wb-filter-chips,.wb-list-summary{width:824px;margin-left:auto;margin-right:auto}.wb-list-screen>.wb-question-list{width:824px;margin:16px auto}.wb-list-summary{display:flex;margin-top:18px;justify-content:space-between;color:#62717e}.wb-list-summary span{font-size:12px}
.wb-settings-screen{padding-top:28px}
.wb-detail-header{display:flex;height:48px;align-items:center;gap:16px}.wb-detail-header>div{min-width:0}.wb-detail-header h1{font-size:24px;line-height:30px}.wb-detail-header p{color:#657482;font-size:13px;line-height:20px}.wb-detail-header>.wb-icon-button:last-child{margin-left:auto}
.wb-card-title{display:flex;align-items:flex-start;justify-content:space-between}.wb-card-title h2{font-size:18px;line-height:26px}.wb-card-title p,.wb-card-title span{color:#8a96a1;font-size:11px}
.wb-settings-screen{padding-top:90px}.wb-saved-chip{margin-left:auto;padding:7px 14px;border:1px solid rgba(243,246,247,.96);border-radius:15px;color:#1a6e59;background:rgba(231,247,240,.96);font-size:11px}.wb-settings-layout{display:grid;margin-top:28px;grid-template-columns:240px 1000px;gap:24px}.wb-settings-rail,.wb-settings-content{height:858px;border-radius:30px}.wb-settings-rail{padding:22px}.wb-settings-rail h2{font-size:17px}.wb-settings-rail>button{display:flex;width:100%;height:48px;margin-top:10px;padding:0 12px;align-items:center;gap:10px;border:1px solid transparent;border-radius:18px;color:#5d6b77;background:transparent;text-align:left}.wb-settings-rail>button .wb-icon{width:20px;height:20px}.wb-settings-rail>button.is-active{border-color:rgba(255,225,117,.9);color:#263340;background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,245,184,.86),rgba(255,212,51,.58))}.wb-settings-rail>div{margin-top:186px;padding:16px;border-radius:20px;background:#effaf6}.wb-settings-rail>div strong{font-size:13px}.wb-settings-rail>div p{margin-top:6px;color:#667580;font-size:11px;line-height:18px}.wb-settings-rail>div .wb-button{width:100%;height:40px;margin-top:14px;font-size:11px}
.wb-settings-content{padding:27px;overflow:auto}.wb-settings-content>section{margin-bottom:24px}.wb-settings-content>section>.wb-card-title{margin-bottom:14px}.wb-settings-content article{position:relative;display:grid;min-height:92px;padding:14px;grid-template-columns:46px 1fr auto;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.68);border-radius:22px;background:rgba(255,255,255,.54)}.wb-settings-content article+article{margin-top:16px}.wb-setting-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:14px}.wb-setting-icon .wb-icon{width:21px;height:21px}.wb-setting-icon.is-coral{background:#fff0ec}.wb-setting-icon.is-yellow{background:#fff7d4}.wb-setting-icon.is-blue{background:#edf5fc}.wb-setting-icon.is-mint{background:#e8f7f1}.wb-settings-content article strong{font-size:13px}.wb-settings-content article p{margin-top:4px;color:#72808b;font-size:11px}.wb-toggle{position:relative;width:48px;height:28px;padding:0;border:0;border-radius:14px;background:#dbe2e6}.wb-toggle span{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(24,38,48,.2);transition:left .18s ease}.wb-toggle.is-on{background:#2ea987}.wb-toggle.is-on span{left:23px}
.wb-setting-range{position:absolute;left:74px;right:14px;bottom:10px;display:grid;grid-template-columns:1fr 76px;align-items:center;color:#657481;font-size:10px}.wb-setting-range output{justify-self:end;padding:5px 12px;border-radius:16px;background:#fff3b8;font-size:11px}.wb-setting-range input{grid-column:1/-1;width:100%;height:8px;margin-top:4px;appearance:none;-webkit-appearance:none;border-radius:4px;background:linear-gradient(90deg,#f1b918 0 var(--wb-range-progress,62%),#e6ecef var(--wb-range-progress,62%) 100%)}.wb-setting-range input::-webkit-slider-thumb{width:22px;height:22px;appearance:none;-webkit-appearance:none;border:3px solid #f1b918;border-radius:50%;background:#fff;box-shadow:0 3px 9px rgba(122,88,0,.16)}.wb-setting-range input::-moz-range-thumb{width:16px;height:16px;border:3px solid #f1b918;border-radius:50%;background:#fff}.wb-stepper{position:absolute;right:72px;bottom:12px;display:flex;align-items:center;gap:8px;color:#657481;font-size:10px}.wb-stepper button{display:grid;width:26px;height:26px;padding:0;place-items:center;border:1px solid #e6ebee;border-radius:13px;background:#fff}.wb-stepper output{min-width:42px;text-align:center}
.wb-daily-target{display:grid;margin-bottom:16px;grid-template-columns:120px repeat(3,1fr);gap:8px;align-items:center}.wb-daily-target>span{font-size:12px}.wb-daily-target button{height:42px;border:1px solid rgba(243,246,247,.96);border-radius:17px;background:#f6f8f9;color:#657481;font-size:11px}.wb-daily-target button.is-active{color:#604800;background:#fff2a8}.wb-settings-exclusion{min-height:78px!important}.wb-mobile-reminder{display:none!important}
@media (min-width:761px){.wb-settings-screen{padding-top:28px}.wb-settings-screen>.wb-detail-header>.wb-icon-button:first-child{border-radius:18px;background:url("./assets/wrongbook-figma/settings.svg?v=wrongbook-figma-icons-v1-20260712") center/22px 22px no-repeat,linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.34))}.wb-settings-screen>.wb-detail-header>.wb-icon-button:first-child .wb-icon{visibility:hidden}}
.wb-settings-actions{display:grid;height:72px;margin:24px 0 0 264px;padding:12px 16px;grid-template-columns:1fr 112px 230px;align-items:center;gap:16px;border:1px solid rgba(243,246,247,.96);border-radius:26px;background:rgba(255,255,255,.8);box-shadow:0 16px 36px -28px rgba(15,23,33,.16),inset 0 1px 1px rgba(255,255,255,.86)}.wb-settings-actions>span{color:#7d8994;font-size:11px}.wb-settings-actions .wb-button{height:46px}.wb-mobile-settings-layout,.wb-saved-mobile{display:none}.wb-saved-chip{display:inline-flex;align-items:center;gap:6px}.wb-saved-chip .wb-icon{width:14px;height:14px}.wb-toggle{height:44px;border-radius:0;background:transparent}.wb-toggle:before{content:"";position:absolute;left:0;top:8px;width:48px;height:28px;border-radius:14px;background:#dbe2e6}.wb-toggle.is-on{background:transparent}.wb-toggle.is-on:before{background:#2ea987}.wb-toggle span{top:11px;z-index:1}
.wb-overlay{position:fixed;inset:0;z-index:500;display:grid;place-items:start center;background:rgba(38,51,61,.08)}.wb-overlay>section{position:relative;width:388px;margin-top:120px;padding:22px;border:1px solid rgba(255,255,255,.94);border-radius:26px;background:rgba(255,255,255,.96);box-shadow:0 16px 32px rgba(46,56,61,.16),inset 0 1px 1px rgba(255,255,255,.9);backdrop-filter:blur(12px)}.wb-overlay-heading{display:flex;align-items:center;justify-content:space-between}.wb-overlay-heading h2{font-size:18px}.wb-overlay-heading span{color:#7b8791;font-size:11px}.wb-overlay fieldset{display:grid;margin:18px 0 0;padding:0;grid-template-columns:repeat(3,1fr);gap:8px;border:0}.wb-overlay legend{grid-column:1/-1;margin-bottom:8px;font-size:12px;font-weight:700}.wb-overlay fieldset button{position:relative;display:flex;height:42px;padding:0 10px;align-items:center;gap:6px;border:1px solid #e7ecef;border-radius:16px;background:#f7f9fa;color:#5e6c78;font-size:11px}.wb-overlay fieldset button .wb-icon{width:17px;height:17px}.wb-overlay fieldset button b{position:absolute;right:7px;width:14px;height:14px;border:1px solid #c7d1d6;border-radius:50%}.wb-overlay fieldset button.is-selected{border-color:#a8e3d2;background:#eefaf6;color:#176f5a}.wb-overlay fieldset button.is-selected b{border:4px solid #2ea987;background:#fff}.wb-overlay footer{display:grid;margin-top:20px;grid-template-columns:96px 1fr;gap:10px}.wb-overlay footer .wb-button{width:100%;height:44px}.wb-mobile-sort,.wb-sheet-handle{display:none}
.wb-master-overlay{place-items:center}.wb-master-overlay>section{width:384px;margin:0;padding:28px;text-align:center}.wb-master-icon{width:42px;height:42px;margin:auto}.wb-master-overlay h2{margin-top:12px;font-size:20px}.wb-master-overlay p{margin-top:10px;color:#64727e;font-size:12px;line-height:20px}.wb-master-overlay footer{grid-template-columns:1fr 1fr}
.wb-auto-collection-toast{position:fixed;left:50%;top:148px;z-index:900;display:grid;width:430px;min-height:132px;padding:18px;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.94);border-radius:24px;background:rgba(255,255,255,.94);box-shadow:0 14px 28px rgba(46,59,64,.15);backdrop-filter:blur(11px);transform:translateX(-50%)}.wb-auto-collection-toast>div strong{font-size:15px}.wb-auto-collection-toast>div p{margin-top:5px;color:#53616d;font-size:11px}.wb-auto-collection-toast>div small{color:#8996a1;font-size:10px}.wb-auto-collection-toast>.wb-status-chip{grid-column:2}.wb-auto-collection-toast>button{grid-column:3;grid-row:1/3;border:0;color:#9a6b00;background:transparent;font-weight:700}.wrongbook-loading{display:flex;min-height:70vh;align-items:center;justify-content:center;gap:7px;color:#6a7883}.wrongbook-loading span{width:8px;height:8px;border-radius:50%;background:#f1b918;animation:wrongbook-loading .8s ease-in-out infinite alternate}.wrongbook-loading span:nth-child(2){animation-delay:.15s}.wrongbook-loading span:nth-child(3){animation-delay:.3s}.wrongbook-loading b{margin-left:8px;font-size:12px}@keyframes wrongbook-loading{to{opacity:.35;transform:translateY(-4px)}}
@media (max-width:1180px) and (min-width:981px){.wb-screen{width:calc(100% - 8px);padding-top:32px}.wb-page-heading h1{font-size:32px}.wb-today-card{grid-template-columns:1fr 340px}.wb-metrics{gap:14px}.wb-dashboard-grid{grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:16px}.wb-section-heading{grid-template-columns:1fr minmax(300px,420px)}.wb-question-card{grid-template-columns:48px minmax(0,1fr) 92px 112px 22px;gap:9px}.wb-settings-layout{grid-template-columns:210px minmax(0,1fr)}.wb-settings-actions{margin-left:226px}}
@media (max-width:980px){.wb-screen{width:min(728px,100%);padding:28px 18px 120px}.wb-page-heading{height:auto}.wb-today-card{margin-top:18px;grid-template-columns:1fr 260px}.wb-metrics{grid-template-columns:repeat(2,1fr)}.wb-dashboard-grid,.wb-settings-layout{grid-template-columns:1fr}.wb-priority-panel,.wb-insight-panel,.wb-settings-rail,.wb-settings-content{height:auto}.wb-insight-panel{min-height:500px}.wb-settings-rail{display:none}.wb-settings-actions{margin-left:0}.wb-mobile-header{display:flex;align-items:center;justify-content:space-between}}
@media (max-width:760px){
html body.view-mistakes{min-width:0;background:#fffdf7}
html body.view-mistakes::before{background:radial-gradient(390px 300px at 50% -10%,rgba(255,204,32,.86),rgba(255,224,94,.38) 47%,rgba(255,255,255,0) 74%),radial-gradient(280px 360px at -12% 20%,rgba(255,221,78,.24),rgba(255,255,255,0) 72%),radial-gradient(300px 340px at 112% 36%,rgba(255,236,147,.28),rgba(255,255,255,0) 74%),linear-gradient(180deg,#ffd128 0%,#ffe88e 20%,#fff7df 49%,#fffdf7 100%)}
html body.view-mistakes .app-shell{min-width:0;background:transparent}
body.view-mistakes #mistakes{width:100%;min-height:100dvh;margin:0;overflow-x:hidden}
body.view-mistakes .main{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
.wrongbook-v2{width:100%;min-height:100dvh}
.wb-screen{width:min(390px,100%);min-height:844px;margin:0 auto;padding:16px 16px 104px}
.wb-page-heading{height:62px;padding-left:4px;align-items:flex-start;gap:0}.wb-heading-icon{display:none}.wb-page-heading h1{font-size:28px;line-height:36px;letter-spacing:-.3px}.wb-page-heading p{display:none}.wb-page-heading small{display:block;color:#7b6c32;font-size:12px;line-height:20px}.wb-settings-button{display:grid;width:44px;height:44px;margin-left:auto}
.wb-today-card{display:block;height:150px;margin:16px 0 0;padding:16px 18px;border-radius:26px}.wb-today-copy>span{display:flex;align-items:center;gap:8px;font-size:11px}.wb-today-copy>span:before{content:"";display:block;width:40px;height:40px;background:url("./assets/wrongbook-figma/ai-insight.svg?v=wrongbook-figma-icons-v1-20260712") center/24px no-repeat #e7faf3;border-radius:14px}.wb-today-copy h2{margin-top:2px;font-size:28px;line-height:36px}.wb-today-copy p{font-size:10px;line-height:16px}.wb-today-copy .wb-button{position:absolute;right:34px;top:146px;width:122px;height:46px;margin:0}.wb-today-copy .wb-button span{font-size:13px}.wb-today-progress{display:none}.wb-mobile-progress{display:grid;margin-top:7px;grid-template-columns:1fr auto;gap:8px;color:#735b18;font-size:9px}.wb-mobile-progress i{grid-column:1/-1;display:block;height:7px;overflow:hidden;border-radius:4px;background:rgba(255,255,255,.68)}.wb-mobile-progress i b{display:block;height:100%;border-radius:inherit;background:#f1b918}
.wb-metrics{margin-top:18px;grid-template-columns:repeat(3,1fr);gap:8px}.wb-stat-card{display:block;height:96px;padding:13px;border-radius:20px}.wb-stat-card>.wb-icon{width:20px;height:20px}.wb-stat-card div{display:block}.wb-stat-card span{position:absolute;margin:-19px 0 0 28px;font-size:10px}.wb-stat-card strong{display:block;margin-top:4px;font-size:28px;line-height:34px}.wb-stat-card small{font-size:9px}.wb-stat-card.is-streak{display:none}
.wb-dashboard-grid{display:block;margin-top:18px}.wb-priority-panel{height:auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}.wb-section-heading{display:grid;height:38px;grid-template-columns:1fr auto;align-items:center}.wb-section-heading h2{display:flex;align-items:center;gap:8px;font-size:22px}.wb-section-heading h2:before{content:"";width:24px;height:24px;background:url("./assets/wrongbook-figma/wrongbook.svg?v=wrongbook-figma-icons-v1-20260712") center/24px no-repeat}.wb-section-heading p,.wb-section-heading>.wb-search-field{display:none}.wb-view-all{display:block}.wb-view-all:before{content:"→";display:block;font-size:22px;line-height:12px}.wb-filter-chips{display:none}.wb-question-list{gap:12px}.wb-question-card{height:92px;padding:10px 12px 10px 14px;grid-template-columns:46px minmax(0,1fr) 42px;gap:10px;border-radius:20px;box-shadow:0 8px 18px rgba(51,64,77,.08)}.wb-question-accent{top:15px;height:62px}.wb-type-badge{width:46px;height:46px;border-radius:14px;font-size:11px}.wb-question-copy>strong{padding-right:8px;font-size:13px;line-height:18px;white-space:normal}.wb-question-copy>p{font-size:10px;line-height:15px}.wb-question-meta{margin-top:4px}.wb-question-meta span:nth-child(2){display:none}.wb-question-score{align-self:start;margin-top:4px}.wb-question-score strong{font-size:18px;line-height:23px}.wb-question-score strong small,.wb-question-score>span{display:none}.wb-status-chip{position:absolute;right:12px;bottom:10px;height:26px;padding:5px 8px;font-size:9px}.wb-status-chip .wb-icon{width:13px;height:13px}.wb-more-button{position:absolute;right:4px;top:2px;width:20px;height:20px}.wb-more-button .wb-icon{width:14px;height:14px}.wb-insight-panel{display:none}.wb-empty-state{min-height:280px;padding:34px 16px}.wb-empty-state h3{font-size:17px}
.wb-list-screen{padding-top:14px}.wb-mobile-header{display:grid;height:44px;grid-template-columns:44px 1fr 44px;align-items:center}.wb-mobile-header h1{text-align:center;font-size:20px}.wb-mobile-header .wb-icon-button{width:44px;height:44px}.wb-list-screen>.wb-search-field{width:100%;height:50px;margin:16px 0 0}.wb-list-screen>.wb-filter-chips{display:flex;width:100%;margin:16px 0 0;gap:8px}.wb-list-screen>.wb-filter-chips button{padding:0 13px}.wb-list-summary{width:100%;margin-top:14px;font-size:12px}.wb-list-screen>.wb-question-list{width:100%;margin:16px 0}.wb-list-screen .wb-question-card{height:92px}
.wb-settings-screen{padding-top:14px}.wb-detail-header{height:44px}.wb-detail-header>.wb-icon-button{width:44px;height:44px}.wb-detail-header>div{flex:1;text-align:center}.wb-detail-header h1{font-size:20px}.wb-detail-header p{display:none}.wb-detail-header>.wb-icon-button:last-child{margin:0}
.wb-settings-screen>.wb-detail-header>div{text-align:left}.wb-settings-screen>.wb-detail-header>div p{display:none}.wb-saved-chip{margin-left:auto;padding:6px 10px;font-size:9px}.wb-saved-desktop{display:none}.wb-saved-mobile{display:inline}.wb-settings-layout{display:none}.wb-mobile-settings-layout{display:block;margin-top:18px}.wb-mobile-settings-layout>section+section{margin-top:20px}.wb-mobile-settings-layout h2{font-size:15px;line-height:20px}.wb-mobile-settings-card{margin-top:8px;border:1px solid rgba(255,255,255,.7);border-radius:24px;background:rgba(255,255,255,.58);box-shadow:0 12px 24px -22px rgba(39,52,62,.18),inset 0 1px 1px rgba(255,255,255,.76);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.wb-mobile-settings-layout>section:first-child .wb-mobile-settings-card{margin-top:12px}.wb-mobile-auto-card{height:190px;overflow:hidden}.wb-mobile-auto-card article{display:grid;height:63px;padding:11px 12px;grid-template-columns:38px 1fr 48px;align-items:center;gap:10px}.wb-mobile-auto-card article+article{border-top:1px solid rgba(228,233,236,.7)}.wb-mobile-auto-card .wb-setting-icon{width:38px;height:38px;border-radius:13px}.wb-mobile-auto-card strong{font-size:12px}.wb-mobile-auto-card p{margin-top:3px;color:#74818b;font-size:9px}.wb-mobile-threshold-card{position:relative;height:124px;padding:15px}.wb-mobile-threshold-card strong{font-size:12px}.wb-mobile-threshold-card p{margin-top:5px;color:#7c8993;font-size:9px}.wb-mobile-threshold-card output{position:absolute;right:16px;top:10px;display:grid;width:70px;height:32px;place-items:center;border-radius:16px;background:#fff2a8;color:#5b4804;font-size:11px}.wb-mobile-threshold-card input{width:calc(100% - 16px);height:8px;margin-top:25px;appearance:none;-webkit-appearance:none;border-radius:4px;background:linear-gradient(90deg,#f1b918 0 var(--wb-range-progress,62%),#e3e9ec var(--wb-range-progress,62%) 100%)}.wb-mobile-threshold-card input::-webkit-slider-thumb{width:24px;height:24px;appearance:none;-webkit-appearance:none;border:3px solid #f1b918;border-radius:50%;background:#fff}.wb-mobile-threshold-card input::-moz-range-thumb{width:18px;height:18px;border:3px solid #f1b918;border-radius:50%;background:#fff}.wb-mobile-preferences-card{height:130px;padding:12px}.wb-mobile-daily-target>strong{font-size:12px}.wb-mobile-daily-target>div{display:grid;margin-top:10px;grid-template-columns:repeat(3,1fr);gap:8px}.wb-mobile-daily-target button{height:40px;border:0;border-radius:16px;color:#6d7a84;background:rgba(244,247,248,.68);font-size:9px}.wb-mobile-daily-target button.is-active{color:#5c4805;background:rgba(255,241,164,.72)}.wb-mobile-preferences-card>article,.wb-mobile-reminder-card>article{display:flex;align-items:center;justify-content:space-between}.wb-mobile-preferences-card>article{height:42px}.wb-mobile-preferences-card>article>span,.wb-mobile-reminder-card>article>span{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700}.wb-mobile-preferences-card .wb-icon,.wb-mobile-reminder-card .wb-icon{width:18px;height:18px}.wb-mobile-reminder-card{height:66px;padding:9px 12px}.wb-mobile-reminder-card>article{height:46px}.wb-settings-actions{position:sticky;bottom:-1px;height:66px;margin:15px -16px -104px;padding:9px 15px;grid-template-columns:112px 1fr;gap:16px;border-radius:28px 28px 0 0}.wb-settings-actions>span{display:none}.wb-settings-actions .wb-button{height:46px}
.wb-overlay{align-items:end;background:rgba(36,48,58,.34)}.wb-filter-overlay>section{width:390px;max-width:100%;height:386px;margin:0;padding:22px 16px;border-radius:30px 30px 0 0}.wb-sheet-handle{display:block;width:44px;height:5px;margin:-10px auto 14px;border-radius:3px;background:#d8e0e4}.wb-overlay fieldset{grid-template-columns:repeat(3,1fr)}.wb-overlay fieldset:nth-of-type(2){grid-template-columns:repeat(2,1fr)}.wb-mobile-sort{display:flex;margin-top:14px;align-items:center;justify-content:space-between;font-size:10px}.wb-mobile-sort button{border:0;color:#1a6e59;background:transparent}.wb-overlay footer{grid-template-columns:112px 1fr}.wb-master-overlay{align-items:center}.wb-master-overlay>section{width:calc(100% - 32px);height:244px;margin:0}.wb-auto-collection-toast{top:90px;width:calc(100% - 32px);grid-template-columns:46px 1fr}.wb-auto-collection-toast>.wb-status-chip{position:static;grid-column:2;justify-self:start}.wb-auto-collection-toast>button{grid-column:2;grid-row:auto;justify-self:end;margin-top:-30px}
html body.view-mistakes[data-wrongbook-screen="settings"] .mobile-primary-dock{display:none}
.wb-today-card{position:relative}.wb-today-copy>.wb-today-kicker{font-size:0}.wb-today-copy>.wb-today-kicker:after{content:attr(data-mobile-label);font-size:11px}.wb-today-copy h2 em{display:none}.wb-today-desktop-copy{display:none}.wb-today-mobile-copy{display:inline}.wb-today-copy .wb-button{right:18px;top:53px}.wb-mobile-progress span{grid-column:2;grid-row:1}.wb-dashboard-grid{margin-top:24px}.wb-stat-card span[data-mobile-label],.wb-stat-card small[data-mobile-note]{font-size:0}.wb-stat-card span[data-mobile-label]:after{content:attr(data-mobile-label);font-size:10px}.wb-stat-card small[data-mobile-note]:after{content:attr(data-mobile-note);font-size:9px}
.wb-mobile-threshold-card input{--wb-range-progress:66%}
}
.profile-box,
.admin-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.profile-summary-card {
  min-height: 124px;
  padding: 18px;
  display: grid;
  align-content: space-between;
  cursor: pointer;
}

.profile-summary-card strong {
  font-size: 30px;
  letter-spacing: 0;
}

.profile-summary-card.dark {
  color: #fff;
  background: #241b18;
}

.profile-summary-card.dark span,
.profile-summary-card.dark small {
  color: rgba(255, 255, 255, 0.72);
}

.teacher-review-history {
  display: grid;
  gap: 6px;
  margin: 12px 0;
}

.teacher-review-history span {
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
  background: #f7f4ee;
  line-height: 1.5;
}

.skill-progress-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.skill-progress-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.skill-progress-card b {
  color: var(--mint-dark);
}

.next-step-list {
  margin-top: 18px;
}

.next-step-list h3 {
  margin: 0;
}

.next-step-list article {
  padding: 14px;
  background: #fff7e5;
}

.profile-box span,
.admin-item span,
.empty-state {
  color: var(--muted);
  line-height: 1.6;
}

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

.admin-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 18px;
  margin-bottom: 18px;
}

.queue-list,
.risk-list {
  display: grid;
  gap: 12px;
}

.queue-item,
.risk-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.queue-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.queue-item span {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--mint-dark);
  background: #fff3cf;
  font-size: 12px;
  font-weight: 900;
}

.queue-item strong,
.queue-item p {
  grid-column: 2;
}

.queue-item p {
  margin: -4px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.queue-item button {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.risk-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}

.risk-item span,
.risk-item p {
  color: var(--muted);
}

.risk-item strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

.risk-item p {
  margin: 0;
  line-height: 1.6;
}

.crm-panel {
  grid-column: span 2;
}

.admin-editor-drawer {
  position: fixed;
  inset: 0;
  z-index: 240;
  padding: 24px;
  background: rgba(24, 33, 37, 0.38);
  display: none;
  justify-content: flex-end;
}

.admin-editor-drawer.open {
  display: flex;
}

.admin-editor {
  position: relative;
  width: min(980px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  margin: 0;
}

.admin-editor .close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
}

.admin-editor-note {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

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

.question-upload-flow {
  display: grid;
  grid-template-columns: minmax(260px, 0.38fr) minmax(0, 0.62fr);
  gap: 16px;
  margin-top: 18px;
  align-items: start;
}

.upload-step-panel {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.upload-step-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.upload-step-head span {
  color: var(--accent-text);
  font-weight: 950;
}

.upload-step-head strong {
  color: var(--ink);
}

.upload-type-picker {
  display: grid;
  gap: 14px;
}

.upload-type-group {
  display: grid;
  gap: 8px;
}

.upload-type-group > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
}

.upload-type-group > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.upload-type-card {
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fffaf0;
  text-align: left;
  display: grid;
  align-content: space-between;
}

.upload-type-card small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.upload-type-card.active {
  color: #fff;
  border-color: var(--ink);
  background: var(--ink);
}

.upload-type-card.active small {
  color: rgba(255, 255, 255, 0.72);
}

.hidden-field {
  display: none !important;
}

.question-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.question-form input,
.question-form select,
.question-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  resize: vertical;
}

.form-wide {
  grid-column: 1 / -1;
}

.question-template-helper {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
}

.question-template-helper strong {
  color: var(--ink);
}

.question-template-helper p {
  margin: 8px 0;
  color: var(--muted);
  line-height: 1.6;
}

.question-template-helper span {
  display: inline-flex;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--mint-dark);
  background: #fff3cf;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff7e5;
}

.admin-question-group {
  display: grid;
  gap: 10px;
}

.admin-question-group + .admin-question-group {
  margin-top: 14px;
}

.admin-question-group-head {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.admin-question-group-head span {
  color: var(--mint-dark);
  font-weight: 950;
}

.admin-question-group-head strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
}

.admin-question-group-list {
  display: grid;
  gap: 8px;
}

.admin-question-type-group {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.admin-question-type-head {
  display: grid;
  grid-template-columns: 20px minmax(54px, auto) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.admin-question-type-head::-webkit-details-marker {
  display: none;
}

.admin-type-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid #8a8f98;
  border-bottom: 2px solid #8a8f98;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}

.admin-question-type-group[open] .admin-type-chevron {
  transform: rotate(45deg);
}

.admin-type-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f5f6f8;
  color: #111827;
  font-size: 12px;
  font-weight: 900;
}

.admin-type-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-type-title strong {
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-type-title small {
  color: #6b7280;
  font-size: 12px;
  font-weight: 750;
}

.admin-type-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-type-actions .ghost-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-question-type-group > .admin-question-group-list {
  padding: 0 14px 14px;
}

.virtual-question-list {
  position: relative;
  contain: layout paint;
}

.virtual-question-list-spacer {
  position: relative;
  min-height: 100%;
}

.virtual-question-list-window {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  gap: 8px;
  will-change: transform;
}

.virtual-question-list-window .compact-question-row {
  min-height: 82px;
  height: 82px;
  margin: 0 !important;
}

.admin-question-item {
  padding: 0;
  overflow: hidden;
}

.admin-question-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.admin-question-summary::-webkit-details-marker {
  display: none;
}

.admin-question-summary-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-question-summary-main strong,
.admin-question-summary-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-question-summary-main small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-question-summary-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.admin-question-detail {
  display: grid;
  gap: 6px;
  padding: 0 12px 12px;
  border-top: 1px solid rgba(40, 54, 47, 0.08);
}

.admin-item-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.admin-select-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 850;
}

.admin-select-row input,
.di-clear-select input {
  width: 16px;
  height: 16px;
  accent-color: var(--mint-dark);
}

.di-clear-select {
  cursor: pointer;
}

.real-user-item {
  gap: 8px;
}

.real-user-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.real-user-head b {
  padding: 4px 9px;
  border-radius: 999px;
  color: #7b5600;
  background: #fff3cf;
  font-size: 12px;
}

.real-user-item.online .real-user-head b {
  color: #0f6b4f;
  background: #dff8ee;
}

.ai-config-board {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.ai-config-summary,
.ai-route-grid,
.ai-flow-steps {
  display: grid;
  gap: 12px;
}

.ai-config-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-config-summary article,
.ai-route-card,
.ai-flow-panel,
.ai-flow-steps article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ai-config-summary article {
  min-height: 112px;
  padding: 14px;
  display: grid;
  align-content: space-between;
}

.ai-config-summary span,
.ai-config-summary small,
.ai-route-card label,
.ai-route-meta,
.ai-flow-steps small {
  color: var(--muted);
}

.ai-config-summary strong {
  color: var(--ink);
  font-size: 20px;
}

.ai-config-summary small,
.ai-route-meta p,
.ai-flow-steps small {
  line-height: 1.55;
}

.ai-route-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-route-card {
  padding: 16px;
  display: grid;
  gap: 12px;
}

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

.ai-route-head span {
  color: var(--accent-text);
  font-weight: 950;
}

.ai-route-head strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 18px;
}

.ai-route-head b {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 12px;
}

.ai-route-head b.ready {
  color: #6d4600;
  background: #fff2c2;
}

.ai-route-head b.pending {
  color: #7b3f18;
  background: #ffe1cc;
}

.ai-route-card label {
  display: grid;
  gap: 7px;
  font-weight: 850;
}

.ai-route-card select,
.ai-route-card input {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fffaf0;
}

.ai-route-meta {
  padding: 12px;
  border-radius: 8px;
  background: #fff7e5;
}

.ai-route-meta span {
  display: inline-flex;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--accent-text);
  background: #fff2c2;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
}

.ai-route-meta p {
  margin: 8px 0 0;
}

.ai-flow-panel {
  padding: 16px;
}

.ai-flow-panel h3 {
  margin: 4px 0 14px;
}

.speech-standard-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.speech-standard-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.speech-standard-head h3 {
  margin: 3px 0 0;
}

.speech-standard-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.speech-standard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.speech-standard-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.speech-standard-grid input,
.speech-standard-grid select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fffaf0;
  font-weight: 900;
}

.speech-standard-note {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--muted);
  background: #f7f4ee;
  line-height: 1.55;
}

.speech-standard-note strong {
  color: var(--ink);
}

.ai-flow-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-flow-steps article {
  padding: 13px;
}

.ai-flow-steps span {
  display: inline-grid;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--mint);
  place-items: center;
  font-weight: 950;
}

.ai-flow-steps strong {
  display: block;
  margin: 10px 0 5px;
}

.teacher-review {
  padding: 10px;
  border-radius: 8px;
  color: var(--ink);
  background: #fff3d9;
}

.teacher-review.pending {
  color: var(--muted);
  background: #f2ead8;
}

.review-form {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.quick-review-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.review-form input,
.review-form textarea {
  width: 100%;
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  resize: vertical;
}

.empty-state {
  padding: 14px;
  border-radius: 8px;
  background: #f7f4ee;
}

.consult-panel {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(13, 20, 18, 0.5);
}

.consult-panel.open {
  display: grid;
}

.consult-dialog {
  position: relative;
  width: min(460px, 100%);
  padding: 28px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.consult-dialog label {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  color: var(--muted);
  font-weight: 800;
}

.consult-dialog input,
.consult-dialog select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
}

.close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: #f0f4f2;
  font-size: 24px;
}

.form-note {
  min-height: 22px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.login-choice-grid {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.login-method-card,
.phone-login-card,
.teacher-login-card {
  padding: 15px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: #fffaf0;
  display: grid;
  gap: 8px;
  text-align: left;
  color: var(--ink);
}

.login-method-card {
  cursor: pointer;
}

.login-method-card span,
.phone-login-card span,
.teacher-login-card span,
.login-method-card small {
  color: var(--muted);
  font-weight: 900;
}

.login-method-card strong {
  font-size: 18px;
}

.login-method-card.wechat {
  border-color: rgba(18, 183, 168, 0.32);
  background: linear-gradient(135deg, #effdf9, #fff);
}

.login-method-card.apple {
  color: #fff;
  border-color: #241b18;
  background: #241b18;
}

.login-method-card.apple span,
.login-method-card.apple small {
  color: rgba(255, 255, 255, 0.72);
}

.phone-login-card input,
.teacher-login-card input {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
}

.teacher-login-card {
  background: #fff;
}

#loginPanel .consult-dialog {
  width: min(620px, calc(100vw - 32px));
  padding: clamp(24px, 2vw, 34px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(247, 198, 74, 0.2), transparent 32%),
    linear-gradient(180deg, #fffefb 0%, #fff8e8 100%);
}

#loginPanel .login-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#loginPanel .login-choice-grid.phone-only-login {
  grid-template-columns: 1fr;
}

#loginPanel .login-method-card,
#loginPanel .phone-login-card {
  min-height: 150px;
  padding: 18px;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(82, 55, 20, 0.07);
}

#loginPanel .login-method-card strong,
#loginPanel .phone-login-card span {
  font-size: 20px;
}

#loginPanel .login-method-card small {
  font-size: 14px;
  line-height: 1.55;
}

#loginPanel .phone-login-card {
  grid-column: 1 / -1;
  background: #fff;
}

#loginPanel .phone-login-card span {
  grid-column: 1 / -1;
  color: #201815;
}

#loginPanel .phone-login-card input {
  min-height: 48px;
  border-radius: 12px;
}

#loginPanel .phone-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

#loginPanel .phone-code-row button,
#loginPanel .phone-login-card > button {
  min-width: 150px;
}

#loginPanel .form-note {
  padding: 12px 14px;
  border-radius: 14px;
  color: #7b5600;
  background: #fff3cf;
  font-weight: 850;
}

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

.membership-plan-card {
  min-height: 118px;
  padding: 16px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: #fffaf0;
  text-align: left;
  display: grid;
  align-content: space-between;
  color: var(--ink);
  cursor: pointer;
}

.membership-plan-card span,
.membership-plan-card small {
  color: var(--muted);
  font-weight: 900;
}

.membership-plan-card strong {
  display: block;
  margin: 8px 0;
  font-size: 30px;
}

.membership-plan-card.featured {
  border-color: #f6c542;
  background: linear-gradient(135deg, #fff1be, #fffaf0);
  box-shadow: 0 16px 34px rgba(167, 111, 0, 0.12);
}

.membership-plan-card.course {
  color: #fff;
  border-color: #241b18;
  background: #241b18;
}

.membership-plan-card.course span,
.membership-plan-card.course small {
  color: rgba(255, 255, 255, 0.72);
}

.locked {
  opacity: 0.68;
}

.lock-note {
  color: var(--coral);
  font-size: 13px;
  font-weight: 900;
}

.mobile-tabbar,
.app-install-banner {
  display: none;
}

.mobile-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -10px 28px rgba(24, 33, 37, 0.08);
}

.mobile-tab {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-weight: 900;
}

.mobile-tab.active {
  color: #fff;
  background: #241b18;
}

.app-install-banner {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 72px;
  z-index: 9;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.app-install-banner div {
  display: grid;
  gap: 3px;
}

.app-install-banner span {
  color: var(--muted);
  font-size: 13px;
}

.app-install-banner.is-hidden {
  display: none;
}

.toast {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 260;
  max-width: min(340px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(221, 230, 228, 0.9);
  border-radius: 8px;
  color: #fff;
  background: #241b18;
  box-shadow: var(--shadow);
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.dict-word {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
}

.dict-word:hover {
  color: var(--accent-text);
  border-radius: 3px;
  background: #fff2c2;
}
.audio-follow-transcript{display:grid;gap:14px;max-height:min(42vh,420px);padding:4px 6px 6px 2px;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}
.audio-follow-paragraph{margin:0;line-height:1.72;text-wrap:pretty;--audio-follow-ink:#118f80;--audio-follow-active:#087f73;--audio-follow-muted:rgba(65,78,85,.5);--audio-follow-glow:rgba(17,143,128,.2);--audio-follow-wash:transparent}.audio-follow-paragraph[data-audio-follow-speaker]{padding:10px 12px;border-inline-start:3px solid var(--audio-follow-ink);border-radius:8px;background:var(--audio-follow-wash)}.audio-follow-paragraph[data-audio-follow-speaker="narrator"]{--audio-follow-ink:#53616a;--audio-follow-active:#44525b;--audio-follow-muted:#6b747a;--audio-follow-glow:rgba(83,97,106,.2);--audio-follow-wash:rgba(83,97,106,.055)}.audio-follow-paragraph[data-audio-follow-speaker="1"]{--audio-follow-ink:#6b46a5;--audio-follow-active:#5e3b95;--audio-follow-muted:#766988;--audio-follow-glow:rgba(107,70,165,.2);--audio-follow-wash:rgba(107,70,165,.06)}.audio-follow-paragraph[data-audio-follow-speaker="2"]{--audio-follow-ink:#1769aa;--audio-follow-active:#0d5c98;--audio-follow-muted:#5d7180;--audio-follow-glow:rgba(23,105,170,.2);--audio-follow-wash:rgba(23,105,170,.06)}.audio-follow-paragraph[data-audio-follow-speaker="3"]{--audio-follow-ink:#8a5700;--audio-follow-active:#774a00;--audio-follow-muted:#766b59;--audio-follow-glow:rgba(138,87,0,.2);--audio-follow-wash:rgba(138,87,0,.065)}.audio-follow-paragraph[data-audio-follow-speaker="4"]{--audio-follow-ink:#963e68;--audio-follow-active:#843258;--audio-follow-muted:#7a6670;--audio-follow-glow:rgba(150,62,104,.2);--audio-follow-wash:rgba(150,62,104,.06)}.audio-follow-paragraph[data-audio-follow-speaker="5"]{--audio-follow-ink:#0b7166;--audio-follow-active:#056359;--audio-follow-muted:#5f7471;--audio-follow-glow:rgba(11,113,102,.2);--audio-follow-wash:rgba(11,113,102,.06)}.audio-follow-speaker-label{color:var(--audio-follow-ink);font-weight:750;letter-spacing:.01em}.audio-follow-paragraph[data-audio-follow-speaker] [data-audio-follow-word]{color:var(--audio-follow-ink)}
[data-audio-follow-root].has-audio-progress [data-audio-follow-word]:not(.selected){display:inline-block;color:var(--audio-follow-muted,rgba(65,78,85,.5));transition:color .18s ease,text-shadow .18s ease,transform .18s ease}
[data-audio-follow-root].has-audio-progress [data-audio-follow-word].is-audio-past:not(.selected){color:var(--audio-follow-ink,#118f80)}
[data-audio-follow-root].has-audio-progress [data-audio-follow-word].is-audio-active:not(.selected){position:relative;color:var(--audio-follow-muted,rgba(65,78,85,.5));text-shadow:0 5px 16px var(--audio-follow-glow,rgba(17,143,128,.2))}[data-audio-follow-root].has-audio-progress [data-audio-follow-word].is-audio-active:not(.selected)::after{content:attr(data-word);position:absolute;top:0;left:0;width:var(--audio-follow-word-progress,0%);height:100%;overflow:hidden;color:var(--audio-follow-active,#087f73);white-space:nowrap;pointer-events:none}
[data-audio-follow-root].is-following [data-audio-follow-word].is-audio-active{transform:translateY(-1px)}[data-audio-follow-root].is-following [data-audio-follow-word].is-audio-active.selected{outline:2px solid var(--audio-follow-ink,rgba(17,143,128,.42));outline-offset:2px}

.dictionary-popover {
  position: fixed;
  z-index: 1605;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 14px;
  border: 1px solid rgba(234, 223, 202, 0.96);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(24, 33, 37, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.dictionary-popover.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

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

.dict-card-head > div:first-child {
  display: grid;
  gap: 4px;
}

.dict-card-head strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.1;
}

.dict-card-head span {
  color: var(--accent-text);
  font-weight: 900;
}

.dict-sound-btn {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: var(--mint);
  font-weight: 950;
}

.dict-pron-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dict-sound-btn.user {
  color: #fff;
  background: #241b18;
}

.dict-sound-btn:disabled {
  color: #8f8a82;
  background: #efe9df;
  cursor: not-allowed;
}

.dict-meaning {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.dict-meaning span {
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--accent-text);
  background: #fff2c2;
  font-size: 12px;
  font-weight: 950;
}

.dict-meaning b {
  color: var(--ink);
}

.popover-score-card {
  margin-top: 12px;
}

.popover-word-score {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #b8e7cc;
  border-radius: 8px;
  background: #e9fbf1;
}

.popover-word-score.okay {
  border-color: #f4d57a;
  background: #fff7d6;
}

.popover-word-score.weak,
.popover-word-score.missing {
  border-color: #f0b7aa;
  background: #fff0ec;
}

.popover-score-head,
.popover-score-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.popover-score-head span,
.popover-score-meta b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.popover-score-head strong {
  color: var(--ink);
  font-size: 38px;
  line-height: 0.9;
}

.popover-score-meta em {
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.word-diagnostic-panel,
.priority-practice-panel {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: #fffdf8;
}

.word-diagnostic-panel > span,
.priority-practice-panel > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.word-diagnostic-panel > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.word-diagnostic-panel b {
  display: grid;
  gap: 2px;
  min-height: 54px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.word-diagnostic-panel b.good {
  color: #185a3c;
  border-color: #b8e7cc;
  background: #effbf4;
}

.word-diagnostic-panel b.okay {
  color: #765100;
  border-color: #f4d57a;
  background: #fff7d6;
}

.word-diagnostic-panel b.weak {
  color: #8c2f24;
  border-color: #efb3a8;
  background: #fff0ec;
}

.word-diagnostic-panel em,
.word-diagnostic-panel small {
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  opacity: 0.78;
}

.word-diagnostic-panel strong {
  color: currentColor;
  font-size: 14px;
  line-height: 1.1;
}

.priority-practice-panel {
  border-color: #d7eee3;
  background: #f2fbf6;
}

.dictionary-popover .priority-practice-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.dictionary-popover p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.phoneme-panel {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.phoneme-panel > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.phoneme-panel p {
  margin: 0;
}

.phoneme-panel.compact {
  gap: 7px;
}

.phoneme-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.phoneme-row b {
  display: inline-grid;
  min-width: 42px;
  min-height: 40px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  place-items: center;
  line-height: 1.05;
}

.phoneme-row b span {
  font-weight: 950;
}

.phoneme-row small {
  font-size: 10px;
  opacity: 0.78;
}

.phoneme-row b.good {
  color: #185a3c;
  border-color: #b8e7cc;
  background: #dff7e9;
}

.phoneme-row b.okay {
  color: #765100;
  border-color: #f4d57a;
  background: #fff1bf;
}

.phoneme-row b.weak {
  color: #8c2f24;
  border-color: #f0b7aa;
  background: #ffe0d9;
}

.phoneme-row b.pending {
  color: var(--muted);
  border-color: var(--line);
  background: #f7f4ee;
}

.phoneme-row b.missing {
  color: #8c2f24;
  border-color: #d98a7a;
  background: #ffd7ce;
}

.phoneme-feedback-summary {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: #fffaf0;
}

.phoneme-feedback-summary strong {
  color: var(--ink);
  font-size: 12px;
}

.phoneme-feedback-summary span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.word-fine-score {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #d7eee3;
  border-radius: 8px;
  background: #f2fbf6;
}

.word-fine-score.loading,
.word-fine-score.muted {
  color: var(--muted);
  border-color: var(--line);
  background: #faf7f0;
  font-size: 12px;
  font-weight: 850;
}

.word-fine-score strong {
  color: #185a3c;
  font-size: 12px;
}

.word-fine-score > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.word-speech-insight {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #eadfca;
  border-radius: 8px;
  background: #fffaf0;
}

.word-speech-insight > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.dictionary-popover {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(246, 255, 251, 0.64)),
    rgba(255, 255, 255, 0.58);
  box-shadow: 0 24px 64px rgba(24, 33, 37, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

.dict-card-head {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 231, 224, 0.72);
}

.dict-sound-btn {
  border: 1px solid rgba(255, 210, 111, 0.7);
  color: #8a5d00;
  background: rgba(255, 248, 226, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.dict-sound-btn.user {
  border-color: rgba(25, 117, 82, 0.26);
  color: #135c40;
  background: rgba(229, 250, 238, 0.76);
}

.dict-sound-btn:disabled {
  color: rgba(98, 103, 111, 0.7);
  border-color: rgba(226, 231, 224, 0.72);
  background: rgba(255, 255, 255, 0.52);
}

.dict-meaning {
  align-items: flex-start;
  padding: 10px;
  border: 1px solid rgba(234, 223, 202, 0.68);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.dict-meaning span {
  flex: 0 0 auto;
  background: rgba(255, 242, 194, 0.7);
}

.dict-meaning b {
  line-height: 1.45;
}

.popover-word-score,
.word-diagnostic-panel,
.priority-practice-panel,
.phoneme-feedback-summary,
.word-fine-score,
.word-speech-insight {
  border-color: rgba(255, 255, 255, 0.64);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.popover-word-score {
  border-color: rgba(139, 225, 177, 0.74);
  background: linear-gradient(145deg, rgba(226, 252, 237, 0.78), rgba(255, 255, 255, 0.38));
}

.popover-word-score.okay {
  border-color: rgba(244, 213, 122, 0.76);
  background: linear-gradient(145deg, rgba(255, 247, 214, 0.8), rgba(255, 255, 255, 0.38));
}

.popover-word-score.weak,
.popover-word-score.missing {
  border-color: rgba(240, 183, 170, 0.78);
  background: linear-gradient(145deg, rgba(255, 232, 226, 0.82), rgba(255, 255, 255, 0.38));
}

.popover-score-meta em,
.word-diagnostic-panel b,
.phoneme-row b {
  background: rgba(255, 255, 255, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.word-diagnostic-panel b.good,
.phoneme-row b.good {
  background: rgba(223, 247, 233, 0.68);
}

.word-diagnostic-panel b.okay,
.phoneme-row b.okay {
  background: rgba(255, 241, 191, 0.72);
}

.word-diagnostic-panel b.weak,
.phoneme-row b.weak,
.phoneme-row b.missing {
  background: rgba(255, 224, 217, 0.72);
}

.phoneme-row b.pending {
  background: rgba(247, 244, 238, 0.66);
}

.word-speech-insight div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.word-speech-insight b {
  display: grid;
  gap: 2px;
  min-width: 58px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
}

.word-speech-insight b.good {
  color: #185a3c;
  border-color: #b8e7cc;
  background: #effbf4;
}

.word-speech-insight b.okay {
  color: #765100;
  border-color: #f4d57a;
  background: #fff7d6;
}

.word-speech-insight b.weak {
  color: #8c2f24;
  border-color: #efb3a8;
  background: #fff0ec;
}

.word-speech-insight b.missing,
.word-speech-insight.missing b {
  color: #7a5148;
  border-color: #d9c4bc;
  background: #f7eee9;
}

.word-speech-insight em {
  font-style: normal;
  font-size: 10px;
  opacity: 0.76;
}

.word-speech-insight strong {
  font-size: 12px;
}

.word-speech-insight p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.phoneme-grid {
  display: grid;
  gap: 8px;
}

.phoneme-card {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
}

.phoneme-card b {
  color: var(--ink);
  font-size: 16px;
}

.phoneme-card small {
  width: max-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(31, 31, 31, 0.06);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.phoneme-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.phoneme-card strong {
  color: var(--ink);
}

.phoneme-card.good {
  border-color: #b8e7cc;
  background: #f0fbf4;
}

.phoneme-card.okay {
  border-color: #efd27d;
  background: #fff8dd;
}

.phoneme-card.weak {
  border-color: #efb3a8;
  background: #fff0ec;
}

.phoneme-note {
  font-size: 12px;
}

@media (max-width: 980px) {
  .split-layout {
    grid-template-columns: 1fr;
  }

  .home-v2-welcome,
  .home-v2-grid {
    grid-template-columns: 1fr;
  }

  .home-v2-metrics {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .home-v2-stages {
    grid-template-columns: 1fr;
  }

  .practice-detail-mode .practice-dashboard-layout,
  .practice-detail-mode .practice-dashboard-layout:has(.feedback-panel.speech-result-ready),
  .practice-detail-mode .practice-dashboard-layout:has(.feedback-panel.reading-report-mode),
  .stage-practice .practice-workbench {
    grid-template-columns: 1fr;
  }

  .practice-resizer {
    display: none !important;
  }

  .feedback-panel.speech-report-mode {
    position: static;
    max-height: none;
  }

  .speech-report-top,
  .speech-report-grid,
  .speech-provider-detail-grid,
  .speech-followup-grid {
    grid-template-columns: 1fr;
  }

  .speech-ability-metrics {
    grid-template-columns: 1fr;
  }

  .feedback-panel.speech-report-mode.speech-result-ready .speech-report-grid,
  .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card {
    grid-template-columns: 1fr;
  }

  .coach-hero-card,
  .coach-pte-grid,
  .coach-check-grid,
  .coach-fragment-grid,
  .coach-analysis-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .coach-score-orb {
    width: 118px;
    height: 118px;
    justify-self: start;
  }

  .coach-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .coach-radar {
    margin: 0 auto;
  }

  .speech-ability-layout {
    grid-template-columns: 1fr;
  }

  .practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ability-layout {
    grid-template-columns: 1fr;
  }

  .practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-chart {
    margin: 0 auto;
  }

  .speech-radar-chart {
    margin: 0 auto;
  }

  .speech-reference {
    font-size: 17px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 16px;
  }

  .nav-list {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .nav-group {
    display: none;
  }

  .nav-link {
    flex: 0 0 auto;
  }

  .coach-box {
    display: none;
  }

  .topbar,
  .content-grid,
  .study-overview,
  .home-head-grid,
  .home-banner,
  .practice-top-grid,
  .practice-dashboard-layout,
  .review-workspace,
  .review-path-panel,
  .split-layout,
  .practice-hero,
  .practice-workbench,
  .exam-center-grid,
  .profile-insight-grid,
  .course-grid,
  .admin-workbench,
  .admin-grid,
  .ai-config-summary,
  .ai-route-grid,
  .speech-standard-grid,
  .ai-flow-steps,
  .question-upload-flow,
  .teacher-upload-zone,
  .bulk-preview-table article,
  .question-form {
    grid-template-columns: 1fr;
    display: grid;
  }

  .banner-actions {
    justify-content: flex-start;
  }

  .upload-type-group > div {
    grid-template-columns: 1fr;
  }

  .admin-editor-drawer {
    padding: 10px;
  }

  .admin-editor {
    max-height: calc(100vh - 20px);
  }

  .crm-panel {
    grid-column: auto;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-overview-card .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-main-panel .review-item {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.42fr);
  }

  .review-rec,
  .review-time {
    display: none;
  }

  .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .curve-focus {
    grid-column: span 2;
  }

  .app-module-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan-board,
  .profile-summary,
  .review-summary,
  .practice-flow-steps,
  .practice-flow-summary,
  .exam-center-grid,
  .service-overview-grid,
  .course-product-grid,
  .resource-category-grid,
  .type-card-grid,
  .skill-progress-grid,
  .course-recommend,
  .course-stage-list,
  .service-strip,
  .resource-hero-panel,
  .resource-step-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .question-list {
    grid-template-columns: 1fr;
  }

  .practice-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .practice-dashboard-layout .type-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .practice-hero-points {
    grid-template-columns: 1fr;
  }

  .recorder {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .home-forum-compose,
  .home-forum-post {
    grid-template-columns: 1fr;
  }

  .home-forum-compose textarea {
    grid-column: auto;
  }

  .home-forum-actions {
    justify-content: flex-start;
  }

  .home-forum-reply-box {
    grid-template-columns: 1fr;
  }

  .home-v2-metrics,
  .home-v2-quick > div:last-child,
  .home-v2-task-list button {
    grid-template-columns: 1fr;
  }

  .home-v2-target {
    grid-template-columns: 1fr;
  }

  .home-v2-welcome-copy {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-v2-welcome-copy img {
    width: 96px;
    height: 96px;
  }

  body {
    padding-bottom: 78px;
  }

  body:not(:is(.view-community, .view-mistakes, .view-seat-finder)) .main {
    padding: 12px;
  }

  .mobile-tabbar {
    display: grid;
  }

  .app-install-banner {
    display: flex;
  }

  .toast {
    top: auto;
    right: 12px;
    bottom: 138px;
    left: 12px;
    max-width: none;
    text-align: center;
  }

  .sidebar {
    padding: 12px;
  }

  .brand {
    font-size: 18px;
  }

  .brand-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .nav-list {
    gap: 6px;
  }

  .nav-link {
    min-height: 38px;
    padding: 0 10px;
    font-size: 14px;
  }

  .topbar {
    gap: 12px;
    margin-bottom: 14px;
  }

  .home-head-grid,
  .home-overview-card .metrics-grid,
  .home-banner,
  .review-hero,
  .review-filter-bar {
    grid-template-columns: 1fr;
  }

  .review-hero {
    min-height: 0;
  }

  .review-hero-art {
    display: none;
  }

  .review-summary {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    margin: 0 -12px 14px;
    padding: 0 12px 4px;
    scroll-snap-type: x mandatory;
  }

  .review-summary-card {
    flex: 0 0 74%;
    scroll-snap-align: start;
  }

  .review-main-panel,
  .review-side-card,
  .review-ai-card,
  .review-path-panel {
    border-radius: 8px;
  }

  .review-main-panel {
    padding: 12px;
  }

  .review-main-panel .review-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .review-main-panel .review-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-filter-bar {
    gap: 8px;
  }

  .review-path-panel {
    padding: 14px;
  }

  .home-banner {
    min-height: 0;
    padding: 22px;
  }

  .banner-art {
    min-height: 180px;
  }

  .banner-art img {
    width: min(360px, 100%);
  }

  .topbar h1 {
    font-size: 28px;
    line-height: 1.05;
  }

  .top-actions {
    gap: 8px;
  }

  .top-actions .ghost-btn:not(#upgradeButton):not([data-open-consult]),
  .top-actions .role-badge:not(#membershipBadge) {
    display: none;
  }

  .primary-btn,
  .secondary-btn,
  .ghost-btn {
    min-height: 38px;
    padding: 0 12px;
  }

  .panel,
  .metric-card,
  .course-card,
  .resource-item,
  .review-item,
  .question-card,
  .answer-workspace,
  .recorder {
    border-radius: 8px;
  }

  .panel {
    padding: 16px;
  }

  .metrics-grid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    margin: 0 -12px 14px;
    padding: 0 12px 4px;
    scroll-snap-type: x mandatory;
  }

  .app-module-strip {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    margin: 0 -12px 14px;
    padding: 0 12px 4px;
    scroll-snap-type: x mandatory;
  }

  .home-focus-grid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    margin: 0 -12px 14px;
    padding: 0 12px 4px;
    scroll-snap-type: x mandatory;
  }

  .trust-strip {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    margin: 0 -12px 14px;
    padding: 0 12px 4px;
    scroll-snap-type: x mandatory;
  }

  .trust-strip article {
    flex: 0 0 78%;
    min-height: 104px;
    padding: 14px;
    border-radius: 8px;
    scroll-snap-align: start;
  }

  .home-focus-card {
    flex: 0 0 78%;
    min-height: 158px;
    padding: 15px;
    scroll-snap-align: start;
  }

  .home-focus-card strong {
    font-size: 24px;
  }

  .curve-focus {
    grid-column: auto;
  }

  .module-tile {
    flex: 0 0 42%;
    min-height: 68px;
    scroll-snap-align: start;
  }

  .metric-card {
    flex: 0 0 74%;
    min-height: 112px;
    padding: 14px;
    scroll-snap-align: start;
  }

  .metric-card strong {
    font-size: 30px;
  }

  .study-overview,
  .content-grid,
  .split-layout,
  .practice-hero,
  .practice-workbench,
  .practice-top-grid,
  .practice-dashboard-layout {
    gap: 12px;
  }

  .plan-board,
  .profile-summary,
  .review-summary,
  .practice-flow-steps,
  .practice-console,
  .practice-flow-summary,
  .exam-center-grid,
  .profile-insight-grid,
  .service-overview-grid,
  .course-product-grid,
  .resource-category-grid,
  .mock-paper-workbench,
  .mock-paper-list,
  .mock-paper-toolbar,
  .mock-command-center,
  .question-type-shell,
  .type-card-grid,
  .skill-progress-grid,
  .course-recommend,
  .course-stage-list,
  .service-strip,
  .resource-hero-panel,
  .resource-step-list,
  .practice-dashboard-layout .type-card-grid {
    grid-template-columns: 1fr;
  }

  .practice-top-grid .practice-hero {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .practice-top-grid .practice-hero > img {
    width: min(210px, 72%);
  }

  .practice-hero-points {
    gap: 10px;
    margin-top: 18px;
  }

  .practice-plan-card {
    min-height: 180px;
    padding: 20px;
  }

  .practice-dashboard-layout .type-card {
    min-height: 104px;
  }

  .diagnosis-steps,
  .student-fit-panel,
  .mock-paper-tabs,
  .mock-paper-filters,
  .mock-skill-grid {
    grid-template-columns: 1fr;
  }

  .mock-paper-filters {
    flex-wrap: wrap;
  }

  .mock-paper-detail {
    position: static;
  }

  .plan-step {
    min-height: auto;
    gap: 12px;
    padding: 14px;
  }

  .weakness-item,
  .quick-action,
  .task-item,
  .review-item,
  .resource-item {
    padding: 13px;
  }

  .quick-action-list,
  .task-list,
  .review-list,
  .feedback-list,
  .action-plan-list {
    gap: 9px;
  }

  .question-list {
    display: grid;
    overflow-x: hidden;
    overflow-y: visible;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    max-height: none;
  }

  .question-browser {
    position: static;
    max-height: none;
  }

  .skill-map {
    position: static;
  }

  .practice-hero {
    padding: 16px;
  }

  .practice-hero h2 {
    font-size: 22px;
  }

  .practice-hero-actions {
    min-width: 0;
    padding: 13px;
  }

  .question-row {
    min-height: 96px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .question-row-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .practice-navigator,
  .audio-prompt {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mini-question-nav {
    justify-content: flex-start;
  }

  .order-board,
  .fib-word-bank {
    grid-template-columns: 1fr;
  }

  .practice-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .practice-stat {
    padding: 10px;
  }

  .practice-stat strong {
    font-size: 21px;
  }

  .skill-filter {
    margin-bottom: 10px;
  }

  .question-card {
    padding: 16px;
  }

  .question-card p {
    font-size: 19px;
    line-height: 1.55;
  }

  .question-tools {
    gap: 8px;
  }

  .ra-demo-player-head,
  .ra-demo-player-controls {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  #raDemoSpeedSelect,
  .ra-demo-player-controls .ghost-btn,
  #raDemoProgress {
    grid-column: 1 / -1;
    width: 100%;
  }

  .answer-workspace {
    margin-top: 12px;
    padding: 14px;
  }

  .text-answer {
    min-height: 120px;
  }

  .recorder {
    gap: 12px;
    margin-top: 12px;
    padding: 14px;
  }

  .timer span {
    font-size: 28px;
  }

  .wave {
    height: 36px;
  }

  .score-ring {
    width: 128px;
    height: 128px;
    margin: 14px auto;
  }

  .score-ring strong {
    font-size: 32px;
  }

  .task-item,
  .queue-item,
  .risk-item,
  .review-item,
  .mock-task,
  .mock-hero,
  .resource-item,
  .history-table [role="row"] {
    grid-template-columns: 1fr;
  }

  .queue-item strong,
  .queue-item p,
  .queue-item button {
    grid-column: auto;
    grid-row: auto;
  }

  .review-actions {
    justify-content: flex-start;
  }

  .resource-lead-card,
  .course-current-plan {
    min-width: 0;
  }

  .resource-step-list article,
  .course-stage,
  .review-summary-card,
  .profile-summary-card {
    min-height: auto;
  }

  .consult-panel {
    align-items: end;
    padding: 12px;
  }

  .consult-dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 22px;
  }

  .panel-heading,
  .question-meta {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
  }
}

@media (max-width: 760px) {
  html,
  body,
  .app-shell,
  .main,
  body:not(.view-community) .view,
  .practice-panel,
  .practice-dashboard-layout,
  .practice-workbench,
  .answer-stage,
  .question-card,
  .recorder,
  .feedback-panel {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html,
  body {
    overflow-x: hidden !important;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .app-shell {
    display: block !important;
  }

  .sidebar {
    display: none !important;
  }

  body:not(:is(.view-community, .view-mistakes, .view-seat-finder)) .main {
    padding: 12px !important;
  }

  .mobile-tabbar {
    display: grid !important;
  }

  .app-install-banner {
    display: none !important;
  }

  .topbar,
  .practice-dashboard-layout,
  .practice-detail-mode .practice-dashboard-layout,
  .practice-detail-mode .practice-dashboard-layout:has(.feedback-panel.speech-result-ready),
  .practice-detail-mode .practice-dashboard-layout:has(.feedback-panel.reading-report-mode),
  .stage-practice .practice-workbench,
  .stage-list .practice-workbench,
  .question-type-shell,
  .split-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .topbar h1 {
    font-size: 30px !important;
    line-height: 1.08 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

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

  .top-actions {
    display: flex !important;
    width: 100% !important;
    overflow-x: auto !important;
    gap: 8px !important;
  }

  .top-actions > * {
    flex: 0 0 auto !important;
  }

  .practice-left-rail,
  .practice-resizer,
  .skill-map,
  .practice-detail-hero > img,
  .estimated-score-card,
  .practice-detail-points {
    display: none !important;
  }

  .panel,
  .question-card,
  .answer-workspace,
  .recorder,
  .question-browser,
  .feedback-panel,
  .practice-detail-hero,
  .practice-side-card,
  .type-card,
  .metric-card,
  .review-item,
  .course-card,
  .resource-item {
    border-radius: 8px !important;
  }

  .panel {
    padding: 14px !important;
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading {
    padding: 16px !important;
    border-radius: 8px !important;
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading h2 {
    font-size: 28px !important;
    line-height: 1.12 !important;
  }

  #practice:not(.practice-detail-mode) .type-card-grid,
  #practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card-grid,
  .practice-dashboard-layout .type-card-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #practice:not(.practice-detail-mode) .type-card,
  #practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card,
  .practice-dashboard-layout .type-card {
    min-height: 84px !important;
    padding: 16px 14px 14px 72px !important;
  }

  #practice:not(.practice-detail-mode) .type-card::before,
  #practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card::before,
  .practice-dashboard-layout .type-card::before {
    top: 16px !important;
    left: 14px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }

  #practice:not(.practice-detail-mode) .type-card span,
  #practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card span,
  .practice-dashboard-layout .type-card span {
    font-size: 22px !important;
  }

  #practice:not(.practice-detail-mode) .type-card strong,
  #practice:not(.practice-detail-mode) .practice-dashboard-layout .type-card strong,
  .practice-dashboard-layout .type-card strong {
    white-space: normal !important;
  }

  .practice-detail-hero {
    min-height: 0 !important;
    margin-bottom: 12px !important;
    padding: 16px !important;
  }

  .practice-detail-copy,
  .practice-detail-copy h2,
  .practice-detail-copy p {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .practice-detail-copy h2 {
    font-size: 25px !important;
    line-height: 1.18 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .practice-detail-copy p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .stage-practice .question-browser {
    display: none !important;
  }

  .stage-practice .answer-stage {
    display: grid !important;
    gap: 12px !important;
  }

  .stage-list .question-browser {
    max-height: none !important;
    padding: 14px !important;
  }

  .stage-list .question-list-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .stage-list .question-list-tools > button {
    width: 100% !important;
  }

  .question-finder,
  .practice-navigator {
    gap: 10px !important;
  }

  .search-field {
    width: 100% !important;
  }

  .question-list {
    max-height: none !important;
    overflow: visible !important;
  }

  .question-row {
    min-height: 84px !important;
    padding: 12px !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .question-row .question-code {
    min-width: 66px !important;
  }

  .question-row-main strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
  }

  .question-card {
    padding: 16px !important;
  }

  .question-card h3 {
    font-size: 23px !important;
    line-height: 1.18 !important;
  }

  .question-card p {
    font-size: 18px !important;
    line-height: 1.62 !important;
  }

  .ra-mode-toolbar {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 2px !important;
  }

  .ra-mode-toolbar button {
    flex: 0 0 auto !important;
  }

  .question-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .question-tools .ghost-btn,
  .question-tools .primary-btn,
  .question-tools .secondary-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .ra-demo-player {
    padding: 12px !important;
  }

  .ra-demo-player-head {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  #raDemoSpeedSelect {
    width: 82px !important;
  }

  .ra-demo-player-controls {
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .practice-discussion {
    display: none !important;
  }

  .recorder {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .timer {
    justify-self: center !important;
    text-align: center !important;
  }

  .wave {
    min-height: 34px !important;
  }

  .recorder-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .recorder-actions button {
    width: 100% !important;
    min-height: 46px !important;
  }

  .feedback-panel {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .feedback-panel:not(.has-report) {
    display: none !important;
  }

  .feedback-panel.has-report {
    margin-top: 12px !important;
  }

  .feedback-list,
  .action-plan-list,
  .ai-breakdown,
  .solution-panel {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

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

  .report-actions button {
    width: 100% !important;
  }
}

@media (max-width: 420px) {
  body:not(:is(.view-community, .view-mistakes, .view-seat-finder)) .main {
    padding: 10px !important;
  }

  .topbar h1 {
    font-size: 27px !important;
  }

  .question-card h3,
  .practice-detail-copy h2 {
    font-size: 22px !important;
  }

  .question-card p {
    font-size: 17px !important;
  }

  .question-tools,
  .recorder-actions,
  .report-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ra-demo-player-head,
  .ra-demo-player-controls {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #raDemoSpeedSelect,
  #raDemoProgress {
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  #mock,
  #mock * {
    min-width: 0 !important;
  }

  #mock .mock-page-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  #mock .mock-page-head h2 {
    font-size: 28px !important;
    line-height: 1.12 !important;
  }

  #mock .mock-page-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    justify-content: stretch !important;
  }

  #mock .mock-page-actions button {
    width: 100% !important;
    min-height: 40px !important;
    padding: 0 10px !important;
  }

  #mock .mock-center-layout,
  #mock .mock-paper-workbench,
  #mock .mock-paper-toolbar,
  #mock .mock-session-area {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #mock .mock-main-column,
  #mock .mock-right-column {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #mock .mock-paper-workbench,
  #mock .mock-flow-panel,
  #mock .mock-status-card,
  #mock .mock-report-panel,
  #mock .mock-tip-card,
  #mock .mock-session-area > .panel {
    border-radius: 8px !important;
  }

  #mock .mock-paper-tabs {
    display: flex !important;
    gap: 8px !important;
    padding: 12px !important;
    overflow-x: auto !important;
  }

  #mock .mock-paper-tabs button {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
  }

  #mock .mock-paper-toolbar {
    padding: 12px !important;
  }

  #mock .mock-paper-filters {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #mock .mock-paper-filters button {
    width: 100% !important;
  }

  #mock .mock-paper-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 0 12px 12px !important;
  }

  #mock .mock-paper-card {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 112px !important;
    padding: 18px 12px 12px !important;
  }

  #mock .mock-paper-icon {
    width: 46px !important;
    height: 46px !important;
    font-size: 20px !important;
  }

  #mock .mock-paper-copy strong {
    display: block !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  #mock .mock-paper-copy p,
  #mock .mock-paper-copy small {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  #mock .mock-paper-meta,
  #mock .mock-paper-card > i {
    grid-column: 1 / -1 !important;
  }

  #mock .mock-paper-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #mock .mock-paper-card > i {
    width: 100% !important;
    min-height: 40px !important;
  }

  #mock .mock-paper-detail {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin: 0 12px 12px !important;
    padding: 12px !important;
  }

  #mock .mock-ai-card-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #mock .mock-ai-card-copy img {
    display: none !important;
  }

  #mock .dark-action-btn {
    width: 100% !important;
  }

  #mock .mock-flow-panel {
    padding: 14px !important;
  }

  #mock .mock-flow-panel h3 {
    margin-bottom: 12px !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    writing-mode: horizontal-tb !important;
  }

  #mock .mock-flow-panel .mock-task-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  #mock .mock-flow-panel .mock-task {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 8px 10px !important;
    align-items: center !important;
    min-height: 72px !important;
    padding: 12px !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  #mock .mock-flow-panel .mock-task *,
  #mock .mock-flow-panel .mock-task strong,
  #mock .mock-flow-panel .mock-task small,
  #mock .mock-flow-panel .mock-task span {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  #mock .mock-flow-panel .mock-task-index {
    grid-row: 1 / 3 !important;
    width: 38px !important;
    height: 38px !important;
  }

  #mock .mock-flow-panel .mock-task strong {
    display: block !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  #mock .mock-flow-panel .mock-task small {
    display: block !important;
    margin-top: 3px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  #mock .mock-flow-panel .mock-task > span:last-child {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: end !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  #mock .mock-command-center,
  #mock .mock-status-card,
  #mock .mock-report-panel,
  #mock .mock-tip-card {
    width: 100% !important;
  }

  #mock .mock-status-ring {
    width: 160px !important;
    height: 160px !important;
  }

  #mock .mock-status-stats,
  #mock .mock-skill-grid,
  #mock .mock-hero,
  #mock .mock-exam-topline,
  #mock .mock-exam-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #mock .mock-question-progress {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
  }

  #mock .mock-question-progress button {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 420px) {
  #mock .mock-page-actions,
  #mock .mock-paper-filters,
  #mock .mock-flow-panel .mock-task {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #mock .mock-flow-panel .mock-task-index,
  #mock .mock-flow-panel .mock-task > span:last-child {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: start !important;
  }
}

@media (max-width: 760px) {
  #practice.practice-detail-mode .stage-practice .practice-detail-hero,
  #practice .stage-practice .practice-detail-hero {
    display: block !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
    padding: 16px !important;
    overflow: visible !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-detail-copy,
  #practice .stage-practice .practice-detail-copy {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-detail-copy .eyebrow,
  #practice.practice-detail-mode .stage-practice .practice-detail-copy h2,
  #practice.practice-detail-mode .stage-practice .practice-detail-copy p,
  #practice .stage-practice .practice-detail-copy .eyebrow,
  #practice .stage-practice .practice-detail-copy h2,
  #practice .stage-practice .practice-detail-copy p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-detail-copy h2,
  #practice .stage-practice .practice-detail-copy h2 {
    font-size: 25px !important;
    line-height: 1.18 !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-detail-copy p,
  #practice .stage-practice .practice-detail-copy p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-detail-points,
  #practice.practice-detail-mode .stage-practice .practice-detail-hero > img,
  #practice.practice-detail-mode .stage-practice .estimated-score-card,
  #practice .stage-practice .practice-detail-points,
  #practice .stage-practice .practice-detail-hero > img,
  #practice .stage-practice .estimated-score-card {
    display: none !important;
  }
}

@media (max-width: 760px) {
  #practice.practice-detail-mode {
    padding-bottom: 0 !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-detail-hero {
    display: none !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-workbench {
    display: block !important;
  }

  #practice.practice-detail-mode .stage-practice .question-type-shell,
  #practice.practice-detail-mode .stage-practice #questionTypeGrid,
  #practice.practice-detail-mode .stage-practice .skill-map {
    display: none !important;
  }

  #practice.practice-detail-mode .stage-practice .answer-stage {
    display: block !important;
    min-height: calc(100dvh - 84px) !important;
    padding-bottom: 206px !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-navigator {
    display: none !important;
  }

  #practice.practice-detail-mode .stage-practice .question-card {
    display: block !important;
    min-height: calc(100dvh - 310px) !important;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 24px rgba(32, 24, 18, 0.05) !important;
  }

  #practice.practice-detail-mode .stage-practice .active-question h3 {
    margin-top: 0 !important;
    font-size: 22px !important;
    line-height: 1.22 !important;
  }

  #practice.practice-detail-mode .stage-practice #questionText {
    max-height: none !important;
    margin-bottom: 14px !important;
    font-size: 18px !important;
    line-height: 1.85 !important;
  }

  #practice.practice-detail-mode .stage-practice .question-tools {
    position: sticky !important;
    bottom: 198px !important;
    z-index: 5 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 12px -4px 0 !important;
    padding: 8px 4px 0 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 28%) !important;
  }

  #practice.practice-detail-mode .stage-practice .question-tools button {
    width: 100% !important;
    min-height: 40px !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder {
    position: fixed !important;
    right: 10px !important;
    bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    border-color: rgba(230, 187, 83, 0.72) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -10px 30px rgba(32, 24, 18, 0.16) !important;
    overflow: visible !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder::before {
    left: 16px !important;
    top: 58px !important;
    width: 56px !important;
    height: 56px !important;
    border-width: 4px !important;
    background-size: 48px 48px !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder .timer {
    justify-self: center !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder .timer span {
    font-size: 28px !important;
  }

  #practice.practice-detail-mode .stage-practice .wave {
    min-height: 32px !important;
    padding-left: 70px !important;
    padding-right: 10px !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder-actions button {
    min-height: 44px !important;
    width: 100% !important;
  }

  #practice.practice-detail-mode .stage-practice #recordButton {
    min-height: 48px !important;
    font-size: 18px !important;
  }

  #practice.practice-detail-mode .stage-practice #submitButton {
    min-height: 48px !important;
  }

  #practice.practice-detail-mode .feedback-panel.has-report {
    margin-top: 12px !important;
    margin-bottom: 246px !important;
  }
}

@media (max-width: 360px) {
  #practice.practice-detail-mode .stage-practice .answer-stage {
    padding-bottom: 292px !important;
  }

  #practice.practice-detail-mode .stage-practice .question-tools {
    position: static !important;
    grid-template-columns: minmax(0, 1fr) !important;
    background: transparent !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder {
    max-height: 264px !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.mobile-feedback-close {
  display: none;
}

.mobile-report-summary {
  display: none;
}

@media (max-width: 760px) {
  #practice.practice-detail-mode .stage-practice .answer-stage {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding-bottom: 84px !important;
  }

  #practice.practice-detail-mode .stage-practice .question-card {
    min-height: auto !important;
    padding-bottom: 10px !important;
    border-bottom: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: 0 10px 24px rgba(32, 24, 18, 0.05) !important;
  }

  #practice.practice-detail-mode .stage-practice .question-tools {
    position: static !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    border-top: 0 !important;
    border-radius: 0 0 8px 8px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 14px 28px rgba(32, 24, 18, 0.07) !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder::before {
    left: 14px !important;
    top: 50px !important;
    width: 52px !important;
    height: 52px !important;
    background-size: 44px 44px !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder .timer {
    padding-left: 64px !important;
    justify-self: stretch !important;
    text-align: left !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder .timer span {
    font-size: 28px !important;
  }

  #practice.practice-detail-mode .stage-practice .wave {
    width: 100% !important;
    min-height: 30px !important;
    padding-left: 64px !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder-actions button {
    min-height: 44px !important;
  }

  #practice.practice-detail-mode .feedback-panel.has-report {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 40 !important;
    display: block !important;
    max-height: min(82dvh, 720px) !important;
    margin: 0 !important;
    padding: 46px 14px calc(14px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px 18px 0 0 !important;
    border: 1px solid rgba(234, 223, 202, 0.96) !important;
    background: #fff !important;
    box-shadow: 0 -18px 44px rgba(24, 33, 37, 0.22) !important;
    overflow-y: auto !important;
  }

  #practice.practice-detail-mode .feedback-panel.has-report::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(20, 16, 13, 0.36);
  }

  #practice.practice-detail-mode .feedback-panel:not(.has-report) {
    display: none !important;
  }

  #practice.practice-detail-mode .feedback-panel.has-report .mobile-feedback-close {
    position: absolute;
    top: 10px;
    right: 12px;
    display: grid;
  }
}

@media (max-width: 760px) {
  #practice.practice-detail-mode .stage-practice .mobile-report-summary {
    display: grid;
    box-sizing: border-box;
    width: calc(100% - 36px);
    min-height: 46px;
    margin: 12px 18px 0;
    padding: 0 18px;
    place-items: center;
    border: 1px solid rgba(24, 174, 151, 0.2);
    border-radius: 18px;
    color: #087f70;
    background: linear-gradient(145deg, rgba(247, 255, 252, 0.96), rgba(231, 249, 245, 0.88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 12px 24px -24px rgba(7, 120, 104, 0.5);
    font-size: 14px;
    font-weight: 860;
    line-height: 20px;
  }

  #practice.practice-detail-mode .stage-practice .mobile-report-summary.is-hidden {
    display: none !important;
  }

  #practice.practice-detail-mode .feedback-panel.has-report {
    display: none !important;
  }

  #practice.practice-detail-mode .feedback-panel.has-report.mobile-report-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 40 !important;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: calc(54px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  #practice.practice-detail-mode .feedback-panel.has-report.mobile-report-open::before {
    content: none !important;
  }

  #practice.practice-detail-mode .feedback-panel.has-report.mobile-report-open .mobile-feedback-close {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    right: 12px;
    z-index: 2;
    display: grid;
  }
}

@media (max-width: 760px) {
  #practice.practice-detail-mode .stage-practice .recorder {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 14px !important;
    text-align: center !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder::before {
    left: 50% !important;
    top: 14px !important;
    width: 42px !important;
    height: 42px !important;
    border-width: 3px !important;
    background-size: 36px 36px !important;
    transform: translateX(-96px) !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder .timer {
    min-height: 52px !important;
    padding: 0 !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    text-align: center !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder .timer span {
    font-size: 30px !important;
    line-height: 1 !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder .timer small {
    margin-top: 4px !important;
    color: #8a8177 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  #practice.practice-detail-mode .stage-practice .wave {
    width: 100% !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    justify-content: center !important;
  }

  #practice.practice-detail-mode .stage-practice .wave span {
    height: 10px !important;
    max-width: 12px !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder-actions {
    margin-top: 0 !important;
  }

  #practice.practice-detail-mode .practice-side-stack,
  #practice.practice-detail-mode .feedback-idle-card,
  #practice.practice-detail-mode .practice-help-card,
  #practice.practice-detail-mode .practice-goal-card,
  #practice.practice-detail-mode .ai-tip-card {
    display: none !important;
  }
}

.home-v2-metrics > .home-v2-progress-card,
.home-v2-metrics > .home-v2-streak,
.home-v2-metrics > .home-v2-score-card,
.home-v2-metrics > .home-v2-weak {
  display: flex;
  flex-direction: column;
  isolation: isolate;
  justify-content: space-between;
  min-height: clamp(168px, 10.5vw, 176px);
  padding: clamp(16px, 1.15vw, 20px);
  border: 1px solid rgba(221, 205, 170, 0.78);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 253, 247, 0.94) 56%, rgba(249, 244, 234, 0.92) 100%);
  box-shadow:
    0 18px 42px rgba(67, 49, 25, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.home-v2-metrics > .home-v2-progress-card::before,
.home-v2-metrics > .home-v2-streak::before,
.home-v2-metrics > .home-v2-score-card::before,
.home-v2-metrics > .home-v2-weak::before {
  height: 0;
  background: transparent;
}

.home-v2-metrics > .home-v2-progress-card::after,
.home-v2-metrics > .home-v2-streak::after,
.home-v2-metrics > .home-v2-score-card::after,
.home-v2-metrics > .home-v2-weak::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -18px -36px auto;
  width: 124px;
  height: 124px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(28, 198, 173, 0.15), rgba(28, 198, 173, 0));
  pointer-events: none;
}

.home-v2-metrics > .home-v2-streak::after {
  background: radial-gradient(circle, rgba(255, 194, 58, 0.18), rgba(255, 194, 58, 0));
}

.home-v2-metrics > .home-v2-score-card::after {
  background: radial-gradient(circle, rgba(201, 133, 0, 0.16), rgba(201, 133, 0, 0));
}

.home-v2-metrics > .home-v2-weak::after {
  background: radial-gradient(circle, rgba(31, 201, 169, 0.12), rgba(31, 201, 169, 0));
}

.home-v2-metrics > .home-v2-progress-card:hover,
.home-v2-metrics > .home-v2-streak:hover,
.home-v2-metrics > .home-v2-score-card:hover,
.home-v2-metrics > .home-v2-weak:hover {
  border-color: rgba(28, 198, 173, 0.36);
  box-shadow:
    0 24px 56px rgba(67, 49, 25, 0.12),
    0 0 0 4px rgba(28, 198, 173, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.home-v2-metrics > .home-v2-progress-card > span,
.home-v2-metrics > .home-v2-streak > span,
.home-v2-metrics > .home-v2-score-card > span,
.home-v2-metrics > .home-v2-weak > span {
  color: #5d554d;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
}

.home-v2-progress-card .home-v2-ring {
  width: clamp(72px, 4.8vw, 88px);
  height: clamp(72px, 4.8vw, 88px);
  margin: 8px 0 6px;
  background:
    radial-gradient(circle at center, #fffefa 0 48%, transparent 49%),
    conic-gradient(#1fc9a9 var(--value), #e7f4ef 0);
  box-shadow:
    inset 0 0 0 1px rgba(31, 201, 169, 0.12),
    0 10px 24px rgba(31, 201, 169, 0.12);
}

.home-v2-progress-card .home-v2-ring strong,
.home-v2-score-card .home-v2-gauge strong,
.home-v2-streak > strong {
  color: #201815 !important;
  font-size: clamp(28px, 0.8vw + 18px, 36px);
  line-height: 1;
  font-weight: 950;
}

.home-v2-progress-card p,
.home-v2-streak p,
.home-v2-score-card p,
.home-v2-score-card small,
.home-v2-weak em {
  margin: 0;
  color: #756a5e;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 650;
}

.home-v2-progress-card p b,
.home-v2-score-card p b {
  color: #24201c;
  font-weight: 950;
}

.home-v2-progress-card > button {
  width: fit-content;
  margin-top: 2px;
  color: #078f78;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
}

.home-v2-progress-card > button svg {
  transition: transform 0.18s ease;
}

.home-v2-progress-card > button:hover svg {
  transform: translateX(3px);
}

.home-v2-metrics > .home-v2-streak {
  display: grid;
  grid-template-columns: clamp(46px, 3.1vw, 54px) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 12px;
  row-gap: 7px;
  align-items: center;
}

.home-v2-streak > span,
.home-v2-streak > div,
.home-v2-streak > strong,
.home-v2-streak > p {
  position: relative;
  z-index: 1;
}

.home-v2-streak > span {
  grid-column: 1 / -1;
}

.home-v2-streak > div {
  grid-column: 1;
  grid-row: 2;
  width: clamp(46px, 3.1vw, 54px);
  height: clamp(46px, 3.1vw, 54px);
  margin: 0;
  color: #c98500;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff7df, #ffedbb);
  box-shadow:
    inset 0 0 0 1px rgba(209, 144, 0, 0.1),
    0 10px 22px rgba(209, 144, 0, 0.12);
}

.home-v2-streak > strong {
  display: block;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  margin: 0;
}

.home-v2-streak p {
  grid-column: 1 / -1;
  grid-row: 3;
  max-width: none;
  padding-right: 28px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.home-v2-streak img {
  z-index: 0;
  right: 8px;
  bottom: 6px;
  width: clamp(64px, 5vw, 86px);
  opacity: 0.16;
  filter: saturate(0.9);
}

.home-v2-score-card {
  cursor: pointer;
}

.home-v2-score-card .home-v2-gauge {
  width: clamp(94px, 5.8vw, 112px);
  height: clamp(56px, 3.6vw, 66px);
  margin: 8px 0 6px;
  border-radius: 104px 104px 14px 14px;
  background:
    radial-gradient(circle at 50% 100%, #fffdf9 0 39%, transparent 40%),
    conic-gradient(from 270deg, #1fc9a9 0 248deg, #e7f4ef 0);
  box-shadow: 0 10px 24px rgba(31, 201, 169, 0.12);
}

.home-v2-score-card small {
  display: block;
  margin-top: 4px;
  color: #7d7166;
}

.question-title-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
}

.active-question-code {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #078f78;
  background: #eafff8;
  box-shadow: inset 0 0 0 1px rgba(31, 201, 169, 0.18);
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
}

.active-question .question-title-line h3 {
  margin: 0;
  color: #201815;
  font-size: clamp(24px, 1vw + 18px, 34px);
  line-height: 1.22;
  font-weight: 950;
  letter-spacing: 0;
}

.active-question #questionText {
  color: #191716;
  font-size: clamp(21px, 0.8vw + 17px, 30px);
  line-height: 1.78;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  #practice.practice-detail-mode .stage-practice .question-title-line {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  #practice.practice-detail-mode .stage-practice .active-question-code {
    padding: 6px 9px !important;
    font-size: 13px !important;
  }

  #practice.practice-detail-mode .stage-practice .active-question .question-title-line h3 {
    font-size: 23px !important;
    line-height: 1.2 !important;
  }

  #practice.practice-detail-mode .stage-practice #questionText {
    font-size: 20px !important;
    line-height: 1.72 !important;
  }

  #practice.practice-detail-mode .stage-practice .question-image-panel {
    margin-top: 14px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  #practice.practice-detail-mode .stage-practice .question-image-panel img {
    max-height: 44vh !important;
  }

  #practice.practice-detail-mode .di-report-hero {
    padding: 16px !important;
    align-items: flex-start !important;
  }

  #practice.practice-detail-mode .di-total-score {
    width: 76px !important;
    height: 76px !important;
  }

  #practice.practice-detail-mode .di-official-grid,
  #practice.practice-detail-mode .di-content-layout {
    grid-template-columns: 1fr !important;
  }

  #practice.practice-detail-mode .di-content-bars div {
    grid-template-columns: 82px minmax(0, 1fr) 48px !important;
  }
}

.home-v2-metrics > .home-v2-weak > div {
  width: clamp(46px, 3.1vw, 54px);
  height: clamp(46px, 3.1vw, 54px);
  margin: 7px 0 0;
  color: #078f78;
  border-radius: 18px;
  background: linear-gradient(145deg, #eafff8, #d8f8ef);
  box-shadow:
    inset 0 0 0 1px rgba(31, 201, 169, 0.14),
    0 10px 22px rgba(31, 201, 169, 0.1);
}

.home-v2-metrics > .home-v2-weak > strong {
  display: -webkit-box;
  margin-top: 8px;
  color: #201815;
  font-size: clamp(17px, 0.45vw + 13px, 21px);
  line-height: 1.25;
  font-weight: 950;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-v2-metrics > .home-v2-weak em {
  width: fit-content;
  margin-top: 4px;
  padding: 5px 9px;
  color: #078f78;
  background: #eafff8;
  border-radius: 999px;
}

.topbar {
  display: none !important;
}

.main {
  padding-top: clamp(14px, 1.45vw, 22px);
}

.sidebar {
  gap: 20px;
}

.sidebar-user-card {
  min-height: 74px;
  padding: 11px;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(246, 197, 66, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.025);
  box-shadow: none;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.sidebar-user-card:hover {
  border-color: rgba(246, 197, 66, 0.18);
  background:
    linear-gradient(135deg, rgba(246, 197, 66, 0.24), rgba(255, 255, 255, 0.07)),
    rgba(255, 255, 255, 0.045);
  transform: translateY(-1px);
}

.sidebar-user-card img {
  width: 46px;
  height: 46px;
  padding: 3px;
  background: rgba(255, 243, 194, 0.12);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

.sidebar-user-card strong {
  overflow: hidden;
  color: #fff8d7;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.2;
}

.sidebar-user-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.sidebar-user-card b {
  min-width: 34px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #241b18;
  background: #f6c542;
  text-align: center;
  font-size: 12px;
  line-height: 1;
}

.sidebar-user-card.is-logged-in b {
  min-width: 24px;
  color: #fff3c2;
  background: rgba(255, 255, 255, 0.08);
  font-size: 20px;
}

.app-shell {
  grid-template-columns: 124px minmax(0, 1fr);
}

.sidebar {
  width: 76px;
  height: calc(100vh - 48px);
  margin: 24px;
  padding: 24px 0;
  gap: 0;
  overflow: hidden;
  color: #777169;
  background: #131211;
  border-radius: 26px;
  box-shadow: 0 18px 42px -12px rgba(46, 38, 26, 0.14);
}

.sidebar .brand {
  display: grid;
  width: 76px;
  height: 40px;
  place-items: center;
}

.sidebar .brand-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.sidebar .brand-icon {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  background: #f6c542;
  box-shadow: none;
}

.sidebar .nav-list {
  display: grid;
  justify-items: center;
  gap: 30px;
  margin-top: 56px;
}

.sidebar .nav-link {
  display: grid;
  width: 50px;
  min-height: 56px;
  padding: 0;
  place-items: center;
  color: #777169;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 750;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: #bdb5aa;
  background: #2e211a;
  box-shadow: none;
  transform: translateY(-1px);
}

.sidebar .icon {
  display: none;
}

.sidebar .sidebar-user-card,
.sidebar .sidebar-user-card.is-logged-in {
  display: grid;
  width: 50px;
  min-width: 0;
  height: 50px;
  min-height: 50px;
  margin: auto auto 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 16px;
  background: rgba(46, 33, 26, 0.74);
  box-shadow: none;
}

.sidebar .sidebar-user-card:hover {
  border-color: transparent;
  background: #2e211a;
  transform: translateY(-1px);
}

.sidebar .sidebar-user-card img {
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.sidebar .sidebar-user-card span,
.sidebar .sidebar-user-card b {
  display: none;
}

.app-shell {
  grid-template-columns: 262px minmax(0, 1fr);
}

.sidebar {
  width: 216px;
  height: calc(100vh - 48px);
  margin: 24px;
  padding: 26px 12px 24px;
  gap: 0;
  overflow: hidden;
  box-sizing: border-box;
  color: #1d1d1f;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  box-shadow: 0 20px 23px rgba(0, 0, 0, 0.05);
}

.sidebar .brand {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  width: 100%;
  height: 48px;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  place-items: initial;
  box-sizing: border-box;
  color: #1d1d1f;
}

.sidebar .brand-icon {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  object-fit: cover;
}

.sidebar .brand-copy {
  position: static;
  display: grid;
  width: auto;
  height: auto;
  min-width: 0;
  gap: 2px;
  overflow: visible;
  clip: auto;
}

.sidebar .brand-copy strong {
  color: #1d1d1f;
  font-size: 21px;
  font-weight: 850;
  line-height: 1.24;
  white-space: nowrap;
}

.sidebar .exam-type-picker {
  display: block;
  min-width: 0;
}

.sidebar .exam-type-picker select {
  width: 100%;
  max-width: 116px;
  min-height: 18px;
  padding: 0 16px 0 0;
  border: 0;
  border-radius: 0;
  color: #6e6e73;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.32;
}

.sidebar .nav-list {
  display: grid;
  gap: 8px;
  margin-top: 42px;
  justify-items: stretch;
}

.sidebar .nav-link {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 13px;
  width: 192px;
  min-height: 44px;
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: 16px;
  color: #1d1d1f;
  background: transparent;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.32;
  box-shadow: none;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: #fff;
  background: #1d1d1f;
  box-shadow: none;
  transform: translateY(-1px);
}

.sidebar .icon {
  display: grid;
  width: 19px;
  height: 19px;
  flex-basis: 19px;
  place-items: center;
  color: currentColor;
  border-radius: 0;
  background: transparent;
}

.sidebar .icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

.sidebar .nav-link.active .icon,
.sidebar .nav-link:hover .icon {
  color: currentColor;
  background: transparent;
}

.sidebar .sidebar-user-card,
.sidebar .sidebar-user-card.is-logged-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 192px;
  min-width: 0;
  height: 126px;
  min-height: 126px;
  margin: auto auto 0;
  padding: 18px 16px;
  place-items: start;
  align-content: start;
  gap: 4px;
  box-sizing: border-box;
  border: 1px solid rgba(229, 229, 234, 0.8);
  border-radius: 22px;
  color: #1d1d1f;
  background: #fafafc;
  text-align: left;
  box-shadow: none;
}

.sidebar .sidebar-user-card:hover {
  border-color: rgba(229, 229, 234, 0.95);
  background: #fff;
  transform: translateY(-1px);
}

.sidebar .sidebar-user-card img {
  display: none;
}

.sidebar .sidebar-user-card span {
  display: grid;
  gap: 4px;
}

.sidebar .sidebar-user-card strong {
  color: #1d1d1f;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.32;
}

.sidebar .sidebar-user-card small {
  color: #6e6e73;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.32;
}

.sidebar .sidebar-user-card b {
  display: grid;
  min-width: 80px;
  height: 34px;
  margin-top: 18px;
  padding: 0 14px;
  place-items: center;
  border: 1px solid rgba(255, 232, 163, 0.9);
  border-radius: 999px;
  color: #7a5200;
  background: #fff7d8;
  font-size: 0;
}

.sidebar .sidebar-user-card b::before {
  content: "升级会员";
  font-size: 13px;
  font-weight: 750;
  line-height: 1.32;
}

.sidebar .sidebar-user-card,
.sidebar .sidebar-user-card.is-logged-in {
  grid-template-columns: 42px minmax(0, 1fr) 28px !important;
  width: 192px !important;
  min-height: 88px !important;
  height: auto !important;
  padding: 14px !important;
  align-items: center !important;
  align-content: center !important;
  gap: 11px !important;
  border-color: rgba(229, 229, 234, 0.82) !important;
  border-radius: 22px !important;
  background: rgba(251, 251, 253, 0.94) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.045) !important;
}

.sidebar .sidebar-user-card:hover,
.sidebar .sidebar-user-card.is-logged-in:hover {
  border-color: rgba(29, 29, 31, 0.12) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.07) !important;
}

.sidebar .sidebar-user-card img {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  object-fit: cover !important;
}

.sidebar .sidebar-user-card span {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

.sidebar .sidebar-user-card strong {
  overflow: hidden !important;
  color: #1d1d1f !important;
  font-size: 15.5px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sidebar .sidebar-user-card small {
  overflow: hidden !important;
  color: #6e6e73 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sidebar .sidebar-user-card b {
  display: grid !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid rgba(229, 229, 234, 0.86) !important;
  border-radius: 999px !important;
  color: #6e6e73 !important;
  background: #ffffff !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.sidebar .sidebar-user-card b::before {
  content: "" !important;
}

.home-v2-modal {
  background: rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(18px);
}

.home-v2-modal > div {
  width: min(560px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 40px);
  overflow: auto;
  gap: 18px !important;
  padding: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 28px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 250, 0.94));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.2) !important;
}

.home-target-modal-head {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  justify-content: initial !important;
  gap: 14px !important;
}

.home-target-modal-head > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  color: #1d1d1f;
  background: #f6c13b;
}

.home-target-modal-head svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.1;
}

.home-v2-modal h3 {
  margin: 0 !important;
  color: #1d1d1f;
  font-size: 26px;
  font-weight: 950;
  line-height: 1.18;
}

.home-target-modal-head p {
  margin: 5px 0 0;
  color: #6e6e73;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.home-target-score-grid,
.home-target-meta {
  display: grid;
  gap: 14px;
}

.home-target-subjects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-v2-modal label,
.home-target-subject {
  color: #1d1d1f !important;
  font-weight: 850 !important;
}

.home-v2-range-label,
.home-target-subject,
.home-target-meta > label {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(229, 229, 234, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.8);
}

.home-target-subject {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
}

.home-target-subject span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.home-target-subject strong {
  color: #1d1d1f;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.home-target-subject small {
  color: #8e8e93;
  font-size: 12px;
  font-weight: 700;
}

.home-v2-range-label output,
.home-target-subject output {
  min-width: 46px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #1d1d1f;
  background: #f5f5f7;
  text-align: center;
  font-weight: 950;
}

.home-target-subject output {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, #ffffff);
}

.home-v2-range-label input[type="range"],
.home-target-subject input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 28px;
  padding: 0 !important;
  accent-color: var(--accent, #1d1d1f) !important;
}

.home-v2-modal input[type="date"] {
  width: 100%;
  min-height: 46px;
  margin-top: 8px;
  border: 1px solid rgba(229, 229, 234, 0.94) !important;
  border-radius: 14px !important;
  color: #1d1d1f;
  background: #ffffff;
  font-weight: 850;
}

.home-target-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding-top: 2px;
}

.home-target-actions .ghost-btn,
.home-target-actions .primary-btn {
  min-height: 40px;
  border-radius: 999px;
  font-weight: 900;
}

.home-target-actions .primary-btn {
  background: #1d1d1f;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

@media (max-width: 560px) {
  .home-target-subjects {
    grid-template-columns: 1fr;
  }

  .home-v2-modal > div {
    padding: 20px !important;
    border-radius: 24px !important;
  }
}

#profile {
  --profile-card-radius: 22px;
}

#profile .profile-hero-card {
  min-height: 132px;
  padding: 26px 30px !important;
  border-color: rgba(255, 255, 255, 0.86) !important;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 62%, rgba(255, 245, 217, 0.96) 100%) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.045) !important;
}

#profile .profile-hero-main {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 16px !important;
}

#profile .profile-hero-main img {
  width: 58px !important;
  height: 58px !important;
}

#profile .profile-hero-main h2 {
  margin: 2px 0 3px !important;
  font-size: clamp(30px, 2vw, 38px) !important;
  letter-spacing: 0 !important;
}

#profile .profile-tabs {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 5px !important;
}

#profile .profile-tabs button {
  min-height: 34px !important;
  padding: 0 15px !important;
}

#profile .profile-summary {
  display: grid !important;
  grid-template-columns: minmax(420px, 1.6fr) repeat(4, minmax(150px, 0.72fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin-bottom: 18px !important;
}

#profile .profile-today-card,
#profile .profile-membership-mini,
#profile .profile-summary-card,
#profile .panel {
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: var(--profile-card-radius) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.045) !important;
}

#profile .profile-today-card {
  display: grid !important;
  gap: 16px !important;
  min-height: 180px !important;
  padding: 22px !important;
}

#profile .profile-today-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

#profile .profile-today-head span,
#profile .profile-membership-mini span,
#profile .profile-section-head span {
  color: #8e8e93 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#profile .profile-today-head strong {
  display: block !important;
  margin-top: 4px !important;
  color: #050607 !important;
  font-size: 44px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#profile .profile-today-head strong small {
  color: #6e6e73 !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}

#profile .profile-today-head p {
  margin: 8px 0 0 !important;
  color: #5f646c !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

#profile .profile-today-head > b {
  min-width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #050607 !important;
  background:
    radial-gradient(circle at center, #fff 0 56%, transparent 57%),
    conic-gradient(#f6c542 var(--profile-progress, 0deg), #f1eee6 0) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

#profile .profile-today-bar {
  height: 8px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #ece8dd !important;
}

#profile .profile-today-bar i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #050607, #f6c542) !important;
}

#profile .profile-today-types {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

#profile .profile-today-types span {
  display: grid !important;
  grid-template-columns: auto auto !important;
  gap: 2px 8px !important;
  align-items: center !important;
  min-width: 116px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: #f5f5f7 !important;
}

#profile .profile-today-types b {
  color: #050607 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

#profile .profile-today-types strong {
  justify-self: end !important;
  color: #b47a00 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

#profile .profile-today-types small {
  grid-column: 1 / -1 !important;
  overflow: hidden !important;
  color: #6e6e73 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#profile .profile-summary-card,
#profile .profile-membership-mini {
  display: grid !important;
  min-height: 180px !important;
  padding: 22px !important;
  align-content: space-between !important;
}

#profile .profile-summary-card strong,
#profile .profile-membership-mini strong {
  color: #050607 !important;
  font-size: 34px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#profile .profile-membership-mini small,
#profile .profile-summary-card small {
  color: #6e6e73 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

#profile .content-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

#profile .profile-insight-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

#profile .wide-panel {
  display: grid !important;
  gap: 18px !important;
}

#profile .skill-progress-grid {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.82fr) minmax(340px, 1.18fr) !important;
  gap: 16px !important;
}

#profile .profile-daily-panel,
#profile .profile-recent-panel {
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
}

#profile .profile-section-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
}

#profile .profile-section-head h3 {
  margin: 3px 0 0 !important;
  color: #050607 !important;
  font-size: 20px !important;
  font-weight: 950 !important;
}

#profile .profile-type-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
  gap: 10px !important;
}

#profile .profile-type-grid article {
  display: grid !important;
  min-height: 118px !important;
  padding: 16px !important;
  align-content: space-between !important;
  border: 1px solid rgba(229, 229, 234, 0.72) !important;
  border-radius: 18px !important;
  background: #f5f5f7 !important;
}

#profile .profile-type-grid article span {
  color: #b47a00 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#profile .profile-type-grid article strong {
  color: #050607 !important;
  font-size: 36px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#profile .profile-type-grid article small {
  overflow: hidden !important;
  color: #5f646c !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#profile .profile-recent-list {
  display: grid !important;
  gap: 8px !important;
}

#profile .profile-recent-list button {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) 64px 82px !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 52px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(229, 229, 234, 0.8) !important;
  border-radius: 16px !important;
  color: #050607 !important;
  background: #fff !important;
  text-align: left !important;
}

#profile .profile-recent-list button b {
  display: grid !important;
  place-items: center !important;
  height: 30px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: #050607 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

#profile .profile-recent-list button span {
  overflow: hidden !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#profile .profile-recent-list button strong {
  color: #b47a00 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  text-align: right !important;
}

#profile .profile-recent-list button small {
  color: #8e8e93 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: right !important;
}

#profile .profile-empty-state {
  display: grid !important;
  gap: 6px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  background: #f5f5f7 !important;
}

#profile .profile-empty-state strong {
  color: #050607 !important;
  font-size: 16px !important;
}

#profile .profile-empty-state span {
  color: #6e6e73 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

@media (max-width: 1180px) {
  #profile .profile-summary,
  #profile .profile-insight-grid,
  #profile .content-grid,
  #profile .skill-progress-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  #profile .profile-today-card,
  #profile .wide-panel {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  #profile .profile-hero-card,
  #profile .profile-summary,
  #profile .profile-insight-grid,
  #profile .content-grid,
  #profile .skill-progress-grid {
    grid-template-columns: 1fr !important;
  }

  #profile .profile-today-card,
  #profile .wide-panel {
    grid-column: auto !important;
  }

  #profile .profile-recent-list button {
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
  }

  #profile .profile-recent-list button small {
    grid-column: 2 / -1 !important;
    text-align: left !important;
  }
}

#profile {
  padding-bottom: 110px !important;
}

#profile .profile-page-hero {
  margin-bottom: 14px !important;
}

#profile .profile-hero-card {
  overflow: hidden !important;
  border-radius: 24px !important;
}

#profile .profile-summary {
  margin-bottom: 16px !important;
}

#profile .profile-today-card {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(246, 197, 66, 0.22), transparent 34%),
    #ffffff !important;
}

#profile .profile-today-card::after {
  display: none !important;
}

#profile .profile-summary-card,
#profile .profile-membership-mini {
  min-height: 142px !important;
}

#profile .profile-summary-card strong,
#profile .profile-membership-mini strong {
  font-size: 30px !important;
}

#profile .profile-insight-grid {
  margin-bottom: 18px !important;
}

#profile .wide-panel {
  min-width: 0 !important;
}

#profile .history-table {
  display: none !important;
}

#profile .profile-box {
  display: grid !important;
  gap: 10px !important;
  padding: 16px !important;
  border-radius: 18px !important;
  background: #f7f7f8 !important;
}

#profile .profile-box strong,
#profile .profile-box span {
  color: #1d1d1f !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

#profile .next-step-list {
  display: grid !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

#profile .next-step-list h3 {
  margin: 0 0 2px !important;
  color: #050607 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

#profile .next-step-list article {
  border: 1px solid rgba(229, 229, 234, 0.78) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

#profile .radar-item {
  grid-template-columns: 80px minmax(0, 1fr) !important;
  align-items: center !important;
}

#profile .teacher-note-card {
  display: grid !important;
  gap: 12px !important;
}

#profile .teacher-review-history {
  display: grid !important;
  gap: 8px !important;
}

#profile .teacher-review-history span {
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: #f7f7f8 !important;
  color: #4f5660 !important;
  line-height: 1.55 !important;
}

@media (min-width: 1181px) {
  #profile .profile-summary {
    grid-template-columns: minmax(390px, 1.25fr) repeat(4, minmax(148px, 0.56fr)) !important;
  }

  #profile .profile-today-card,
  #profile .profile-summary-card,
  #profile .profile-membership-mini {
    min-height: 164px !important;
  }
}

@media (max-width: 760px) {
  #profile {
    padding: 10px 0 112px !important;
  }

  #profile .profile-page-hero,
  #profile .profile-summary,
  #profile .profile-insight-grid,
  #profile .content-grid {
    margin-inline: 0 !important;
  }

  #profile .profile-hero-card {
    min-height: auto !important;
    padding: 18px !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    border-radius: 22px !important;
  }

  #profile .profile-hero-main {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #profile .profile-hero-main img {
    width: 48px !important;
    height: 48px !important;
  }

  #profile .profile-hero-main h2 {
    font-size: 25px !important;
    line-height: 1.08 !important;
  }

  #profile .profile-hero-main p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  #profile .profile-hero-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  #profile .profile-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    border-radius: 18px !important;
  }

  #profile .profile-tabs button {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  #profile .profile-today-card,
  #profile .profile-summary-card,
  #profile .profile-membership-mini,
  #profile .panel {
    border-radius: 20px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.04) !important;
  }

  #profile .profile-today-card {
    min-height: auto !important;
    padding: 18px !important;
  }

  #profile .profile-today-head strong {
    font-size: 36px !important;
  }

  #profile .profile-today-head > b {
    min-width: 50px !important;
    height: 50px !important;
    font-size: 13px !important;
  }

  #profile .profile-today-types span {
    min-width: 0 !important;
    flex: 1 1 120px !important;
  }

  #profile .profile-summary-card,
  #profile .profile-membership-mini {
    min-height: 108px !important;
    padding: 18px !important;
  }

  #profile .profile-summary-card strong,
  #profile .profile-membership-mini strong {
    font-size: 28px !important;
  }

  #profile .panel {
    padding: 18px !important;
  }

  #profile .panel h2 {
    font-size: 21px !important;
  }

  #profile .profile-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #profile .profile-type-grid article {
    min-height: 98px !important;
    padding: 14px !important;
  }

  #profile .profile-type-grid article strong {
    font-size: 30px !important;
  }

  #profile .profile-recent-list button {
    min-height: 76px !important;
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    padding: 12px !important;
  }

  #profile .profile-recent-list button span {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  #profile .profile-recent-list button strong {
    align-self: start !important;
  }
}

#mock {
  --mock-ink: #050607;
  --mock-muted: #656b73;
  --mock-soft: #f5f5f7;
  --mock-line: rgba(224, 226, 230, 0.82);
  --mock-gold: #c98500;
  color: var(--mock-ink) !important;
}

#mock .mock-page-head {
  min-height: 116px !important;
  padding: 24px 28px !important;
  margin-bottom: 18px !important;
  align-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(105deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.95) 68%, rgba(255,246,222,0.95) 100%) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.045) !important;
}

#mock .mock-page-head h2 {
  color: var(--mock-ink) !important;
  font-size: clamp(30px, 2.1vw, 38px) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

#mock .mock-page-head p {
  color: var(--mock-muted) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

#mock .mock-page-actions {
  gap: 10px !important;
}

#mock .mock-page-actions button,
#mock .mock-paper-tabs button,
#mock .mock-paper-filters button {
  min-height: 38px !important;
  border-radius: 999px !important;
  border-color: rgba(224, 226, 230, 0.92) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--mock-ink) !important;
  box-shadow: none !important;
  font-weight: 900 !important;
}

#mock .mock-page-actions .primary-btn,
#mock .mock-paper-tabs button.active,
#mock .mock-paper-filters button.active {
  border-color: transparent !important;
  color: #fff !important;
  background: var(--mock-ink) !important;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.14) !important;
}

#mock .mock-center-layout {
  grid-template-columns: minmax(720px, 1fr) minmax(312px, 360px) !important;
  gap: 18px !important;
}

#mock .mock-main-column,
#mock .mock-right-column {
  gap: 16px !important;
}

#mock .mock-paper-workbench,
#mock .mock-flow-panel,
#mock .mock-status-card,
#mock .mock-report-panel,
#mock .mock-tip-card {
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.045) !important;
}

#mock .mock-paper-workbench {
  overflow: visible !important;
}

#mock .mock-paper-tabs {
  gap: 8px !important;
  padding: 16px 18px 10px !important;
  border-bottom: 0 !important;
}

#mock .mock-paper-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 10px 18px 12px !important;
}

#mock .mock-paper-toolbar .search-field {
  min-height: 42px !important;
  border-color: var(--mock-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
}

#mock .mock-paper-list {
  display: grid !important;
  gap: 10px !important;
  padding: 0 18px 14px !important;
}

#mock .mock-paper-card {
  position: relative !important;
  grid-template-columns: 42px minmax(0, 1fr) 82px 92px !important;
  min-height: 104px !important;
  padding: 18px 18px 18px 20px !important;
  gap: 14px !important;
  border: 1px solid var(--mock-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

#mock .mock-paper-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(201, 133, 0, 0.22) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.055) !important;
}

#mock .mock-paper-card.active {
  border-color: rgba(201, 133, 0, 0.42) !important;
  background:
    linear-gradient(90deg, rgba(255, 248, 230, 0.92), #fff 34%) !important;
  box-shadow: 0 16px 34px rgba(201, 133, 0, 0.09) !important;
}

#mock .mock-paper-ribbon {
  left: 0 !important;
  top: 14px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--mock-gold) !important;
  font-size: 11px !important;
}

#mock .mock-paper-index {
  display: grid !important;
  width: 32px !important;
  height: 32px !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: var(--mock-gold) !important;
  background: #fff4d6 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

#mock .mock-paper-copy strong {
  display: block !important;
  margin: 0 0 4px !important;
  color: var(--mock-ink) !important;
  font-size: 20px !important;
  line-height: 1.18 !important;
}

#mock .mock-paper-copy em {
  min-height: 20px !important;
  margin: 0 5px 6px 0 !important;
  padding: 0 8px !important;
  color: #a56b00 !important;
  background: #fff3d1 !important;
  font-size: 11px !important;
}

#mock .mock-paper-copy p {
  margin: 0 0 8px !important;
  color: var(--mock-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

#mock .mock-paper-copy small,
#mock .mock-paper-meta {
  color: #69717a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

#mock .mock-paper-meta {
  gap: 6px !important;
}

#mock .mock-paper-card > i {
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border-color: rgba(201, 133, 0, 0.4) !important;
  color: var(--mock-gold) !important;
  background: #fff !important;
  font-size: 13px !important;
}

#mock .mock-paper-detail {
  margin: 0 18px 18px !important;
  padding: 16px 18px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background:
    linear-gradient(100deg, #fffaf0, #fff 68%) !important;
}

#mock .mock-ai-card-copy {
  grid-template-columns: 74px minmax(0, 1fr) !important;
}

#mock .mock-ai-card-copy img {
  width: 72px !important;
  margin: 0 !important;
}

#mock .mock-ai-card-copy h3 {
  font-size: 20px !important;
  color: var(--mock-ink) !important;
}

#mock .mock-ai-card-copy p {
  color: var(--mock-muted) !important;
  font-size: 14px !important;
}

#mock .dark-action-btn {
  border-radius: 12px !important;
  background: var(--mock-ink) !important;
}

#mock .mock-flow-panel {
  padding: 20px !important;
}

#mock .mock-flow-panel h3,
#mock .mock-report-panel h2,
#mock .mock-status-card h3 {
  color: var(--mock-ink) !important;
  font-size: 21px !important;
  font-weight: 950 !important;
}

#mock .mock-flow-panel .mock-task-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#mock .mock-flow-panel .mock-task {
  min-height: 96px !important;
  padding: 14px !important;
  border: 1px solid var(--mock-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
}

#mock .mock-task-index {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  color: var(--mock-gold) !important;
  background: #fff4d6 !important;
}

#mock .mock-task strong {
  color: var(--mock-ink) !important;
  font-size: 15px !important;
}

#mock .mock-task small,
#mock .mock-flow-panel .mock-task > span:last-child {
  color: var(--mock-muted) !important;
}

#mock .mock-status-card {
  padding: 22px !important;
}

#mock .mock-status-ring {
  width: 172px !important;
  height: 172px !important;
  background:
    radial-gradient(circle at center, #fff 59%, transparent 60%),
    conic-gradient(var(--mock-gold) 0deg var(--mock-status), #efebe3 var(--mock-status) 360deg) !important;
}

#mock .mock-status-ring strong {
  color: var(--mock-ink) !important;
  font-size: 30px !important;
}

#mock .mock-status-ring em {
  color: var(--mock-gold) !important;
  font-size: 17px !important;
}

#mock .mock-progress-line {
  display: grid !important;
  gap: 6px !important;
}

#mock .mock-progress-line span,
#mock .mock-progress-line strong {
  color: var(--mock-ink) !important;
  font-weight: 900 !important;
}

#mock .mock-progress-line i {
  display: block !important;
  height: 7px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #ede9df !important;
}

#mock .mock-progress-line b {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--mock-ink), var(--mock-gold)) !important;
}

#mock .mock-status-stats {
  gap: 8px !important;
}

#mock .mock-status-stats article {
  min-height: 64px !important;
  border: 1px solid var(--mock-line) !important;
  border-radius: 14px !important;
  background: #f8f8f9 !important;
}

#mock .mock-report-panel,
#mock .mock-tip-card {
  padding: 22px !important;
}

#mock .mock-latest-empty,
#mock .mock-tip-card {
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, #fff8e8, #fffdf8) !important;
}

#mock .mock-tip-card span {
  color: var(--mock-ink) !important;
}

#mock .mock-tip-card p,
#mock .mock-latest-empty p {
  color: var(--mock-muted) !important;
}

@media (max-width: 1180px) {
  #mock .mock-center-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #mock .mock-right-column {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
}

@media (max-width: 760px) {
  #mock {
    padding: 10px 0 110px !important;
  }

  #mock .mock-page-head {
    min-height: auto !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }

  #mock .mock-page-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  #mock .mock-center-layout,
  #mock .mock-main-column,
  #mock .mock-right-column {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #mock .mock-paper-workbench,
  #mock .mock-flow-panel,
  #mock .mock-status-card,
  #mock .mock-report-panel,
  #mock .mock-tip-card {
    border-radius: 20px !important;
  }

  #mock .mock-paper-toolbar {
    grid-template-columns: 1fr !important;
  }

  #mock .mock-paper-card {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    min-height: auto !important;
    padding: 18px 14px 14px !important;
  }

  #mock .mock-paper-meta,
  #mock .mock-paper-card > i {
    grid-column: 2 !important;
  }

  #mock .mock-paper-card > i {
    justify-self: start !important;
    width: auto !important;
  }

  #mock .mock-paper-detail {
    grid-template-columns: 1fr !important;
  }

  #mock .mock-ai-card-copy {
    grid-template-columns: 1fr !important;
  }

  #mock .mock-ai-card-copy img {
    display: none !important;
  }

  #mock .mock-flow-panel .mock-task-list {
    grid-template-columns: 1fr !important;
  }

  #mock .mock-status-ring {
    width: 148px !important;
    height: 148px !important;
  }
}

#mock .mock-page-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

#mock .mock-page-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  max-width: 620px !important;
}

#mock .mock-page-actions button {
  min-width: 112px !important;
  padding-inline: 18px !important;
}

#mock .mock-paper-workbench {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
}

#mock .mock-paper-list {
  grid-template-columns: 1fr !important;
}

#mock .mock-paper-card {
  align-items: center !important;
}

#mock .mock-paper-copy {
  min-width: 0 !important;
}

#mock .mock-paper-copy p {
  max-width: 760px !important;
}

#mock .mock-paper-meta {
  display: grid !important;
  justify-items: start !important;
  align-content: center !important;
  min-width: 0 !important;
}

#mock .mock-paper-detail {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
}

#mock .mock-paper-focus {
  display: grid !important;
  gap: 9px !important;
  min-width: min(100%, 360px) !important;
}

#mock .mock-paper-focus > span {
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

#mock .mock-paper-focus > div,
#mock .mock-task-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

#mock .mock-paper-focus i,
#mock .mock-task-pills span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(224, 226, 230, 0.92) !important;
  border-radius: 999px !important;
  color: #111827 !important;
  background: #fff !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

#mock .mock-paper-focus b,
#mock .mock-task-pills b {
  display: grid !important;
  min-width: 18px !important;
  height: 18px !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #8a5a00 !important;
  background: #fff3d1 !important;
  font-size: 11px !important;
}

#mock .mock-status-card {
  display: grid !important;
  gap: 18px !important;
}

#mock .mock-today-brief {
  display: grid !important;
  gap: 10px !important;
  padding: 14px !important;
  border: 1px solid rgba(224, 226, 230, 0.82) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #fffaf0, #fff) !important;
}

#mock .mock-today-brief > div:first-child {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

#mock .mock-today-brief span {
  color: #69717a !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#mock .mock-today-brief strong {
  color: #050607 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

#mock .mock-flow-panel .mock-task-list {
  align-items: stretch !important;
}

#mock .mock-flow-panel .mock-task {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 10px 12px !important;
}

#mock .mock-flow-panel .mock-task > span:last-child {
  grid-column: 1 / -1 !important;
  justify-self: start !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: #6b4a00 !important;
  background: #fff4d6 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

@media (min-width: 1181px) {
  #mock .mock-paper-card {
    grid-template-columns: 44px minmax(0, 1fr) minmax(86px, auto) minmax(86px, auto) !important;
  }

  #mock .mock-paper-card > i {
    justify-self: end !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  #mock .mock-right-column {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  #mock .mock-tip-card {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  #mock .mock-page-head {
    grid-template-columns: 1fr !important;
  }

  #mock .mock-page-actions {
    display: grid !important;
    max-width: none !important;
  }

  #mock .mock-paper-card {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #mock .mock-paper-meta {
    display: none !important;
  }

  #mock .mock-paper-copy strong {
    font-size: 18px !important;
  }

  #mock .mock-paper-detail {
    grid-template-columns: 1fr !important;
    margin-inline: 14px !important;
  }

  #mock .mock-today-brief > div:first-child {
    display: grid !important;
  }
}

#profile {
  color: #1d1d1f;
}

.profile-page-hero {
  margin-bottom: 18px;
}

.profile-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 0%, rgba(246, 193, 59, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.06);
}

.profile-hero-main {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.profile-hero-main img {
  width: 64px;
  height: 64px;
  padding: 8px;
  border-radius: 20px;
  background: #1d1d1f;
  object-fit: contain;
}

.profile-hero-main span,
.profile-membership-head span {
  color: #8e8e93;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
}

.profile-hero-main h2 {
  margin: 4px 0 4px;
  color: #1d1d1f;
  font-size: clamp(30px, 2.2vw, 42px);
  font-weight: 950;
  line-height: 1.08;
}

.profile-hero-main p {
  margin: 0;
  color: #6e6e73;
  font-size: 14px;
  font-weight: 650;
}

.profile-hero-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.profile-tabs {
  margin-bottom: 18px;
  padding: 6px;
  border: 1px solid rgba(229, 229, 234, 0.86);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.035);
}

.profile-tabs button {
  border-radius: 999px;
  font-weight: 850;
}

.profile-summary {
  grid-template-columns: minmax(360px, 1.7fr) repeat(3, minmax(160px, 0.75fr));
  align-items: stretch;
  gap: 14px;
}

.profile-membership-card,
.profile-summary-card,
#profile .panel,
.skill-progress-card,
.next-step-list article {
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.055) !important;
}

.profile-membership-card {
  display: grid;
  gap: 18px;
  min-height: 186px;
  padding: 22px;
  cursor: pointer;
}

.profile-membership-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.profile-membership-head strong {
  display: block;
  margin-top: 5px;
  color: #1d1d1f;
  font-size: 30px;
  font-weight: 950;
  line-height: 1.08;
}

.profile-membership-head small {
  display: block;
  margin-top: 6px;
  color: #6e6e73;
  font-size: 13px;
  font-weight: 700;
}

.profile-membership-head b {
  min-width: 58px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #1d1d1f;
  background: #f6c13b;
  text-align: center;
  font-size: 13px;
  font-weight: 950;
}

.profile-member-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e5ea;
}

.profile-member-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1d1d1f;
}

.profile-member-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.profile-member-benefits span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border-radius: 16px;
  background: #f5f5f7;
}

.profile-member-benefits small {
  color: #8e8e93;
  font-size: 11px;
  font-weight: 800;
}

.profile-member-benefits strong {
  overflow: hidden;
  color: #1d1d1f;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-member-actions {
  display: flex;
  gap: 10px;
}

.profile-summary-card {
  min-height: 186px;
  padding: 22px;
  align-content: space-between;
}

.profile-summary-card strong {
  color: #1d1d1f;
  font-size: clamp(30px, 2vw, 38px);
  font-weight: 950;
}

.profile-summary-card span,
.profile-summary-card small {
  color: #6e6e73 !important;
  font-weight: 750;
}

#profile .profile-insight-grid,
#profile .content-grid {
  gap: 18px;
}

#profile .panel {
  padding: 24px;
}

#profile .panel h2 {
  color: #1d1d1f;
  font-size: 24px;
  font-weight: 950;
}

.skill-progress-card,
.next-step-list article {
  padding: 16px;
}

.next-step-list article {
  background: rgba(255, 255, 255, 0.94) !important;
}

.today-practice-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin: 18px 0 0;
}

.today-practice-card {
  min-height: 92px;
  align-content: center;
}

.today-practice-card.simple-count {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
}

.today-practice-card.simple-count strong {
  margin: 0;
  color: #1d1d1f;
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

#profile {
  --profile-accent: #009c6b;
  --profile-accent-soft: rgba(0, 156, 107, 0.1);
  --profile-ink: #111316;
  --profile-muted: #667085;
  --profile-line: #e3e6ea;
  --profile-card: #fff;
  --profile-soft: #f6f7f9;
  color: var(--profile-ink) !important;
}

#profile .profile-hero-card {
  border: 1px solid var(--profile-line) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 250, 0.94)),
    var(--profile-card) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06) !important;
}

#profile .profile-hero-main img {
  background: #111316 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12) !important;
}

#profile .profile-hero-main span,
#profile .profile-membership-head span,
#profile .profile-section-head span,
#profile .panel > span,
#profile .panel > small {
  color: var(--profile-muted) !important;
  letter-spacing: 0 !important;
}

#profile .profile-hero-main h2,
#profile .profile-section-head h3,
#profile .panel h2,
#profile .profile-summary-card strong,
#profile .profile-membership-mini strong,
#profile .profile-today-head strong,
#profile .profile-membership-head strong {
  color: var(--profile-ink) !important;
}

#profile .primary-btn {
  border-color: #111316 !important;
  background: #111316 !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(17, 19, 22, 0.14) !important;
}

#profile .primary-btn:hover {
  background: #24272b !important;
}

#profile .ghost-btn,
#profile .profile-tabs button {
  border: 1px solid var(--profile-line) !important;
  background: #fff !important;
  color: var(--profile-ink) !important;
  box-shadow: none !important;
}

#profile .ghost-btn:hover,
#profile .profile-tabs button:hover {
  border-color: rgba(0, 156, 107, 0.28) !important;
  background: #f8fbfa !important;
}

#profile .profile-tabs {
  width: fit-content !important;
  max-width: 100% !important;
  border: 1px solid var(--profile-line) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.04) !important;
}

#profile .profile-tabs button.active,
#profile .profile-tabs button[aria-selected="true"] {
  border-color: #111316 !important;
  background: #111316 !important;
  color: #fff !important;
}

#profile .profile-today-card,
#profile .profile-summary-card,
#profile .profile-membership-mini,
#profile .profile-daily-panel,
#profile .profile-recent-panel,
#profile .panel,
#profile .teacher-note-card,
#profile .profile-box,
#profile .next-step-list article,
#profile .profile-type-grid article,
#profile .profile-recent-list button {
  border: 1px solid var(--profile-line) !important;
  background: var(--profile-card) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.045) !important;
}

#profile .profile-today-card {
  background:
    linear-gradient(135deg, #fff 0%, #fff 68%, rgba(0, 156, 107, 0.055) 100%) !important;
}

#profile .profile-today-head > b {
  color: var(--profile-ink) !important;
  background:
    radial-gradient(circle at center, #fff 58%, transparent 59%),
    conic-gradient(var(--profile-accent) var(--profile-progress, 0deg), #edf0f2 0) !important;
  box-shadow: 0 12px 28px rgba(0, 156, 107, 0.14) !important;
}

#profile .profile-today-bar,
#profile .profile-member-bar,
#profile .radar-item i,
#profile .learning-bars i {
  background: #edf0f2 !important;
}

#profile .profile-today-bar i,
#profile .profile-member-bar i,
#profile .radar-item b,
#profile .learning-bars b {
  background: linear-gradient(90deg, #111316, var(--profile-accent)) !important;
}

#profile .profile-today-types span,
#profile .profile-member-benefits span,
#profile .profile-box,
#profile .teacher-review-history span {
  border: 1px solid #edf0f2 !important;
  background: var(--profile-soft) !important;
}

#profile .profile-today-types b,
#profile .profile-type-grid article strong,
#profile .profile-recent-list button b,
#profile .radar-item strong {
  color: var(--profile-ink) !important;
}

#profile .profile-today-types strong,
#profile .profile-summary-card span,
#profile .profile-summary-card small,
#profile .profile-membership-mini small,
#profile .profile-type-grid article span,
#profile .profile-type-grid article small,
#profile .profile-recent-list button span,
#profile .profile-recent-list button small,
#profile .teacher-note-card p {
  color: var(--profile-muted) !important;
}

#profile .profile-membership-head b,
#profile .profile-today-types small {
  color: #007a55 !important;
  background: var(--profile-accent-soft) !important;
}

#profile .teacher-note-card {
  background: linear-gradient(180deg, #fff, #f8fffc) !important;
}

#profile .teacher-note-card .ghost-btn,
#profile .teacher-note-card button {
  border-color: var(--profile-line) !important;
  background: #fff !important;
  color: var(--profile-ink) !important;
}

.today-practice-card.simple-count b {
  padding: 8px 12px;
  border-radius: 999px;
  color: #1d1d1f;
  background: #f5f5f7;
  font-size: 18px;
  font-weight: 950;
  white-space: nowrap;
}

.today-practice-card.simple-count.empty {
  grid-template-columns: 1fr auto;
  grid-column: 1 / -1;
}

.today-history-table.is-compact-counts {
  display: none;
}

.today-history-table {
  overflow: hidden;
  border: 1px solid rgba(229, 229, 234, 0.86);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
}

.today-history-table [role="row"] {
  grid-template-columns: 110px 100px minmax(0, 1fr) 80px 110px;
}

.today-empty-row span:first-child {
  font-weight: 900;
}

.mobile-primary-dock {
  display: none;
}

@media (max-width: 980px) {
  .mobile-primary-dock {
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 190;
    display: block;
    width: min(366px, calc(100vw - 24px));
    height: 72px;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .mobile-primary-ai,
  .mobile-primary-tabbar {
    pointer-events: auto;
  }

  .mobile-primary-ai {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 72px;
    height: 72px;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.94);
    border-radius: 50%;
    color: #253244;
    background: rgba(255, 254, 250, 0.76);
    box-shadow: 0 14px 24px -10px rgba(32, 52, 61, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(22px) saturate(1.24);
    -webkit-backdrop-filter: blur(22px) saturate(1.24);
    transition: transform 180ms ease, box-shadow 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-primary-ai:active {
    transform: scale(0.965);
    box-shadow: 0 10px 18px -10px rgba(32, 52, 61, 0.24), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  }

  .mobile-primary-ai-avatar {
    position: absolute;
    left: 9px;
    top: 7px;
    width: 54px;
    height: 54px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.94);
    border-radius: 50%;
    background: #ffd34e;
    box-shadow: 0 8px 14px -10px rgba(21, 32, 51, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .mobile-primary-ai-avatar :is(img, video) {
    position: absolute;
    left: -19.44%;
    top: -11.11%;
    display: block;
    width: 138.89%;
    height: 138.89%;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }

  .mobile-primary-ai-avatar video {
    opacity: 0;
    transition: opacity 180ms ease;
  }

  .mobile-primary-ai > b {
    position: absolute;
    left: 19px;
    top: 55px;
    width: 34px;
    height: 18px;
    border-radius: 9px;
    color: #fff;
    background: #17a88f;
    font-size: 10.5px;
    font-weight: 780;
    line-height: 18px;
    text-align: center;
  }

  .mobile-primary-ai > i {
    position: absolute;
    left: 59px;
    top: 1px;
    width: 9px;
    height: 9px;
    border: 1.5px solid rgba(255, 255, 255, 0.96);
    border-radius: 50%;
    background: #32c68d;
    box-shadow: 0 3px 7px rgba(21, 153, 103, 0.26);
  }

  .mobile-primary-tabbar {
    position: absolute;
    left: 72px;
    right: 0;
    bottom: 2px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 5px;
    height: 68px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 31px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.32));
    box-shadow: 0 18px 28px -18px rgba(21, 32, 51, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(22px) saturate(1.28);
    -webkit-backdrop-filter: blur(22px) saturate(1.28);
  }

  .mobile-primary-tab {
    display: flex;
    min-width: 0;
    height: 52px;
    margin: 0;
    padding: 4px 6px 3px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid transparent;
    border-radius: 25px;
    color: #778292;
    background: transparent;
    font-size: 10.5px;
    font-weight: 670;
    line-height: 14px;
    transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-primary-tab img {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    opacity: 0.68;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .mobile-primary-tab.active {
    color: #1d2735;
    background: rgba(255, 255, 255, 0.56);
    border-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 11px 20px -15px rgba(21, 32, 51, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  .mobile-primary-tab.active img {
    opacity: 1;
    transform: translateY(-1px) scale(1.05);
  }

  .mobile-primary-tab:active {
    transform: scale(0.96);
  }

  body.view-agent > .mobile-primary-dock,
  body.view-practice.practice-answer-detail-active > .mobile-primary-dock,
  body.practice-mobile-report-page > .mobile-primary-dock {
    display: none;
  }

  body:not(.view-agent) {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 1180px) {
  .profile-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .profile-hero-card,
  .profile-hero-actions {
    grid-template-columns: 1fr;
  }

  .profile-hero-actions,
  .profile-member-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .profile-summary,
  #profile .profile-insight-grid,
  #profile .content-grid,
  .profile-member-benefits,
  .skill-progress-grid {
    grid-template-columns: 1fr;
  }
}

body {
  background: #f5f5f7;
}

.app-shell,
.main,
.view#dashboard,
.home-v2 {
  background: #f5f5f7;
}

.home-v2-desktop-trial {
  background: transparent;
}

@media (max-width: 980px) {
  .topbar {
    display: none !important;
  }
}

.home-v2 .home-v2-welcome {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  align-items: center;
  min-height: 226px;
  padding: clamp(22px, 2.3vw, 34px) clamp(26px, 3vw, 44px);
  border-color: rgba(238, 214, 160, 0.82);
}

.home-v2 .home-v2-welcome-copy {
  justify-content: flex-start;
  gap: clamp(22px, 2.2vw, 34px);
  text-align: left;
}

.home-v2 .home-v2-welcome-copy img {
  width: clamp(112px, 8vw, 142px);
  height: clamp(112px, 8vw, 142px);
}

.home-v2 .home-v2-pill {
  width: fit-content;
  color: #7a5600;
  background: rgba(255, 246, 220, 0.96);
}

.home-v2 .home-v2-pill b {
  color: #241b18;
}

.home-v2 .home-v2-welcome h2 {
  max-width: 720px;
  margin: 12px 0 6px;
  font-size: clamp(34px, 2.45vw, 48px);
  line-height: 1.08;
  font-weight: 950;
}

.home-v2 .home-v2-welcome p {
  font-size: clamp(15px, 0.3vw + 13px, 18px);
}

.home-v2 .home-v2-target {
  justify-self: stretch;
  gap: 10px;
  min-height: 164px;
  padding: 18px 20px;
  border-color: rgba(234, 223, 202, 0.68);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 18px 38px rgba(82, 55, 20, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.home-v2 .home-v2-target strong {
  font-size: clamp(34px, 2vw, 44px);
}

.home-v2-target-score {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 8px;
  align-items: end;
  width: fit-content;
}

.home-v2-target-score em {
  margin-bottom: 4px;
  color: #756a5e;
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
}

.home-v2 .home-v2-metrics {
  grid-template-columns: repeat(4, minmax(210px, 1fr));
}

.home-v2-metrics > .home-v2-progress-card,
.home-v2-metrics > .home-v2-streak,
.home-v2-metrics > .home-v2-score-card,
.home-v2-metrics > .home-v2-trend {
  min-height: clamp(158px, 9.4vw, 174px);
  padding: clamp(16px, 1.2vw, 20px);
  border-color: rgba(221, 205, 170, 0.58);
}

.home-v2-metrics > .home-v2-progress-card,
.home-v2-metrics > .home-v2-score-card {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.home-v2-metrics > .home-v2-progress-card > span,
.home-v2-metrics > .home-v2-score-card > span {
  align-self: stretch;
  text-align: left;
}

.home-v2-progress-card .home-v2-ring,
.home-v2-score-card .home-v2-gauge {
  margin-left: auto;
  margin-right: auto;
}

.home-v2-metrics > .home-v2-progress-card > button {
  margin-left: auto;
  margin-right: auto;
}

.home-v2-metrics > .home-v2-weak {
  display: none !important;
}

.home-v2-card strong,
.home-v2-card p,
.home-v2-card small,
.home-v2-card span {
  overflow-wrap: anywhere;
}

.home-v2-trend {
  display: grid;
  align-content: space-between;
  gap: 10px;
}

.home-v2-trend .home-v2-line {
  width: 100%;
  max-height: 72px;
}

.home-v2-modal > div {
  width: min(520px, calc(100vw - 32px));
  gap: 16px;
}

.home-v2-modal h3 {
  margin-bottom: 2px;
}

.home-v2-range-label {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.home-v2-range-label input {
  grid-column: 1 / -1;
  padding: 0;
  accent-color: #1fc9a9;
}

.home-v2-range-label output {
  min-width: 44px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #078f78;
  background: #eafff8;
  text-align: center;
  font-weight: 950;
}

.user-profile-editor .consult-dialog { width: min(520px, calc(100vw - 32px)); padding: 30px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 30px; background: radial-gradient(circle at 18% 0%, rgba(255, 220, 85, 0.34), transparent 36%), linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 250, 230, 0.84)); box-shadow: 0 28px 70px rgba(74, 55, 12, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.user-profile-editor .consult-dialog .eyebrow { display: inline-flex; width: fit-content; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; color: #9a6a00; background: rgba(255, 211, 64, 0.22); font-size: 12px; font-weight: 950; letter-spacing: 0; }
.user-profile-editor .consult-dialog h2 { margin: 0; color: #101722; font-size: 34px; line-height: 1.08; letter-spacing: 0; }
.user-editor-subtitle { margin: 10px 0 0; color: #5f6876; font-size: 15px; font-weight: 760; line-height: 1.55; }
.user-editor-avatar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 22px; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 24px; background: rgba(255, 255, 255, 0.58); box-shadow: 0 18px 42px rgba(105, 74, 12, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.88); }
.user-editor-avatar img { width: 82px; height: 82px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #ffd53d, #ffb300); box-shadow: 0 16px 32px rgba(82, 55, 20, 0.16), 0 0 0 6px rgba(255, 210, 48, 0.16); }
.user-editor-avatar-copy strong { display: block; color: #141923; font-size: 18px; font-weight: 950; }
.user-editor-avatar-copy p { margin: 5px 0 12px; color: #68717c; font-size: 13px; font-weight: 760; line-height: 1.45; }
.user-editor-avatar label { margin: 0; color: #20170b; font-weight: 950; }
.user-profile-editor .user-editor-upload-control { position: relative; display: inline-flex; min-height: 38px; width: fit-content; align-items: center; justify-content: center; padding: 0 16px; border: 0; border-radius: 999px; color: #8a5b00; background: rgba(255, 210, 48, 0.22); font-size: 13px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82); cursor: pointer; }
.user-editor-avatar input { position: absolute; inset: 0; width: 100%; min-height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.user-editor-fields { display: grid; gap: 12px; margin-top: 18px; }
.user-profile-editor .consult-dialog label.user-editor-field { gap: 8px; margin: 0; color: #665f56; }
.user-profile-editor .consult-dialog label.user-editor-field span { font-size: 13px; font-weight: 920; }
.user-profile-editor .consult-dialog input { min-height: 54px; padding: 0 16px; border: 1px solid rgba(222, 199, 150, 0.76); border-radius: 18px; background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); font-size: 17px; font-weight: 850; }
.user-editor-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.user-editor-actions .ghost-btn, .user-editor-actions .primary-btn { min-height: 46px; border-radius: 16px; font-weight: 950; }
.user-editor-actions [data-user-logout] { color: #8a5b00; background: rgba(255, 255, 255, 0.62); }
.user-editor-actions .primary-btn { border-color: transparent; color: #fff; background: linear-gradient(135deg, #d49a00, #b87800); box-shadow: 0 14px 28px rgba(184, 120, 0, 0.22); }
@media (max-width: 560px) { .user-profile-editor .consult-dialog { padding: 24px; border-radius: 26px; } .user-editor-avatar { grid-template-columns: 1fr; justify-items: center; text-align: center; } .user-editor-actions { display: grid; grid-template-columns: 1fr; } }

@media (max-width: 1320px) {
  .home-v2 .home-v2-welcome {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-v2 .home-v2-target {
    width: min(560px, 100%);
    justify-self: start;
  }

  .home-v2 .home-v2-metrics {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

.home-v2 .home-v2-progress-card .home-v2-ring strong,
.home-v2 .home-v2-score-card .home-v2-gauge strong {
  font-size: clamp(22px, 0.45vw + 17px, 28px) !important;
}

.home-v2 .home-v2-progress-card .home-v2-ring {
  width: clamp(68px, 4.2vw, 78px);
  height: clamp(68px, 4.2vw, 78px);
}

.home-v2 .home-v2-score-card .home-v2-gauge {
  width: clamp(86px, 5vw, 100px);
  height: clamp(50px, 3vw, 58px);
}

.audio-prompt:empty,
.question-image-panel.is-hidden,
.answer-hint-bar:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.home-v2 .home-v2-progress-card .home-v2-ring {
  width: clamp(82px, 4.9vw, 96px);
  height: clamp(82px, 4.9vw, 96px);
}

.home-v2 .home-v2-score-card .home-v2-gauge {
  width: clamp(108px, 6vw, 124px);
  height: clamp(62px, 3.45vw, 72px);
}

.home-v2 .home-v2-progress-card .home-v2-ring strong,
.home-v2 .home-v2-score-card .home-v2-gauge strong {
  font-size: clamp(23px, 0.52vw + 18px, 30px) !important;
  line-height: 1 !important;
}

.home-v2-desktop-trial,
.home-v2-mobile-trial {
  display: none;
}

.home-v2-desktop-trial {
  --web-radius: 28px;
  --web-card: #fff;
  --web-ink: #1d1d1f;
  --web-muted: #6e6e73;
  --web-line: #e5e5ea;
  --web-yellow: #f6c13b;
}

.home-v2 > :not(.home-v2-desktop-trial):not(.home-v2-mobile-trial):not(.home-v2-modal) {
  display: none !important;
}

.home-v2-desktop-trial {
  display: grid;
  gap: 22px;
  width: 100%;
}

.home-web-hero,
.home-web-card,
.home-web-metric {
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--web-radius);
  background: var(--web-card);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.07);
}

.home-web-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 410px);
  gap: 24px;
  min-height: 286px;
  padding: 26px;
}

.home-web-hero-copy {
  display: grid;
  align-content: center;
  min-width: 0;
}

.home-web-hero-copy h2 {
  max-width: 520px;
  margin: 0;
  color: var(--web-ink);
  font-size: clamp(38px, 3vw, 50px);
  font-weight: 850;
  line-height: 1.04;
  letter-spacing: 0;
}

.home-web-hero-copy p {
  max-width: 540px;
  margin: 22px 0 0;
  color: var(--web-muted);
  font-size: 15px;
  line-height: 1.5;
}

.home-web-hero-copy > div {
  display: flex;
  gap: 14px;
  margin-top: 36px;
}

.home-web-primary,
.home-web-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}

.home-web-primary {
  border: 1px solid #1d1d1f;
  color: #fff;
  background: #1d1d1f;
}

.home-web-secondary {
  border: 1px solid var(--web-line);
  color: var(--web-ink);
  background: #fff;
}

.home-web-primary svg,
.home-web-secondary svg {
  width: 17px;
  height: 17px;
}

.home-web-goal {
  position: relative;
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--web-line);
  border-radius: 24px;
  background: #fbfbfd;
  text-align: left;
}

.home-web-goal > span {
  color: var(--web-ink);
  font-size: 16px;
  font-weight: 850;
}

.home-web-goal-main {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 76px;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.home-web-goal-main strong {
  color: var(--web-ink);
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
}

.home-web-goal-main em {
  display: block;
  color: #6e6e73;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.home-web-goal-main i {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fbfbfd 0 48%, transparent 49%),
    conic-gradient(#16b985 var(--goal-progress, 0deg), var(--web-line) 0);
  font-style: normal;
}

.home-web-goal-main i b {
  color: var(--web-ink);
  font-size: 18px;
}

.home-web-goal-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.home-web-goal-stats small {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid var(--web-line);
  border-radius: 18px;
  color: var(--web-muted);
  background: #fff;
  font-size: 12px;
}

.home-web-goal-stats b {
  color: var(--web-ink);
  font-size: 22px;
  line-height: 1;
}

.home-web-goal p {
  margin: 18px 0 0;
  color: #8e8e93;
  font-size: 13px;
}

.home-web-hero {
  grid-template-columns: minmax(0, 1.08fr) clamp(210px, 20vw, 290px) minmax(320px, 410px);
  align-items: center;
}

.home-frame-greeting {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 224px;
  place-items: center;
  overflow: visible;
  isolation: isolate;
  cursor: pointer;
}

.home-frame-greeting::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: -1;
  width: 48%;
  height: 16%;
  border-radius: 999px;
  background: rgba(18, 20, 24, 0.13);
  filter: blur(16px);
  transform: translateX(-50%);
  opacity: 0.72;
}

.home-frame-greeting img {
  width: min(100%, 212px);
  max-height: 248px;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(14, 17, 23, 0.12));
  transform: translateY(0) scale(1);
  transition: transform 220ms ease, filter 220ms ease;
}

.home-frame-greeting:is(:hover, .is-playing) img {
  transform: translateY(-3px) scale(1.015);
  filter: drop-shadow(0 22px 28px rgba(14, 17, 23, 0.16));
}

@media (max-width: 1260px) {
  .home-web-hero {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  }

  .home-frame-greeting {
    grid-column: 1 / -1;
    min-height: 204px;
  }
}

@media (max-width: 860px) {
  .home-web-hero {
    grid-template-columns: 1fr;
  }

  .home-frame-greeting {
    min-height: 178px;
  }

  .home-frame-greeting img {
    width: min(62vw, 200px);
  }
}

.home-web-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.home-web-metric {
  display: grid;
  min-height: 126px;
  padding: 20px 20px;
  border-radius: 24px;
}

.home-web-metric span {
  color: var(--web-muted);
  font-size: 13px;
  font-weight: 800;
}

.home-web-metric strong {
  margin-top: 6px;
  color: var(--web-ink);
  font-size: 30px;
  font-weight: 900;
  line-height: 38px;
  white-space: nowrap;
}

.home-web-metric p {
  margin: 8px 0 0;
  color: #8e8e93;
  font-size: 13px;
}

.home-web-metric i {
  display: block;
  width: 54px;
  height: 3px;
  margin-top: auto;
  border-radius: 999px;
  background: var(--accent);
}

.home-web-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  grid-template-areas:
    "path overview"
    "other quick"
    "forum forum";
  gap: 22px;
  align-items: start;
}

.home-web-card {
  padding: 24px 26px;
}

.home-web-path {
  grid-area: path;
}

.home-web-other {
  grid-area: other;
}

.home-web-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.home-web-head h3,
.home-web-card h3 {
  margin: 0;
  color: var(--web-ink);
  font-size: 26px;
  font-weight: 850;
  line-height: 1.2;
}

.home-web-head p {
  margin: 6px 0 0;
  color: var(--web-muted);
  font-size: 14px;
}

.home-web-head > span {
  display: grid;
  min-width: 80px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--web-line);
  border-radius: 999px;
  color: var(--web-muted);
  background: #fbfbfd;
  font-size: 13px;
  font-weight: 800;
}

.home-web-task-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.home-web-task {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  grid-template-rows: 1fr;
  gap: 0 14px;
  align-items: center;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid var(--web-line);
  border-radius: 20px;
  background: #fbfbfd;
  text-align: left;
}

.home-web-task.active {
  border-color: var(--web-line);
  background: #fbfbfd;
}

.home-web-task > span {
  display: grid;
  grid-row: 1;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--web-line);
  border-radius: 16px;
  color: var(--web-muted);
  background: #fff;
}

.home-web-task b {
  grid-column: 2;
  align-self: center;
  color: var(--web-ink);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.1;
}

.home-web-task small {
  display: none;
}

.home-web-task em {
  display: grid;
  grid-column: 3;
  grid-row: 1;
  place-items: center;
  color: #007aff;
  font-style: normal;
}

.home-web-task.active em {
  color: #007aff;
}

.home-web-overview {
  grid-area: overview;
}

.home-web-chart {
  margin: 22px 0 18px;
}

.home-web-chart .home-v2-multi {
  display: block;
  width: 100%;
  height: 150px;
}

.home-web-chart .home-v2-multi .home-chart-grid path {
  stroke: rgba(60, 60, 67, 0.1);
  stroke-width: 1;
}

.home-web-chart .home-v2-multi .home-chart-series path {
  fill: none;
  stroke: var(--line);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-web-chart .home-v2-multi .home-chart-point {
  fill: var(--line);
  stroke: #fff;
  stroke-width: 2;
}

.home-web-weak-list {
  display: grid;
  gap: 12px;
}

.home-web-weak-list button {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 46px;
  grid-template-rows: 16px 14px;
  align-items: center;
  gap: 2px 14px;
  min-height: 34px;
  border: 0;
  background: transparent;
  text-align: left;
}

.home-web-weak-list strong {
  grid-row: 1;
  color: var(--web-ink);
  font-size: 14px;
  font-weight: 850;
}

.home-web-weak-list small {
  grid-row: 2;
  color: var(--web-muted);
  font-size: 12px;
}

.home-web-weak-list i {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--web-line);
}

.home-web-weak-list i em {
  display: block;
  width: var(--rate);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.home-web-weak-list b {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--accent);
  font-size: 16px;
  text-align: right;
  white-space: nowrap;
}

.home-web-other > div,
.home-web-quick > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.home-web-other button,
.home-web-quick button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 20px;
  background: #fbfbfd;
  text-align: left;
  box-shadow: 0 16px 34px rgba(0,0,0,.045);
}

.home-web-other span,
.home-web-quick span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--web-line);
  border-radius: 16px;
  color: var(--web-muted);
  background: #fff;
}

.home-web-other strong,
.home-web-quick strong {
  color: var(--web-ink);
  font-size: 15px;
  min-width: 0;
}

.home-web-other em,
.home-web-quick em {
  display: grid;
  place-items: center;
  color: #8e8e93;
  font-style: normal;
}

.home-web-quick {
  grid-area: quick;
}

.home-web-forum {
  grid-area: forum;
}

.home-web-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 16px;
  align-items: center;
  min-height: 74px;
  margin-top: 28px;
  padding: 14px 18px;
  border: 1px solid var(--web-line);
  border-radius: 22px;
  background: #fbfbfd;
}

.home-web-compose span {
  color: #8e8e93;
  font-size: 15px;
  line-height: 1.45;
}

.home-web-compose button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #1d1d1f;
  font-weight: 850;
}

.home-web-posts {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.home-web-posts button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 7px 14px;
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid var(--web-line);
  border-radius: 18px;
  background: #fff;
  text-align: left;
}

.home-web-posts strong {
  color: var(--web-ink);
  font-size: 15px;
  line-height: 1.35;
}

.home-web-posts small {
  color: var(--web-muted);
  font-size: 13px;
  line-height: 1.35;
}

.home-web-posts em {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  color: #8e8e93;
  font-style: normal;
}

.home-v2-desktop-trial :is(button, .home-web-card, .home-web-metric, .home-web-goal),
.home-v2-mobile-trial :is(button, .home-mobile-hero, .home-mobile-section, .home-mobile-metric) {
  transition:
    transform .28s cubic-bezier(.2, .8, .2, 1),
    box-shadow .28s cubic-bezier(.2, .8, .2, 1),
    border-color .28s ease,
    background-color .28s ease;
}

.home-v2-desktop-trial,
.home-v2-mobile-trial {
  animation: none;
}

@keyframes homeSurfaceIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (hover: hover) {
  .home-v2-desktop-trial :is(.home-web-primary, .home-web-secondary, .home-web-goal, .home-web-task, .home-web-other button, .home-web-quick button, .home-web-posts button):hover,
  .home-v2-mobile-trial :is(.home-mobile-primary, .home-mobile-task, .home-mobile-quick button):hover {
    transform: translateY(-2px);
  }

  .home-v2-desktop-trial :is(.home-web-card, .home-web-metric, .home-web-hero):hover,
  .home-v2-mobile-trial :is(.home-mobile-hero, .home-mobile-section, .home-mobile-metric):hover {
    box-shadow: 0 28px 64px rgba(0, 0, 0, .09);
  }
}

.home-v2-desktop-trial button:active,
.home-v2-mobile-trial button:active {
  transform: scale(.985);
}

@media (max-width: 980px) {
  .home-v2-desktop-trial {
    display: none !important;
  }

  .main {
    background: #f5f5f7;
  }

  .view#dashboard {
    padding: 0;
  }

  .home-v2 {
    --mobile-page-x: 16px;
    --mobile-card-radius: 28px;
    width: 100%;
    padding: 18px clamp(14px, 4vw, 22px) 80px;
    background: #f5f5f7;
    color: #1d1d1f;
  }

  .home-v2-mobile-trial {
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: min(430px, calc(100vw - 28px));
    margin: 0 auto;
  }

  .home-mobile-hero,
  .home-mobile-section,
  .home-mobile-metric {
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: #fff;
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.075);
  }

  .home-mobile-hero {
    position: relative;
    min-height: 268px;
    padding: 56px clamp(18px, 5vw, 24px) 20px;
    overflow: hidden;
    border-radius: var(--mobile-card-radius);
  }

  .home-mobile-hero h2 {
    max-width: 100%;
    margin: 0;
    color: #1d1d1f;
    font-size: 29px;
    font-weight: 850;
    line-height: 1.28;
    letter-spacing: 0;
  }

  .home-mobile-hero p {
    max-width: 100%;
    margin: 6px 0 0;
    color: #6e6e73;
    font-size: 14px;
    line-height: 1.35;
  }

  .home-mobile-primary {
    position: absolute;
    left: 20px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: clamp(148px, 46%, 184px);
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 999px;
    color: #fff;
    background: #1d1d1f;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
  }

  .home-mobile-primary svg {
    width: 17px;
    height: 17px;
  }

  .home-mobile-ring {
    position: absolute;
    right: 40px;
    bottom: 16px;
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border-radius: 50%;
    background:
      radial-gradient(circle at center, #fff 0 48%, transparent 49%),
      conic-gradient(#f6c13b var(--value), #e5e5ea 0);
  }

  .home-mobile-ring strong {
    color: #1d1d1f;
    font-size: 19px;
    font-weight: 850;
    line-height: 1;
  }

  @media (max-width: 420px) {
    .home-mobile-primary {
      width: clamp(150px, 50%, 176px);
      left: 18px;
      padding: 0 12px;
      font-size: 13.5px;
    }

    .home-mobile-ring {
      right: 28px;
    }
  }

  .home-mobile-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    width: 100%;
  }

  .home-mobile-metric {
    display: grid;
    align-content: start;
    width: 100%;
    min-width: 0;
    height: 116px;
    padding: 18px 16px;
    border-radius: 28px;
  }

  .home-mobile-metric span {
    color: #6e6e73;
    font-size: 13px;
    font-weight: 750;
    line-height: 17px;
  }

  .home-mobile-metric strong {
    margin-top: 14px;
    color: #1d1d1f;
    font-size: 28px;
    font-weight: 850;
    line-height: 34px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .home-mobile-metric i {
    display: block;
    width: 48px;
    height: 3px;
    margin-top: auto;
    border-radius: 999px;
    background: var(--accent);
  }

  .home-mobile-section {
    border-radius: var(--mobile-card-radius);
    padding: 20px;
  }

  .home-mobile-section h3,
  .home-mobile-section-head h3 {
    margin: 0;
    color: #1d1d1f;
    font-size: 25px;
    font-weight: 850;
    line-height: 34px;
    letter-spacing: 0;
  }

  .home-mobile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .home-mobile-section-head span {
    display: grid;
    min-width: 86px;
    height: 32px;
    place-items: center;
    border: 1px solid #f6c13b;
    border-radius: 999px;
    color: #7a5600;
    background: #fff8dc;
    font-size: 13px;
    font-weight: 850;
  }

  .home-mobile-path {
    min-height: 396px;
  }

  .home-mobile-task-list {
    display: grid;
    gap: 16px;
    margin-top: 30px;
  }

  .home-mobile-task {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    grid-template-rows: 1fr;
    column-gap: 14px;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid #e5e5ea;
    border-radius: 20px;
    background: #fbfbfd;
    color: #1d1d1f;
    text-align: left;
  }

  .home-mobile-task.active {
    border-color: #e5e5ea;
    background: #fbfbfd;
  }

  .home-mobile-task > span {
    display: grid;
    grid-row: 1;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #e5e5ea;
    border-radius: 14px;
    color: #6e6e73;
    background: #fff;
  }

  .home-mobile-task svg {
    width: 18px;
    height: 18px;
  }

  .home-mobile-task b {
    grid-column: 2;
    min-width: 0;
    align-self: center;
    color: #1d1d1f;
    font-size: 16px;
    font-weight: 850;
    line-height: 20px;
  }

  .home-mobile-task small {
    display: none;
  }

  .home-mobile-task em {
    display: grid;
    grid-column: 3;
    grid-row: 1;
    place-items: center;
    color: #007aff;
    font-style: normal;
  }

  .home-mobile-task.active em {
    color: #007aff;
  }

  .home-mobile-quick {
    min-height: 238px;
  }

  .home-mobile-quick > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    margin-top: 30px;
  }

  .home-mobile-quick button {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: 58px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    background: #fbfbfd;
    color: #1d1d1f;
    text-align: left;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.055);
  }

  .home-mobile-quick button span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #e5e5ea;
    border-radius: 14px;
    color: #6e6e73;
    background: #fff;
  }

  .home-mobile-quick button svg {
    width: 18px;
    height: 18px;
  }

  .home-mobile-quick button strong {
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 850;
    line-height: 18px;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .home-v2 {
    padding-inline: 16px;
  }
}

#practice:not(.practice-detail-mode) {
  width: 100%;
  max-width: none;
}

#practice:not(.practice-detail-mode) .practice-panel {
  min-width: 0;
}

#practice:not(.practice-detail-mode) .question-type-shell,
#practice:not(.practice-detail-mode) #questionTypeGrid,
#practice:not(.practice-detail-mode) .question-type-grid {
  width: 100%;
  min-width: 0;
}

#practice:not(.practice-detail-mode) .figma-type-grid-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}

#practice:not(.practice-detail-mode) .figma-type-grid-head h3 {
  margin: 0;
  color: #1d1d1f;
  font-size: clamp(24px, 1.7vw, 32px);
  font-weight: 850;
  line-height: 1.16;
  letter-spacing: 0;
}

#practice:not(.practice-detail-mode) .figma-type-grid-head p {
  margin: 8px 0 0;
  color: #6e6e73;
  font-size: 14px;
  line-height: 1.5;
}

#practice:not(.practice-detail-mode) .figma-type-grid-head span {
  display: inline-grid;
  min-width: 74px;
  height: 34px;
  place-items: center;
  padding: 0 14px;
  border: 1px solid rgba(246, 193, 59, 0.46);
  border-radius: 999px;
  background: rgba(255, 248, 220, 0.86);
  color: #7a5600;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

#practice:not(.practice-detail-mode) .figma-type-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

#practice:not(.practice-detail-mode) .figma-type-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto auto;
  gap: 4px 14px;
  align-content: start;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 158px;
  padding: 18px !important;
  overflow: hidden;
  border: 1px solid rgba(229, 229, 234, 0.92) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #1d1d1f !important;
  text-align: left;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.045) !important;
  transform: translateZ(0);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

#practice:not(.practice-detail-mode) .figma-type-card:hover {
  border-color: color-mix(in srgb, var(--type-color, #007aff) 36%, #e5e5ea) !important;
  background: #fff !important;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.07) !important;
  transform: translateY(-2px);
}

#practice:not(.practice-detail-mode) .figma-type-card::before,
#practice:not(.practice-detail-mode) .figma-type-card::after {
  display: none !important;
  content: none !important;
}

#practice:not(.practice-detail-mode) .figma-type-dot {
  display: grid !important;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--type-color, #007aff) 22%, #e5e5ea);
  border-radius: 15px;
  background: color-mix(in srgb, var(--type-color, #007aff) 10%, #fbfbfd);
  color: var(--type-color, #007aff) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1;
  white-space: nowrap;
}

#practice:not(.practice-detail-mode) .figma-type-skill {
  grid-column: 2;
  color: #6e6e73 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 18px !important;
}

#practice:not(.practice-detail-mode) .figma-type-card strong {
  grid-column: 2;
  min-width: 0;
  color: #1d1d1f !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  letter-spacing: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

#practice:not(.practice-detail-mode) .figma-type-card small {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 12px;
  padding: 0 !important;
  color: #6e6e73 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

#practice:not(.practice-detail-mode) .figma-type-card i {
  display: block !important;
  grid-column: 1 / -1;
  width: 100%;
  height: 4px !important;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e5ea !important;
}

#practice:not(.practice-detail-mode) .figma-type-card i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--type-color, #007aff) !important;
}

#practice:not(.practice-detail-mode) .figma-type-card b {
  grid-column: 1 / -1;
  margin-top: 6px;
  color: var(--type-color, #007aff) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 20px;
}

@media (min-width: 981px) {
  #practice:not(.practice-detail-mode) .practice-top-grid {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .practice-dashboard-layout {
    display: grid !important;
    grid-template-columns: minmax(224px, 260px) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start !important;
    width: 100%;
  }

  #practice:not(.practice-detail-mode) .practice-left-rail {
    position: sticky;
    top: 24px;
    display: grid !important;
    gap: 18px;
    min-width: 0;
  }

  #practice:not(.practice-detail-mode) .practice-data-card {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .practice-side-card {
    padding: 22px 20px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.06);
  }

  #practice:not(.practice-detail-mode) .practice-side-card h3 {
    margin: 0 0 18px;
    color: #1d1d1f;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  #practice:not(.practice-detail-mode) .practice-category-list {
    display: grid;
    gap: 12px;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid #e5e5ea;
    border-radius: 16px;
    background: #fbfbfd;
    color: #1d1d1f;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button.active {
    border-color: #f6c13b;
    background: #fff6d8;
  }

  #practice:not(.practice-detail-mode) .practice-panel {
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading {
    display: flex !important;
    min-height: 92px;
    margin: 0 0 22px;
    padding: 24px 28px;
    align-items: center;
    border: 1px solid rgba(246, 193, 59, 0.34);
    border-radius: 24px;
    background:
      radial-gradient(circle at 92% 0%, rgba(246, 193, 59, 0.2), transparent 38%),
      rgba(255, 255, 255, 0.9);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.055);
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading h2 {
    margin: 0;
    color: #1d1d1f;
    font-size: clamp(30px, 2.2vw, 42px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0;
  }

  #practice:not(.practice-detail-mode) .question-type-shell {
    display: block !important;
  }

  #practice:not(.practice-detail-mode) #skillMap {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .practice-workbench {
    width: 100%;
    min-width: 0;
  }

  #practice:not(.practice-detail-mode) .stage-list .practice-workbench {
    display: block !important;
  }

  #practice:not(.practice-detail-mode) .stage-list .question-browser {
    width: 100%;
    min-width: 0;
  }

  #practice:not(.practice-detail-mode) .stage-list .answer-stage,
  #practice:not(.practice-detail-mode) .stage-list .feedback-panel,
  #practice:not(.practice-detail-mode) .stage-list .workbench-resizer {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .stage-list .question-list {
    display: grid;
    gap: 10px;
  }

  #practice:not(.practice-detail-mode) .stage-list .compact-question-row,
  #practice:not(.practice-detail-mode) .stage-list .compact-question-row.selected {
    display: grid !important;
    grid-template-columns: 38px 74px minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-height: 58px !important;
    max-height: none;
    padding: 10px 14px !important;
    border-radius: 16px !important;
  }

  #practice:not(.practice-detail-mode) .stage-list .question-row-main {
    min-width: 0;
  }

  #practice:not(.practice-detail-mode) .stage-list .question-row-main strong {
    display: block;
    overflow: hidden;
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #practice:not(.practice-detail-mode) .stage-list .question-index,
  #practice:not(.practice-detail-mode) .stage-list .question-code {
    min-width: 0;
    white-space: nowrap;
  }
}

@media (max-width: 980px) {
  #practice:not(.practice-detail-mode) .practice-dashboard-layout {
    display: block !important;
  }

  #practice:not(.practice-detail-mode) .practice-left-rail {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .practice-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading {
    margin: 0 0 18px;
    padding: 22px;
    border: 1px solid rgba(246, 193, 59, 0.28);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
  }

  #practice:not(.practice-detail-mode) .figma-type-card-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@media (min-width: 981px) {
  body.view-practice:not(.practice-answer-detail-active) .app-shell {
    grid-template-columns: 248px minmax(0, 1fr);
  }

  body.view-practice:not(.practice-answer-detail-active) .sidebar {
    margin: 20px;
  }

  body.view-practice:not(.practice-answer-detail-active) .main {
    padding: 18px 24px 36px;
  }

  #practice:not(.practice-detail-mode) .practice-dashboard-layout {
    grid-template-columns: minmax(216px, 248px) minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  #practice:not(.practice-detail-mode) .practice-left-rail {
    top: 18px;
  }

  #practice:not(.practice-detail-mode) .practice-side-card {
    padding: 20px 18px;
    border-radius: 22px;
  }

  #practice:not(.practice-detail-mode) .practice-side-card h3 {
    margin-bottom: 16px;
    font-size: 23px;
  }

  #practice:not(.practice-detail-mode) .practice-category-list {
    gap: 10px;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button {
    min-height: 52px;
    border-radius: 15px;
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading {
    min-height: 84px;
    margin-bottom: 18px;
    padding: 20px 24px;
    border-radius: 22px;
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading h2 {
    font-size: clamp(31px, 2.05vw, 40px);
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head {
    margin-bottom: 14px;
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head h2,
  #practice:not(.practice-detail-mode) .figma-type-grid-head h3 {
    font-size: clamp(26px, 1.6vw, 32px);
  }

  #practice:not(.practice-detail-mode) .figma-type-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)) !important;
    gap: 16px !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 174px;
    padding: 17px !important;
    border-radius: 20px !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-dot {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    border-radius: 14px;
  }

  #practice:not(.practice-detail-mode) .figma-type-card strong {
    font-size: 16.5px !important;
    line-height: 1.2 !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card small {
    margin-top: 10px;
  }

  #practice:not(.practice-detail-mode) .stage-list .compact-question-row,
  #practice:not(.practice-detail-mode) .stage-list .compact-question-row.selected {
    min-height: 56px !important;
  }
}

@media (min-width: 981px) {
  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .practice-dashboard-layout {
    align-items: flex-start !important;
  }

  #practice:not(.practice-detail-mode) .practice-side-card {
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.055) !important;
  }

  #practice:not(.practice-detail-mode) .practice-side-card h3 {
    color: #1d1d1f !important;
    font-size: 26px !important;
    font-weight: 900 !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-color: #e5e5ea !important;
    border-radius: 16px !important;
    background: #fbfbfd !important;
    box-shadow: none !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button span {
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center;
    border: 1px solid #e5e5ea;
    border-radius: 11px !important;
    color: #8e8e93 !important;
    background: #ffffff !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button svg {
    width: 19px;
    height: 19px;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button strong {
    color: #1d1d1f !important;
    font-size: 15.5px !important;
    font-weight: 850 !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button em {
    min-width: 40px !important;
    height: 30px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: #6e6e73 !important;
    background: rgba(245, 245, 247, 0.86) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button.active,
  #practice:not(.practice-detail-mode) .practice-category-list button:hover {
    border-color: #f6c13b !important;
    background: #fff6d8 !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button.active em,
  #practice:not(.practice-detail-mode) .practice-category-list button:hover em {
    color: #7a5600 !important;
    background: rgba(255, 255, 255, 0.72) !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button.active,
  #practice:not(.practice-detail-mode) .practice-category-list button:hover {
    border-color: #1d1d1f !important;
    background: #1d1d1f !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button.active span,
  #practice:not(.practice-detail-mode) .practice-category-list button:hover span {
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button.active strong,
  #practice:not(.practice-detail-mode) .practice-category-list button:hover strong {
    color: #ffffff !important;
  }

  #practice:not(.practice-detail-mode) .practice-category-list button.active em,
  #practice:not(.practice-detail-mode) .practice-category-list button:hover em {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
  }
}

@media (min-width: 981px) {
  .sidebar .brand {
    height: 56px !important;
    gap: 16px !important;
  }

  .sidebar .brand-copy strong {
    font-size: 23px !important;
    line-height: 29px !important;
  }

  .sidebar .exam-type-picker select {
    max-width: 136px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  .sidebar .nav-list {
    gap: 12px !important;
    margin-top: 30px !important;
  }

  .sidebar .nav-link {
    width: 192px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    gap: 12px !important;
    font-size: 15.5px !important;
    font-weight: 850 !important;
    line-height: 20px !important;
  }

  .sidebar .nav-link .icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
}

#practice.practice-detail-mode {
  --answer-bg: #f4f5f7;
  --answer-surface: rgba(255, 255, 255, 0.86);
  --answer-card: #ffffff;
  --answer-soft: #f4f5f7;
  --answer-ink: #090a0c;
  --answer-muted: #646972;
  --answer-line: rgba(219, 222, 227, 0.68);
  --answer-line-soft: rgba(219, 222, 227, 0.42);
  --answer-brand: #f6c542;
  --answer-green: #009c6b;
  width: 100%;
  min-height: auto !important;
  height: auto !important;
  background: var(--answer-bg);
  overflow: visible !important;
}

body.view-practice.practice-answer-detail-active,
body.view-practice.practice-answer-detail-active .app-shell,
body.view-practice.practice-answer-detail-active .main {
  min-height: 0 !important;
}

body.view-practice.practice-answer-detail-active {
  height: 100vh !important;
  overflow: hidden !important;
}

body.view-practice.practice-answer-detail-active .app-shell {
  height: 100vh !important;
  overflow: hidden !important;
}

body.view-practice.practice-answer-detail-active .main {
  height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

body.view-practice.practice-answer-detail-active .main {
  align-items: stretch !important;
}

#practice.practice-detail-mode .practice-top-grid,
#practice.practice-detail-mode .stage-practice > .panel-heading,
#practice.practice-detail-mode .stage-practice .training-mode-strip,
#practice.practice-detail-mode .stage-practice .practice-flow-summary,
#practice.practice-detail-mode .stage-practice .practice-stats,
#practice.practice-detail-mode .stage-practice .skill-filter,
#practice.practice-detail-mode .stage-practice .question-type-shell,
#practice.practice-detail-mode .mobile-feedback-close,
#practice.practice-detail-mode .score-ring,
#practice.practice-detail-mode .ai-breakdown,
#practice.practice-detail-mode .question-meaning:empty,
#practice.practice-detail-mode .audio-prompt:empty,
#practice.practice-detail-mode .question-image-panel.is-hidden,
#practice.practice-detail-mode .stage-practice #uploadRaDemoAudioButton,
#practice.practice-detail-mode .stage-practice .answer-hint-bar.ra-mode-inline,
#practice.practice-detail-mode .stage-practice .question-title-line .answer-hint-bar,
#practice.practice-detail-mode .feedback-panel:not(.speech-result-ready) .solution-panel,
#practice.practice-detail-mode .feedback-panel:not(.speech-result-ready) .action-plan-list,
#practice.practice-detail-mode .feedback-panel:not(.speech-result-ready) .report-actions {
  display: none !important;
}

#practice.practice-detail-mode .practice-dashboard-layout {
  display: grid !important;
  grid-template-columns: minmax(480px, 1fr) 16px minmax(260px, var(--practice-feedback-width, 372px)) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible !important;
}

#practice.practice-detail-mode .practice-panel {
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .stage-practice .practice-detail-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 18px;
  min-height: 128px;
  margin: 0 0 16px !important;
  padding: 22px 26px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 24px !important;
  background: var(--answer-surface) !important;
  box-shadow: 0 12px 28px -14px rgba(14, 17, 23, 0.16) !important;
  overflow: visible;
}

#practice.practice-detail-mode .stage-practice .practice-detail-hero > img {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .practice-detail-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#practice.practice-detail-mode .stage-practice .practice-detail-copy .eyebrow,
#practice.practice-detail-mode .feedback-panel > .eyebrow,
#practice.practice-detail-mode .stage-practice .question-browser-head .eyebrow {
  margin: 0;
  color: var(--answer-muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 16px;
  text-transform: uppercase;
}

#practice.practice-detail-mode .stage-practice .practice-detail-copy h2 {
  margin: 0;
  color: var(--answer-ink);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: 0;
}

#practice.practice-detail-mode .stage-practice .practice-detail-copy > p:not(.eyebrow) {
  max-width: 780px;
  margin: 0;
  color: var(--answer-muted);
  font-size: 14px;
  line-height: 21px;
}

#practice.practice-detail-mode .stage-practice .practice-detail-points {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

#practice.practice-detail-mode .stage-practice .practice-detail-points article,
#practice.practice-detail-mode .stage-practice .question-list-tools .filter-chip,
#practice.practice-detail-mode .stage-practice .practice-navigator button,
#practice.practice-detail-mode .stage-practice .practice-navigator .current-question-pill,
#practice.practice-detail-mode .stage-practice .question-tools button,
#practice.practice-detail-mode .stage-practice .discussion-tabs button {
  display: inline-flex !important;
  min-height: 30px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 11px !important;
  border: 1px solid rgba(229, 229, 234, 0.92) !important;
  border-radius: 999px !important;
  color: var(--answer-ink) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 16px !important;
  white-space: nowrap;
}

#practice.practice-detail-mode .stage-practice .practice-detail-points article:first-child,
#practice.practice-detail-mode .stage-practice .question-list-tools .filter-chip.active,
#practice.practice-detail-mode .stage-practice .practice-navigator .current-question-pill,
#practice.practice-detail-mode .stage-practice .discussion-tabs button.active {
  border-color: #1d1d1f !important;
  color: #fff !important;
  background: #1d1d1f !important;
}

#practice.practice-detail-mode .stage-practice .discussion-tabs button {
  min-height: 32px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
}

#practice.practice-detail-mode .stage-practice .practice-detail-points b,
#practice.practice-detail-mode .stage-practice .practice-detail-points small {
  display: none;
}

#practice.practice-detail-mode .stage-practice .estimated-score-card {
  display: grid !important;
  align-content: center;
  width: 160px !important;
  min-height: 82px !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-radius: 20px !important;
  color: #fff !important;
  background: var(--answer-ink) !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .stage-practice .estimated-score-card span,
#practice.practice-detail-mode .stage-practice .estimated-score-card p,
#practice.practice-detail-mode .stage-practice .estimated-score-card em {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .estimated-score-card strong {
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
}

#practice.practice-detail-mode .stage-practice .estimated-score-card strong::before {
  content: "预估得分";
  display: block;
  color: #c7ccd6;
  font-size: 12px;
  line-height: 16px;
}

#practice.practice-detail-mode .stage-practice .practice-workbench {
  display: grid !important;
  grid-template-columns:
    minmax(220px, var(--practice-list-width, 280px))
    16px
    minmax(360px, 1fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
  min-width: 0;
  max-width: 100%;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 14px 22px -18px rgba(14, 17, 23, 0.2) !important;
  overflow: hidden !important;
}

#practice.practice-detail-mode .stage-practice .practice-resizer {
  display: block !important;
  align-self: stretch !important;
  width: 16px !important;
  min-width: 16px !important;
  min-height: 120px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  cursor: col-resize !important;
  position: relative !important;
  z-index: 20 !important;
  touch-action: none !important;
}

#practice.practice-detail-mode .feedback-resizer {
  display: block !important;
  align-self: stretch !important;
  width: 16px !important;
  min-width: 16px !important;
  min-height: 120px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  cursor: col-resize !important;
  position: relative !important;
  z-index: 20 !important;
  touch-action: none !important;
}

#practice.practice-detail-mode .feedback-resizer::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 6px;
  width: 2px;
  border-radius: 999px;
  background: rgba(219, 222, 227, 0.88);
}

#practice.practice-detail-mode .feedback-resizer:hover::after,
#practice.practice-detail-mode .feedback-resizer.is-dragging::after {
  left: 5px;
  width: 6px;
  background: rgba(246, 197, 66, 0.9);
}

#practice.practice-detail-mode .stage-practice .practice-resizer::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 6px;
  width: 2px;
  border-radius: 999px;
  background: rgba(219, 222, 227, 0.88);
}

#practice.practice-detail-mode .stage-practice .practice-resizer:hover::after,
#practice.practice-detail-mode .stage-practice .practice-resizer.is-dragging::after {
  left: 5px;
  width: 6px;
  background: rgba(246, 197, 66, 0.9);
}

#practice.practice-detail-mode .stage-practice .question-browser,
#practice.practice-detail-mode .stage-practice .answer-stage,
#practice.practice-detail-mode .feedback-panel {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--answer-line-soft) !important;
  border-radius: 22px !important;
  background: var(--answer-card) !important;
  box-shadow: 0 8px 20px -16px rgba(14, 17, 23, 0.18) !important;
}

#practice.practice-detail-mode .stage-practice .question-browser {
  position: sticky;
  top: 14px;
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  padding: 18px !important;
  overflow: hidden;
}

#practice.practice-detail-mode .stage-practice .question-browser-head {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#practice.practice-detail-mode .stage-practice .question-browser-head h3 {
  margin: 5px 0 0;
  color: var(--answer-ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 29px;
}

#practice.practice-detail-mode .stage-practice #backToTypesButton {
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

#practice.practice-detail-mode .stage-practice .question-finder {
  display: grid;
  gap: 12px;
}

#practice.practice-detail-mode .stage-practice .search-field {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(229, 229, 234, 0.92);
  border-radius: 14px;
  background: #f5f5f7;
}

#practice.practice-detail-mode .stage-practice .search-field span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: transparent;
}

#practice.practice-detail-mode .stage-practice .search-field span::before {
  content: "⌕";
  color: #1d1d1f;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

#practice.practice-detail-mode .stage-practice .search-field input {
  min-width: 0;
  border: 0;
  background: transparent;
}

#practice.practice-detail-mode .stage-practice .question-list-tools {
  display: flex !important;
  flex-wrap: wrap;
  gap: 7px;
}

#practice.practice-detail-mode .stage-practice #continuePracticeButton,
#practice.practice-detail-mode .stage-practice .type-guide-panel {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .question-list {
  display: grid;
  grid-auto-rows: max-content;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: #6e6e73 #f5f5f7;
}

#practice.practice-detail-mode .stage-practice .question-list::-webkit-scrollbar {
  width: 8px;
}

#practice.practice-detail-mode .stage-practice .question-list::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #f5f5f7;
}

#practice.practice-detail-mode .stage-practice .question-list::-webkit-scrollbar-thumb {
  border: 2px solid #f5f5f7;
  border-radius: 999px;
  background: #6e6e73;
}

#practice.practice-detail-mode .stage-practice .question-list::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

#practice.practice-detail-mode .stage-practice .compact-question-row {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  grid-template-rows: 20px 20px;
  gap: 3px 10px !important;
  min-height: 82px !important;
  height: 82px !important;
  padding: 12px 13px !important;
  border: 1px solid rgba(229, 229, 234, 0.92) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: left !important;
}

#practice.practice-detail-mode .stage-practice .compact-question-row.selected {
  border-color: rgba(29, 29, 31, 0.9) !important;
  color: #fff !important;
  background: #1d1d1f !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12) !important;
}

#practice.practice-detail-mode .stage-practice .question-code,
#practice.practice-detail-mode .stage-practice .question-type-mini {
  grid-column: 1;
  color: #6e6e73;
  font-size: 12px;
  font-weight: 900;
  line-height: 16px;
}

#practice.practice-detail-mode .stage-practice .compact-question-row.selected .question-code,
#practice.practice-detail-mode .stage-practice .compact-question-row.selected .question-type-mini,
#practice.practice-detail-mode .stage-practice .compact-question-row.selected .question-row-main strong,
#practice.practice-detail-mode .stage-practice .compact-question-row.selected .question-row-main small {
  color: #fff !important;
}

#practice.practice-detail-mode .stage-practice .question-row-main {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: minmax(0, 34px) 18px;
  align-content: start;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#practice.practice-detail-mode .stage-practice .question-row-main strong {
  display: -webkit-box;
  color: var(--answer-ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.28;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#practice.practice-detail-mode .stage-practice .question-row-main small {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 0;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--answer-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  white-space: nowrap;
}

#practice.practice-detail-mode .stage-practice .question-row-status.is-new {
  color: #047857 !important;
  background: rgba(16, 185, 129, 0.12) !important;
}

#practice.practice-detail-mode .stage-practice .question-row-status.is-done {
  color: #64748b !important;
  background: rgba(100, 116, 139, 0.12) !important;
}

#practice.practice-detail-mode .stage-practice .compact-question-row.selected .question-row-status.is-new {
  color: #bbf7d0 !important;
  background: rgba(34, 197, 94, 0.22) !important;
}

#practice.practice-detail-mode .stage-practice .compact-question-row.selected .question-row-status.is-done {
  color: #dbeafe !important;
  background: rgba(96, 165, 250, 0.2) !important;
}

#practice.practice-detail-mode .stage-practice .answer-stage {
  display: grid !important;
  grid-template-rows: auto auto auto auto auto;
  gap: 12px !important;
  align-content: start;
  padding: 16px !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  background: #fff !important;
}

#practice.practice-detail-mode .stage-practice .practice-navigator {
  display: flex !important;
  width: max-content !important;
  max-width: 100%;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 31px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .stage-practice .question-card,
#practice.practice-detail-mode .stage-practice .ra-demo-player,
#practice.practice-detail-mode .stage-practice .recorder,
#practice.practice-detail-mode .stage-practice .practice-discussion {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(219, 222, 227, 0.38) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .stage-practice .question-card {
  display: grid !important;
  grid-template-rows: auto auto minmax(70px, auto) auto;
  gap: 16px;
  min-height: 252px;
  padding: 20px 20px 0 !important;
  overflow: hidden;
  background: var(--answer-soft) !important;
}

#practice.practice-detail-mode .stage-practice .active-question,
#practice.practice-detail-mode .stage-practice .question-title-line,
#practice.practice-detail-mode .stage-practice .active-question h3,
#practice.practice-detail-mode .stage-practice #questionText {
  min-width: 0 !important;
  max-width: 100% !important;
}

#practice.practice-detail-mode .stage-practice .question-meta {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  min-height: 30px;
  margin: 0 !important;
}

#practice.practice-detail-mode .stage-practice .question-meta.is-hidden {
  display: flex !important;
}

#practice.practice-detail-mode .stage-practice .question-meta span,
#practice.practice-detail-mode .stage-practice .active-question-code {
  display: inline-flex;
  min-height: 28px !important;
  align-items: center;
  max-width: 100%;
  padding: 0 10px !important;
  border-radius: 999px;
  color: #fff;
  background: var(--answer-ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 16px;
  white-space: nowrap;
}

#practice.practice-detail-mode .stage-practice #activeQuestionTime {
  border: 1px solid var(--answer-line);
  color: var(--answer-ink);
  background: rgba(255, 255, 255, 0.84);
}

#practice.practice-detail-mode .practice-panel.stage-practice:not([data-active-type="RA"]) .ra-demo-player,
#practice.practice-detail-mode .practice-panel.stage-practice:not([data-active-type="RA"]) #raDemoPlayer {
  display: none !important;
}

#practice.practice-detail-mode .practice-panel.stage-practice:not([data-active-type="RA"]) .recorder::before,
#practice.practice-detail-mode .practice-panel.stage-practice:not([data-active-type="RA"]) .recorder .wave,
#practice.practice-detail-mode .practice-panel.stage-practice:not([data-active-type="RA"]) .recorder > .wave {
  display: none !important;
}

#practice.practice-detail-mode .practice-panel.stage-practice:not([data-active-type="RA"]) .question-meta {
  align-items: center !important;
  gap: 8px 8px !important;
}

#practice.practice-detail-mode .practice-panel.stage-practice:not([data-active-type="RA"]) .question-meta span {
  color: var(--answer-ink) !important;
  background: #fff !important;
  border: 1px solid var(--answer-line) !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 12px !important;
  overflow: visible !important;
}

#practice.practice-detail-mode .practice-panel.stage-practice:not([data-active-type="RA"]) .question-meta span:first-child {
  color: #fff !important;
  background: var(--answer-ink) !important;
  border-color: var(--answer-ink) !important;
}

#practice.practice-detail-mode .practice-panel.stage-practice:not([data-active-type="RA"]) #activeQuestionTime {
  display: inline-flex !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
}

#practice.practice-detail-mode .practice-panel.stage-practice:not([data-active-type="RA"]) #activeQuestionTime .question-time-part {
  display: inline-flex !important;
  min-height: 28px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border: 1px solid var(--answer-line) !important;
  border-radius: 999px !important;
  color: var(--answer-ink) !important;
  background: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 16px !important;
}

#practice.practice-detail-mode .stage-practice .question-title-line {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start;
  margin: 0 !important;
}

#practice.practice-detail-mode .stage-practice .active-question h3 {
  margin: 0;
  color: var(--answer-ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#practice.practice-detail-mode .stage-practice #questionText {
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: var(--answer-ink);
  font-size: 19px;
  font-weight: 850;
  line-height: 1.55;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#practice.practice-detail-mode .stage-practice #questionText:not(.ra-demo-mode),
#practice.practice-detail-mode .stage-practice #questionText:not(.ra-demo-mode) * {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#practice.practice-detail-mode .stage-practice #questionText:not(.ra-demo-mode),
#practice.practice-detail-mode .stage-practice #questionText:not(.ra-demo-mode) *:not([data-toggle-question-text]):not(.reading-grammar-toggle):not(.reading-grammar-swatch):not(.reading-grammar-chunk):not(.reading-grammar-translation):not([data-reading-grammar-for]) {
  background: transparent !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .practice-panel[data-active-type="DI"] .stage-practice .question-card,
#practice.practice-detail-mode .practice-panel[data-active-type="RL"] .stage-practice .question-card,
#practice.practice-detail-mode .practice-panel[data-active-type="SGD"] .stage-practice .question-card {
  gap: 18px !important;
  min-height: 0 !important;
  padding: 20px !important;
}

#practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="RL"] .question-image-panel {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="RL"] .di-image-fit-frame {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="RL"] .question-image-panel img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: min(60vh, 640px);
  object-fit: contain;
  object-position: center;
}

#practice.practice-detail-mode .practice-panel[data-active-type="DI"] .stage-practice .question-image-panel {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(460px, 64vh, 760px) !important;
  min-height: 360px !important;
  max-height: 86vh !important;
  margin: 10px 0 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  border: 1px solid #e3e6ea !important;
  border-radius: 14px !important;
  background: #fff !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  resize: vertical !important;
}

#practice.practice-detail-mode .practice-panel[data-active-type="DI"] .stage-practice .question-image-panel img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

#practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="DI"] .question-card {
  overflow: visible !important;
}

#practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="DI"] .question-image-panel {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 14px 0 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  border: 1px solid #e3e6ea !important;
  border-radius: 14px !important;
  background: #fff !important;
  overflow: visible !important;
  resize: none !important;
}

#practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="DI"] .di-image-fit-frame {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  cursor: zoom-in !important;
  overflow: visible !important;
}

#practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="DI"] .question-image-panel img {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}

#practice.practice-detail-mode .practice-panel[data-active-type="DI"] .stage-practice .question-image-panel::-webkit-resizer {
  border-width: 8px;
  border-style: solid;
  border-color: transparent #c8ced6 #c8ced6 transparent;
}

#practice.practice-detail-mode .practice-panel[data-active-type="DI"] .stage-practice #questionText {
  font-size: 18px !important;
  line-height: 1.45 !important;
}

#practice.practice-detail-mode .stage-practice .question-tools {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  align-items: center;
  gap: 8px;
  min-height: 52px !important;
  margin: 0 -20px !important;
  padding: 10px 20px !important;
  border-top: 1px solid rgba(219, 222, 227, 0.42) !important;
  background: rgba(255, 255, 255, 0.62) !important;
}

#practice.practice-detail-mode .stage-practice .question-tools button {
  min-width: 78px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player.is-hidden {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:not(.is-hidden) {
  display: grid !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 6px 14px;
  min-height: 70px;
  padding: 13px 16px !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player-head {
  display: contents !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-avatar {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: var(--answer-brand);
  box-shadow: none;
}

#practice.practice-detail-mode .stage-practice .ra-demo-avatar img {
  display: none;
}

#practice.practice-detail-mode .stage-practice .ra-demo-avatar::before {
  content: "▶";
  color: var(--answer-ink);
  font-size: 16px;
  font-weight: 900;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player-head > div:last-of-type {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player-head span {
  display: block;
  color: var(--answer-muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 16px;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player-head strong {
  display: block;
  color: var(--answer-ink);
  font-size: 16px;
  font-weight: 900;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#practice.practice-detail-mode .stage-practice #raDemoSpeedSelect {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  width: auto;
  height: 24px;
  margin-left: 74px;
  border: 0;
  color: var(--answer-ink);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player-controls {
  grid-column: 2 / 4;
  grid-row: 2;
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player-controls span {
  display: none;
}

#practice.practice-detail-mode .stage-practice #raDemoProgress {
  width: 100%;
  accent-color: var(--answer-brand);
}

#practice.practice-detail-mode .stage-practice #raDemoToggleButton {
  grid-column: 2;
  min-width: 70px !important;
  height: 34px !important;
  border-radius: 999px !important;
}

#practice.practice-detail-mode .stage-practice .recorder {
  display: grid !important;
  min-height: 64px;
  padding: 14px 16px !important;
}

#practice.practice-detail-mode .practice-panel:not([data-active-type="RA"]) .stage-practice .recorder {
  min-height: 58px !important;
  padding: 14px 16px !important;
}

#practice.practice-detail-mode .practice-panel:not([data-active-type="RA"]) .stage-practice .recorder-actions {
  justify-content: flex-start !important;
}

#practice.practice-detail-mode .stage-practice .recorder::before,
#practice.practice-detail-mode .stage-practice .timer,
#practice.practice-detail-mode .stage-practice .recorder .timer,
#practice.practice-detail-mode .stage-practice .recorder > .timer,
#practice.practice-detail-mode .stage-practice .recorder > .wave,
#practice.practice-detail-mode .stage-practice .wave {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .recorder-actions {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  align-items: center;
  gap: 10px;
}

#practice.practice-detail-mode .stage-practice .recorder-actions button {
  width: auto !important;
  min-width: 86px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .stage-practice #recordButton,
#practice.practice-detail-mode .stage-practice #nextQuestionButton,
#practice.practice-detail-mode .stage-practice #submitButton:not(:disabled) {
  color: #fff !important;
  background: var(--answer-ink) !important;
}

#practice.practice-detail-mode .stage-practice .practice-discussion {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 16px !important;
  min-height: 0 !important;
  padding: 18px 20px 20px !important;
  border: 1px solid rgba(219, 222, 227, 0.34) !important;
  border-radius: 20px !important;
  background: #fff !important;
  overflow: visible !important;
}

#practice.practice-detail-mode .stage-practice .discussion-head {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .discussion-head h3 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  color: var(--answer-ink) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 28px !important;
}

#practice.practice-detail-mode .stage-practice .discussion-head h3::before {
  content: "" !important;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid rgba(246, 197, 66, 0.72) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at center, var(--answer-brand) 0 3px, #fff7de 4px 100%) !important;
}

#practice.practice-detail-mode .stage-practice .discussion-head::after {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .discussion-head button {
  min-height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid var(--answer-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
}

#practice.practice-detail-mode .stage-practice .discussion-tabs {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#practice.practice-detail-mode .stage-practice .discussion-tabs::before,
#practice.practice-detail-mode .stage-practice .discussion-tabs::after {
  display: none !important;
  content: none !important;
}

#practice.practice-detail-mode .stage-practice .discussion-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#practice.practice-detail-mode .stage-practice .discussion-post,
#practice.practice-detail-mode .stage-practice .practice-entry {
  display: block !important;
  min-width: 0 !important;
  min-height: 132px !important;
  height: auto !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(219, 222, 227, 0.48) !important;
  border-radius: 18px !important;
  background: #f5f5f7 !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .stage-practice .discussion-post-main,
#practice.practice-detail-mode .stage-practice .practice-entry-main {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#practice.practice-detail-mode .stage-practice .practice-entry-title {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 10px !important;
  margin-bottom: 2px !important;
}

#practice.practice-detail-mode .stage-practice .practice-entry-title strong {
  color: var(--answer-ink) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 20px !important;
}

#practice.practice-detail-mode .stage-practice .practice-entry-title small {
  color: #8d929a !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

#practice.practice-detail-mode .stage-practice .practice-entry-title em {
  padding: 2px 7px !important;
  border-radius: 999px !important;
  color: #9a6500 !important;
  background: #fff0c4 !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 15px !important;
}

#practice.practice-detail-mode .stage-practice .discussion-post p,
#practice.practice-detail-mode .stage-practice .practice-entry-note {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  color: var(--answer-ink) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

@media (min-width: 1420px) {
  #practice.practice-detail-mode .stage-practice .discussion-list {
    grid-template-columns: repeat(3, minmax(300px, 1fr)) !important;
  }

  #practice.practice-detail-mode .stage-practice .discussion-post,
  #practice.practice-detail-mode .stage-practice .practice-entry {
    max-width: none !important;
  }
}

#practice.practice-detail-mode .stage-practice .practice-avatar,
#practice.practice-detail-mode .stage-practice .discussion-comment-box {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel {
  position: sticky !important;
  top: 14px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, auto);
  gap: 0;
  max-height: calc(100vh - 48px);
  padding: 20px 20px 22px !important;
  overflow: auto !important;
  scrollbar-gutter: stable;
}

#practice.practice-detail-mode .feedback-panel.scoring {
  box-sizing: border-box !important;
  position: sticky !important;
  width: 100% !important;
  min-height: min(1100px, calc(100vh - 48px)) !important;
  height: auto !important;
  align-content: start !important;
  gap: 16px !important;
  border: 1px solid rgba(219, 222, 227, 0.55) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 8px 20px -8px rgba(14, 17, 23, 0.04) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring::before,
#practice.practice-detail-mode .feedback-panel.scoring::after {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .score-ring {
  position: relative !important;
  width: 176px !important;
  height: 176px !important;
  margin: 10px auto 6px !important;
  place-items: center !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at center, #fff 58%, transparent 59%),
    conic-gradient(#1d1d1f 0deg 250deg, #eceef1 250deg 360deg) !important;
  box-shadow: inset 0 0 0 1px rgba(219, 222, 227, 0.58) !important;
  animation: scoring-ring-pulse 1.8s ease-in-out infinite !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .score-ring::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: conic-gradient(from 0deg, transparent 0deg 245deg, rgba(29, 29, 31, 0.88) 270deg, transparent 310deg 360deg);
  -webkit-mask: radial-gradient(circle at center, transparent 63%, #000 64%);
  mask: radial-gradient(circle at center, transparent 63%, #000 64%);
  animation: scoring-ring-spin 1.15s linear infinite;
}

#practice.practice-detail-mode .feedback-panel.scoring .score-ring::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  pointer-events: none;
}

#practice.practice-detail-mode .feedback-panel.scoring .score-ring strong {
  position: relative;
  z-index: 1;
  color: #1d1d1f !important;
  font-size: 42px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .score-ring span {
  position: relative;
  z-index: 1;
  margin-top: 6px !important;
  color: #6e6e73 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .ai-breakdown {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .ai-breakdown article {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(229, 229, 234, 0.92) !important;
  border-radius: 14px !important;
  background: #f5f5f7 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .ai-breakdown strong {
  color: #1d1d1f !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .ai-breakdown span {
  color: #6e6e73 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .speech-scoring-loading {
  display: grid !important;
  gap: 16px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: min(1100px, calc(100vh - 48px)) !important;
  padding: 23px !important;
  align-content: start !important;
  gap: 0 !important;
  border: 1px solid rgba(219, 222, 227, 0.55) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 8px 20px -8px rgba(14, 17, 23, 0.04) !important;
  overflow-x: hidden !important;
}

#practice.practice-detail-mode .feedback-panel.scoring > .eyebrow {
  margin: 0 !important;
  color: #646972 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 15px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

#practice.practice-detail-mode .feedback-panel.scoring > h2 {
  margin: 7px 0 4px !important;
  color: #090a0c !important;
  font-size: 25px !important;
  font-weight: 950 !important;
  line-height: 34px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .score-ring {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .ai-breakdown {
  display: block !important;
  margin: 0 0 38px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-subtitle {
  width: min(300px, 100%) !important;
  margin: 0 !important;
  color: #646972 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .feedback-list {
  display: block !important;
  overflow: visible !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .speech-scoring-loading {
  display: grid !important;
  justify-items: stretch !important;
  align-content: start !important;
  gap: 26px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ai-visual-card {
  display: grid !important;
  justify-items: center !important;
  width: 100% !important;
  min-height: 330px !important;
  padding: 27px 18px 26px !important;
  border: 1px solid rgba(0, 156, 107, 0.18) !important;
  border-radius: 28px !important;
  background: #f6fdf9 !important;
  box-shadow: 0 10px 24px -8px rgba(14, 17, 23, 0.05) !important;
  overflow: hidden !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ring-visual {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 190px !important;
  height: 190px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ring-glow {
  position: absolute !important;
  inset: -30px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at center, rgba(0, 156, 107, 0.2), rgba(0, 156, 107, 0.08) 34%, rgba(246, 253, 249, 0) 68%) !important;
  filter: blur(4px) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ring-track,
#practice.practice-detail-mode .feedback-panel.scoring .scoring-ring-arc {
  position: absolute !important;
  width: 142px !important;
  height: 142px !important;
  border-radius: 999px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ring-track {
  border: 7px solid rgba(0, 156, 107, 0.22) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ring-arc {
  background: conic-gradient(from 20deg, #009c6b 0 86deg, transparent 86deg 360deg) !important;
  -webkit-mask: radial-gradient(circle at center, transparent 61px, #000 62px) !important;
  mask: radial-gradient(circle at center, transparent 61px, #000 62px) !important;
  animation: scoring-ring-spin 1.2s linear infinite !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ring-visual strong {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  width: 76px !important;
  height: 76px !important;
  place-items: center !important;
  border-radius: 24px !important;
  color: #fff !important;
  background: #0e0f11 !important;
  box-shadow: 0 10px 24px -8px rgba(14, 17, 23, 0.16) !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  line-height: 32px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 42px !important;
  margin-top: -10px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b {
  width: 4px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: rgba(0, 156, 107, 0.86) !important;
  animation: scoring-wave-rise 0.95s ease-in-out infinite !important;
  animation-delay: calc(var(--i) * 0.045s) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(1) { height: 8px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(2) { height: 15px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(3) { height: 22px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(4) { height: 29px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(5) { height: 36px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(6) { height: 13px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(7) { height: 20px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(8) { height: 27px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(9) { height: 34px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(10) { height: 11px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(11) { height: 18px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(12) { height: 25px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(13) { height: 32px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(14) { height: 9px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(15) { height: 16px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(16) { height: 23px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(17) { height: 30px !important; }
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(18) { height: 37px !important; }

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ai-visual-card h3 {
  margin: 8px 0 0 !important;
  color: #090a0c !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 24px !important;
  text-align: center !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ai-visual-card p {
  margin: 6px 0 0 !important;
  color: #646972 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-align: center !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-card,
#practice.practice-detail-mode .feedback-panel.scoring .scoring-info-card {
  width: 100% !important;
  border: 1px solid rgba(219, 222, 227, 0.48) !important;
  background: #fff !important;
  overflow: hidden !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-card {
  display: grid !important;
  gap: 18px !important;
  min-height: 232px !important;
  padding: 17px 19px !important;
  border-radius: 24px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-card > strong {
  margin: 0 0 1px !important;
  color: #090a0c !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 22px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-row {
  display: grid !important;
  grid-template-columns: 72px minmax(84px, 1fr) 34px !important;
  align-items: center !important;
  gap: 12px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-row span {
  color: #090a0c !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 16px !important;
  white-space: nowrap !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-row i {
  display: block !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #e3e8e5 !important;
  overflow: hidden !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-row b {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #009c6b !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-row.is-active b {
  background: #1156ee !important;
  animation: scoring-progress-breathe 1.1s ease-in-out infinite !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-row.is-pending b {
  background: #f6c542 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-row em {
  color: #646972 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 15px !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-info-card {
  display: grid !important;
  gap: 10px !important;
  min-height: 134px !important;
  padding: 17px 19px !important;
  border-color: rgba(0, 156, 107, 0.18) !important;
  border-radius: 22px !important;
  background: #f6fdf9 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-info-card strong {
  color: #055740 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 22px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-info-card p {
  max-width: 270px !important;
  margin: 0 !important;
  color: #646972 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 17px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-return-button {
  justify-self: start !important;
  min-height: 38px !important;
  margin-top: 97px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(219, 222, 227, 0.7) !important;
  border-radius: 999px !important;
  color: #090a0c !important;
  background: rgba(255, 255, 255, 0.84) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 16px !important;
  cursor: pointer !important;
}

@keyframes scoring-wave-rise {
  0%,
  100% {
    transform: scaleY(0.82);
    opacity: 0.72;
  }
  50% {
    transform: scaleY(1.14);
    opacity: 1;
  }
}

@keyframes scoring-progress-breathe {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.22);
  }
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: min(1100px, calc(100vh - 48px)) !important;
  padding: 24px !important;
  border: 1px solid rgba(219, 222, 227, 0.55) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 8px 20px -8px rgba(14, 17, 23, 0.04) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready::before,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready::after {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready > .eyebrow {
  margin: 0 !important;
  color: #646972 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 15px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready > h2 {
  margin: 7px 0 12px !important;
  color: #090a0c !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  line-height: 34px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .feedback-list {
  display: block !important;
  overflow: visible !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-original-report,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-result-redesign {
  display: grid !important;
  gap: 24px !important;
  padding: 0 !important;
  background: transparent !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-result-summary {
  display: block !important;
  min-height: 150px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-result-actions {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 92px !important;
  min-height: 150px !important;
  gap: 12px !important;
  padding: 20px 22px 16px !important;
  border: 1px solid rgba(246, 197, 66, 0.35) !important;
  border-radius: 24px !important;
  background: #fff4cc !important;
  box-shadow: 0 8px 20px -8px rgba(14, 17, 23, 0.04) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-card > img {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-total-ring {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  width: 92px !important;
  height: 92px !important;
  align-self: center !important;
  justify-self: end !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at center, #fff 55%, transparent 56%),
    conic-gradient(#009c6b 0deg var(--score), #e3e8e6 var(--score) 360deg) !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-total-ring strong {
  color: #090a0c !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 30px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-total-ring span {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines::before {
  content: "PTE AI 口语评分";
  grid-column: 1 / -1;
  color: #646972;
  font-size: 13px;
  font-weight: 900;
  line-height: 18px;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines p {
  display: grid !important;
  gap: 3px !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(219, 222, 227, 0.45) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 6px 16px -8px rgba(14, 17, 23, 0.025) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines p span {
  color: #646972 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 15px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines p strong {
  color: #090a0c !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 26px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines small {
  grid-column: 1 / -1 !important;
  color: #055740 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 16px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-player-card {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-report-grid {
  display: block !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-power-card,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-detail-card,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card {
  border: 1px solid rgba(219, 222, 227, 0.48) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 6px 16px -8px rgba(14, 17, 23, 0.025) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-power-card {
  display: grid !important;
  gap: 14px !important;
  padding: 18px 20px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-power-card h3 {
  margin: 0 !important;
  color: #090a0c !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 23px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-power-card p {
  margin: -8px 0 2px !important;
  color: #646972 !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ability-layout {
  display: block !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-chart {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list {
  display: grid !important;
  gap: 14px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list span {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) 34px !important;
  gap: 12px !important;
  align-items: center !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list em {
  color: #090a0c !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list i {
  height: 7px !important;
  border-radius: 999px !important;
  background: #e3e8e6 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list b {
  border-radius: 999px !important;
  background: #009c6b !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list b.gold {
  background: #db8c0d !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list strong {
  color: #090a0c !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-align: right !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card {
  padding: 16px 18px !important;
  border-radius: 22px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card::before {
  content: "句子问题";
  display: block;
  margin-bottom: 8px;
  color: #646972;
  font-size: 13px;
  font-weight: 900;
  line-height: 18px;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-legend,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-tip {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference {
  margin: 0 !important;
  color: #e01414 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 20px !important;
  max-height: 64px !important;
  overflow: hidden !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card {
  padding: 14px 18px !important;
  border-color: rgba(0, 156, 107, 0.18) !important;
  border-radius: 20px !important;
  background: #f6fdf9 !important;
}

@keyframes scoring-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes scoring-ring-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(219, 222, 227, 0.58),
      0 0 0 rgba(29, 29, 31, 0);
    transform: scale(1);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(219, 222, 227, 0.72),
      0 14px 36px rgba(29, 29, 31, 0.08);
    transform: scale(1.015);
  }
}

@keyframes scoring-step-breathe {
  0%,
  100% {
    background: #fff;
  }
  50% {
    background: #f5f5f7;
  }
}

#practice.practice-detail-mode .feedback-panel:not(.speech-result-ready) {
  overflow-x: hidden !important;
}

#practice.practice-detail-mode .feedback-panel > .eyebrow {
  display: block !important;
  font-size: 11px;
  line-height: 15px;
}

#practice.practice-detail-mode .feedback-panel > h2 {
  display: block !important;
  margin: 7px 92px 18px 0;
  color: var(--answer-ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 32px;
}

#practice.practice-detail-mode .feedback-panel::after {
  content: "待录音";
  position: absolute;
  top: 46px;
  right: 20px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 13px 7px 28px;
  border: 1px solid rgba(0, 156, 107, 0.24);
  border-radius: 999px;
  color: #055740;
  background: #f6fdf9;
  font-size: 12px;
  font-weight: 900;
  line-height: 16px;
}

#practice.practice-detail-mode .feedback-panel::before {
  content: "";
  position: absolute;
  top: 59px;
  right: 76px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--answer-green);
  z-index: 1;
}

#practice.practice-detail-mode .feedback-panel .feedback-list {
  min-height: 0;
  overflow: visible;
}

#practice.practice-detail-mode .feedback-panel .practice-side-stack {
  display: grid;
  gap: 18px;
}

#practice.practice-detail-mode .feedback-waiting-context {
  display: grid;
  gap: 5px;
  min-height: 76px;
  margin-top: 8px;
  padding: 13px 16px;
  border: 1px solid rgba(0, 156, 107, 0.18);
  border-radius: 20px;
  background: #f6fdf9;
}

#practice.practice-detail-mode .feedback-waiting-context strong {
  color: #055740;
  font-size: 14px;
  line-height: 20px;
}

#practice.practice-detail-mode .feedback-waiting-context small {
  color: var(--answer-muted);
  font-size: 12px;
  line-height: 16px;
}

#practice.practice-detail-mode .feedback-idle-card,
#practice.practice-detail-mode .practice-help-card {
  border: 1px solid rgba(219, 222, 227, 0.4) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .feedback-idle-card {
  min-height: 0;
  padding: 24px 18px 26px !important;
  text-align: center;
}

#practice.practice-detail-mode .feedback-idle-card .ai-orb,
#practice.practice-detail-mode .feedback-idle-card .ai-report-paper,
#practice.practice-detail-mode .feedback-idle-card .ai-link-line,
#practice.practice-detail-mode .feedback-idle-card .ai-floating-chip,
#practice.practice-detail-mode .feedback-idle-card .ai-voice-bars {
  display: none !important;
}

#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration {
  position: relative !important;
  display: block !important;
  width: 276px !important;
  max-width: 100% !important;
  height: 190px !important;
  margin: 0 auto 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  animation: ai-idle-float 4.2s ease-in-out infinite !important;
}

#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

#practice.practice-detail-mode .feedback-idle-card .ai-core-label {
  position: absolute !important;
  left: 74.2% !important;
  top: 48.4% !important;
  z-index: 2 !important;
  color: #fff !important;
  font-size: 23px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  animation: ai-core-breathe 2.2s ease-in-out infinite !important;
}

#practice.practice-detail-mode .speech-idle-stack .ai-report-illustration .ai-paper-label,
#practice.practice-detail-mode .speech-idle-stack .ai-report-illustration .ai-core-label {
  position: absolute !important;
  z-index: 4 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-family: Arial, sans-serif !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  animation: none !important;
}

#practice.practice-detail-mode .speech-idle-stack .ai-report-illustration .ai-paper-label {
  left: 53px !important;
  top: 54px !important;
  color: #111316 !important;
  font-size: 18px !important;
}

#practice.practice-detail-mode .speech-idle-stack .ai-report-illustration .ai-core-label {
  left: 205px !important;
  top: 83px !important;
  width: auto !important;
  color: #fff !important;
  font-size: 23px !important;
  text-align: center !important;
  text-shadow: none !important;
  transform: translate(-50%, -50%) !important;
}

#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="169"] {
  transform-box: fill-box;
  transform-origin: center;
  animation: ai-core-shadow-pulse 2.2s ease-in-out infinite;
}

#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="171"],
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="178"],
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="185"],
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="192"],
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="199"],
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="206"],
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="213"],
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="220"],
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="227"],
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="234"],
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="241"],
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="248"] {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: ai-idle-wave 1.15s ease-in-out infinite;
}

#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="178"] { animation-delay: 0.06s; }
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="185"] { animation-delay: 0.12s; }
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="192"] { animation-delay: 0.18s; }
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="199"] { animation-delay: 0.24s; }
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="206"] { animation-delay: 0.3s; }
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="213"] { animation-delay: 0.36s; }
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="220"] { animation-delay: 0.42s; }
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="227"] { animation-delay: 0.48s; }
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="234"] { animation-delay: 0.54s; }
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="241"] { animation-delay: 0.6s; }
#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect[x="248"] { animation-delay: 0.66s; }

#practice.practice-detail-mode .feedback-idle-card h3 {
  margin: 0;
  color: var(--answer-ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 30px;
}

#practice.practice-detail-mode .feedback-idle-card p {
  max-width: 240px;
  margin: 10px auto 0;
  color: var(--answer-muted);
  font-size: 12px;
  line-height: 19px;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode:not(.has-report) {
  align-content: start !important;
  gap: 12px !important;
  padding-top: 24px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode:not(.has-report) > .eyebrow {
  margin-bottom: 6px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode:not(.has-report) > h2 {
  margin: 14px 0 8px !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode:not(.has-report) .feedback-list {
  margin-top: 0 !important;
  gap: 8px !important;
}

#practice.practice-detail-mode .speech-idle-stack .feedback-idle-card {
  padding: 18px 18px 20px !important;
}

#practice.practice-detail-mode .speech-idle-stack .ai-report-illustration {
  margin: 0 auto 14px !important;
}

#practice.practice-detail-mode .speech-idle-stack .feedback-idle-card p {
  margin-top: 8px !important;
}

#practice.practice-detail-mode .practice-help-card {
  padding: 20px 18px !important;
  min-height: 176px;
  margin-top: 8px !important;
}

#practice.practice-detail-mode .practice-help-card .detail-step-list,
#practice.practice-detail-mode .practice-help-card .practice-step-list {
  display: grid !important;
  gap: 12px !important;
}

#practice.practice-detail-mode .feedback-panel.has-report .feedback-waiting-context,
#practice.practice-detail-mode .feedback-panel.has-report .feedback-idle-card,
#practice.practice-detail-mode .feedback-panel.has-report .practice-help-card {
  animation: feedback-card-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#practice.practice-detail-mode .feedback-panel.has-report .feedback-idle-card {
  animation-delay: 0.06s;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

#practice.practice-detail-mode .feedback-panel.has-report .practice-help-card {
  animation-delay: 0.12s;
}

#practice.practice-detail-mode .feedback-panel.has-report .feedback-idle-card:hover,
#practice.practice-detail-mode .feedback-panel.has-report .practice-help-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 156, 107, 0.22) !important;
  box-shadow: 0 14px 26px -18px rgba(14, 17, 23, 0.24) !important;
}

#practice.practice-detail-mode .detail-step-row {
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

#practice.practice-detail-mode .detail-step-row:hover {
  transform: translateX(2px);
  border-color: rgba(0, 156, 107, 0.18);
  background: #f8fafb;
}

@keyframes feedback-card-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ai-idle-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes ai-core-breathe {
  0%,
  100% {
    opacity: 0.94;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes ai-core-shadow-pulse {
  0%,
  100% {
    filter: drop-shadow(0 8px 14px rgba(14, 17, 23, 0.12));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 12px 22px rgba(0, 156, 107, 0.18));
    transform: scale(1.025);
  }
}

@keyframes ai-idle-wave {
  0%,
  100% {
    transform: scaleY(0.82);
    opacity: 0.68;
  }
  50% {
    transform: scaleY(1.12);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #practice.practice-detail-mode .feedback-panel.has-report .feedback-waiting-context,
  #practice.practice-detail-mode .feedback-panel.has-report .feedback-idle-card,
  #practice.practice-detail-mode .feedback-panel.has-report .practice-help-card,
  #practice.practice-detail-mode .feedback-idle-card .ai-report-illustration,
  #practice.practice-detail-mode .feedback-idle-card .ai-core-label,
  #practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg rect {
    animation: none !important;
  }
}

#practice.practice-detail-mode .practice-help-card .side-card-heading {
  margin-bottom: 14px;
}

#practice.practice-detail-mode .side-card-heading {
  margin-bottom: 12px;
}

#practice.practice-detail-mode .side-card-heading strong {
  color: var(--answer-ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 24px;
}

#practice.practice-detail-mode .detail-step-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  min-height: 62px;
  padding: 13px 14px;
  border: 1px solid rgba(219, 222, 227, 0.52);
  border-radius: 15px;
  background: #f6f7f9;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

#practice.practice-detail-mode .detail-step-row + .detail-step-row {
  margin-top: 0 !important;
}

#practice.practice-detail-mode .detail-step-row b {
  display: none;
}

#practice.practice-detail-mode .detail-step-row strong {
  color: var(--answer-ink);
  font-size: 13px;
  line-height: 18px;
}

#practice.practice-detail-mode .detail-step-row small {
  color: var(--answer-muted);
  font-size: 12px;
  line-height: 17px;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 1280px) {
  #practice.practice-detail-mode .practice-dashboard-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  #practice.practice-detail-mode .feedback-resizer {
    display: none !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-workbench {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-resizer {
    display: none !important;
  }

  #practice.practice-detail-mode .stage-practice .question-browser {
    display: none !important;
  }

  #practice.practice-detail-mode .feedback-panel {
    grid-column: 1 / -1 !important;
    position: static !important;
    max-height: none !important;
  }

  #practice.practice-detail-mode .feedback-panel::before,
  #practice.practice-detail-mode .feedback-panel::after {
    display: none !important;
  }
}

@media (max-width: 980px) {
  #practice.practice-detail-mode .stage-practice .practice-workbench {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #practice.practice-detail-mode .stage-practice .question-browser {
    position: static;
    max-height: 360px;
  }
}

@media (max-width: 760px) {
  #practice.practice-detail-mode .stage-practice .practice-detail-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }

  #practice.practice-detail-mode .stage-practice .estimated-score-card,
  #practice.practice-detail-mode .stage-practice .question-browser {
    display: none !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-workbench,
  #practice.practice-detail-mode .stage-practice .answer-stage {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #practice.practice-detail-mode .stage-practice .question-card {
    min-height: 0;
  }

  #practice.practice-detail-mode .stage-practice .question-title-line {
    gap: 10px !important;
  }

  #practice.practice-detail-mode .stage-practice .active-question h3 {
    font-size: 22px;
    line-height: 30px;
  }

  #practice.practice-detail-mode .stage-practice #questionText {
    font-size: 19px;
    line-height: 1.55;
  }

  #practice.practice-detail-mode .stage-practice .ra-demo-player {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  #practice.practice-detail-mode .stage-practice .ra-demo-player-controls {
    grid-column: 1 / -1 !important;
  }

  #practice.practice-detail-mode .stage-practice #raDemoToggleButton {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(104px, max-content)) !important;
    justify-content: center !important;
  }

  #practice.practice-detail-mode .stage-practice .discussion-head,
  #practice.practice-detail-mode .stage-practice .discussion-tabs {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

@media (min-width: 1281px) {
  #practice.practice-detail-mode .practice-dashboard-layout {
    align-items: stretch !important;
  }

  #practice.practice-detail-mode .practice-panel {
    display: grid !important;
    min-height: 100% !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-workbench {
    height: 100% !important;
    min-height: 720px !important;
    align-items: stretch !important;
  }

  #practice.practice-detail-mode .stage-practice .question-browser,
  #practice.practice-detail-mode .stage-practice .answer-stage,
  #practice.practice-detail-mode .feedback-panel {
    height: 100% !important;
  }

  #practice.practice-detail-mode .feedback-panel {
    align-self: stretch !important;
    min-height: 720px !important;
    max-height: calc(100vh - 48px) !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-discussion {
    min-height: 238px !important;
    padding: 18px 20px 24px !important;
  }

  #practice.practice-detail-mode .stage-practice .discussion-list {
    min-height: 146px !important;
    align-items: stretch !important;
  }

  #practice.practice-detail-mode .stage-practice .discussion-post,
  #practice.practice-detail-mode .stage-practice .practice-entry {
    min-height: 146px !important;
    height: 100% !important;
    padding: 20px 22px !important;
  }
}

#practice.practice-detail-mode .stage-practice .ra-demo-player {
  position: relative !important;
  grid-template-columns: 40px minmax(120px, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  gap: 7px 12px !important;
  min-height: 76px !important;
  width: min(320px, 100%) !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(219, 222, 227, 0.42) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248, 250, 251, 0.96)),
    radial-gradient(circle at 8% 0%, rgba(246, 197, 66, 0.16), transparent 32%) !important;
  box-shadow: 0 12px 28px -22px rgba(14, 17, 23, 0.22) !important;
  overflow: hidden !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #f6c542, #009c6b);
  opacity: 0.9;
}

#practice.practice-detail-mode .stage-practice .ra-demo-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  background: #f6c542 !important;
  box-shadow: 0 10px 20px -14px rgba(177, 114, 0, 0.55) !important;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:hover .ra-demo-avatar {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 16px 24px -16px rgba(177, 114, 0, 0.7) !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player-head > div:last-of-type {
  align-self: center !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player-head span {
  color: #7b8088 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player-head strong {
  margin-top: 1px !important;
  color: #090a0c !important;
  font-size: 15px !important;
  line-height: 19px !important;
}

#practice.practice-detail-mode .stage-practice #raDemoSpeedSelect {
  margin-left: 70px !important;
  padding: 0 4px !important;
  border-radius: 8px !important;
  color: #090a0c !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player-controls {
  grid-template-columns: minmax(120px, 180px) auto !important;
  gap: 10px !important;
}

#practice.practice-detail-mode .stage-practice #raDemoProgress {
  height: 6px !important;
  accent-color: #009c6b !important;
  cursor: pointer !important;
}

#practice.practice-detail-mode .stage-practice #raDemoProgress::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #009c6b, #f6c542 54%, #dfe4e7 54%);
}

#practice.practice-detail-mode .stage-practice #raDemoProgress::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #009c6b;
  box-shadow: 0 4px 12px rgba(0, 156, 107, 0.28);
}

#practice.practice-detail-mode .stage-practice #raDemoToggleButton {
  min-width: 58px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border-color: rgba(246, 197, 66, 0.52) !important;
  background: #fff !important;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

#practice.practice-detail-mode .stage-practice #raDemoToggleButton:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 156, 107, 0.32) !important;
  background: #f6fdf9 !important;
}

#practice.practice-detail-mode .stage-practice .discussion-post {
  position: relative !important;
  cursor: pointer !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease !important;
}

#practice.practice-detail-mode .stage-practice .discussion-post:hover,
#practice.practice-detail-mode .stage-practice .discussion-post.is-expanded {
  transform: translateY(-2px);
  border-color: rgba(0, 156, 107, 0.22) !important;
  background: #fbfcfd !important;
  box-shadow: 0 16px 30px -24px rgba(14, 17, 23, 0.28) !important;
}

#practice.practice-detail-mode .stage-practice .discussion-post-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  margin-top: 4px !important;
}

#practice.practice-detail-mode .stage-practice .discussion-post-actions button {
  min-height: 30px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(219, 222, 227, 0.72) !important;
  border-radius: 999px !important;
  color: #090a0c !important;
  background: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

#practice.practice-detail-mode .stage-practice .discussion-post-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 156, 107, 0.28) !important;
  background: #f6fdf9 !important;
}

#practice.practice-detail-mode .stage-practice .discussion-post-actions button.is-liked {
  border-color: rgba(246, 197, 66, 0.7) !important;
  background: #fff2c8 !important;
}

#practice.practice-detail-mode .stage-practice .discussion-expanded {
  display: none !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(219, 222, 227, 0.58) !important;
}

#practice.practice-detail-mode .stage-practice .discussion-post.is-expanded .discussion-expanded {
  display: grid !important;
  gap: 12px !important;
  animation: discussion-expand-in 0.22s ease both;
}

#practice.practice-detail-mode .stage-practice .discussion-expanded p {
  color: #4e5560 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

#practice.practice-detail-mode .stage-practice .discussion-comment-box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
}

#practice.practice-detail-mode .stage-practice .discussion-comment-box input {
  min-height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(219, 222, 227, 0.72) !important;
  border-radius: 999px !important;
  background: #fff !important;
}

#practice.practice-detail-mode .stage-practice .discussion-comment-box button {
  min-height: 36px !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: #1d1d1f !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

@keyframes discussion-expand-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#practice.practice-detail-mode .stage-practice .community-entry-card.practice-entry {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  min-height: 148px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(219, 222, 227, 0.48) !important;
  border-radius: 18px !important;
  background: #f7f8fa !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 156, 107, 0.2) !important;
  background: #fbfcfd !important;
  box-shadow: 0 16px 30px -24px rgba(14, 17, 23, 0.28) !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-card .practice-avatar {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-card .practice-entry-title {
  gap: 6px 9px !important;
  margin: 0 !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-card .practice-entry-title strong {
  color: #090a0c !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 20px !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-card .practice-entry-title small {
  color: #8d929a !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-card .practice-entry-title span {
  padding: 2px 7px !important;
  border-radius: 999px !important;
  color: #9a6500 !important;
  background: #fff0c4 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 15px !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-card .practice-entry-note {
  max-width: 36em !important;
  color: #31363d !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-card .practice-audio-pill {
  width: min(260px, 100%) !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  gap: 10px !important;
  border: 1px solid rgba(246, 197, 66, 0.18) !important;
  background: linear-gradient(90deg, #fff7df, #f7f8fa) !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-card .practice-audio-pill b {
  display: grid !important;
  width: 22px !important;
  height: 22px !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #090a0c !important;
  background: #f6c542 !important;
  font-size: 10px !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-card .practice-audio-pill span {
  color: #090a0c !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-card .practice-audio-line {
  height: 4px !important;
  background: linear-gradient(90deg, #009c6b 0 34%, #f6c542 34% 64%, #dfe4e7 64%) !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-actions button {
  min-height: 30px !important;
  padding: 0 11px !important;
  border-color: rgba(219, 222, 227, 0.72) !important;
  color: #090a0c !important;
  background: #fff !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-actions button:hover:not(:disabled) {
  border-color: rgba(0, 156, 107, 0.24) !important;
  background: #f6fdf9 !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-card .practice-entry-actions {
  display: flex !important;
  gap: 8px !important;
  align-self: end !important;
}

#practice.practice-detail-mode .stage-practice .community-entry-card .practice-entry-actions button {
  width: auto !important;
  min-width: 36px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(219, 222, 227, 0.72) !important;
  border-radius: 999px !important;
  color: #090a0c !important;
  background: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

@media (min-width: 1420px) {
  #practice.practice-detail-mode .stage-practice .discussion-list.community-entry-list {
    grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
  }
}

#practice.practice-detail-mode .stage-practice .ra-demo-player-controls {
  grid-template-columns: minmax(120px, 180px) auto !important;
  justify-content: start !important;
}

#practice.practice-detail-mode .stage-practice #raDemoProgress {
  max-width: 180px !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  align-content: start !important;
  gap: 6px 10px !important;
  width: min(280px, 100%) !important;
  min-height: 0 !important;
  padding: 10px 12px 12px 14px !important;
  border-radius: 18px !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-avatar {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 13px !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player-head > div:last-of-type {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#practice.practice-detail-mode .stage-practice #raDemoSpeedSelect {
  grid-column: auto !important;
  margin-left: 8px !important;
  width: auto !important;
  justify-self: start !important;
  transform: translateY(-1px);
}

#practice.practice-detail-mode .stage-practice .ra-demo-player-controls {
  grid-column: 2 !important;
  grid-row: 2 !important;
  grid-template-columns: minmax(96px, 142px) auto !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 8px !important;
}

#practice.practice-detail-mode .stage-practice #raDemoProgress {
  width: 142px !important;
  max-width: 142px !important;
}

#practice.practice-detail-mode .stage-practice #raDemoToggleButton {
  grid-column: 2 !important;
  width: auto !important;
  min-width: 52px !important;
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready {
  padding: clamp(16px, 1.45vw, 24px) !important;
  background: #f2f2f0 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready > .eyebrow,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready > h2,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready > .score-ring,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready > .ai-breakdown {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .feedback-list {
  display: block !important;
  margin: 0 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-result-redesign {
  display: grid !important;
  gap: 16px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-report-mobile-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 66px !important;
  padding: 14px 16px !important;
  border: 1px solid #dfe3e8 !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 8px 18px -14px rgba(14, 17, 23, 0.18) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-report-mobile-head strong {
  display: block !important;
  color: #0b0c0d !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-report-mobile-head span {
  display: block !important;
  margin-top: 4px !important;
  color: #636b78 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-report-mobile-head em {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  border: 1px solid #b2e5d1 !important;
  border-radius: 999px !important;
  color: #006b47 !important;
  background: #ecfbf4 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-report-mobile-head i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #00a36e !important;
  box-shadow: 0 0 0 4px rgba(0, 163, 110, 0.1) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-result-summary {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 88px !important;
  gap: 16px !important;
  align-items: center !important;
  min-height: 156px !important;
  padding: 18px 22px !important;
  border: 1px solid #ffc72e !important;
  border-radius: 26px !important;
  background: #fff4c2 !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines::before {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines small {
  display: block !important;
  grid-column: auto !important;
  color: #636b78 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 18px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines p {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines p strong {
  color: #0b0c0d !important;
  font-size: 46px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines p span {
  color: #636b78 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-total-ring {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 88px !important;
  height: 88px !important;
  justify-self: end !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at center, #fff4c2 58%, transparent 59%),
    conic-gradient(#00a36e 0deg var(--score), rgba(0, 163, 110, 0.14) var(--score) 360deg) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-total-ring strong {
  color: #0b0c0d !important;
  font-size: 21px !important;
  font-weight: 950 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-report-metrics {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-report-metrics article {
  display: grid !important;
  gap: 4px !important;
  min-height: 62px !important;
  padding: 10px 12px !important;
  border: 1px solid #dfe3e8 !important;
  border-radius: 18px !important;
  background: #fff !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-report-metrics span {
  color: #636b78 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-report-metrics strong {
  color: #0b0c0d !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-power-card,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card {
  padding: 18px !important;
  border: 1px solid #dfe3e8 !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list span {
  grid-template-columns: 64px minmax(0, 1fr) 42px !important;
  gap: 12px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list b.weak {
  background: #eb1a1a !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card {
  min-height: 106px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .report-actions {
  position: static !important;
  z-index: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 18px 0 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid rgba(219, 222, 227, 0.55) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready {
  display: block !important;
  align-content: initial !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .feedback-list,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .solution-panel,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .action-plan-list {
  position: static !important;
  z-index: auto !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card {
  margin-bottom: 0 !important;
  overflow: visible !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .feedback-list {
  margin-bottom: 18px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .report-actions button {
  position: static !important;
  transform: none !important;
}

@media (max-width: 720px) {
  #practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-card {
    grid-template-columns: minmax(0, 1fr) 78px !important;
    padding: 16px 18px !important;
  }

  #practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-total-ring {
    width: 78px !important;
    height: 78px !important;
  }

  #practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines p strong {
    font-size: 40px !important;
  }
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-coach-report {
  color: #0b0c0d !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-coach-report .coach-invalid-alert {
  border: 1px solid rgba(255, 199, 46, 0.55) !important;
  border-radius: 20px !important;
  background: #fff8df !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-coach-report .coach-audio-card {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player {
  width: min(360px, 100%) !important;
  min-height: 34px !important;
  margin: 18px 0 12px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(120px, 1fr) !important;
  grid-template-rows: 34px !important;
  align-items: center !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player::before,
#practice.practice-detail-mode .stage-practice .ra-demo-player-head > div:last-of-type,
#practice.practice-detail-mode .stage-practice #raDemoSpeedSelect,
#practice.practice-detail-mode .stage-practice .ra-demo-player-controls span,
#practice.practice-detail-mode .stage-practice #raDemoToggleButton {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-avatar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #050607 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.65) !important;
  cursor: pointer !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-avatar::before {
  content: "▶" !important;
  color: #fff !important;
  font-size: 13px !important;
  transform: translateX(1px);
}

#practice.practice-detail-mode .stage-practice .ra-demo-player-controls {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  min-width: 0 !important;
}

#practice.practice-detail-mode .stage-practice #raDemoProgress {
  width: 100% !important;
  max-width: none !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  accent-color: #050607 !important;
  background: transparent !important;
}

#practice.practice-detail-mode .stage-practice #raDemoProgress::-webkit-slider-runnable-track {
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #050607 0 36%, rgba(11, 15, 20, 0.14) 36%) !important;
}

#practice.practice-detail-mode .stage-practice #raDemoProgress::-webkit-slider-thumb {
  width: 12px !important;
  height: 12px !important;
  margin-top: -4.5px !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: #050607 !important;
  box-shadow: 0 6px 14px -9px rgba(0, 0, 0, 0.7) !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:hover .ra-demo-avatar {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px -13px rgba(0, 0, 0, 0.8) !important;
}

#practice .stage-practice .ra-demo-player:not(.is-hidden) {
  width: min(360px, 100%) !important;
  min-height: 34px !important;
  margin: 18px 0 12px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(120px, 1fr) !important;
  grid-template-rows: 34px !important;
  align-items: center !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#practice .stage-practice .ra-demo-player:not(.is-hidden)::before,
#practice .stage-practice .ra-demo-player:not(.is-hidden) .ra-demo-player-head > div:last-of-type,
#practice .stage-practice .ra-demo-player:not(.is-hidden) #raDemoSpeedSelect,
#practice .stage-practice .ra-demo-player:not(.is-hidden) .ra-demo-player-controls span,
#practice .stage-practice .ra-demo-player:not(.is-hidden) #raDemoToggleButton {
  display: none !important;
}

#practice .stage-practice .ra-demo-player:not(.is-hidden) .ra-demo-player-head {
  display: contents !important;
}

#practice .stage-practice .ra-demo-player:not(.is-hidden) .ra-demo-avatar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #050607 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.65) !important;
  cursor: pointer !important;
}

#practice .stage-practice .ra-demo-player:not(.is-hidden) .ra-demo-avatar::before {
  content: "▶" !important;
  color: #fff !important;
  font-size: 13px !important;
  transform: translateX(1px);
}

#practice .stage-practice .ra-demo-player:not(.is-hidden) .ra-demo-player-controls {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  min-width: 0 !important;
}

#practice .stage-practice .ra-demo-player:not(.is-hidden) #raDemoProgress {
  width: 100% !important;
  max-width: none !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  accent-color: #050607 !important;
  background: transparent !important;
}

#practice .stage-practice .ra-demo-player:not(.is-hidden) #raDemoProgress::-webkit-slider-runnable-track {
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #050607 0 36%, rgba(11, 15, 20, 0.14) 36%) !important;
}

#practice .stage-practice .ra-demo-player:not(.is-hidden) #raDemoProgress::-webkit-slider-thumb {
  width: 12px !important;
  height: 12px !important;
  margin-top: -4.5px !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: #050607 !important;
  box-shadow: 0 6px 14px -9px rgba(0, 0, 0, 0.7) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-coach-report .speech-reference-card::before {
  content: "重点句子" !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-coach-report .speech-reference {
  color: #eb1a1a !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:has(.speech-analysis-loading-xingxing) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline.speech-analysis-loading-xingxing {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-card {
  min-height: 500px !important;
  width: 100% !important;
  display: block !important;
  padding: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(32, 201, 151, 0.1), transparent 35%),
    rgba(255, 255, 255, 0.62) !important;
  box-shadow:
    0 14px 34px rgba(52, 74, 64, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-head h3 {
  margin: 0 !important;
  color: rgba(17, 24, 39, 0.9) !important;
  font-size: 24px !important;
  font-weight: 930 !important;
  line-height: 30px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78), 0 -1px 0 rgba(38, 48, 62, 0.14) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-head em {
  flex: 0 0 auto !important;
  display: block !important;
  padding: 5px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #9b6a00 !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-stage {
  display: grid !important;
  place-items: center !important;
  padding: 44px 0 32px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-focus {
  position: relative !important;
  display: grid !important;
  width: 132px !important;
  height: 132px !important;
  place-items: center !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-spin {
  position: absolute !important;
  inset: 5px !important;
  border: 1.5px solid rgba(32, 201, 151, 0.16) !important;
  border-radius: 42px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-spin::after {
  content: "" !important;
  position: absolute !important;
  inset: -1.5px !important;
  border: 1.5px solid transparent !important;
  border-top-color: rgba(32, 201, 151, 0.78) !important;
  border-right-color: rgba(32, 201, 151, 0.35) !important;
  border-radius: inherit !important;
  animation: scoring-ring-spin 1.35s linear infinite !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-pulse {
  position: absolute !important;
  inset: 21px !important;
  border-radius: 999px !important;
  background: rgba(32, 201, 151, 0.06) !important;
  animation: scoring-ring-pulse 2.4s ease-in-out infinite !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-orb {
  position: relative !important;
  display: grid !important;
  width: 66px !important;
  height: 66px !important;
  place-items: center !important;
  border: 1px solid rgba(32, 201, 151, 0.26) !important;
  border-radius: 999px !important;
  color: #066f5d !important;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.9), transparent 42%),
    rgba(240, 255, 250, 0.58) !important;
  box-shadow:
    0 0 0 7px rgba(32, 201, 151, 0.035),
    0 0 18px rgba(32, 201, 151, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 -1px 0 rgba(3, 88, 74, 0.16) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-wave {
  display: flex !important;
  height: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 24px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-wave i {
  width: 5px !important;
  height: var(--h) !important;
  border-radius: 999px !important;
  background: rgba(17, 24, 39, 0.13) !important;
  animation: scoring-wave-rise 1.45s ease-in-out infinite !important;
  animation-delay: calc(var(--i) * 0.08s) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-wave i:nth-child(3n + 1) {
  background: rgba(32, 201, 151, 0.68) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-wave i:nth-child(5n) {
  background: rgba(255, 212, 92, 0.72) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-copy {
  display: block !important;
  text-align: center !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-copy h3 {
  margin: 0 !important;
  color: rgba(17, 24, 39, 0.9) !important;
  font-size: 24px !important;
  font-weight: 930 !important;
  line-height: 30px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78), 0 -1px 0 rgba(38, 48, 62, 0.14) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-copy p {
  max-width: 22em !important;
  margin: 8px auto 0 !important;
  color: #727b8b !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 20px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-progress {
  height: 6px !important;
  margin-top: 24px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(17, 24, 39, 0.07) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-analysis-loading-xingxing .analysis-xingxing-progress span {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, transparent 0%, rgba(32, 201, 151, 0.24) 12%, #20c997 48%, rgba(255, 212, 92, 0.72) 88%, transparent 100%) !important;
  background-size: 220% 100% !important;
  background-position: 110% 0 !important;
  will-change: background-position, opacity !important;
  animation: analysis-xingxing-progress 1.9s cubic-bezier(0.42, 0, 0.18, 1) infinite !important;
}

@keyframes analysis-xingxing-progress {
  0% { opacity: 0.64; background-position: 110% 0; }
  50% { opacity: 1; }
  100% { opacity: 0.64; background-position: -110% 0; }
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) {
  display: grid !important;
  gap: 14px !important;
  padding: 18px !important;
  border: 1px solid rgba(0, 163, 110, 0.2) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(0, 163, 110, 0.08), transparent 34%),
    linear-gradient(180deg, #f7fdf9 0%, #ffffff 100%) !important;
  box-shadow: 0 12px 24px -18px rgba(14, 17, 23, 0.22) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) .speech-ai-summary-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(0, 163, 110, 0.12) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) .speech-ai-summary-head h3 {
  margin: 0 !important;
  color: #0b0c0d !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) > p {
  margin: 0 !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(0, 163, 110, 0.14) !important;
  border-radius: 16px !important;
  color: #1f2a37 !important;
  background: rgba(236, 251, 244, 0.62) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) .speech-ai-summary-reason {
  display: grid !important;
  gap: 8px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) .speech-ai-summary-reason span,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) > div > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: fit-content !important;
  color: #006b47 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) .speech-ai-summary-reason span::before,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) > div > span::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #00a36e !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) .speech-ai-summary-reason em {
  display: block !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(255, 199, 46, 0.22) !important;
  border-radius: 14px !important;
  color: #3d342c !important;
  background: linear-gradient(135deg, #fff8df, #f7fdf9) !important;
  font-size: 13px !important;
  font-style: normal !important;
  line-height: 1.7 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) > div:not(.speech-ai-summary-head):not(.speech-ai-summary-reason):not(.speech-ai-phoneme-focus):not(.speech-phoneme-guide-card) {
  display: grid !important;
  gap: 8px !important;
  padding: 12px !important;
  border: 1px solid rgba(219, 222, 227, 0.62) !important;
  border-radius: 16px !important;
  background: #fff !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) > div:not(.speech-ai-summary-head):not(.speech-ai-summary-reason):not(.speech-ai-phoneme-focus):not(.speech-phoneme-guide-card) b {
  display: block !important;
  padding: 8px 10px 8px 12px !important;
  border: 0 !important;
  border-left: 3px solid #00a36e !important;
  border-radius: 10px !important;
  color: #1f2a37 !important;
  background: #f7f8fa !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus {
  display: grid !important;
  gap: 12px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article {
  display: grid !important;
  gap: 10px !important;
  padding: 14px !important;
  border: 1px solid rgba(0, 163, 110, 0.18) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 10px 18px -16px rgba(14, 17, 23, 0.22) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article strong {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  color: #006b47 !important;
  background: #ecfbf4 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  overflow-wrap: anywhere !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article em {
  display: inline-flex !important;
  width: fit-content !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  color: #4b3200 !important;
  background: #fff4c2 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article small {
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.6 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article p {
  margin: 0 !important;
  padding-left: 11px !important;
  border-left: 3px solid rgba(0, 163, 110, 0.55) !important;
  color: #243041 !important;
  font-size: 13px !important;
  line-height: 1.72 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article p b {
  color: #006b47 !important;
  font-weight: 950 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article ul {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 10px 12px 10px 28px !important;
  border-radius: 14px !important;
  background: #f7f8fa !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article li {
  color: #111827 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(0, 163, 110, 0.16) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(0, 163, 110, 0.08), transparent 34%),
    #ffffff !important;
  box-shadow: 0 10px 18px -16px rgba(14, 17, 23, 0.2) !important;
  overflow: hidden !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-guide-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-guide-head h3 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-guide-intro {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #667085 !important;
  background: transparent !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-guide-item {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 10px !important;
  border-radius: 16px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-project-mouth-widget {
  width: 100% !important;
  min-height: 0 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-guide-copy,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-guide-copy > div,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-guide-demo-block,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-guide-detail,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-problem-strip {
  min-width: 0 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-guide-copy b,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-guide-copy p,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-guide-copy small,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-guide-demo-block b,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-guide-detail p,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-phoneme-guide-inline .speech-phoneme-problem-strip small {
  writing-mode: horizontal-tb !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) > strong {
  display: block !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(0, 163, 110, 0.16) !important;
  border-radius: 16px !important;
  color: #006b47 !important;
  background: #ecfbf4 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

@media (min-width: 981px) {
  #practice.practice-detail-mode .practice-dashboard-layout {
    display: grid !important;
    grid-template-columns: minmax(760px, 1fr) 12px minmax(300px, clamp(300px, var(--practice-feedback-width, 340px), 420px)) !important;
    gap: 12px !important;
    align-items: start !important;
    overflow: visible !important;
  }

  #practice.practice-detail-mode .feedback-resizer {
    display: block !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-workbench {
    display: grid !important;
    grid-template-columns:
      minmax(200px, clamp(200px, var(--practice-list-width, 260px), 360px))
      12px
      minmax(560px, 1fr) !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-resizer {
    display: block !important;
  }

  #practice.practice-detail-mode .stage-practice .question-browser {
    display: grid !important;
    min-width: 0 !important;
  }
}

#practice.practice-detail-mode .stage-practice .discussion-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  border-color: rgba(219, 222, 227, 0.72) !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

#practice.practice-detail-mode .stage-practice .discussion-tabs button {
  min-height: 42px !important;
  border: 1px solid rgba(219, 222, 227, 0.82) !important;
  border-right-width: 0 !important;
  color: #40454d !important;
  background: rgba(255, 255, 255, 0.62) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

#practice.practice-detail-mode .stage-practice .discussion-tabs button:last-child {
  border-right-width: 1px !important;
}

#practice.practice-detail-mode .stage-practice .discussion-tabs button.active {
  color: #0b8776 !important;
  background: rgba(235, 255, 248, 0.74) !important;
  border-color: rgba(40, 191, 166, 0.52) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-list,
#practice.practice-detail-mode .stage-practice .discussion-list.community-entry-list.practice-showcase-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  gap: 14px !important;
  padding-top: 16px !important;
  background: transparent !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-toolbar {
  display: none !important;
  margin: 0 !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-item {
  display: grid !important;
  box-sizing: border-box !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.52) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 18px 40px rgba(76, 103, 96, 0.08) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.16) !important;
  backdrop-filter: blur(24px) saturate(1.16) !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-item.is-mine-record {
  background: rgba(255, 253, 244, 0.58) !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-avatar {
  display: grid !important;
  width: 46px !important;
  height: 46px !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.88) !important;
  border-radius: 50% !important;
  background: rgba(234, 252, 246, 0.8) !important;
  box-shadow: 0 10px 22px rgba(32, 136, 116, 0.12), inset 0 0 0 2px rgba(246, 197, 66, 0.72) !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-collapse-toggle {
  appearance: none;
  padding: 0;
  color: #25313b;
  cursor: pointer;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-collapse-toggle span {
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-item:not(.is-collapsed) .practice-showcase-collapse-toggle span {
  transform: translateY(3px) rotate(225deg);
}

#practice.practice-detail-mode .stage-practice .practice-showcase-collapse-toggle:focus-visible {
  outline: 3px solid rgba(33, 190, 166, 0.3);
  outline-offset: 3px;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-body {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-collapsible {
  display: grid;
  gap: 10px;
  min-width: 0;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-item.is-collapsed {
  align-items: center;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-item.is-collapsed .practice-showcase-collapsible {
  display: none;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  align-items: center !important;
  min-width: 0 !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-meta strong {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #25313b !important;
  font-size: 16px !important;
  font-weight: 860 !important;
  line-height: 21px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-meta time {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #7a8791 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 18px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-score {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  min-width: 72px !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  border-radius: 15px !important;
  color: #26343d !important;
  background: rgba(255, 255, 255, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  white-space: nowrap !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-score small,
#practice.practice-detail-mode .stage-practice .practice-showcase-score em {
  color: #839099 !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-score b {
  color: #17232c !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 24px !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-text-answer .practice-showcase-answer-token {
  display: inline-flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  margin: 2px 5px 2px 0;
  padding: 3px 7px;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 11px;
  vertical-align: top;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-text-answer .practice-showcase-answer-token b,
#practice.practice-detail-mode .stage-practice .practice-showcase-text-answer .practice-showcase-answer-token small {
  overflow: hidden;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-text-answer .practice-showcase-answer-token b {
  max-width: 112px;
  font-size: 13px;
  font-weight: 820;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-text-answer .practice-showcase-answer-token small {
  max-width: 144px;
  font-size: 10px;
  font-weight: 700;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-text-answer .practice-showcase-answer-token.is-correct {
  border-color: rgba(22, 164, 124, 0.2);
  color: #087f65;
  background: rgba(30, 190, 143, 0.11);
}

#practice.practice-detail-mode .stage-practice .practice-showcase-text-answer .practice-showcase-answer-token.is-wrong {
  border-color: rgba(218, 80, 91, 0.2);
  color: #c24752;
  background: rgba(238, 94, 105, 0.1);
}

#practice.practice-detail-mode .stage-practice .practice-showcase-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-badges span {
  display: inline-flex !important;
  min-height: 24px !important;
  align-items: center !important;
  padding: 0 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 12px !important;
  color: #607078 !important;
  background: rgba(246, 250, 249, 0.58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  font-size: 11px !important;
  font-weight: 720 !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-badges span:last-child {
  color: #0d8f7d !important;
  background: rgba(230, 252, 244, 0.64) !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-player {
  display: grid !important;
  box-sizing: border-box !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 8px 12px 8px 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  border-radius: 19px !important;
  background: rgba(245, 252, 250, 0.56) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 24px rgba(35, 112, 99, 0.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-play {
  appearance: none !important;
  display: inline-grid !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  background: rgba(29, 190, 166, 0.92) !important;
  box-shadow: 0 9px 20px rgba(17, 148, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-play::before {
  content: "" !important;
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  margin-left: 2px !important;
  background: url("./assets/figma-answer-265/figma-mobile/figma-icon-play.svg") center / 15px 15px no-repeat !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-player.is-playing .practice-showcase-play::before {
  width: 3px !important;
  height: 13px !important;
  margin-left: -6px !important;
  background: currentColor !important;
  box-shadow: 7px 0 0 currentColor !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-play:disabled {
  opacity: 0.42 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
  cursor: not-allowed !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-timeline {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-seek {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  accent-color: #1dbda5 !important;
  cursor: pointer !important;
  touch-action: none !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-seek::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(166, 194, 189, 0.46) !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-seek::-webkit-slider-thumb {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -5px !important;
  border: 2px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 50% !important;
  background: #1dbda5 !important;
  box-shadow: 0 3px 8px rgba(14, 139, 121, 0.22) !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-seek::-moz-range-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(166, 194, 189, 0.46) !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-seek::-moz-range-progress {
  height: 4px !important;
  border-radius: 999px !important;
  background: #1dbda5 !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-seek::-moz-range-thumb {
  width: 12px !important;
  height: 12px !important;
  border: 2px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 50% !important;
  background: #1dbda5 !important;
  box-shadow: 0 3px 8px rgba(14, 139, 121, 0.22) !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-seek:focus-visible {
  border-radius: 12px !important;
  box-shadow: 0 0 0 4px rgba(29, 189, 165, 0.12) !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-seek:disabled {
  opacity: 0.42 !important;
  cursor: not-allowed !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-time {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #7a878e !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 16px !important;
  white-space: nowrap !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-time b {
  color: #314049 !important;
  font-size: inherit !important;
  font-weight: 760 !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-player-status {
  grid-column: 2 !important;
  min-height: 0 !important;
  margin-top: -7px !important;
  color: #8b745c !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 14px !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-player-status:empty {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-player.has-error .practice-showcase-player-status {
  color: #b45d61 !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-audio {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-tags button {
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(34, 183, 158, 0.42) !important;
  border-radius: 15px !important;
  color: #0b927d !important;
  background: rgba(242, 255, 250, 0.48) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  font-size: 12px !important;
  font-weight: 820 !important;
}

#practice.practice-detail-mode .stage-practice .practice-showcase-tags button:disabled {
  opacity: 0.62 !important;
  cursor: default !important;
}

@media (max-width: 640px) {
  #practice.practice-detail-mode .stage-practice .practice-showcase-item {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-showcase-avatar {
    width: 42px !important;
    height: 42px !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-showcase-timeline {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-showcase-time {
    justify-self: end !important;
  }
}


@media (min-width: 981px) and (max-width: 1420px) {
  #practice.practice-detail-mode .practice-dashboard-layout {
    grid-template-columns: minmax(700px, 1fr) 10px minmax(300px, 360px) !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-workbench {
    grid-template-columns: minmax(190px, 240px) 10px minmax(500px, 1fr) !important;
  }
}

#practice.practice-detail-mode .stage-practice .answer-stage,
#practice.practice-detail-mode .stage-practice .question-card,
#practice.practice-detail-mode .stage-practice .active-question,
#practice.practice-detail-mode .stage-practice .audio-prompt,
#practice.practice-detail-mode .stage-practice .practice-discussion,
#practice.practice-detail-mode .stage-practice .discussion-list,
#practice.practice-detail-mode .stage-practice .community-entry-card {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#practice.practice-detail-mode .stage-practice #activeQuestionTitle,
#practice.practice-detail-mode .stage-practice #questionText,
#practice.practice-detail-mode .stage-practice .question-title-line,
#practice.practice-detail-mode .stage-practice .community-entry-card p {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  white-space: normal !important;
}

#practice.practice-detail-mode .stage-practice .audio-prompt {
  overflow: hidden !important;
}

#practice.practice-detail-mode .stage-practice .audio-prompt .audio-track {
  min-width: 80px !important;
  max-width: 100% !important;
}

@media (min-width: 981px) {
  #practice.practice-detail-mode .practice-dashboard-layout {
    grid-template-columns:
      minmax(0, 1fr)
      10px
      minmax(300px, clamp(300px, var(--practice-feedback-width, 340px), 390px)) !important;
    gap: 14px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-workbench {
    grid-template-columns:
      minmax(180px, clamp(180px, var(--practice-list-width, 245px), 320px))
      10px
      minmax(0, 1fr) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #practice.practice-detail-mode .stage-practice .answer-stage,
  #practice.practice-detail-mode .feedback-panel {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  #practice.practice-detail-mode .practice-dashboard-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #practice.practice-detail-mode .feedback-resizer {
    display: none !important;
  }

  #practice.practice-detail-mode .feedback-panel {
    width: 100% !important;
  }
}

#practice.practice-detail-mode .stage-practice #questionText {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

#practice.practice-detail-mode .stage-practice #questionText .ra-text-line {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit !important;
  line-height: inherit !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

#practice.practice-detail-mode .stage-practice #questionText .ra-word-select {
  appearance: none !important;
  display: inline !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 2px !important;
  margin: 0 1px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit !important;
  line-height: inherit !important;
  white-space: normal !important;
}

#practice.practice-detail-mode .stage-practice #questionText .ra-word-select.selected {
  color: #0b0c0d !important;
  background: rgba(255, 199, 46, 0.3) !important;
}

#practice.practice-detail-mode .stage-practice #questionText .ra-selection-block {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#practice.practice-detail-mode .stage-practice .discussion-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
  gap: 14px !important;
  overflow: visible !important;
}

#practice.practice-detail-mode .stage-practice .discussion-post,
#practice.practice-detail-mode .stage-practice .community-entry-card {
  min-width: 0 !important;
  overflow: hidden !important;
}

.sidebar .brand-icon,
.sidebar .sidebar-user-card img,
.profile-hero-main img,
.home-v2-helper img,
.home-v2-streak img {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  object-fit: cover !important;
  box-shadow: none !important;
}

.sidebar .brand-icon {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
}

.sidebar .sidebar-user-card img {
  width: 42px !important;
  height: 42px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline h3 {
  color: #0b0c0d !important;
  font-size: 18px !important;
  line-height: 24px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline p {
  max-width: 245px !important;
  color: #344054 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-card {
  border-color: rgba(255, 199, 46, 0.72) !important;
  background:
    radial-gradient(circle at 82% 28%, rgba(0, 163, 110, 0.08), transparent 34%),
    linear-gradient(135deg, #fff8dc 0%, #fff0a8 100%) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-total-ring {
  background:
    radial-gradient(circle at center, #fff7cc 58%, transparent 59%),
    conic-gradient(#00a36e 0deg var(--score), rgba(0, 163, 110, 0.18) var(--score) 360deg) !important;
  box-shadow: 0 14px 24px rgba(0, 163, 110, 0.1) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-power-card {
  gap: 16px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ability-layout {
  display: grid !important;
  grid-template-columns: minmax(104px, 128px) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-chart,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .coach-radar {
  display: block !important;
  width: 124px !important;
  height: 124px !important;
  margin: 0 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-chart polygon {
  fill: rgba(0, 163, 110, 0.05) !important;
  stroke: rgba(0, 163, 110, 0.22) !important;
  stroke-width: 1.2 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-chart line {
  stroke: rgba(99, 107, 120, 0.2) !important;
  stroke-width: 1 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-chart .student-shape {
  fill: rgba(0, 163, 110, 0.18) !important;
  stroke: #00a36e !important;
  stroke-width: 2.5 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list {
  gap: 10px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list span {
  grid-template-columns: 56px minmax(0, 1fr) 38px !important;
  gap: 10px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-list em {
  font-size: 12px !important;
}

@media (max-width: 430px) {
  #practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ability-layout {
    grid-template-columns: 1fr !important;
  }

  #practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-radar-chart,
  #practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .coach-radar {
    justify-self: center !important;
  }
}

#mock {
  --mock-bg: #f5f5f7;
  --mock-card: #ffffff;
  --mock-soft: #fbfbfd;
  --mock-ink: #1d1d1f;
  --mock-muted: #6e6e73;
  --mock-line: #e5e5ea;
  --mock-blue: #007aff;
  --mock-green: #34c759;
  --mock-red: #ff453a;
  background: var(--mock-bg) !important;
  color: var(--mock-ink) !important;
}

#mock .mock-page-head,
#mock .mock-paper-workbench,
#mock .mock-command-center,
#mock .mock-report-panel,
#mock .mock-flow-panel,
#mock .mock-session-area > .panel {
  border: 1px solid var(--mock-line) !important;
  border-radius: 28px !important;
  background: var(--mock-card) !important;
  box-shadow: none !important;
}

#mock .mock-page-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 24px !important;
  align-items: end !important;
  min-height: 0 !important;
  margin-bottom: 24px !important;
  padding: 34px 38px !important;
}

#mock .mock-page-head h2 {
  margin: 0 0 6px !important;
  color: var(--mock-ink) !important;
  font-size: clamp(34px, 4vw, 48px) !important;
  font-weight: 850 !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
}

#mock .mock-page-head p {
  margin: 0 !important;
  max-width: 560px !important;
  color: var(--mock-muted) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

#mock .mock-page-actions {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}

#mock .mock-page-actions button,
#mock .mock-paper-tabs button,
#mock .mock-paper-filters button,
#mock .mock-exam-actions button,
#mock .mock-report-panel button {
  min-height: 36px !important;
  padding: 0 15px !important;
  border: 1px solid var(--mock-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--mock-ink) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

#mock .mock-page-actions .primary-btn,
#mock .mock-paper-tabs button.active,
#mock .mock-paper-filters button.active,
#mock .mock-exam-actions .primary-btn {
  border-color: var(--mock-ink) !important;
  background: var(--mock-ink) !important;
  color: #fff !important;
}

#mock .mock-center-layout {
  display: grid !important;
  grid-template-columns: minmax(520px, 1.35fr) minmax(320px, 0.75fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

#mock .mock-main-column,
#mock .mock-right-column {
  display: grid !important;
  gap: 20px !important;
  min-width: 0 !important;
}

#mock .mock-paper-workbench {
  position: relative !important;
  display: grid !important;
  gap: 16px !important;
  padding: 24px !important;
}

#mock .mock-paper-workbench::before {
  content: "选择模考卷" !important;
  display: block !important;
  color: var(--mock-ink) !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

#mock .mock-paper-workbench::after {
  content: "先选择适合阶段的卷，再进入计时考试。" !important;
  position: absolute !important;
  top: 55px !important;
  left: 24px !important;
  color: var(--mock-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

#mock .mock-paper-tabs {
  position: absolute !important;
  top: 22px !important;
  right: 24px !important;
  display: flex !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#mock .mock-paper-tabs button,
#mock .mock-paper-filters button {
  min-height: 30px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

#mock .mock-paper-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 32px !important;
  padding: 0 !important;
}

#mock .mock-paper-toolbar .search-field {
  width: min(320px, 100%) !important;
  min-height: 38px !important;
  border: 1px solid var(--mock-line) !important;
  border-radius: 14px !important;
  background: var(--mock-soft) !important;
}

#mock .mock-paper-filters {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#mock .mock-paper-list {
  display: grid !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
}

#mock .mock-paper-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 74px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--mock-line) !important;
  border-radius: 18px !important;
  background: var(--mock-soft) !important;
  box-shadow: none !important;
  text-align: left !important;
}

#mock .mock-paper-card.active {
  border-color: var(--mock-blue) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.08) !important;
}

#mock .mock-paper-ribbon,
#mock .mock-paper-index,
#mock .mock-paper-copy em,
#mock .mock-paper-copy small,
#mock .mock-paper-detail {
  display: none !important;
}

#mock .mock-paper-copy strong {
  display: block !important;
  margin: 0 0 5px !important;
  color: var(--mock-ink) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
}

#mock .mock-paper-copy p {
  margin: 0 !important;
  color: var(--mock-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#mock .mock-paper-meta {
  display: flex !important;
  gap: 8px !important;
  color: var(--mock-muted) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

#mock .mock-paper-card > i {
  display: grid !important;
  place-items: center !important;
  min-width: 72px !important;
  min-height: 34px !important;
  border: 1px solid var(--mock-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--mock-ink) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

#mock .mock-paper-card.active > i {
  border-color: var(--mock-ink) !important;
  background: var(--mock-ink) !important;
  color: #fff !important;
}

#mock .mock-command-center,
#mock .mock-report-panel,
#mock .mock-flow-panel {
  padding: 22px !important;
}

#mock .mock-status-card {
  display: grid !important;
  gap: 16px !important;
}

#mock .mock-status-card h3,
#mock .mock-report-panel h2,
#mock .mock-flow-panel h3 {
  margin: 0 !important;
  color: var(--mock-ink) !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

#mock .mock-status-ring {
  display: none !important;
}

#mock .mock-progress-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px 12px !important;
  align-items: center !important;
}

#mock .mock-progress-line span,
#mock .mock-progress-line strong {
  color: var(--mock-muted) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

#mock .mock-progress-line i {
  grid-column: 1 / -1 !important;
  display: block !important;
  height: 6px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: var(--mock-line) !important;
}

#mock .mock-progress-line b {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: var(--mock-blue) !important;
}

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

#mock .mock-status-stats article,
#mock .mock-node82-report-rows article,
#mock .mock-flow-panel .mock-task,
#mock .mock-today-brief {
  border: 1px solid var(--mock-line) !important;
  border-radius: 16px !important;
  background: var(--mock-soft) !important;
}

#mock .mock-status-stats article {
  min-height: 62px !important;
  padding: 10px !important;
  text-align: center !important;
}

#mock .mock-status-stats strong {
  display: block !important;
  color: var(--mock-ink) !important;
  font-size: 21px !important;
  font-weight: 850 !important;
}

#mock .mock-status-stats span,
#mock .mock-today-brief span,
#mock .mock-task-pills span,
#mock .mock-node82-report-rows span {
  color: var(--mock-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

#mock .mock-today-brief {
  display: grid !important;
  gap: 10px !important;
  padding: 14px !important;
}

#mock .mock-today-brief strong {
  display: block !important;
  margin-top: 3px !important;
  color: var(--mock-ink) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

#mock .mock-task-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#mock .mock-task-pills span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border: 1px solid var(--mock-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
}

#mock .mock-task-pills b {
  color: var(--mock-ink) !important;
  font-weight: 850 !important;
}

#mock .mock-report-panel .eyebrow,
#mock .mock-report-panel .score-ring {
  display: none !important;
}

#mock .mock-report-panel h2::after {
  content: "完成一套后显示总分、正确率和薄弱项。" !important;
  display: block !important;
  margin-top: 4px !important;
  color: var(--mock-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

#mock .mock-latest-empty,
#mock .mock-node82-report-ready {
  margin-top: 18px !important;
  color: var(--mock-muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

#mock .mock-latest-empty strong,
#mock .mock-node82-report-ready strong {
  display: block !important;
  margin-bottom: 6px !important;
  color: var(--mock-ink) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

#mock .mock-node82-report-rows {
  display: grid !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

#mock .mock-node82-report-rows article {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
}

#mock .mock-node82-report-rows b {
  color: var(--mock-ink) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

#mock .mock-flow-panel {
  grid-column: 1 / -1 !important;
}

#mock .mock-flow-panel .mock-task-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

#mock .mock-flow-panel .mock-task {
  display: grid !important;
  gap: 8px !important;
  min-height: 110px !important;
  padding: 14px !important;
}

#mock .mock-flow-panel .mock-task-index {
  color: var(--mock-blue) !important;
  background: transparent !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}

#mock .mock-flow-panel .mock-task strong {
  color: var(--mock-ink) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

#mock .mock-flow-panel .mock-task small,
#mock .mock-flow-panel .mock-task > span:last-child {
  color: var(--mock-muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

#mock .mock-flow-panel .mock-task i {
  display: none !important;
}

#mock:not(.mock-exam-focus) .mock-session-area {
  display: none !important;
}

#mock.mock-exam-focus .mock-page-head,
#mock.mock-exam-focus .mock-center-layout {
  display: none !important;
}

#mock.mock-exam-focus .mock-session-area {
  display: block !important;
  margin-top: 0 !important;
}

#mock .mock-session-area > .panel {
  padding: 24px !important;
}

#mock .mock-hero {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 16px !important;
  border: 1px solid var(--mock-line) !important;
  border-radius: 20px !important;
  background: var(--mock-soft) !important;
}

#mock .mock-timer {
  width: 96px !important;
  height: 72px !important;
  border-radius: 18px !important;
  background: #fff !important;
}

#mock .mock-exam-card {
  display: grid !important;
  gap: 16px !important;
  margin-top: 18px !important;
  padding: 18px !important;
  border: 1px solid var(--mock-line) !important;
  border-radius: 22px !important;
  background: #fff !important;
}

#mock .mock-question-progress {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#mock .mock-question-progress button {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid var(--mock-line) !important;
  border-radius: 999px !important;
  background: var(--mock-soft) !important;
  color: var(--mock-muted) !important;
}

#mock .mock-question-progress button.active {
  border-color: var(--mock-ink) !important;
  background: var(--mock-ink) !important;
  color: #fff !important;
}

#mock .mock-question-progress button.done:not(.active) {
  border-color: rgba(52, 199, 89, 0.45) !important;
  color: #16833a !important;
}

#mock .mock-question-stem,
#mock .mock-answer-area textarea,
#mock .mock-answer-box {
  border: 1px solid var(--mock-line) !important;
  border-radius: 18px !important;
  background: var(--mock-soft) !important;
}

#mock .mock-question-stem {
  padding: 16px !important;
}

#mock .mock-question-stem strong {
  display: block !important;
  margin-bottom: 8px !important;
  color: var(--mock-ink) !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}

#mock .mock-question-stem p {
  margin: 0 !important;
  color: var(--mock-ink) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

#mock .mock-answer-area textarea {
  width: 100% !important;
  min-height: 180px !important;
  padding: 16px !important;
  color: var(--mock-ink) !important;
  outline: none !important;
  resize: vertical !important;
}

#mock .mock-answer-area textarea:focus {
  border-color: var(--mock-ink) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(29, 29, 31, 0.08) !important;
}

@media (max-width: 1180px) {
  #mock .mock-center-layout {
    grid-template-columns: 1fr !important;
  }

  #mock .mock-flow-panel .mock-task-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #mock .mock-page-head,
  #mock .mock-center-layout,
  #mock .mock-paper-toolbar,
  #mock .mock-hero {
    grid-template-columns: 1fr !important;
  }

  #mock .mock-page-head,
  #mock .mock-paper-workbench,
  #mock .mock-command-center,
  #mock .mock-report-panel,
  #mock .mock-flow-panel {
    padding: 20px !important;
    border-radius: 24px !important;
  }

  #mock .mock-page-actions,
  #mock .mock-paper-tabs {
    position: static !important;
    justify-content: start !important;
    flex-wrap: wrap !important;
  }

  #mock .mock-paper-workbench::after {
    position: static !important;
    margin-top: -10px !important;
  }

  #mock .mock-paper-toolbar {
    margin-top: 0 !important;
  }

  #mock .mock-paper-card {
    grid-template-columns: 1fr !important;
  }

  #mock .mock-paper-card > i {
    justify-self: start !important;
  }

  #mock .mock-status-stats,
  #mock .mock-flow-panel .mock-task-list {
    grid-template-columns: 1fr !important;
  }
}

#practice:not(.practice-detail-mode) .practice-top-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: 24px !important;
  align-items: stretch !important;
  margin-bottom: 22px !important;
  padding: 24px 26px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.07) !important;
  overflow: hidden !important;
}

#practice:not(.practice-detail-mode) .practice-top-grid .practice-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(160px, 18vw, 230px) !important;
  gap: 22px !important;
  align-items: center !important;
  min-height: 172px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#practice:not(.practice-detail-mode) .practice-top-grid .practice-hero,
#practice:not(.practice-detail-mode) .practice-top-grid .practice-hero * {
  color: #1d1d1f !important;
}

#practice:not(.practice-detail-mode) .practice-top-grid .practice-hero .eyebrow,
#practice:not(.practice-detail-mode) .practice-top-grid .practice-hero p:not(.eyebrow) {
  color: #6e6e73 !important;
}

#practice:not(.practice-detail-mode) .practice-top-grid .practice-hero h2 {
  max-width: 760px !important;
  margin: 0 !important;
  font-size: clamp(30px, 2.5vw, 42px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

#practice:not(.practice-detail-mode) .practice-top-grid .practice-hero p:not(.eyebrow) {
  max-width: 680px !important;
  margin: 10px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

#practice:not(.practice-detail-mode) .practice-top-grid .practice-hero > img {
  align-self: center !important;
  justify-self: center !important;
  width: min(190px, 100%) !important;
  max-height: 166px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.12)) !important;
}

#practice:not(.practice-detail-mode) .practice-hero-points {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

#practice:not(.practice-detail-mode) .practice-hero-points article {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid #e5e5ea !important;
  border-radius: 999px !important;
  background: #fff !important;
}

#practice:not(.practice-detail-mode) .practice-hero-points b {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
}

#practice:not(.practice-detail-mode) .practice-hero-points strong {
  font-size: 12px !important;
  font-weight: 850 !important;
}

#practice:not(.practice-detail-mode) .practice-hero-points small {
  display: none !important;
}

#practice:not(.practice-detail-mode) .practice-plan-card {
  display: grid !important;
  align-content: start !important;
  min-height: 0 !important;
  padding: 18px 20px !important;
  border: 1px solid #e5e5ea !important;
  border-radius: 24px !important;
  color: #1d1d1f !important;
  background: #fbfbfd !important;
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.08) !important;
}

#practice:not(.practice-detail-mode) .practice-plan-card::before,
#practice:not(.practice-detail-mode) .practice-plan-card::after {
  display: none !important;
}

#practice:not(.practice-detail-mode) .practice-plan-card,
#practice:not(.practice-detail-mode) .practice-plan-card * {
  color: #1d1d1f !important;
}

#practice:not(.practice-detail-mode) .practice-plan-card p,
#practice:not(.practice-detail-mode) .practice-plan-card > div > span {
  color: #6e6e73 !important;
  background: transparent !important;
}

#practice:not(.practice-detail-mode) .practice-plan-card > div > span {
  min-height: auto !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

#practice:not(.practice-detail-mode) .practice-plan-card .ghost-btn {
  min-height: 30px !important;
  border-color: #e5e5ea !important;
  color: #1d1d1f !important;
  background: #fff !important;
}

#practice:not(.practice-detail-mode) .practice-plan-card strong {
  margin: 14px 0 8px !important;
  color: #1d1d1f !important;
  font-size: clamp(22px, 1.8vw, 30px) !important;
  font-weight: 900 !important;
  white-space: normal !important;
}

#practice:not(.practice-detail-mode) .practice-plan-card .primary-btn {
  width: max-content !important;
  min-width: 0 !important;
  min-height: 36px !important;
  margin-top: 18px !important;
  padding: 0 16px !important;
  border: 1px solid #1d1d1f !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: #1d1d1f !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .practice-dashboard-layout {
  grid-template-columns: minmax(420px, 1fr) 18px minmax(260px, var(--practice-feedback-width, 372px)) !important;
}

#practice.practice-detail-mode .stage-practice .practice-workbench {
  grid-template-columns: minmax(160px, var(--practice-list-width, 280px)) 18px minmax(360px, 1fr) !important;
}

#practice.practice-detail-mode .stage-practice .question-browser,
#practice.practice-detail-mode .feedback-panel,
#practice.practice-detail-mode .stage-practice .answer-stage {
  min-width: 0 !important;
  width: auto !important;
}

#practice.practice-detail-mode .reading-inline-mode .answer-workspace {
  display: grid !important;
  gap: 16px;
  padding: 20px;
  border: 1px solid #dce8e6;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px -32px rgba(19, 61, 58, 0.5);
}

#practice.practice-detail-mode .reading-inline-mode .answer-workspace > div:first-child,
#practice.practice-detail-mode .reading-inline-mode .answer-hint-bar {
  display: none;
}

#practice.practice-detail-mode .reading-inline-mode .fib-answer,
#practice.practice-detail-mode .reading-inline-mode .choice-answer,
#practice.practice-detail-mode .reading-inline-mode .order-answer {
  gap: 14px;
}

#practice.practice-detail-mode .reading-inline-mode .embedded-fib-question {
  max-height: none;
  padding: 22px;
  border-radius: 18px;
  background: #f5f5f7;
  border-color: #e5e5ea;
  color: #1d1d1f;
  font-size: 18px;
  line-height: 2.05;
}

#practice.practice-detail-mode .reading-inline-mode .fib-word-bank,
#practice.practice-detail-mode .reading-inline-mode .fib-blank-choice-panel > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#practice.practice-detail-mode .reading-inline-mode .fib-option {
  width: auto;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
}

#practice.practice-detail-mode .reading-inline-mode .fib-blank {
  min-width: 84px;
  min-height: 34px;
  border-radius: 999px;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode .score-ring {
  display: grid !important;
  width: 72px;
  height: 72px;
  justify-self: end;
  margin-top: -56px;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode .ai-breakdown {
  display: none !important;
}

.reading-idle-panel {
  display: grid;
  gap: 14px;
}

.reading-idle-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 156, 107, 0.22);
  border-radius: 16px;
  background: #f5fffb;
}

.reading-idle-status span {
  color: #009c6b;
  font-size: 12px;
  font-weight: 900;
}

.reading-idle-status strong {
  color: #1d1d1f;
  font-size: 16px;
}

.reading-idle-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e5e5ea;
  border-radius: 18px;
  background: #fff;
}

.reading-idle-card b {
  color: #1d1d1f;
  font-size: 16px;
}

.reading-idle-card p {
  margin: 0;
  color: #6e6e73;
  font-size: 13px;
  line-height: 1.65;
}

.reading-idle-steps {
  display: grid;
  gap: 10px;
}

.reading-idle-steps span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #1d1d1f;
  background: #f5f5f7;
  font-size: 13px;
  font-weight: 850;
}

.reading-idle-steps i {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #fff;
  background: #1d1d1f;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-style: normal;
}

#practice.practice-detail-mode .question-card.active-question {
  --reading-grammar-subject: #5b9ee7;
  --reading-grammar-predicate: #37a982;
  --reading-grammar-object: #dfa13c;
  --reading-grammar-modifier: #9277d6;
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px 12px;
  width: 100%;
  margin: 0 0 16px;
}

#practice.practice-detail-mode .question-card.active-question .rop-task-head + .reading-grammar-toolbar {
  padding: 0 2px;
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-toggle {
  position: relative;
  min-height: 34px;
  padding: 0 14px;
  border-color: rgba(74, 84, 96, 0.16);
  border-radius: 999px;
  color: #30343b;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 22px -18px rgba(22, 31, 42, 0.58);
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-toggle[aria-pressed="true"] {
  border-color: rgba(49, 136, 108, 0.32);
  color: #176b52;
  background: #effbf6;
  box-shadow:
    0 0 0 3px rgba(55, 169, 130, 0.08),
    0 10px 24px -18px rgba(34, 119, 93, 0.52);
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-toggle.is-loading {
  padding-left: 31px;
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-toggle.is-loading::before {
  content: "";
  position: absolute;
  left: 13px;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(23, 107, 82, 0.18);
  border-top-color: #25886a;
  border-radius: 50%;
  animation: reading-grammar-spin 700ms linear infinite;
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-status {
  color: #74777d;
  font-size: 12px;
  line-height: 1;
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 100%;
  flex-wrap: wrap;
  gap: 7px 14px;
  color: #6d7076;
  font-size: 12px;
  line-height: 1.3;
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-legend[hidden],
#practice.practice-detail-mode .question-card.active-question .reading-grammar-status[hidden] {
  display: none;
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-swatch {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: currentColor;
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-swatch.is-subject {
  color: var(--reading-grammar-subject);
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-swatch.is-predicate {
  color: var(--reading-grammar-predicate);
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-swatch.is-object-complement {
  color: var(--reading-grammar-object);
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-swatch.is-modifier {
  color: var(--reading-grammar-modifier);
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="off"] .reading-grammar-prose,
#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="off"] .reading-grammar-fib-passage,
#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="off"] .reading-grammar-fib-passage > .reading-grammar-english {
  display: contents;
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-translation {
  display: none;
}

#practice.practice-detail-mode .question-card.active-question:is(
  [data-reading-grammar-state="loading"],
  [data-reading-grammar-state="open"]
) #questionText .inline-fib-question {
  display: grid;
  gap: 26px;
}

#practice.practice-detail-mode .question-card.active-question:is(
  [data-reading-grammar-state="loading"],
  [data-reading-grammar-state="open"]
) .reading-grammar-prose,
#practice.practice-detail-mode .question-card.active-question:is(
  [data-reading-grammar-state="loading"],
  [data-reading-grammar-state="open"]
) .reading-grammar-fib-passage {
  display: grid;
  gap: 11px;
  min-width: 0;
}

#practice.practice-detail-mode .question-card.active-question:is(
  [data-reading-grammar-state="loading"],
  [data-reading-grammar-state="open"]
) .reading-grammar-prose {
  margin-bottom: 24px;
}

#practice.practice-detail-mode .question-card.active-question:is(
  [data-reading-grammar-state="loading"],
  [data-reading-grammar-state="open"]
) .reading-grammar-prose:last-child {
  margin-bottom: 0;
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-translation:not([hidden]) {
  display: block;
  margin: 0;
  padding: 9px 11px;
  border-radius: 10px;
  color: #666b72;
  background: rgba(247, 248, 250, 0.92);
  font-size: 0.9em;
  font-weight: 500;
  line-height: 1.72;
  text-align: left;
  text-wrap: pretty;
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-translation [data-reading-grammar-for] {
  display: inline;
  width: auto;
  height: auto;
  padding: 1px 2px;
  border-radius: 4px;
  color: inherit;
  background: transparent;
  box-shadow: none;
  place-items: initial;
  font-weight: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-translation [data-reading-grammar-for].is-grammar-hover-match {
  color: #3b3214;
  background: #ffed9f;
  box-shadow: 0 0 0 2px rgba(221, 173, 50, 0.17);
  animation: reading-grammar-translation-pop 320ms ease-out;
}

#practice.practice-detail-mode .question-card.active-question .reading-grammar-chunk {
  --reading-grammar-role-color: #82909c;
  display: inline;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 5px;
  color: inherit;
  background: transparent;
  box-shadow: none;
  place-items: initial;
  font-weight: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  cursor: text;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-chunk {
  padding: 2px 3px;
  cursor: pointer;
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-chunk.is-subject {
  --reading-grammar-role-color: var(--reading-grammar-subject);
  background: rgba(91, 158, 231, 0.17);
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-chunk.is-predicate {
  --reading-grammar-role-color: var(--reading-grammar-predicate);
  background: rgba(55, 169, 130, 0.16);
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-chunk.is-object-complement {
  --reading-grammar-role-color: var(--reading-grammar-object);
  background: rgba(223, 161, 60, 0.17);
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-chunk.is-modifier {
  --reading-grammar-role-color: var(--reading-grammar-modifier);
  background: rgba(146, 119, 214, 0.14);
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-chunk:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--reading-grammar-role-color) 72%, white);
  outline-offset: 2px;
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-chunk.is-grammar-source {
  background: color-mix(in srgb, var(--reading-grammar-role-color) 30%, white);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--reading-grammar-role-color) 62%, transparent),
    0 6px 16px -11px color-mix(in srgb, var(--reading-grammar-role-color) 72%, transparent);
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-chunk.is-grammar-target {
  background: color-mix(in srgb, var(--reading-grammar-role-color) 25%, white);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--reading-grammar-role-color) 42%, transparent),
    0 0 16px color-mix(in srgb, var(--reading-grammar-role-color) 23%, transparent);
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-chunk.is-grammar-hovered {
  background: color-mix(in srgb, var(--reading-grammar-role-color) 34%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--reading-grammar-role-color) 19%, transparent);
  animation: reading-grammar-english-hover 300ms ease-out;
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-chunk.is-grammar-source-pop {
  animation: reading-grammar-source-pop 360ms ease-out;
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-chunk.is-grammar-target-pulse {
  animation: reading-grammar-target-pulse 500ms ease-out;
}

#practice.practice-detail-mode .question-card.active-question .order-block .reading-grammar-text {
  display: inline;
  width: auto;
  height: auto;
  place-items: initial;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font-weight: inherit;
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-order-passage {
  align-items: start;
}

#practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-order-passage > .reading-grammar-translation {
  grid-column: 2;
  width: 100%;
  margin-top: -3px;
  pointer-events: none;
}

@keyframes reading-grammar-spin {
  to { transform: rotate(360deg); }
}

@keyframes reading-grammar-source-pop {
  0% { box-shadow: 0 0 0 0 transparent; }
  55% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--reading-grammar-role-color) 21%, transparent); }
}

@keyframes reading-grammar-target-pulse {
  0% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--reading-grammar-role-color) 18%, transparent); }
}

@keyframes reading-grammar-english-hover {
  0% { box-shadow: 0 0 0 0 transparent; }
  55% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--reading-grammar-role-color) 17%, transparent); }
}

@keyframes reading-grammar-translation-pop {
  from {
    background: rgba(255, 237, 159, 0.28);
    box-shadow: 0 0 0 0 transparent;
  }
}

@media (hover: hover) and (pointer: fine) {
  #practice.practice-detail-mode .question-card.active-question .reading-grammar-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(55, 169, 130, 0.28);
    box-shadow: 0 12px 25px -18px rgba(30, 105, 82, 0.58);
  }
}

@media (max-width: 760px) {
  #practice.practice-detail-mode .question-card.active-question .reading-grammar-toolbar {
    margin-bottom: 18px;
  }

  #practice.practice-detail-mode .question-card.active-question .reading-grammar-legend {
    justify-content: flex-start;
    gap: 7px 12px;
  }

  #practice.practice-detail-mode .question-card.active-question:is(
    [data-reading-grammar-state="loading"],
    [data-reading-grammar-state="open"]
  ) #questionText .inline-fib-question {
    gap: 28px;
  }

  #practice.practice-detail-mode .question-card.active-question[data-reading-grammar-state="open"] .reading-grammar-translation:not([hidden]) {
    padding: 9px 10px;
    font-size: 13px;
    line-height: 1.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  #practice.practice-detail-mode .question-card.active-question .reading-grammar-toggle,
  #practice.practice-detail-mode .question-card.active-question .reading-grammar-chunk,
  #practice.practice-detail-mode .question-card.active-question .reading-grammar-translation [data-reading-grammar-for] {
    transition: none;
    animation: none;
  }
}

#practice.practice-detail-mode > .practice-top-grid,
#practice.active-view.practice-detail-mode > .practice-top-grid,
body.view-practice.practice-answer-detail-active #practice > .practice-top-grid,
body.practice-answer-detail-active #practice > .practice-top-grid,
#practice > .practice-top-grid.is-answer-hidden,
#practice > .practice-top-grid[hidden] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

#practice.practice-detail-mode .stage-practice .question-browser {
  justify-content: flex-start !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 14px !important;
}

#practice.practice-detail-mode .stage-practice .question-browser-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

#practice.practice-detail-mode .stage-practice .question-browser-head > div {
  min-width: 0 !important;
}

#practice.practice-detail-mode .stage-practice .question-browser-head .eyebrow {
  white-space: nowrap !important;
}

#practice.practice-detail-mode .stage-practice .question-browser-head h3 {
  margin: 2px 0 0 !important;
  font-size: 20px !important;
  line-height: 24px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#practice.practice-detail-mode .stage-practice #backToTypesButton {
  align-self: start !important;
  max-width: 72px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#practice.practice-detail-mode .stage-practice .question-finder {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  min-height: 0 !important;
  background: var(--answer-card) !important;
}

#practice.practice-detail-mode .stage-practice .search-field {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  gap: 8px !important;
}

#practice.practice-detail-mode .stage-practice .search-field span {
  width: 22px !important;
  height: 22px !important;
}

#practice.practice-detail-mode .stage-practice .search-field span::before {
  font-size: 15px !important;
}

#practice.practice-detail-mode .stage-practice .question-list-tools {
  margin: 0 !important;
  gap: 6px !important;
}

#practice.practice-detail-mode .stage-practice .question-list {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 6px !important;
}

@media (min-width: 761px) {
  #practice.practice-detail-mode .stage-practice .practice-workbench {
    align-items: stretch !important;
  }

  #practice.practice-detail-mode .stage-practice .question-browser {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    overflow: hidden !important;
  }

  #practice.practice-detail-mode .stage-practice .question-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

#practice.practice-detail-mode .stage-practice .practice-resizer,
#practice.practice-detail-mode .feedback-resizer {
  width: 18px !important;
  min-width: 18px !important;
  cursor: col-resize !important;
}

@media (max-width: 1180px) {
  #practice:not(.practice-detail-mode) .practice-top-grid {
    grid-template-columns: 1fr !important;
  }

  #practice.practice-detail-mode .practice-dashboard-layout {
    grid-template-columns: minmax(360px, 1fr) 18px minmax(240px, var(--practice-feedback-width, 320px)) !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-workbench {
    grid-template-columns: minmax(150px, var(--practice-list-width, 240px)) 18px minmax(300px, 1fr) !important;
  }
}

@media (max-width: 760px) {
  #practice:not(.practice-detail-mode) .practice-top-grid {
    padding: 22px !important;
    border-radius: 26px !important;
  }

  #practice:not(.practice-detail-mode) .practice-top-grid .practice-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  #practice:not(.practice-detail-mode) .practice-top-grid .practice-hero h2 {
    font-size: 27px !important;
  }

  #practice:not(.practice-detail-mode) .practice-top-grid .practice-hero > img {
    display: none !important;
  }
}

#practice.practice-detail-mode .stage-practice .practice-navigator {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:not(.is-hidden),
#practice .stage-practice .ra-demo-player:not(.is-hidden) {
  width: min(320px, 100%) !important;
  grid-template-columns: 34px minmax(150px, 1fr) !important;
  gap: 9px !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:not(.is-hidden) .ra-demo-avatar,
#practice .stage-practice .ra-demo-player:not(.is-hidden) .ra-demo-avatar {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:not(.is-hidden) .ra-demo-player-controls,
#practice .stage-practice .ra-demo-player:not(.is-hidden) .ra-demo-player-controls {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:not(.is-hidden) #raDemoToggleButton,
#practice .stage-practice .ra-demo-player:not(.is-hidden) #raDemoToggleButton {
  position: relative !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #050607 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.65) !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:not(.is-hidden) #raDemoToggleButton::before,
#practice .stage-practice .ra-demo-player:not(.is-hidden) #raDemoToggleButton::before {
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 2px !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;
  border-left: 10px solid #fff !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:not(.is-hidden) #raDemoToggleButton.is-playing::before,
#practice .stage-practice .ra-demo-player:not(.is-hidden) #raDemoToggleButton.is-playing::before {
  width: 10px !important;
  height: 14px !important;
  margin-left: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 4px solid #fff !important;
  border-right: 4px solid #fff !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:not(.is-hidden) #raDemoToggleButton.is-playing,
#practice .stage-practice .ra-demo-player:not(.is-hidden) #raDemoToggleButton.is-playing {
  box-shadow: 0 0 0 4px rgba(5, 6, 7, 0.12), 0 10px 20px -12px rgba(0, 0, 0, 0.75) !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:not(.is-hidden) #raDemoProgress,
#practice .stage-practice .ra-demo-player:not(.is-hidden) #raDemoProgress {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #050607 0 var(--demo-progress, 0%), #d7d9dd var(--demo-progress, 0%) 100%) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:not(.is-hidden) #raDemoProgress::-webkit-slider-runnable-track,
#practice .stage-practice .ra-demo-player:not(.is-hidden) #raDemoProgress::-webkit-slider-runnable-track {
  height: 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:not(.is-hidden) #raDemoProgress::-webkit-slider-thumb,
#practice .stage-practice .ra-demo-player:not(.is-hidden) #raDemoProgress::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -2px !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  background: #050607 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:not(.is-hidden) #raDemoProgress::-moz-range-track,
#practice .stage-practice .ra-demo-player:not(.is-hidden) #raDemoProgress::-moz-range-track {
  height: 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player:not(.is-hidden) #raDemoProgress::-moz-range-thumb,
#practice .stage-practice .ra-demo-player:not(.is-hidden) #raDemoProgress::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  background: #050607 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player,
#practice .stage-practice .ra-demo-player {
  width: min(320px, 100%) !important;
  min-height: 34px !important;
  margin: 18px 0 12px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(150px, 1fr) !important;
  grid-template-rows: 34px !important;
  align-items: center !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player .ra-demo-avatar,
#practice .stage-practice .ra-demo-player .ra-demo-avatar,
#practice.practice-detail-mode .stage-practice .ra-demo-player .ra-demo-player-head > div:last-of-type,
#practice .stage-practice .ra-demo-player .ra-demo-player-head > div:last-of-type,
#practice.practice-detail-mode .stage-practice .ra-demo-player #raDemoSpeedSelect,
#practice .stage-practice .ra-demo-player #raDemoSpeedSelect,
#practice.practice-detail-mode .stage-practice .ra-demo-player .ra-demo-player-controls span,
#practice .stage-practice .ra-demo-player .ra-demo-player-controls span {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player .ra-demo-player-head,
#practice .stage-practice .ra-demo-player .ra-demo-player-head {
  display: contents !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player .ra-demo-player-controls,
#practice .stage-practice .ra-demo-player .ra-demo-player-controls {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player #raDemoToggleButton,
#practice .stage-practice .ra-demo-player #raDemoToggleButton {
  position: relative !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #050607 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.65) !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player #raDemoToggleButton::before,
#practice .stage-practice .ra-demo-player #raDemoToggleButton::before {
  content: "" !important;
  position: absolute !important;
  top: 51% !important;
  left: 57% !important;
  width: 11px !important;
  height: 13px !important;
  margin: 0 !important;
  border: 0 !important;
  background: #fff !important;
  clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
  transform: translate(-50%, -50%) !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player #raDemoToggleButton.is-playing::before,
#practice .stage-practice .ra-demo-player #raDemoToggleButton.is-playing::before {
  top: 50% !important;
  left: 50% !important;
  width: 4px !important;
  height: 13px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  clip-path: none !important;
  transform: translate(calc(-50% - 4px), -50%) !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player #raDemoToggleButton.is-playing::after,
#practice .stage-practice .ra-demo-player #raDemoToggleButton.is-playing::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 4px !important;
  height: 13px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  transform: translate(calc(-50% + 4px), -50%) !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player #raDemoProgress,
#practice .stage-practice .ra-demo-player #raDemoProgress {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #050607 0 var(--demo-progress, 0%), #d7d9dd var(--demo-progress, 0%) 100%) !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player #raDemoProgress::-webkit-slider-runnable-track,
#practice .stage-practice .ra-demo-player #raDemoProgress::-webkit-slider-runnable-track {
  height: 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player #raDemoProgress::-webkit-slider-thumb,
#practice .stage-practice .ra-demo-player #raDemoProgress::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -2px !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  background: #050607 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready {
  background: rgba(255, 255, 255, 0.97) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-coach-report {
  gap: 14px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .coach-invalid-alert {
  padding: 14px 16px !important;
  border: 1px solid rgba(210, 214, 220, 0.82) !important;
  border-left: 4px solid #d19300 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff, #fbfaf6) !important;
  color: #1d1d1f !important;
  box-shadow: 0 10px 24px -22px rgba(29, 29, 31, 0.34) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .coach-invalid-alert strong {
  color: #9a6700 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .coach-invalid-alert p {
  margin-top: 6px !important;
  color: #515966 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-card,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-result-summary .speech-score-card,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .coach-hero-card {
  border: 1px solid rgba(219, 222, 227, 0.78) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 84% 26%, rgba(0, 163, 110, 0.14), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #fbfaf6 58%, #f5f1e8 100%) !important;
  box-shadow: 0 16px 32px -28px rgba(14, 17, 23, 0.34) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines span,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .coach-kicker,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .coach-hero-card p,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .coach-hero-card strong {
  color: #52606d !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-score-lines p strong,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .coach-hero-card h2 {
  color: #050607 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-total-ring,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .coach-score-orb {
  background:
    radial-gradient(circle at center, #fff 56%, transparent 57%),
    conic-gradient(#00a36e 0deg var(--score, 0deg), rgba(0, 163, 110, 0.18) var(--score, 0deg) 360deg) !important;
  box-shadow: 0 12px 28px -18px rgba(0, 163, 110, 0.55) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card {
  border: 1px solid rgba(0, 163, 110, 0.22) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 253, 249, 0.96)) !important;
  box-shadow: 0 16px 30px -26px rgba(0, 163, 110, 0.32) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card h3 {
  color: #050607 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card p,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card div {
  color: #364152 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) {
  font-size: 16px !important;
  text-rendering: geometricPrecision;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) > p,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) .speech-ai-summary-reason em,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) > strong {
  color: #111827 !important;
  font-size: 16px !important;
  line-height: 1.82 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) .speech-ai-summary-reason span,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) > div > span {
  color: #005b3e !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article {
  gap: 12px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article strong {
  font-size: 17px !important;
  line-height: 1.35 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article em {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article small,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article p {
  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.86 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article p b {
  color: #005b3e !important;
  font-size: 15px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article ul {
  gap: 10px !important;
  padding: 12px 14px 12px 30px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article li,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) > div:not(.speech-ai-summary-head):not(.speech-ai-summary-reason):not(.speech-ai-phoneme-focus):not(.speech-phoneme-guide-card) b {
  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

@media print {
  #practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card,
  #practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card * {
    filter: none !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) {
    border-color: #84d8bc !important;
    background: #fff !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  #practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-phoneme-focus article,
  #practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) > p,
  #practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) .speech-ai-summary-reason em,
  #practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-summary-card:not(:has(.speech-ai-loading-inline)) > strong {
    background: #fff !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-analysis-btn,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready [data-speech-ai-analysis] {
  position: relative !important;
  display: inline-grid !important;
  grid-template-columns: auto 20px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-width: 166px !important;
  min-height: 58px !important;
  padding: 0 17px 0 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(32, 201, 151, 0.28) !important;
  border-radius: 23px !important;
  color: #06705e !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.96), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(233, 255, 248, 0.7)) !important;
  box-shadow:
    0 0 0 6px rgba(32, 201, 151, 0.045),
    0 14px 30px rgba(20, 151, 119, 0.16),
    0 0 26px rgba(32, 201, 151, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  isolation: isolate !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-analysis-btn::before,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready [data-speech-ai-analysis]::before {
  content: "" !important;
  position: absolute !important;
  inset: -42% auto -42% -55% !important;
  width: 46% !important;
  z-index: -1 !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent) !important;
  filter: blur(2px) !important;
  transform: rotate(13deg) !important;
  animation: deep-correction-button-sheen 3.2s ease-in-out infinite !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-analysis-btn::after,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready [data-speech-ai-analysis]::after {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  z-index: -2 !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at 76% 50%, rgba(32, 201, 151, 0.16), transparent 58%) !important;
  opacity: 0.84 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready [data-speech-ai-analysis] i {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .deep-correction-action-label {
  color: inherit !important;
  font-size: 17px !important;
  font-weight: 930 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 -1px 0 rgba(3, 88, 74, 0.12) !important;
  white-space: nowrap !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .deep-correction-action-arrow {
  position: relative !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: rgba(32, 201, 151, 0.11) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .deep-correction-action-arrow::before {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 4px !important;
  width: 7px !important;
  height: 7px !important;
  border-top: 2px solid #07977d !important;
  border-right: 2px solid #07977d !important;
  transform: rotate(45deg) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-analysis-btn:hover,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready [data-speech-ai-analysis]:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 0 0 7px rgba(32, 201, 151, 0.06),
    0 18px 34px rgba(20, 151, 119, 0.18),
    0 0 30px rgba(32, 201, 151, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

@keyframes deep-correction-button-sheen {
  0%,
  48% {
    opacity: 0;
    transform: translateX(0) rotate(13deg);
  }

  62% {
    opacity: 0.82;
  }

  100% {
    opacity: 0;
    transform: translateX(360%) rotate(13deg);
  }
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-coach-report .speech-reference-card,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card {
  min-height: 0 !important;
  max-height: none !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(219, 222, 227, 0.82) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 12px 24px -22px rgba(14, 17, 23, 0.36) !important;
  overflow: visible !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-coach-report .speech-reference-card::before,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card::before {
  content: "你的回答" !important;
  display: block !important;
  margin: 0 0 12px !important;
  color: #52606d !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 18px !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .coach-audio-card,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .di-audio-card {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-answer-audio-strip {
  display: block !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(219, 222, 227, 0.78) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #f9fafb 0%, #f4f6f8 100%) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-answer-audio-strip .speech-native-audio {
  display: block !important;
  width: 100% !important;
  min-height: 38px !important;
  height: 38px !important;
  accent-color: #111214 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-coach-report .speech-reference,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card .speech-reference {
  display: block !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #d91515 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card .speech-word,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card .speech-punctuation,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-reference-card .speech-pause-mark {
  display: inline !important;
  white-space: normal !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .speech-scoring-loading,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline,
#practice.practice-detail-mode .feedback-panel.speech-report-mode .speech-scoring-failed,
.feedback-panel.scoring .speech-scoring-loading,
.feedback-panel.speech-report-mode .speech-scoring-failed {
  border: 1px solid rgba(219, 222, 227, 0.72) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(200, 145, 0, 0.10), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%) !important;
  box-shadow: 0 18px 36px -30px rgba(14, 17, 23, 0.36) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ai-visual-card,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline .scoring-ai-visual-card,
.feedback-panel.scoring .scoring-ai-visual-card {
  border: 1px solid rgba(219, 222, 227, 0.72) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(200, 145, 0, 0.10), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 249, 245, 0.96)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.76), 0 16px 30px -28px rgba(14, 17, 23, 0.32) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ring-glow,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline .scoring-ring-glow,
.feedback-panel.scoring .scoring-ring-glow {
  background: radial-gradient(circle at center, rgba(200, 145, 0, 0.18), rgba(200, 145, 0, 0.06) 44%, transparent 72%) !important;
  filter: blur(4px) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ring-track,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline .scoring-ring-track,
.feedback-panel.scoring .scoring-ring-track {
  border-color: rgba(200, 145, 0, 0.18) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ring-arc,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline .scoring-ring-arc,
.feedback-panel.scoring .scoring-ring-arc {
  background: conic-gradient(from 18deg, #c89100 0 92deg, transparent 92deg 360deg) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ring-visual strong,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline .scoring-ring-visual strong,
.feedback-panel.scoring .scoring-ring-visual strong {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: #1d1d1f !important;
  color: #fff !important;
  box-shadow: 0 14px 24px -16px rgba(29, 29, 31, 0.72) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline .scoring-wave-bars b,
.feedback-panel.scoring .scoring-wave-bars b {
  background: linear-gradient(180deg, #d6a21c 0%, #c89100 100%) !important;
  opacity: 0.92 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(3n),
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline .scoring-wave-bars b:nth-child(3n),
.feedback-panel.scoring .scoring-wave-bars b:nth-child(3n) {
  background: linear-gradient(180deg, #1d1d1f 0%, #4b4b4f 100%) !important;
  opacity: 0.5 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars::before,
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars::after,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline .scoring-wave-bars::before,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline .scoring-wave-bars::after,
.feedback-panel.scoring .scoring-wave-bars::before,
.feedback-panel.scoring .scoring-wave-bars::after {
  background: rgba(200, 145, 0, 0.2) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ai-visual-card h3,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline h3,
#practice.practice-detail-mode .feedback-panel.speech-report-mode .speech-scoring-failed h3,
.feedback-panel.scoring .scoring-ai-visual-card h3,
.feedback-panel.speech-report-mode .speech-scoring-failed h3 {
  color: #1d1d1f !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ai-visual-card p,
#practice.practice-detail-mode .feedback-panel.speech-report-mode.speech-result-ready .speech-ai-loading-inline p,
#practice.practice-detail-mode .feedback-panel.speech-report-mode .speech-scoring-failed p,
#practice.practice-detail-mode .feedback-panel.speech-report-mode .speech-scoring-failed small,
.feedback-panel.scoring .scoring-ai-visual-card p,
.feedback-panel.speech-report-mode .speech-scoring-failed p,
.feedback-panel.speech-report-mode .speech-scoring-failed small {
  color: #626a73 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-card,
.feedback-panel.scoring .scoring-progress-card {
  border: 1px solid rgba(219, 222, 227, 0.72) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 12px 28px -24px rgba(14, 17, 23, 0.28) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-row i,
.feedback-panel.scoring .scoring-progress-row i {
  height: 7px !important;
  border-radius: 999px !important;
  background: #e5e5ea !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-row b,
.feedback-panel.scoring .scoring-progress-row b {
  border-radius: 999px !important;
  background: #c89100 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-row.is-active b,
.feedback-panel.scoring .scoring-progress-row.is-active b {
  background: #1d1d1f !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-info-card,
.feedback-panel.scoring .scoring-info-card {
  border: 1px solid rgba(200, 145, 0, 0.24) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #fffdf8, #fffaf0) !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-info-card strong,
.feedback-panel.scoring .scoring-info-card strong {
  color: #9a6700 !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode .speech-scoring-failed .scoring-orbit,
.feedback-panel.speech-report-mode .speech-scoring-failed .scoring-orbit {
  background:
    radial-gradient(circle at center, #fff 45%, transparent 46%),
    conic-gradient(from -30deg, #c89100, rgba(200, 145, 0, 0.24), #c89100) !important;
  box-shadow: 0 18px 32px -24px rgba(200, 145, 0, 0.58) !important;
}

#practice.practice-detail-mode .feedback-panel.speech-report-mode .speech-scoring-failed .scoring-orbit span,
.feedback-panel.speech-report-mode .speech-scoring-failed .scoring-orbit span {
  color: #1d1d1f !important;
}

#practice:not(.practice-detail-mode) {
  --practice-glass: rgba(255, 255, 255, 0.68);
  --practice-glass-strong: rgba(255, 255, 255, 0.82);
  --practice-hairline: rgba(255, 255, 255, 0.72);
  --practice-shadow-soft: 0 18px 46px -36px rgba(14, 17, 23, 0.42);
  --practice-shadow-hover: 0 24px 56px -34px rgba(14, 17, 23, 0.5);
}

#practice:not(.practice-detail-mode) .practice-top-grid,
#practice:not(.practice-detail-mode) .practice-side-card,
#practice:not(.practice-detail-mode) .type-card,
#practice:not(.practice-detail-mode) .practice-plan-card {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(219, 222, 227, 0.54) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.58)),
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.92), transparent 36%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.24) !important;
  backdrop-filter: blur(22px) saturate(1.24) !important;
  box-shadow: var(--practice-shadow-soft) !important;
  transform: translateZ(0);
}

#practice:not(.practice-detail-mode) .practice-top-grid::after,
#practice:not(.practice-detail-mode) .practice-side-card::after,
#practice:not(.practice-detail-mode) .type-card::after,
#practice:not(.practice-detail-mode) .practice-plan-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.64), transparent 32%),
    linear-gradient(315deg, rgba(200, 145, 0, 0.08), transparent 34%) !important;
  opacity: 0.78 !important;
}

#practice:not(.practice-detail-mode) .practice-top-grid::before,
#practice:not(.practice-detail-mode) .type-card::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.52) 42%, transparent 58%) !important;
  opacity: 0 !important;
  transform: translateX(-36%) !important;
  transition: opacity 0.35s ease, transform 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

#practice:not(.practice-detail-mode) .practice-top-grid:hover::before,
#practice:not(.practice-detail-mode) .type-card:hover::before {
  opacity: 0.72 !important;
  transform: translateX(36%) !important;
}

#practice:not(.practice-detail-mode) .type-card {
  min-height: 182px !important;
  transition:
    transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.28s ease,
    box-shadow 0.34s ease,
    background 0.34s ease !important;
  will-change: transform !important;
  animation: practiceCardRise 0.56s cubic-bezier(0.18, 0.9, 0.24, 1) both;
  animation-delay: calc(min(var(--card-index, 0), 18) * 0.028s);
}

#practice:not(.practice-detail-mode) .type-card:hover {
  transform: translateY(-7px) scale(1.012) !important;
  border-color: rgba(200, 145, 0, 0.34) !important;
  box-shadow: var(--practice-shadow-hover) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72)),
    radial-gradient(circle at 50% -10%, rgba(200, 145, 0, 0.12), transparent 42%) !important;
}

#practice:not(.practice-detail-mode) .type-card:active {
  transform: translateY(-2px) scale(0.992) !important;
  transition-duration: 0.12s !important;
}

#practice:not(.practice-detail-mode) .type-card.active,
#practice:not(.practice-detail-mode) .type-card[aria-pressed="true"] {
  border-color: rgba(200, 145, 0, 0.42) !important;
  box-shadow: 0 0 0 1px rgba(200, 145, 0, 0.12), var(--practice-shadow-soft) !important;
}

#practice:not(.practice-detail-mode) .type-card span:first-child,
#practice:not(.practice-detail-mode) .type-card .type-code {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease !important;
}

#practice:not(.practice-detail-mode) .type-card:hover span:first-child,
#practice:not(.practice-detail-mode) .type-card:hover .type-code {
  transform: translateY(-2px) scale(1.04) !important;
  filter: saturate(1.08) !important;
}

#practice:not(.practice-detail-mode) .type-card strong {
  transition: color 0.24s ease, transform 0.28s ease !important;
}

#practice:not(.practice-detail-mode) .type-card:hover strong {
  color: #050607 !important;
  transform: translateY(-1px) !important;
}

#practice:not(.practice-detail-mode) .type-card .type-progress,
#practice:not(.practice-detail-mode) .type-card progress,
#practice:not(.practice-detail-mode) .type-card .progress-line {
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(229, 229, 234, 0.78) !important;
}

#practice:not(.practice-detail-mode) .type-card .type-progress span,
#practice:not(.practice-detail-mode) .type-card .progress-line span {
  transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.28s ease !important;
}

#practice:not(.practice-detail-mode) .type-card:hover .type-progress span,
#practice:not(.practice-detail-mode) .type-card:hover .progress-line span {
  filter: brightness(0.94) saturate(1.08) !important;
}

#practice:not(.practice-detail-mode) .practice-category-list button,
#practice:not(.practice-detail-mode) .practice-hero-points article,
#practice:not(.practice-detail-mode) .practice-plan-card .ghost-btn,
#practice:not(.practice-detail-mode) .practice-plan-card .primary-btn {
  transition:
    transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease !important;
}

#practice:not(.practice-detail-mode) .practice-category-list button:hover,
#practice:not(.practice-detail-mode) .practice-hero-points article:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(200, 145, 0, 0.28) !important;
  box-shadow: 0 12px 28px -22px rgba(14, 17, 23, 0.38) !important;
}

#practice:not(.practice-detail-mode) .practice-category-list button:active,
#practice:not(.practice-detail-mode) .practice-plan-card button:active {
  transform: scale(0.975) !important;
}

#practice:not(.practice-detail-mode) .practice-category-list button.active {
  background: rgba(29, 29, 31, 0.94) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px -18px rgba(29, 29, 31, 0.62) !important;
}

#practice:not(.practice-detail-mode) .practice-top-grid {
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.34s ease !important;
}

#practice:not(.practice-detail-mode) .practice-top-grid:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 28px 62px -42px rgba(14, 17, 23, 0.52) !important;
}

#practice:not(.practice-detail-mode) .practice-plan-card {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease !important;
}

#practice:not(.practice-detail-mode) .practice-plan-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 50px -36px rgba(14, 17, 23, 0.48) !important;
}

#practice:not(.practice-detail-mode) .practice-plan-card .primary-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px -16px rgba(29, 29, 31, 0.58) !important;
}

#practice:not(.practice-detail-mode) .type-card-grid {
  perspective: 1200px !important;
}

#practice:not(.practice-detail-mode) .type-card:nth-child(1) { --card-index: 1; }
#practice:not(.practice-detail-mode) .type-card:nth-child(2) { --card-index: 2; }
#practice:not(.practice-detail-mode) .type-card:nth-child(3) { --card-index: 3; }
#practice:not(.practice-detail-mode) .type-card:nth-child(4) { --card-index: 4; }
#practice:not(.practice-detail-mode) .type-card:nth-child(5) { --card-index: 5; }
#practice:not(.practice-detail-mode) .type-card:nth-child(6) { --card-index: 6; }
#practice:not(.practice-detail-mode) .type-card:nth-child(7) { --card-index: 7; }
#practice:not(.practice-detail-mode) .type-card:nth-child(8) { --card-index: 8; }
#practice:not(.practice-detail-mode) .type-card:nth-child(9) { --card-index: 9; }
#practice:not(.practice-detail-mode) .type-card:nth-child(10) { --card-index: 10; }
#practice:not(.practice-detail-mode) .type-card:nth-child(11) { --card-index: 11; }
#practice:not(.practice-detail-mode) .type-card:nth-child(12) { --card-index: 12; }
#practice:not(.practice-detail-mode) .type-card:nth-child(13) { --card-index: 13; }
#practice:not(.practice-detail-mode) .type-card:nth-child(14) { --card-index: 14; }
#practice:not(.practice-detail-mode) .type-card:nth-child(15) { --card-index: 15; }
#practice:not(.practice-detail-mode) .type-card:nth-child(16) { --card-index: 16; }
#practice:not(.practice-detail-mode) .type-card:nth-child(17) { --card-index: 17; }
#practice:not(.practice-detail-mode) .type-card:nth-child(18) { --card-index: 18; }
#practice:not(.practice-detail-mode) .type-card:nth-child(19) { --card-index: 19; }
#practice:not(.practice-detail-mode) .type-card:nth-child(20) { --card-index: 20; }
#practice:not(.practice-detail-mode) .type-card:nth-child(21) { --card-index: 21; }
#practice:not(.practice-detail-mode) .type-card:nth-child(22) { --card-index: 22; }
#practice:not(.practice-detail-mode) .type-card:nth-child(23) { --card-index: 23; }
#practice:not(.practice-detail-mode) .type-card:nth-child(24) { --card-index: 24; }

@keyframes practiceCardRise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #practice:not(.practice-detail-mode) .type-card,
  #practice:not(.practice-detail-mode) .practice-top-grid,
  #practice:not(.practice-detail-mode) .practice-category-list button,
  #practice:not(.practice-detail-mode) .practice-plan-card {
    animation: none !important;
    transition: none !important;
  }
}

#practice.practice-detail-mode .stage-practice .question-card.active-question,
#practice.practice-detail-mode .stage-practice .active-question {
  overflow: visible !important;
  contain: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player,
#practice .stage-practice .ra-demo-player {
  position: relative !important;
  z-index: 12 !important;
  display: block !important;
  width: min(380px, 100%) !important;
  height: auto !important;
  min-height: 42px !important;
  margin: 24px 0 20px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player .ra-demo-player-head,
#practice .stage-practice .ra-demo-player .ra-demo-player-head,
#practice.practice-detail-mode .stage-practice .ra-demo-player .ra-demo-avatar,
#practice .stage-practice .ra-demo-player .ra-demo-avatar,
#practice.practice-detail-mode .stage-practice .ra-demo-player .ra-demo-player-controls span,
#practice .stage-practice .ra-demo-player .ra-demo-player-controls span,
#practice.practice-detail-mode .stage-practice .ra-demo-player #raDemoSpeedSelect,
#practice .stage-practice .ra-demo-player #raDemoSpeedSelect {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player .ra-demo-player-controls,
#practice .stage-practice .ra-demo-player .ra-demo-player-controls {
  position: relative !important;
  z-index: 14 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(180px, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  overflow: visible !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player #raDemoToggleButton,
#practice .stage-practice .ra-demo-player #raDemoToggleButton {
  position: relative !important;
  z-index: 15 !important;
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  order: 0 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #050607 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.7) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player #raDemoProgress,
#practice .stage-practice .ra-demo-player #raDemoProgress {
  position: relative !important;
  z-index: 15 !important;
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  order: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 12px !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#practice.practice-detail-mode .stage-practice .question-tools {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 8px !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .speech-scoring-loading,
.feedback-panel.scoring .speech-scoring-loading {
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 163, 110, 0.08), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ai-visual-card,
.feedback-panel.scoring .scoring-ai-visual-card {
  border-color: rgba(219, 222, 227, 0.78) !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(0, 163, 110, 0.10), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ring-glow,
.feedback-panel.scoring .scoring-ring-glow {
  background: radial-gradient(circle at center, rgba(0, 163, 110, 0.16), rgba(0, 163, 110, 0.05) 45%, transparent 72%) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ring-track,
.feedback-panel.scoring .scoring-ring-track {
  border-color: rgba(0, 163, 110, 0.18) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-ring-arc,
.feedback-panel.scoring .scoring-ring-arc {
  background: conic-gradient(from 18deg, #00a36e 0 92deg, transparent 92deg 360deg) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b,
.feedback-panel.scoring .scoring-wave-bars b {
  background: linear-gradient(180deg, #00a36e 0%, #007a52 100%) !important;
  opacity: 0.86 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars b:nth-child(3n),
.feedback-panel.scoring .scoring-wave-bars b:nth-child(3n) {
  background: linear-gradient(180deg, #1d1d1f 0%, #5f6368 100%) !important;
  opacity: 0.42 !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars::before,
#practice.practice-detail-mode .feedback-panel.scoring .scoring-wave-bars::after,
.feedback-panel.scoring .scoring-wave-bars::before,
.feedback-panel.scoring .scoring-wave-bars::after {
  background: rgba(0, 163, 110, 0.18) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-card,
.feedback-panel.scoring .scoring-progress-card {
  background: rgba(255, 255, 255, 0.96) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-row i,
.feedback-panel.scoring .scoring-progress-row i {
  position: relative !important;
  overflow: hidden !important;
  height: 8px !important;
  background: #e5e5ea !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-row b,
.feedback-panel.scoring .scoring-progress-row b {
  position: relative !important;
  overflow: hidden !important;
  background: #00a36e !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-row b::after,
.feedback-panel.scoring .scoring-progress-row b::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 44px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent) !important;
  transform: translateX(-120%) !important;
  animation: scoringProgressShimmer 1.45s ease-in-out infinite !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-progress-row.is-pending b,
.feedback-panel.scoring .scoring-progress-row.is-pending b {
  background: rgba(0, 163, 110, 0.5) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-info-card,
.feedback-panel.scoring .scoring-info-card {
  border-color: rgba(0, 163, 110, 0.22) !important;
  background: linear-gradient(180deg, #ffffff, #f6fdf9) !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .scoring-info-card strong,
.feedback-panel.scoring .scoring-info-card strong {
  color: #006b47 !important;
}

@keyframes scoringProgressShimmer {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translateX(220%);
    opacity: 0;
  }
}

#practice:not(.practice-detail-mode) .practice-top-grid .practice-hero .eyebrow,
#practice:not(.practice-detail-mode) .practice-top-grid .practice-hero p:not(.eyebrow),
#practice:not(.practice-detail-mode) .practice-top-grid .practice-hero-points {
  display: none !important;
}

#practice:not(.practice-detail-mode) .practice-top-grid .practice-hero {
  align-content: center !important;
  gap: 0 !important;
}

#practice:not(.practice-detail-mode) .practice-top-grid .practice-hero h2 {
  margin: 0 !important;
}

#practice:has(.practice-panel.stage-practice) > .practice-top-grid,
#practice:has(.stage-practice .answer-stage) > .practice-top-grid,
body:has(#practice .practice-panel.stage-practice) #practice > .practice-top-grid {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

#practice.practice-detail-mode .stage-practice .ra-demo-player #raDemoToggleButton,
#practice .stage-practice .ra-demo-player #raDemoToggleButton {
  transform: translateY(2px) !important;
}

.home-thread-forum {
  padding: 22px 28px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(219, 222, 227, 0.62) !important;
  box-shadow: 0 18px 48px -32px rgba(14, 17, 23, 0.22) !important;
}

.home-thread-forum .home-forum-compose {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 132px auto;
  gap: 10px;
  align-items: stretch;
  padding: 12px;
  margin: 14px 0 12px;
  background: rgba(246, 247, 249, 0.72);
  border: 1px solid rgba(219, 222, 227, 0.72);
  border-radius: 18px;
}

.home-thread-forum .home-forum-compose textarea {
  grid-column: 1 / -1;
  min-height: 74px;
  resize: vertical;
}

.home-thread-forum .home-forum-tabs {
  border-bottom: 1px solid rgba(219, 222, 227, 0.72);
  padding-bottom: 10px;
}

.home-thread-forum .home-forum-list {
  gap: 0;
}

.home-thread-forum .home-forum-post {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 24px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(219, 222, 227, 0.68);
  border-radius: 0;
  box-shadow: none;
}

.home-thread-forum .home-forum-post:first-child {
  padding-top: 18px;
}

.home-thread-forum .home-forum-post.is-pinned {
  background: linear-gradient(90deg, rgba(255, 248, 225, 0.52), rgba(255, 255, 255, 0));
}

.home-thread-forum .home-forum-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--avatar-color, #1d1d1f);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  box-shadow: 0 10px 24px -14px rgba(14, 17, 23, 0.45);
}

.forum-thread-main {
  min-width: 0;
}

.home-thread-forum .home-forum-post-head {
  align-items: flex-start;
  margin-bottom: 10px;
}

.home-thread-forum .home-forum-post-head > div {
  display: grid;
  gap: 4px;
}

.home-thread-forum .home-forum-post-head strong {
  font-size: 16px;
  line-height: 1.35;
}

.home-thread-forum .home-forum-post-head small,
.home-thread-forum .home-forum-post-head span {
  color: #7d8490;
  font-size: 12px;
  font-weight: 700;
}

.forum-thread-content {
  color: #1d2433;
  font-size: 14px;
  line-height: 1.9;
  white-space: normal;
}

.forum-thread-content mark,
.forum-thread-reply mark {
  padding: 1px 5px;
  border-radius: 5px;
  color: #0077c8;
  background: rgba(56, 189, 248, 0.18);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.home-thread-forum .home-forum-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 10px 0 8px;
}

.home-thread-forum .home-forum-actions button,
.forum-expand-replies {
  border: 0;
  background: transparent;
  color: #8b93a0;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.home-thread-forum .home-forum-actions button:hover,
.forum-expand-replies:hover {
  color: #1d1d1f;
}

.home-thread-forum .home-forum-replies {
  display: grid;
  gap: 0;
  margin-top: 8px;
}

.home-thread-forum .home-forum-replies > div:not(.home-forum-reply-box) {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 10px 0;
}

.forum-thread-reply {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
}

.forum-reply-line {
  background: #edf0f4;
  border-radius: 999px;
}

.forum-reply-body {
  min-width: 0;
}

.forum-reply-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: #8190a5;
  font-size: 12px;
  font-weight: 700;
}

.forum-reply-meta strong {
  color: #557199;
}

.forum-reply-to {
  color: #a3adba;
}

.forum-thread-reply p {
  margin: 4px 0 0;
  color: #26364c;
  font-size: 13px;
  line-height: 1.75;
}

.forum-expand-replies {
  justify-self: start;
  margin: 6px 0 10px 14px;
  padding: 5px 9px;
  border-radius: 8px;
  background: #eef3f8;
  color: #6d7c91;
}

.home-thread-forum .home-forum-reply-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 10px;
  padding-left: 15px;
}

.home-thread-forum .home-forum-reply-box input {
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(219, 222, 227, 0.82);
  background: #fff;
  padding: 0 12px;
}

.home-thread-forum .home-forum-reply-box button {
  height: 34px;
  border: 0;
  border-radius: 10px;
  padding: 0 14px;
  color: #fff;
  background: #1d1d1f;
  font-weight: 800;
}

.home-web-forum {
  padding: 24px !important;
}

.home-web-forum .home-web-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 16px 0 6px;
  padding: 10px;
  border: 1px solid rgba(219, 222, 227, 0.74);
  border-radius: 16px;
  background: rgba(246, 247, 249, 0.62);
}

.home-web-forum .home-web-compose input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: #1d1d1f;
}

.home-web-forum .home-web-compose button {
  height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: #1d1d1f;
  color: #fff;
  font-weight: 900;
}

.home-web-thread-list {
  display: grid;
}

.home-web-thread {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(219, 222, 227, 0.72);
}

.home-web-thread:last-child {
  border-bottom: 0;
}

.home-web-thread.compact {
  padding: 14px 0;
}

.home-web-thread-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--avatar-color, #1d1d1f);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 26px -16px rgba(14, 17, 23, 0.55);
}

.home-web-thread-main {
  min-width: 0;
}

.home-web-thread-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7d8490;
  font-size: 12px;
  font-weight: 800;
}

.home-web-thread-meta b {
  color: #8f6a00;
  background: rgba(255, 193, 7, 0.18);
  border-radius: 7px;
  padding: 2px 7px;
}

.home-web-thread h4 {
  margin: 5px 0 10px;
  color: #1d1d1f;
  font-size: 16px;
  line-height: 1.35;
}

.home-web-thread-content {
  max-height: 260px;
  overflow: auto;
  padding-right: 8px;
  color: #243044;
  font-size: 14px;
  line-height: 1.86;
  scrollbar-width: thin;
  scrollbar-color: rgba(29, 29, 31, 0.12) transparent;
}

.home-web-thread-content::-webkit-scrollbar {
  width: 5px;
}

.home-web-thread-content::-webkit-scrollbar-track {
  background: transparent;
}

.home-web-thread-content::-webkit-scrollbar-thumb {
  background: rgba(29, 29, 31, 0.10);
  border-radius: 999px;
}

.home-web-thread-content:hover::-webkit-scrollbar-thumb {
  background: rgba(29, 29, 31, 0.20);
}

.home-web-thread-content mark {
  padding: 1px 5px;
  border-radius: 5px;
  color: #0077c8;
  background: rgba(56, 189, 248, 0.2);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (max-width: 760px) {
  #mock {
    width: min(430px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #mock .mock-page-head,
  #mock .mock-paper-workbench,
  #mock .mock-flow-panel,
  #mock .mock-report-panel,
  #mock .mock-command-center,
  #mock .mock-session-area > .panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


.home-web-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin: 10px 0 4px;
}

@media (max-width: 760px) {
  #practice.active-view:not(.practice-detail-mode) .figma-type-card,
  #practice:not(.practice-detail-mode) .figma-type-card {
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-dot,
  #practice:not(.practice-detail-mode) .figma-type-dot {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 36px !important;
    padding: 0 3px !important;
    font-size: var(--type-code-size, 10px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-align: center !important;
  }
}

@media (max-width: 760px) {
  body.view-practice:not(.practice-answer-detail-active),
  body.view-practice:not(.practice-answer-detail-active) .main {
    background: #f5f5f7 !important;
  }

  #practice.active-view:not(.practice-detail-mode) {
    width: 100% !important;
    max-width: min(430px, calc(100vw - 28px)) !important;
    margin: 0 auto !important;
    background: transparent !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-grid-head,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-grid,
  #practice.active-view:not(.practice-detail-mode) .figma-type-card-grid {
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-card {
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-dot {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 36px !important;
    padding: 0 3px !important;
    color: var(--type-color, #18181b) !important;
    font-size: var(--type-code-size, 10px) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-align: center !important;
  }
}

@media (max-width: 760px) {
  body.view-practice:not(.practice-answer-detail-active) {
    background: #f4f4f5 !important;
  }

  body.view-practice:not(.practice-answer-detail-active) .main {
    padding: 16px 14px calc(112px + env(safe-area-inset-bottom)) !important;
    background: #f4f4f5 !important;
  }

  #practice:not(.practice-detail-mode) {
    width: 100% !important;
    max-width: min(430px, calc(100vw - 28px)) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #practice:not(.practice-detail-mode) .practice-dashboard-layout,
  #practice:not(.practice-detail-mode) .practice-panel,
  #practice:not(.practice-detail-mode) .question-type-shell,
  #practice:not(.practice-detail-mode) .question-type-grid,
  #practice:not(.practice-detail-mode) .mobile-question-flow {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #practice:not(.practice-detail-mode) .mobile-question-flow {
    display: grid !important;
    gap: 20px !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head,
  #practice:not(.practice-detail-mode) .mobile-subject-grid,
  #practice:not(.practice-detail-mode) .figma-type-card-grid {
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head {
    min-height: 128px !important;
    padding: 24px 20px 18px !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-grid,
  #practice:not(.practice-detail-mode) .figma-type-card-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 16px !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card,
  #practice:not(.practice-detail-mode) .figma-type-card {
    border: 1px solid #e5e5ea !important;
    border-radius: 20px !important;
    background: #fbfbfd !important;
    box-shadow: none !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card {
    grid-template-columns: 50px minmax(0, 1fr) auto !important;
    min-height: 112px !important;
    padding: 14px 12px 12px !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-dot {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 36px !important;
    padding: 0 3px !important;
    border: 1px solid #e5e5ea !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--type-color, #1d1d1f) !important;
    font-size: var(--type-code-size, 10px) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-align: center !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card strong {
    color: #1d1d1f !important;
    font-size: 15px !important;
    line-height: 20px !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card small {
    color: #6e6e73 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  #practice:not(.practice-detail-mode) .mobile-type-meta {
    color: #4f5560 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 16px !important;
    white-space: nowrap !important;
  }

  #practice:not(.practice-detail-mode) .mobile-type-section-head,
  #practice:not(.practice-detail-mode) .mobile-subject-guide {
    display: none !important;
  }
}

body #practice.active-view:not(.practice-detail-mode) .figma-type-card strong,
body #practice:not(.practice-detail-mode) .figma-type-card strong {
  font-size: 14px !important;
  line-height: 18px !important;
}

body #practice.active-view:not(.practice-detail-mode) .figma-type-card small,
body #practice:not(.practice-detail-mode) .figma-type-card small {
  font-size: 10px !important;
  line-height: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body #practice.active-view:not(.practice-detail-mode) .mobile-type-meta,
body #practice:not(.practice-detail-mode) .mobile-type-meta {
  font-size: 10.5px !important;
  line-height: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#practice.practice-detail-mode .feedback-panel.has-report .feedback-idle-card,
#practice.practice-detail-mode .feedback-panel.has-report .feedback-waiting-context,
#practice.practice-detail-mode .feedback-panel.has-report .speech-idle-stack {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

#practice.practice-detail-mode .feedback-idle-card .ai-report-illustration {
  opacity: 1 !important;
}

#practice.practice-detail-mode .stage-practice .question-browser-head {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  text-align: center !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 72px !important;
  padding: 0 0 8px !important;
  margin: 0 !important;
}

#practice.practice-detail-mode .stage-practice .question-browser-head > div {
  width: 100% !important;
  justify-items: center !important;
  text-align: center !important;
}

#practice.practice-detail-mode .stage-practice .question-browser-head .eyebrow,
#practice.practice-detail-mode .stage-practice .question-browser-head h3 {
  text-align: center !important;
}

#practice.practice-detail-mode .stage-practice .question-browser-head h3 {
  margin: 2px 0 0 !important;
  white-space: normal !important;
}

#practice.practice-detail-mode .stage-practice #backToTypesButton {
  justify-self: center !important;
  align-self: center !important;
  width: auto !important;
  max-width: none !important;
  min-width: 68px !important;
  height: 28px !important;
  padding: 0 12px !important;
  display: inline-grid !important;
  place-items: center !important;
  text-align: center !important;
}

#practice.practice-detail-mode .stage-practice .question-finder {
  margin-top: 2px !important;
  position: relative !important;
  z-index: 1 !important;
}

#practice.practice-detail-mode .stage-practice .audio-prompt {
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
}

#practice.practice-detail-mode .stage-practice .audio-play-button {
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
}

#practice.practice-detail-mode .stage-practice .audio-track {
  justify-self: stretch !important;
  align-self: center !important;
}

.home-web-thread-actions button {
  border: 0;
  background: transparent;
  color: #8b93a0;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.home-web-thread-actions button:hover {
  color: #1d1d1f;
}

.home-web-thread-actions button.liked {
  color: #0f9f6e;
}

.home-web-thread-replies {
  display: none;
  margin-top: 8px;
}

.home-web-thread.is-expanded .home-web-thread-replies {
  display: grid;
}

.home-web-thread .forum-thread-reply {
  padding: 9px 0;
}

.home-web-thread-reply-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 10px;
  padding-left: 15px;
}

.home-web-thread-reply-box input {
  height: 34px;
  border: 1px solid rgba(219, 222, 227, 0.82);
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
}

.home-web-thread-reply-box button {
  height: 34px;
  border: 0;
  border-radius: 10px;
  padding: 0 14px;
  background: #1d1d1f;
  color: #fff;
  font-weight: 900;
}

#practice.practice-detail-mode .stage-practice .discussion-list.practice-thread-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
}

#practice.practice-detail-mode .stage-practice .practice-thread-post.discussion-post {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 14px !important;
  min-height: 0 !important;
  padding: 18px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(219, 222, 227, 0.72) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
}

#practice.practice-detail-mode .stage-practice .practice-thread-post.discussion-post:hover,
#practice.practice-detail-mode .stage-practice .practice-thread-post.discussion-post.is-expanded {
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#practice.practice-detail-mode .stage-practice .practice-thread-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--avatar-color, #1d1d1f);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 24px -16px rgba(14, 17, 23, 0.48);
}

#practice.practice-detail-mode .stage-practice .practice-thread-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: #7d8490;
  font-size: 12px;
  font-weight: 800;
}

#practice.practice-detail-mode .stage-practice .practice-thread-meta b {
  color: #8f6a00;
  background: rgba(255, 193, 7, 0.18);
  border-radius: 7px;
  padding: 2px 7px;
}

#practice.practice-detail-mode .stage-practice .practice-thread-meta small {
  color: #9aa3af;
}

#practice.practice-detail-mode .stage-practice .practice-thread-post h4 {
  margin: 6px 0 9px !important;
  color: #1d1d1f !important;
  font-size: 15px !important;
  line-height: 1.36 !important;
}

#practice.practice-detail-mode .stage-practice .practice-thread-content {
  color: #253247;
  font-size: 13px;
  line-height: 1.78;
  white-space: normal;
}

#practice.practice-detail-mode .stage-practice .practice-thread-content mark,
#practice.practice-detail-mode .stage-practice .forum-thread-reply mark {
  padding: 1px 5px;
  border-radius: 5px;
  color: #0077c8;
  background: rgba(56, 189, 248, 0.20);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#practice.practice-detail-mode .stage-practice .practice-thread-post .discussion-post-actions {
  justify-content: flex-end !important;
  margin-top: 10px !important;
}

#practice.practice-detail-mode .stage-practice .practice-thread-post .discussion-post-actions button {
  border: 0 !important;
  background: transparent !important;
  color: #8b93a0 !important;
  padding: 0 4px !important;
  min-height: 24px !important;
  font-size: 12px !important;
}

#practice.practice-detail-mode .stage-practice .practice-thread-post .discussion-post-actions button:hover,
#practice.practice-detail-mode .stage-practice .practice-thread-post .discussion-post-actions button.is-liked {
  color: #0f9f6e !important;
  transform: none !important;
}

#practice.practice-detail-mode .stage-practice .practice-thread-post .discussion-expanded {
  border-top: 0 !important;
  padding-top: 4px !important;
}

#practice.practice-detail-mode .stage-practice .practice-thread-post .forum-thread-reply {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
}

#practice.practice-detail-mode .stage-practice .practice-thread-post .forum-reply-line {
  background: #edf0f4;
  border-radius: 999px;
}

#practice.practice-detail-mode .stage-practice .practice-thread-post .forum-reply-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #8190a5;
  font-size: 12px;
  font-weight: 800;
}

#practice.practice-detail-mode .stage-practice .practice-thread-post .forum-reply-meta strong {
  color: #557199;
}

#practice.practice-detail-mode .stage-practice .practice-thread-post .forum-thread-reply p {
  margin: 4px 0 0;
  color: #26364c !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

#practice.practice-detail-mode .stage-practice .practice-thread-post .discussion-comment-box {
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding-left: 15px;
}

@media (max-width: 760px) {
  .home-thread-forum {
    padding: 18px !important;
  }

  .home-thread-forum .home-forum-compose {
    grid-template-columns: 1fr;
  }

  .home-thread-forum .home-forum-post {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
  }

  .home-thread-forum .home-forum-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
}

.answer-workspace[hidden] {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice #questionText {
  position: relative;
}

#practice.practice-detail-mode .stage-practice #questionText .inline-fib-question {
  display: inline;
}

#practice.practice-detail-mode .stage-practice #questionText .fib-blank {
  min-width: 84px;
  min-height: 34px;
  margin: 0 5px;
  padding: 5px 14px;
  border: 1px dashed var(--mint-dark);
  border-radius: 999px;
  color: var(--mint-dark);
  background: #fff !important;
  font-size: 17px;
  font-weight: 950;
  vertical-align: middle;
  box-shadow: none;
}

#practice.practice-detail-mode .stage-practice #questionText .fib-blank.active {
  border-style: solid;
  border-color: #1fc9a9;
  background: #eafff8 !important;
  color: #1f1815;
  box-shadow: 0 0 0 3px rgba(31, 201, 169, 0.14) !important;
}

#practice.practice-detail-mode .stage-practice #questionText .fib-blank[data-value]:not([data-value=""]) {
  border-style: solid;
  border-color: #e8c36a;
  background: #fff6dc !important;
  color: #8a6100;
}

#practice.practice-detail-mode .stage-practice #questionText .fib-word-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

#practice.practice-detail-mode .stage-practice #questionText .fib-option {
  width: auto;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  font-weight: 900;
  box-shadow: none;
}

#practice.practice-detail-mode .stage-practice #questionText .fib-option.active,
#practice.practice-detail-mode .stage-practice #questionText .fib-option.dragging {
  border-color: #1fc9a9;
  background: #eafff8 !important;
  color: #111;
  box-shadow: 0 0 0 3px rgba(31, 201, 169, 0.14) !important;
}

#practice.practice-detail-mode .stage-practice #questionText .fib-option.selected {
  color: #8c8378;
  border-color: #e2d6c5;
  background: #f7f3eb !important;
}

#practice.practice-detail-mode .stage-practice #questionText .fib-blank-choice-panel {
  position: absolute;
  z-index: 60;
  width: clamp(176px, 18vw, 206px);
  max-width: calc(100% - 16px);
  max-height: min(300px, calc(100dvh - 40px));
  padding: 10px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(199, 243, 231, 0.3), transparent 38%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.78), rgba(239, 251, 247, 0.58)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 20px 44px -28px rgba(24, 84, 70, 0.34) !important;
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
  scrollbar-width: thin;
  scrollbar-color: rgba(35, 151, 126, 0.28) transparent;
}

#practice.practice-detail-mode .stage-practice #questionText .fib-blank-choice-panel[hidden] {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice #questionText .fib-blank-choice-panel > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: 4px;
}

#practice.practice-detail-mode .stage-practice #questionText .fib-blank-choice-panel > strong {
  display: flex;
  min-height: 28px;
  padding: 0 6px;
  align-items: center;
  gap: 7px;
  color: rgba(8, 114, 94, 0.82);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.02em;
}

#practice.practice-detail-mode .stage-practice #questionText .fib-blank-choice-panel > strong::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #20b99b;
  box-shadow: 0 0 0 4px rgba(32, 185, 155, 0.1);
}

#practice.practice-detail-mode .stage-practice #questionText .fib-blank-choice-panel .fib-option {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  justify-content: flex-start;
  border-color: rgba(86, 132, 121, 0.14);
  border-radius: 12px;
  color: #26342f;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
  font-size: 14px;
  font-weight: 690;
  line-height: 1.25;
  text-align: left;
  transition:
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

#practice.practice-detail-mode .stage-practice #questionText .fib-blank-choice-panel .fib-option:focus-visible {
  outline: 0;
  border-color: rgba(22, 164, 135, 0.48);
  background: rgba(242, 255, 250, 0.9);
  box-shadow:
    0 0 0 3px rgba(31, 185, 154, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#practice.practice-detail-mode .stage-practice #questionText .fib-blank-choice-panel::-webkit-scrollbar {
  width: 5px;
}

#practice.practice-detail-mode .stage-practice #questionText .fib-blank-choice-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(35, 151, 126, 0.26);
}

@media (hover: hover) and (pointer: fine) {
  #practice.practice-detail-mode .stage-practice #questionText .fib-blank-choice-panel .fib-option:hover {
    transform: translateX(2px);
    border-color: rgba(28, 174, 143, 0.34);
    background: rgba(245, 255, 251, 0.86);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 10px 22px -18px rgba(21, 125, 100, 0.42);
  }
}

@media (prefers-reduced-motion: reduce) {
  #practice.practice-detail-mode .stage-practice #questionText .fib-blank-choice-panel .fib-option {
    transition: none;
  }
}

#practice.practice-detail-mode .stage-practice .practice-detail-hero {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .answer-workspace:empty,
#practice.practice-detail-mode .stage-practice .answer-workspace:has(.text-answer[style*="display: none"]):not(:has(.fib-answer:not(:empty))):not(:has(.choice-answer:not(:empty))):not(:has(.order-answer:not(:empty))) {
  display: none !important;
}

#practice.practice-detail-mode .reading-inline-mode.fill-mode .answer-workspace {
  display: none !important;
}

#practice.practice-detail-mode .stage-practice .active-question .question-meta {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) {
  align-content: start;
  gap: 12px;
  background: #fff;
  min-height: auto;
  min-height: unset !important;
  height: auto !important;
  align-self: start !important;
  padding-bottom: 18px;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .feedback-list {
  gap: 10px !important;
  min-height: 0 !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .reading-idle-panel {
  min-height: 0 !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode.has-report {
  gap: 14px !important;
  padding: 18px 16px 16px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  backdrop-filter: blur(24px);
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode.has-report .score-ring,
#practice.practice-detail-mode .feedback-panel.reading-report-mode.has-report .ai-breakdown {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode.has-report::after {
  content: none !important;
  position: absolute;
  top: 48px;
  right: 22px;
  min-width: 76px;
  min-height: 38px;
  padding: 0 14px 0 24px;
  border: 1px solid rgba(0, 156, 107, 0.24);
  border-radius: 999px;
  background: #ecfff7;
  display: none !important;
  place-items: center;
  color: #00835d;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode.has-report::before {
  content: none;
  position: absolute;
  top: 63px;
  right: 91px;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #009c6b;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode.has-report .feedback-list {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
}

.reading-generated-report,
.reading-ds-report {
  display: grid;
  gap: 12px;
}

.reading-score-summary,
.reading-answer-card,
.reading-ds-blank-card {
  border: 1px solid #e8ecef;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 12px 28px -20px rgba(14, 17, 23, 0.2);
  backdrop-filter: blur(18px);
}

.reading-score-summary {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
}

.reading-score-ring-compact {
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 2px solid #a7e8ce;
  border-radius: 999px;
  background: #f1fff8;
}

.reading-score-ring-compact strong {
  color: #111;
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
}

.reading-score-ring-compact span {
  color: #00835d;
  font-size: 11px;
  font-weight: 950;
}

.reading-score-copy {
  display: grid;
  gap: 6px;
}

.reading-score-copy h3,
.reading-answer-head h3 {
  margin: 0;
  color: #111;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
}

.reading-score-copy p {
  margin: 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.55;
}

.reading-score-copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reading-score-copy span {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid #a7e8ce;
  border-radius: 999px;
  background: #ecfff7;
  display: inline-flex;
  align-items: center;
  color: #00835d;
  font-size: 11px;
  font-weight: 950;
}

.reading-score-copy span + span {
  border-color: #e5e7eb;
  background: #f5f5f7;
  color: #111;
}

.reading-answer-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.reading-answer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.reading-answer-head span {
  color: #00835d;
  font-size: 12px;
  font-weight: 950;
}

.reading-answer-list {
  display: grid;
  gap: 10px;
}

.reading-answer-row {
  min-height: 48px;
  padding: 0 10px;
  border: 1px solid #d7f4e8;
  border-radius: 10px;
  background: #f8fffb;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: center;
}

.reading-answer-row > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #111;
  font-size: 13px;
  font-weight: 950;
}

.reading-answer-row strong {
  display: block;
  color: #111;
  font-size: 15px;
  line-height: 1.15;
}

.reading-answer-row small {
  display: block;
  margin-top: 3px;
  color: #6b7280;
  font-size: 11px;
  line-height: 1.2;
}

.reading-answer-row b {
  color: #009c6b;
  font-size: 18px;
  text-align: center;
}

.reading-answer-row.is-wrong {
  border-color: #f0b8ae;
  background: #fff7f5;
}

.reading-answer-row.is-wrong b {
  color: #c2412d;
}

.reading-ds-entry button {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #7fe2be;
  border-radius: 12px;
  background: #ecfff7;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  color: #00835d;
  font-weight: 950;
  text-align: left;
  box-shadow: 0 10px 22px -18px rgba(0, 115, 78, 0.32);
}

.reading-ds-entry i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #111;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.reading-ds-entry b {
  font-size: 18px;
  text-align: right;
}

.reading-ds-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.reading-ds-tags span {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f5f5f7;
  display: inline-flex;
  align-items: center;
  color: #111;
  font-size: 12px;
  font-weight: 950;
}

.reading-ds-tags span:nth-child(2) {
  border-color: #a7e8ce;
  background: #ecfff7;
  color: #00835d;
}

.reading-ds-list {
  display: grid;
  gap: 12px;
}

.reading-ds-blank-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-color: #d7f4e8;
}

.reading-ds-card-head,
.reading-ds-card-head > div,
.reading-ds-answer-pair,
.reading-ds-actions {
  display: flex;
  align-items: center;
}

.reading-ds-card-head {
  justify-content: space-between;
  gap: 12px;
}

.reading-ds-card-head > div {
  gap: 10px;
}

.reading-ds-card-head span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #111;
  font-size: 13px;
  font-weight: 950;
}

.reading-ds-card-head strong {
  color: #111;
  font-size: 17px;
  line-height: 1.2;
}

.reading-ds-card-head b {
  min-width: 66px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #a7e8ce;
  border-radius: 999px;
  background: #ecfff7;
  display: grid;
  place-items: center;
  color: #00835d;
  font-size: 12px;
  font-weight: 950;
}

.reading-ds-card-head b.bad {
  border-color: #f0b8ae;
  background: #fff3f0;
  color: #c2412d;
}

.reading-ds-card-head em {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef8ff;
  color: #1866a3;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.reading-ds-answer-pair {
  gap: 10px;
}

.reading-ds-answer-pair > div {
  flex: 1;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid #a7e8ce;
  border-radius: 10px;
  background: #ecfff7;
}

.reading-ds-answer-pair small,
.reading-ds-explain small,
.reading-ds-distractor small {
  display: block;
  color: #00835d;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 950;
}

.reading-ds-answer-pair strong {
  display: block;
  margin-top: 3px;
  color: #111;
  font-size: 15px;
  line-height: 1.18;
}

.reading-ds-explain,
.reading-ds-distractor,
.reading-ds-info {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f8fafc;
}

.reading-ds-explain p,
.reading-ds-distractor p,
.reading-ds-info p {
  margin: 5px 0 0;
  color: #111;
  font-size: 12px;
  line-height: 1.55;
}

.reading-ds-info ul {
  display: grid;
  gap: 6px;
  margin: 7px 0 0;
  padding-left: 18px;
}

.reading-ds-info li {
  color: #111;
  font-size: 12px;
  line-height: 1.5;
}

.reading-ds-info.is-correct {
  border-color: rgba(0, 163, 110, 0.26);
  background: #f0fff8;
}

.reading-ds-info.is-wrong {
  border-color: rgba(229, 72, 77, 0.22);
  background: #fff7f7;
}

.reading-ds-info.is-tip {
  border-color: rgba(196, 133, 0, 0.28);
  background: #fffdf3;
}

.reading-ds-distractor {
  border-color: #eadfcb;
  background: #fffdf8;
}

.reading-ds-distractor small {
  color: #8a6100;
}

.reading-ds-distractor p {
  color: #6b5130;
}

.reading-ds-distractor b {
  color: #5c3f00;
  font-weight: 950;
}

.reading-ds-actions {
  gap: 10px;
}

.reading-ds-actions button {
  flex: 1;
  min-height: 44px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f5f5f7;
  color: #111;
  font-size: 14px;
  font-weight: 950;
}

.reading-ds-actions button:last-child {
  border-color: #111;
  background: #111;
  color: #fff;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report)::after {
  content: none !important;
  position: absolute;
  top: 39px;
  right: 22px;
  min-width: 76px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(0, 156, 107, 0.24);
  border-radius: 999px;
  background: #f1fff8;
  display: none !important;
  place-items: center;
  color: #00835d;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report)::before {
  content: none;
  position: absolute;
  top: 54px;
  right: 91px;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #009c6b;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) > h2 {
  margin-top: 8px;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .score-ring {
  display: none !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .ai-breakdown {
  position: absolute;
  top: 54px;
  right: 22px;
  min-width: 76px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(0, 156, 107, 0.24);
  border-radius: 999px;
  background: #f1fff8;
  display: none !important;
  place-items: center;
  color: #00835d;
  font-size: 13px;
  font-weight: 950;
  text-align: center;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .ai-breakdown::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #009c6b;
  display: inline-block;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .ai-breakdown {
  grid-auto-flow: column;
}

.reading-idle-redesign {
  display: grid;
  gap: 10px;
}

.reading-ai-wait-card {
  min-height: 0;
  padding: 14px;
  border: 1px solid #e7ece9;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f8fffb);
  box-shadow: none;
}

.reading-ai-wait-card .ai-report-illustration {
  margin: -14px auto -8px;
  transform: scale(0.68);
  transform-origin: center;
}

.reading-ai-wait-card h3 {
  margin: 0;
  color: #111;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 950;
  text-align: center;
}

.reading-ai-wait-card p {
  max-width: 260px;
  margin: 4px auto 0;
  color: #6f746f;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.reading-idle-redesign .reading-idle-status {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(0, 156, 107, 0.24);
  border-radius: 8px;
  background: #f1fff8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #00835d;
  font-weight: 950;
}

.reading-idle-redesign .reading-idle-status span,
.reading-idle-redesign .reading-idle-status strong {
  font-size: 13px;
}

.reading-idle-redesign .reading-idle-steps.compact {
  display: grid;
  gap: 8px;
}

.reading-idle-redesign .reading-idle-steps.compact span {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #eceef1;
  border-radius: 8px;
  background: #f5f5f7;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #111;
  font-size: 13px;
  font-weight: 900;
}

.reading-idle-redesign .reading-idle-steps.compact i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #111;
  font-size: 11px;
  font-style: normal;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) {
  padding: 18px 16px 20px !important;
  align-content: start !important;
  gap: 10px !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report)::after {
  content: none !important;
  display: none !important;
  top: 32px !important;
  right: 18px !important;
  min-width: 72px !important;
  min-height: 34px !important;
  padding: 0 13px 0 22px !important;
  font-size: 12px !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report)::before {
  top: 45px !important;
  right: 84px !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) > h2 {
  max-width: calc(100% - 96px) !important;
  margin: 8px 0 12px !important;
  font-size: 22px !important;
  line-height: 28px !important;
  white-space: nowrap !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .feedback-list {
  gap: 8px !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .reading-idle-redesign {
  gap: 8px !important;
  align-content: start !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .reading-ai-wait-card {
  padding: 12px 14px 14px !important;
  border-radius: 16px !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .reading-ai-wait-card .ai-report-illustration {
  width: min(224px, 100%) !important;
  height: auto !important;
  margin: -8px auto -6px !important;
  transform: none !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .reading-ai-wait-card h3 {
  font-size: 19px !important;
  line-height: 1.28 !important;
  margin-top: 0 !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .reading-ai-wait-card p {
  max-width: 285px !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .reading-idle-status {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .reading-idle-status span,
#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .reading-idle-status strong {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .reading-idle-steps.compact {
  gap: 6px !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .reading-idle-steps.compact span {
  min-height: 30px !important;
  padding: 0 12px !important;
  gap: 9px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

#practice.practice-detail-mode .feedback-panel.reading-report-mode:not(.has-report) .reading-idle-steps.compact i {
  width: 18px !important;
  height: 18px !important;
  font-size: 10px !important;
  flex: 0 0 18px !important;
}

#practice.practice-detail-mode .practice-panel:is([data-active-type="RS"], [data-active-type="DI"], [data-active-type="RL"], [data-active-type="ASQ"], [data-active-type="SGD"], [data-active-type="RTS"]).stage-practice .question-meta span {
  color: #fff !important;
  background: var(--answer-ink) !important;
  border-color: var(--answer-ink) !important;
  min-width: 0 !important;
}

#practice.practice-detail-mode .practice-panel:is([data-active-type="RS"], [data-active-type="DI"], [data-active-type="RL"], [data-active-type="ASQ"], [data-active-type="SGD"], [data-active-type="RTS"]).stage-practice #activeQuestionTime {
  display: inline-flex !important;
  min-height: 28px !important;
  align-items: center !important;
  padding: 0 10px !important;
  border: 1px solid var(--answer-line) !important;
  border-radius: 999px !important;
  color: var(--answer-ink) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  white-space: nowrap !important;
}

#practice.practice-detail-mode .practice-panel:is([data-active-type="RS"], [data-active-type="DI"], [data-active-type="RL"], [data-active-type="ASQ"], [data-active-type="SGD"], [data-active-type="RTS"]).stage-practice #activeQuestionTime .question-time-part {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: inherit !important;
  background: transparent !important;
}

#practice.practice-detail-mode .practice-panel:is([data-active-type="RS"], [data-active-type="DI"], [data-active-type="RL"], [data-active-type="ASQ"], [data-active-type="SGD"], [data-active-type="RTS"]).stage-practice .question-card,
#practice.practice-detail-mode .practice-panel:is([data-active-type="RS"], [data-active-type="DI"], [data-active-type="RL"], [data-active-type="ASQ"], [data-active-type="SGD"], [data-active-type="RTS"]) .stage-practice .question-card {
  grid-template-rows: auto auto minmax(70px, auto) auto;
  min-height: 252px !important;
  padding: 20px 20px 0 !important;
  background: var(--answer-soft) !important;
}

#practice.practice-detail-mode .practice-panel:is([data-active-type="RS"], [data-active-type="DI"], [data-active-type="RL"], [data-active-type="ASQ"], [data-active-type="SGD"], [data-active-type="RTS"]).stage-practice .recorder,
#practice.practice-detail-mode .practice-panel:is([data-active-type="RS"], [data-active-type="DI"], [data-active-type="RL"], [data-active-type="ASQ"], [data-active-type="SGD"], [data-active-type="RTS"]) .stage-practice .recorder {
  min-height: 64px !important;
}

@media (max-width: 1560px) and (min-width: 761px) {
  #practice.practice-detail-mode .practice-dashboard-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  #practice.practice-detail-mode .feedback-resizer {
    display: none !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-workbench {
    grid-template-columns:
      minmax(176px, clamp(176px, var(--practice-list-width, 220px), 240px))
      10px
      minmax(0, 1fr) !important;
    gap: 10px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #practice.practice-detail-mode .stage-practice .answer-stage,
  #practice.practice-detail-mode .stage-practice .question-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #practice.practice-detail-mode .feedback-panel {
    grid-column: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  #practice.practice-detail-mode {
    padding: 0 0 calc(88px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  #practice.practice-detail-mode .practice-dashboard-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #practice.practice-detail-mode .stage-practice .practice-workbench {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #practice.practice-detail-mode .stage-practice .question-browser,
  #practice.practice-detail-mode .stage-practice .workbench-resizer,
  #practice.practice-detail-mode .feedback-resizer {
    display: none !important;
  }

  #practice.practice-detail-mode .stage-practice .answer-stage,
  #practice.practice-detail-mode .stage-practice .question-card,
  #practice.practice-detail-mode .stage-practice .answer-workspace,
  #practice.practice-detail-mode .stage-practice .practice-discussion,
  #practice.practice-detail-mode .feedback-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #practice.practice-detail-mode .stage-practice .answer-stage {
    display: grid !important;
    gap: 12px !important;
    padding-bottom: 0 !important;
  }

  #practice.practice-detail-mode .stage-practice .question-card {
    min-height: auto !important;
    padding: 16px !important;
    overflow: visible !important;
  }

  #practice.practice-detail-mode .stage-practice .question-title-line {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
  }

  #practice.practice-detail-mode .stage-practice .active-question h3 {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #practice.practice-detail-mode .stage-practice #questionText,
  #practice.practice-detail-mode .stage-practice .practice-discussion,
  #practice.practice-detail-mode .stage-practice .discussion-list {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  #practice.practice-detail-mode .stage-practice .ra-demo-player:not(.is-hidden),
  #practice .stage-practice .ra-demo-player:not(.is-hidden) {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #practice.practice-detail-mode .stage-practice .question-tools {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #practice.practice-detail-mode .stage-practice .recorder-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #practice.practice-detail-mode .feedback-panel {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }
}

#practice:not(.practice-detail-mode) .mobile-subject-grid,
#practice:not(.practice-detail-mode) .mobile-type-section-head,
#practice:not(.practice-detail-mode) .practice-mobile-kicker,
#practice:not(.practice-detail-mode) .mobile-subject-guide,
#practice:not(.practice-detail-mode) .mobile-type-meta {
  display: none;
}

@media (max-width: 760px) {
  body.view-practice:not(.practice-answer-detail-active) {
    background: #f5f5f7 !important;
  }

  body.view-practice:not(.practice-answer-detail-active) .main {
    padding: 12px 10px calc(96px + env(safe-area-inset-bottom)) !important;
  }

  #practice:not(.practice-detail-mode) {
    --bank-ink: #18181b;
    --bank-muted: #71717a;
    --bank-line: rgba(24, 24, 27, 0.1);
    --bank-gold: #d59a00;
    --bank-gold-soft: #fff7d8;
    --bank-card: rgba(255, 255, 255, 0.94);
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  #practice:not(.practice-detail-mode) > .practice-top-grid,
  #practice:not(.practice-detail-mode) .training-mode-strip,
  #practice:not(.practice-detail-mode) .practice-stats,
  #practice:not(.practice-detail-mode) #skillFilter,
  #practice:not(.practice-detail-mode) #skillMap,
  #practice:not(.practice-detail-mode) .practice-flow-summary {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .practice-dashboard-layout,
  #practice:not(.practice-detail-mode) .practice-panel,
  #practice:not(.practice-detail-mode) .question-type-shell,
  #practice:not(.practice-detail-mode) #questionTypeGrid {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin: 0 0 14px !important;
    padding: 19px 18px !important;
    overflow: hidden;
    border: 1px solid rgba(24, 24, 27, 0.08) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 96% 0%, rgba(213, 154, 0, 0.14), transparent 32%),
      linear-gradient(145deg, #fff, #fafafa) !important;
    box-shadow: 0 12px 30px rgba(24, 24, 27, 0.06) !important;
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading::before {
    content: "PTE Question Bank";
    grid-column: 1 / -1;
    width: max-content;
    padding: 6px 10px;
    border: 1px solid rgba(24, 24, 27, 0.08);
    border-radius: 999px;
    background: #18181b;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading h2 {
    margin: 0 !important;
    color: var(--bank-ink) !important;
    font-size: 27px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  #practice:not(.practice-detail-mode) #questionTypeFilter {
    width: 112px !important;
    height: 38px !important;
    padding: 0 28px 0 12px !important;
    border: 1px solid rgba(24, 24, 27, 0.12) !important;
    border-radius: 999px !important;
    background-color: #fff !important;
    color: var(--bank-ink) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head {
    display: grid !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
    padding: 0 2px !important;
  }

  #practice:not(.practice-detail-mode) .practice-mobile-kicker {
    display: inline-flex;
    width: max-content;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(213, 154, 0, 0.26);
    border-radius: 999px;
    background: #fffaf0;
    color: #7a5600;
    font-size: 12px;
    font-weight: 850;
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head h2 {
    margin: 0 !important;
    color: var(--bank-ink) !important;
    font-size: 28px !important;
    font-weight: 950 !important;
    line-height: 1.12 !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head p {
    max-width: 25em;
    margin: 0 !important;
    color: var(--bank-muted) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head > span {
    position: absolute;
    right: 12px;
    top: 94px;
    min-width: 0 !important;
    height: 30px !important;
    padding: 0 11px !important;
    border-color: rgba(213, 154, 0, 0.34) !important;
    background: var(--bank-gold-soft) !important;
    color: #7a5600 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 14px;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    gap: 7px 10px;
    min-height: 138px;
    padding: 16px;
    border: 1px solid var(--bank-line);
    border-radius: 24px;
    background: var(--bank-card);
    color: var(--bank-ink);
    text-align: left;
    box-shadow: 0 12px 28px rgba(24, 24, 27, 0.055);
    -webkit-tap-highlight-color: transparent;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card i {
    grid-column: 1 / -1;
    grid-row: auto;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin-bottom: 4px;
    border-radius: 15px;
    background: #f4f4f5;
    color: var(--bank-ink);
    font-style: normal;
    font-size: 12px;
    font-weight: 950;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card span,
  #practice:not(.practice-detail-mode) .mobile-subject-card strong {
    align-self: center;
    color: var(--bank-ink);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.15;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card strong {
    justify-self: end;
    font-size: 13px;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card small {
    grid-column: 1 / -1;
    color: var(--bank-muted);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card.active {
    border-color: rgba(213, 154, 0, 0.48);
    background: linear-gradient(145deg, #fff, var(--bank-gold-soft));
    box-shadow: 0 16px 34px rgba(213, 154, 0, 0.14);
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card[data-tone="speaking"].active i,
  #practice:not(.practice-detail-mode) .mobile-subject-card[data-tone="speaking"] i {
    background: #18181b;
    color: #fff;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card[data-tone="writing"] i {
    background: #fff7d8;
    color: #8a6100;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card[data-tone="reading"] i {
    background: #eef2ff;
    color: #3730a3;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card[data-tone="listening"] i {
    background: #ecfdf5;
    color: #047857;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-guide {
    display: grid;
    gap: 4px;
    margin: 2px 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(24, 24, 27, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7);
  }

  #practice:not(.practice-detail-mode) .mobile-subject-guide strong {
    color: var(--bank-ink);
    font-size: 14px;
    font-weight: 950;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-guide span {
    color: var(--bank-muted);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
  }

  #practice:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-type-section-head,
  #practice:not(.practice-detail-mode) .mobile-question-flow.subject-picker .figma-type-card-grid {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card.active i {
    background: #18181b;
    color: #fff;
  }

  #practice:not(.practice-detail-mode) .mobile-type-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 2px 10px;
  }

  #practice:not(.practice-detail-mode) .mobile-type-section-head span,
  #practice:not(.practice-detail-mode) .mobile-type-section-head em {
    color: var(--bank-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
  }

  #practice:not(.practice-detail-mode) .mobile-type-section-head button {
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(24, 24, 27, 0.12);
    border-radius: 999px;
    background: #fff;
    color: #18181b;
    font-size: 12px;
    font-weight: 900;
  }

  #practice:not(.practice-detail-mode) .mobile-type-section-head strong {
    display: block;
    margin-top: 2px;
    color: var(--bank-ink);
    font-size: 19px;
    font-weight: 950;
    line-height: 1.15;
  }

  #practice:not(.practice-detail-mode) .figma-type-card-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding-bottom: 6px;
  }

  #practice:not(.practice-detail-mode) .figma-type-card {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    gap: 4px 12px;
    min-height: 124px !important;
    padding: 14px !important;
    border: 1px solid var(--bank-line) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 250, 0.92)) !important;
    color: var(--bank-ink) !important;
    box-shadow: 0 14px 32px rgba(24, 24, 27, 0.065) !important;
    text-align: left !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card:active,
  #practice:not(.practice-detail-mode) .mobile-subject-card:active {
    transform: translateY(1px) scale(0.99);
  }

  #practice:not(.practice-detail-mode) .figma-type-dot {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border: 1px solid rgba(24, 24, 27, 0.08) !important;
    border-radius: 16px !important;
    background: #f3f4f6 !important;
    color: var(--type-color, #18181b) !important;
    font-size: 16px !important;
    font-weight: 950 !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-skill {
    grid-column: 2 !important;
    color: var(--bank-muted) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card strong {
    grid-column: 2 / 4 !important;
    color: var(--bank-ink) !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.18 !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card small {
    grid-column: 1 / -1 !important;
    margin: 6px 0 0 !important;
    color: var(--bank-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
  }

  #practice:not(.practice-detail-mode) .mobile-type-meta {
    display: block;
    grid-column: 1 / -1;
    color: #52525b;
    font-size: 13px;
    font-weight: 850;
  }

  #practice:not(.practice-detail-mode) .figma-type-card i {
    grid-column: 1 / -1 !important;
    height: 4px !important;
    margin: 4px 0 0 !important;
    border-radius: 999px !important;
    background: rgba(24, 24, 27, 0.1) !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card i em {
    background: var(--type-color, var(--bank-gold)) !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card b {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start;
    justify-self: end;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #18181b;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 30px !important;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  body.view-practice:not(.practice-answer-detail-active) .main {
    padding: 16px 0 calc(132px + env(safe-area-inset-bottom)) !important;
  }

  #practice:not(.practice-detail-mode) {
    --bank-ink: #202124;
    --bank-muted: #6b7280;
    --bank-line: rgba(32, 33, 36, 0.09);
    --bank-card: rgba(255, 255, 255, 0.94);
    --bank-gold: #d59a00;
    --bank-gold-soft: #fff7d8;
    width: min(430px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 0 auto !important;
  }

  #practice:not(.practice-detail-mode) .practice-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading {
    margin: 0 0 18px !important;
    padding: 18px 16px 20px !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07) !important;
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading h2,
  #practice:not(.practice-detail-mode) .figma-type-grid-head h2 {
    font-size: 25px !important;
    line-height: 1.12 !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head {
    margin: 0 2px 14px !important;
    padding: 0 !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head > span {
    right: 0 !important;
    top: 72px !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-grid {
    gap: 12px !important;
    margin: 0 0 14px !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card {
    min-height: 118px !important;
    padding: 14px !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06) !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card i {
    width: 36px !important;
    height: 36px !important;
    border-radius: 13px !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-guide {
    margin: 0 0 18px !important;
    padding: 13px 14px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045) !important;
  }

  #practice:not(.practice-detail-mode) .mobile-type-section-head {
    margin: 0 2px 12px !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card-grid {
    gap: 12px !important;
    padding: 0 0 22px !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card {
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    min-height: 116px !important;
    padding: 14px 12px 12px !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06) !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-dot {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card strong {
    font-size: 15px !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card small,
  #practice:not(.practice-detail-mode) .mobile-type-meta {
    font-size: 12px !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card i {
    height: 3px !important;
    margin-top: 6px !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card b {
    min-height: 28px !important;
    padding: 0 11px !important;
    font-size: 11px !important;
    line-height: 28px !important;
  }
}

@media (max-width: 760px) {
  body.view-practice:not(.practice-answer-detail-active) {
    background: #f4f4f5 !important;
  }

  body.view-practice:not(.practice-answer-detail-active) .main {
    padding: 16px 16px calc(112px + env(safe-area-inset-bottom)) !important;
  }

  #practice:not(.practice-detail-mode) {
    width: 100% !important;
    max-width: min(430px, calc(100vw - 28px)) !important;
    margin: 0 auto !important;
  }

  #practice:not(.practice-detail-mode) .practice-panel > .panel-heading {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .mobile-question-flow {
    display: grid !important;
    gap: 20px !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head {
    position: relative !important;
    display: grid !important;
    min-height: 128px !important;
    margin: 0 !important;
    padding: 24px 20px 18px !important;
    border: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  #practice:not(.practice-detail-mode) .practice-mobile-kicker {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head h2 {
    max-width: 9em !important;
    margin: 0 !important;
    color: #18181b !important;
    font-size: 25px !important;
    line-height: 1.18 !important;
    font-weight: 950 !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head p {
    max-width: 20em !important;
    margin: 8px 0 0 !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-grid-head > span {
    position: absolute !important;
    right: 18px !important;
    bottom: 18px !important;
    top: auto !important;
    height: 28px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(213, 154, 0, 0.38) !important;
    border-radius: 999px !important;
    background: #fff7d8 !important;
    color: #5f4300 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 950 !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-grid,
  #practice:not(.practice-detail-mode) .figma-type-card-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 20px !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 6px 8px !important;
    gap: 12px !important;
    border: 1px solid rgba(24, 24, 27, 0.09) !important;
    border-radius: 14px !important;
    background: #fbfbfc !important;
    box-shadow: none !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card i {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #18181b !important;
    border: 1px solid rgba(24, 24, 27, 0.08) !important;
    font-size: 11px !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card span {
    grid-column: 2 !important;
    color: #18181b !important;
    align-self: center !important;
    font-size: 15px !important;
    font-weight: 950 !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card small {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card strong {
    grid-column: 3 !important;
    grid-row: 1 !important;
    color: #007aff !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    font-size: 0 !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card strong::before {
    content: "→";
    font-size: 18px;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card.active {
    border-color: rgba(213, 154, 0, 0.45) !important;
    background: #fffaf0 !important;
    box-shadow: none !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-card.active i {
    background: #18181b !important;
    color: #fff !important;
  }

  #practice:not(.practice-detail-mode) .mobile-subject-guide {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .mobile-type-section-head {
    display: none !important;
  }

  #practice:not(.practice-detail-mode) .mobile-type-section-head span {
    color: #71717a !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  #practice:not(.practice-detail-mode) .mobile-type-section-head strong {
    color: #18181b !important;
    font-size: 25px !important;
    line-height: 1.18 !important;
    font-weight: 950 !important;
  }

  #practice:not(.practice-detail-mode) .mobile-type-section-head button {
    min-height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #18181b !important;
    box-shadow: none !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    min-height: 86px !important;
    padding: 10px 12px !important;
    gap: 2px 8px !important;
    border: 1px solid rgba(24, 24, 27, 0.09) !important;
    border-radius: 14px !important;
    background: #fbfbfc !important;
    box-shadow: none !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-dot {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    box-sizing: border-box !important;
    width: 38px !important;
    height: 34px !important;
    min-width: 38px !important;
    padding: 0 2px !important;
    border-radius: 12px !important;
    background: #fff !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-skill {
    grid-column: 2 !important;
    color: #71717a !important;
    font-size: 11px !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card strong {
    grid-column: 2 / 4 !important;
    color: #18181b !important;
    font-size: 14px !important;
    line-height: 1.18 !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card small {
    grid-column: 2 / 4 !important;
    margin: 0 !important;
    color: #6b7280 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #practice:not(.practice-detail-mode) .mobile-type-meta {
    grid-column: 1 / -1 !important;
    margin-top: 2px !important;
    color: #52525b !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card i {
    grid-column: 1 / -1 !important;
    height: 3px !important;
    margin: 4px 0 0 !important;
  }

  #practice:not(.practice-detail-mode) .figma-type-card b {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: #18181b !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 26px !important;
    white-space: nowrap !important;
  }
}
#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-panel,
.feedback-panel.scoring .figma-scoring-loading .scoring-waveform-panel {
  overflow: hidden !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b,
.feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b {
  animation-name: scoringBarLivePulse !important;
  animation-duration: 0.86s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-delay: calc(var(--i) * 0.045s) !important;
  will-change: transform, opacity, background-color !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b:nth-child(4n + 1),
.feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b:nth-child(4n + 1) {
  animation-duration: 0.72s !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b:nth-child(4n + 2),
.feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b:nth-child(4n + 2) {
  animation-duration: 1.02s !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam,
.feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam {
  left: 0 !important;
  opacity: 1 !important;
  animation-name: scoringBeamLiveSweep !important;
  animation-duration: 1.9s !important;
  animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1) !important;
  animation-iteration-count: infinite !important;
  will-change: transform !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam i,
.feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam i {
  animation: scoringBeamGlow 0.95s ease-in-out infinite alternate !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-panel::before,
.feedback-panel.scoring .figma-scoring-loading .scoring-waveform-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(223, 255, 249, 0.48), transparent 42%, rgba(255, 255, 255, 0.12)) !important;
  transform: translateX(-70%) !important;
  animation: scoringPanelLightSweep 1.9s cubic-bezier(0.45, 0, 0.2, 1) infinite !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-step.is-active > i,
.feedback-panel.scoring .figma-scoring-loading .scoring-step.is-active > i {
  animation: scoringActiveStepPulse 1s ease-in-out infinite !important;
}

#practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .mini-wave b,
.feedback-panel.scoring .figma-scoring-loading .mini-wave b {
  animation-name: scoringMiniLiveWave !important;
  animation-duration: 0.64s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
}

@keyframes scoringBeamLiveSweep {
  0% {
    transform: translateX(calc(18% - 11px));
  }
  48% {
    transform: translateX(calc(52vw - 120px));
  }
  100% {
    transform: translateX(calc(100% + 520px));
  }
}

@keyframes scoringPanelLightSweep {
  0% {
    transform: translateX(-75%);
    opacity: 0.1;
  }
  35% {
    opacity: 0.72;
  }
  100% {
    transform: translateX(76%);
    opacity: 0.12;
  }
}

@keyframes scoringBarLivePulse {
  0%, 100% {
    transform: scaleY(0.62);
    opacity: 0.52;
  }
  40% {
    transform: scaleY(1.24);
    opacity: 1;
  }
  68% {
    transform: scaleY(0.86);
    opacity: 0.78;
  }
}

@keyframes scoringBeamGlow {
  from {
    box-shadow: 0 0 13px rgba(33, 224, 205, 0.58);
  }
  to {
    box-shadow: 0 0 26px rgba(33, 224, 205, 0.95);
  }
}

@keyframes scoringActiveStepPulse {
  0%, 100% {
    box-shadow: 0 0 0 6px rgba(0, 163, 110, 0.12);
    transform: scale(0.96);
  }
  50% {
    box-shadow: 0 0 0 13px rgba(0, 163, 110, 0.18);
    transform: scale(1.04);
  }
}

@keyframes scoringMiniLiveWave {
  0%, 100% {
    transform: scaleY(0.5);
    opacity: 0.58;
  }
  50% {
    transform: scaleY(1.2);
    opacity: 1;
  }
}

@media (max-width: 760px) {
  body.view-practice:not(.practice-answer-detail-active),
  body.view-practice:not(.practice-answer-detail-active) .main {
    background: #f5f5f7 !important;
  }

  #practice.active-view:not(.practice-detail-mode) {
    width: 100% !important;
    max-width: min(430px, calc(100vw - 28px)) !important;
    margin: 0 auto !important;
    background: transparent !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-grid-head,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-grid,
  #practice.active-view:not(.practice-detail-mode) .figma-type-card-grid {
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-card {
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-dot {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 36px !important;
    padding: 0 3px !important;
    color: var(--type-color, #18181b) !important;
    font-size: var(--type-code-size, 10px) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-align: center !important;
  }
}