/* Final home background merge: keep page tone continuous, only cards look glassy. */
html body.view-dashboard {
  background:
    radial-gradient(circle at 8% 18%, rgba(225, 236, 247, 0.14), transparent 36%),
    radial-gradient(circle at 96% 10%, rgba(248, 243, 232, 0.1), transparent 34%),
    linear-gradient(180deg, #f7f8fa 0%, #f8f9fb 48%, #f6f7f9 100%) !important;
}

/* Compact word popover: keep the dictionary useful without covering the practice content. */
html body .dictionary-popover {
  width: min(300px, calc(100vw - 24px)) !important;
  max-width: min(300px, calc(100vw - 24px)) !important;
  max-height: min(430px, calc(100dvh - 28px)) !important;
  padding: 12px !important;
  border-radius: 20px !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(15, 23, 42, 0.16) transparent !important;
  z-index: 5000 !important;
}

html body .dictionary-popover::-webkit-scrollbar {
  width: 5px !important;
}

html body .dictionary-popover::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.16) !important;
}

html body .dictionary-popover .dict-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding-bottom: 9px !important;
}

html body .dictionary-popover .dict-card-head strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #17181c !important;
  font-size: 22px !important;
  font-weight: 820 !important;
  line-height: 1.06 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .dictionary-popover .dict-card-head span {
  display: block !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  color: #8a5c00 !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .dictionary-popover .dict-pron-actions {
  display: grid !important;
  gap: 6px !important;
}

html body .dictionary-popover .dict-sound-btn {
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
}

html body .dictionary-popover.scored-word-popover .dict-meaning,
html body .dictionary-popover.scored-word-popover > p,
html body .dictionary-popover.scored-word-popover .word-speech-insight,
html body .dictionary-popover.scored-word-popover .word-diagnostic-panel,
html body .dictionary-popover.scored-word-popover .priority-practice-panel,
html body .dictionary-popover.scored-word-popover .phoneme-feedback-summary,
html body .dictionary-popover.scored-word-popover .coach-phone-advice,
html body .dictionary-popover.scored-word-popover .coach-word-actions {
  display: none !important;
}

html body .dictionary-popover .popover-score-card {
  gap: 8px !important;
  margin-top: 10px !important;
  padding: 10px !important;
  border-radius: 16px !important;
}

html body .dictionary-popover .popover-score-head {
  gap: 8px !important;
}

html body .dictionary-popover .popover-score-card > span,
html body .dictionary-popover .popover-score-head span {
  font-size: 12px !important;
  font-weight: 760 !important;
}

html body .dictionary-popover .popover-score-head strong {
  font-size: 28px !important;
  font-weight: 840 !important;
}

html body .dictionary-popover .popover-score-meta {
  gap: 6px !important;
  min-height: 28px !important;
  padding: 0 9px !important;
}

html body .dictionary-popover .popover-score-meta b,
html body .dictionary-popover .popover-score-meta em {
  font-size: 12px !important;
  font-weight: 760 !important;
}

html body .dictionary-popover .phoneme-panel {
  margin-top: 10px !important;
  padding-top: 0 !important;
}

html body .dictionary-popover .phoneme-panel h4 {
  margin: 0 0 8px !important;
  color: rgba(29, 29, 31, 0.66) !important;
  font-size: 12px !important;
  font-weight: 780 !important;
}

html body .dictionary-popover .phoneme-row {
  gap: 6px !important;
}

html body .dictionary-popover .phoneme-row b {
  min-height: 43px !important;
  padding: 6px 4px !important;
  border-radius: 12px !important;
}

html body .dictionary-popover .phoneme-row b span {
  font-size: 15px !important;
}

html body .dictionary-popover .phoneme-row small {
  font-size: 10px !important;
  font-weight: 740 !important;
}

html body .dictionary-popover.mobile-sheet {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  top: auto !important;
  bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  max-width: none !important;
  max-height: min(56dvh, 420px) !important;
  border-radius: 22px !important;
  transform: translateZ(0) !important;
}

@media (max-width: 760px) {
  html body .dictionary-popover.mobile-sheet {
    padding: 12px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(255, 255, 255, 0.34),
      0 22px 64px -34px rgba(15, 23, 42, 0.66) !important;
  }

  html body .dictionary-popover.mobile-sheet .dict-card-head strong {
    font-size: 21px !important;
  }

  html body .dictionary-popover.mobile-sheet .phoneme-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Consolidated from home-background-soft-final.css during frontend cleanup 2026-07-08. */
html body.view-dashboard {
  background:
    radial-gradient(circle at 10% 0%, rgba(222, 248, 242, 0.16), transparent 34%),
    radial-gradient(circle at 94% 4%, rgba(255, 248, 226, 0.12), transparent 32%),
    linear-gradient(180deg, #fbfcfd 0%, #f8fafb 54%, #f6f8f9 100%) !important;
}

html body.view-dashboard .app-shell,
html body.view-dashboard .main,
html body.view-dashboard #dashboard.active-view,
html body.view-dashboard #dashboard .home-v2,
html body.view-dashboard #dashboard .home-v2-desktop-trial {
  background: transparent !important;
}

@media (min-width: 981px) {
  html body.view-dashboard #dashboard.active-view {
    background:
      radial-gradient(circle at 15% 2%, rgba(225, 248, 244, 0.12), transparent 36%),
      radial-gradient(circle at 92% 0%, rgba(255, 250, 233, 0.1), transparent 34%) !important;
  }

  html body.view-dashboard #dashboard .home-web-hero,
  html body.view-dashboard #dashboard .home-web-card,
  html body.view-dashboard #dashboard .home-web-metric,
  html body.view-dashboard #dashboard .home-web-task,
  html body.view-dashboard #dashboard .home-web-other button,
  html body.view-dashboard #dashboard .home-web-quick button {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(251, 253, 253, 0.24)),
      rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.68) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(255, 255, 255, 0.2),
      0 18px 46px -36px rgba(22, 28, 40, 0.28) !important;
  }

  html body.view-dashboard #dashboard .home-web-hero::before,
  html body.view-dashboard #dashboard .home-web-card::before,
  html body.view-dashboard #dashboard .home-web-metric::before,
  html body.view-dashboard #dashboard .home-web-task::before,
  html body.view-dashboard #dashboard .home-web-other button::before,
  html body.view-dashboard #dashboard .home-web-quick button::before {
    opacity: 0.28 !important;
  }
}

@media (max-width: 760px) {
  html body.view-dashboard,
  html body.view-dashboard #dashboard.active-view {
    background:
      radial-gradient(circle at 12% 0%, rgba(225, 248, 244, 0.16), transparent 38%),
      radial-gradient(circle at 100% 4%, rgba(255, 250, 232, 0.1), transparent 36%),
      linear-gradient(180deg, #fbfcfd 0%, #f8fafb 56%, #f6f8f9 100%) !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard.home-v2 .home-v2-mobile-trial :is(.home-mobile-topbar, .home-mobile-hero, .home-mobile-metric, .home-mobile-task, .home-mobile-quick button),
  html body.view-dashboard #dashboard .home-mobile-topbar,
  html body.view-dashboard #dashboard .home-mobile-hero,
  html body.view-dashboard #dashboard .home-mobile-metric,
  html body.view-dashboard #dashboard .home-mobile-task,
  html body.view-dashboard #dashboard .home-mobile-quick button {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.64), rgba(251, 253, 253, 0.24)),
      rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.68) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(255, 255, 255, 0.2),
      0 14px 34px -30px rgba(20, 28, 44, 0.3) !important;
  }

  html body.view-dashboard .mobile-tabbar {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(250, 252, 253, 0.34)),
      rgba(255, 255, 255, 0.18) !important;
  }
}

/* FINAL OVERRIDE: approved compact mobile dashboard mockup. */
@media (max-width: 760px) {
  html body.view-dashboard #dashboard.active-view {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 14px 12px calc(108px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  html body.view-dashboard #dashboard .home-v2 {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
  }

  html body.view-dashboard #dashboard .home-v2-desktop-trial,
  html body.view-dashboard #dashboard .home-v2-welcome,
  html body.view-dashboard #dashboard .home-v2-metrics,
  html body.view-dashboard #dashboard .home-v2-grid,
  html body.view-dashboard #dashboard .home-v2-helper {
    display: none !important;
  }

  html body.view-dashboard #dashboard .home-v2-mobile-trial,
  html body #homeDashboard .home-v2-mobile-trial,
  html body .home-v2-mobile-trial {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.44)), rgba(255, 255, 255, 0.46) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 18px 42px -34px rgba(15, 23, 42, 0.35) !important;
    backdrop-filter: blur(24px) saturate(1.22) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.22) !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    object-fit: contain !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar div {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar strong {
    overflow: hidden !important;
    color: #171b22 !important;
    font-size: 18px !important;
    font-weight: 860 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar small {
    overflow: hidden !important;
    color: rgba(82, 90, 101, 0.68) !important;
    font-size: 12px !important;
    font-weight: 680 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar button {
    min-width: 66px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 999px !important;
    color: rgba(9, 114, 94, 0.95) !important;
    background: rgba(235, 255, 248, 0.58) !important;
    font-size: 12px !important;
    font-weight: 820 !important;
    line-height: 34px !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard #dashboard .home-v2-mobile-trial .home-mobile-hero,
  html body #homeDashboard .home-mobile-hero,
  html body .home-mobile-hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 74px !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    min-height: 150px !important;
    height: auto !important;
    padding: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(239, 248, 249, 0.46)), rgba(255, 255, 255, 0.45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 22px 54px -38px rgba(15, 23, 42, 0.36) !important;
    overflow: hidden !important;
  }

  html body.view-dashboard #dashboard .home-mobile-hero > div:first-child,
  html body #homeDashboard .home-mobile-hero > div:first-child,
  html body .home-mobile-hero > div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body.view-dashboard #dashboard .home-mobile-hero span {
    color: rgba(0, 137, 111, 0.82) !important;
    font-size: 12px !important;
    font-weight: 820 !important;
    line-height: 1.1 !important;
  }

  html body.view-dashboard #dashboard .home-mobile-hero h2,
  html body #homeDashboard .home-mobile-hero h2,
  html body .home-mobile-hero h2 {
    max-width: 9.8em !important;
    margin: 0 !important;
    color: #191d24 !important;
    font-size: 27px !important;
    font-weight: 860 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  html body.view-dashboard #dashboard .home-mobile-primary {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: start !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #1c2430, #06090e) !important;
    font-size: 13px !important;
    font-weight: 820 !important;
    line-height: 38px !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard #dashboard .home-mobile-ring {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: end !important;
    width: 74px !important;
    height: 74px !important;
    border-radius: 999px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-metrics,
  html body #homeDashboard .home-mobile-metrics,
  html body .home-mobile-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.view-dashboard #dashboard .home-mobile-metric {
    min-height: 92px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-metric strong {
    font-size: 31px !important;
    font-weight: 760 !important;
    line-height: 0.98 !important;
    letter-spacing: 0 !important;
  }

  html body.view-dashboard #dashboard .home-mobile-section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: end !important;
    margin: 4px 2px -2px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-section-head strong {
    color: #191d24 !important;
    font-size: 18px !important;
    font-weight: 840 !important;
    line-height: 1.15 !important;
  }

  html body.view-dashboard #dashboard .home-mobile-section-head small {
    color: rgba(84, 93, 105, 0.58) !important;
    font-size: 12px !important;
    font-weight: 720 !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard #dashboard .home-mobile-section {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-dashboard #dashboard .home-mobile-task-list,
  html body.view-dashboard #dashboard .home-mobile-quick > div,
  html body #homeDashboard .home-mobile-task-list,
  html body .home-mobile-task-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  html body.view-dashboard #dashboard .home-mobile-task,
  html body.view-dashboard #dashboard .home-mobile-quick button,
  html body #homeDashboard .home-mobile-task,
  html body .home-mobile-task {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 92px !important;
    height: auto !important;
    padding: 13px !important;
    border-radius: 18px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-task b,
  html body.view-dashboard #dashboard .home-mobile-quick button strong,
  html body #homeDashboard .home-mobile-task b,
  html body .home-mobile-task b {
    grid-column: 1 / -1 !important;
    align-self: end !important;
    color: rgba(27, 31, 39, 0.9) !important;
    font-size: 21px !important;
    font-weight: 830 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard .mobile-tabbar {
    left: 12px !important;
    right: 12px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 66px !important;
    padding: 8px !important;
    border-radius: 24px !important;
  }
}

/* Unified question audio player: one glass pill, one progress model, two pause bars. */
html body #practice .stage-practice .audio-prompt:not(:empty),
html body #practice.practice-detail-mode .stage-practice .audio-prompt:not(:empty),
html body #practice .practice-panel.stage-practice .audio-prompt:not(:empty) {
  display: grid !important;
  grid-template-columns: 44px minmax(120px, 1fr) auto !important;
  grid-template-areas: "play rail duration" !important;
  align-items: center !important;
  column-gap: 14px !important;
  width: min(620px, 100%) !important;
  max-width: 100% !important;
  min-height: 58px !important;
  height: 58px !important;
  margin: 12px 0 0 !important;
  padding: 7px 20px 7px 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(242, 247, 251, 0.28)),
    rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(154, 166, 184, 0.08),
    0 18px 34px -30px rgba(15, 23, 42, 0.34) !important;
  overflow: visible !important;
  backdrop-filter: blur(24px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.16) !important;
}

html body #practice .stage-practice .audio-prompt [data-audio-current-time] {
  display: none !important;
}

html body #practice .stage-practice .audio-play-button,
html body #practice.practice-detail-mode .stage-practice .audio-play-button,
html body #practice .practice-panel.stage-practice .audio-play-button {
  grid-area: play !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #050607 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 24px -16px rgba(0, 0, 0, 0.74) !important;
}

html body #practice .stage-practice .audio-play-button::before,
html body #practice.practice-detail-mode .stage-practice .audio-play-button::before,
html body #practice .practice-panel.stage-practice .audio-play-button::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 53% !important;
  display: block !important;
  width: 13px !important;
  height: 15px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
  transform: translate(-50%, -50%) !important;
}

html body #practice .stage-practice .audio-play-button::after,
html body #practice.practice-detail-mode .stage-practice .audio-play-button::after,
html body #practice .practice-panel.stage-practice .audio-play-button::after {
  content: "" !important;
  position: absolute !important;
  display: none !important;
}

html body #practice .stage-practice .audio-play-button.is-playing::before,
html body #practice .stage-practice .audio-play-button[data-audio-state="playing"]::before,
html body #practice.practice-detail-mode .stage-practice .audio-play-button.is-playing::before,
html body #practice.practice-detail-mode .stage-practice .audio-play-button[data-audio-state="playing"]::before,
html body #practice .practice-panel.stage-practice .audio-play-button.is-playing::before,
html body #practice .practice-panel.stage-practice .audio-play-button[data-audio-state="playing"]::before,
html body #practice .stage-practice .ra-demo-player #raDemoToggleButton.is-playing::before,
html body #practice .stage-practice .ra-demo-player #raDemoToggleButton[data-audio-state="playing"]::before {
  top: 50% !important;
  left: 50% !important;
  width: 4px !important;
  height: 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: translate(calc(-50% - 5px), -50%) !important;
}

html body #practice .stage-practice .audio-play-button.is-playing::after,
html body #practice .stage-practice .audio-play-button[data-audio-state="playing"]::after,
html body #practice.practice-detail-mode .stage-practice .audio-play-button.is-playing::after,
html body #practice.practice-detail-mode .stage-practice .audio-play-button[data-audio-state="playing"]::after,
html body #practice .practice-panel.stage-practice .audio-play-button.is-playing::after,
html body #practice .practice-panel.stage-practice .audio-play-button[data-audio-state="playing"]::after,
html body #practice .stage-practice .ra-demo-player #raDemoToggleButton.is-playing::after,
html body #practice .stage-practice .ra-demo-player #raDemoToggleButton[data-audio-state="playing"]::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 4px !important;
  height: 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
  transform: translate(calc(-50% + 5px), -50%) !important;
}

html body #practice .stage-practice .audio-track,
html body #practice.practice-detail-mode .stage-practice .audio-track,
html body #practice .practice-panel.stage-practice .audio-track {
  grid-area: rail !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 100px !important;
  height: 5px !important;
  min-height: 5px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(203, 210, 220, 0.72) !important;
  box-shadow: inset 0 1px 1px rgba(123, 134, 150, 0.1) !important;
  overflow: visible !important;
  --audio-prompt-progress: 0%;
}

html body #practice .stage-practice .audio-track span,
html body #practice.practice-detail-mode .stage-practice .audio-track span,
html body #practice .practice-panel.stage-practice .audio-track span {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  display: block !important;
  width: var(--audio-prompt-progress, 0%) !important;
  height: 5px !important;
  min-height: 5px !important;
  border-radius: 999px !important;
  background: #050607 !important;
  animation: none !important;
  transform: translateY(-50%) !important;
}

html body #practice .stage-practice .audio-prompt.playing .audio-track span,
html body #practice.practice-detail-mode .stage-practice .audio-prompt.playing .audio-track span {
  animation: none !important;
}

html body #practice .stage-practice .audio-track i,
html body #practice.practice-detail-mode .stage-practice .audio-track i,
html body #practice .practice-panel.stage-practice .audio-track i {
  position: absolute !important;
  top: 50% !important;
  left: var(--audio-prompt-progress, 0%) !important;
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  background: #050607 !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.2) !important;
  transform: translate(-50%, -50%) !important;
}

html body #practice .stage-practice .audio-prompt [data-audio-duration],
html body #practice.practice-detail-mode .stage-practice .audio-prompt [data-audio-duration],
html body #practice .practice-panel.stage-practice .audio-prompt [data-audio-duration] {
  grid-area: duration !important;
  min-width: 34px !important;
  margin: 0 !important;
  color: rgba(82, 91, 106, 0.84) !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html body #practice .stage-practice .ra-demo-player #raDemoToggleButton::after {
  box-shadow: none !important;
}

@media (max-width: 720px) {
  html body #practice .stage-practice .audio-prompt:not(:empty),
  html body #practice.practice-detail-mode .stage-practice .audio-prompt:not(:empty),
  html body #practice .practice-panel.stage-practice .audio-prompt:not(:empty) {
    grid-template-columns: 40px minmax(84px, 1fr) auto !important;
    column-gap: 10px !important;
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 6px 14px 6px 6px !important;
  }

  html body #practice .stage-practice .audio-play-button,
  html body #practice.practice-detail-mode .stage-practice .audio-play-button,
  html body #practice .practice-panel.stage-practice .audio-play-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  html body #practice .stage-practice .audio-prompt [data-audio-duration],
  html body #practice.practice-detail-mode .stage-practice .audio-prompt [data-audio-duration],
  html body #practice .practice-panel.stage-practice .audio-prompt [data-audio-duration] {
    min-width: 28px !important;
    font-size: 15px !important;
  }
}

/* Specificity lock for the unified audio player. */
html body:not(.figma-answer-265-active) #practice#practice .stage-practice .audio-prompt:not(:empty),
html body:not(.figma-answer-265-active) #practice#practice.practice-detail-mode .stage-practice .audio-prompt:not(:empty),
html body:not(.figma-answer-265-active) #practice#practice .practice-panel.stage-practice .audio-prompt:not(:empty) {
  display: grid !important;
  grid-template-columns: 44px minmax(120px, 1fr) auto !important;
  grid-template-areas: "play rail duration" !important;
  align-items: center !important;
  column-gap: 14px !important;
  width: min(620px, 100%) !important;
  max-width: 100% !important;
  min-height: 58px !important;
  height: 58px !important;
  margin: 12px 0 0 !important;
  padding: 7px 20px 7px 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(242, 247, 251, 0.28)),
    rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(154, 166, 184, 0.08),
    0 18px 34px -30px rgba(15, 23, 42, 0.34) !important;
  overflow: visible !important;
  backdrop-filter: blur(24px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.16) !important;
}

html body:not(.figma-answer-265-active) #practice#practice .stage-practice .audio-prompt [data-audio-current-time] {
  display: none !important;
}

html body:not(.figma-answer-265-active) #practice#practice .stage-practice .audio-play-button,
html body:not(.figma-answer-265-active) #practice#practice.practice-detail-mode .stage-practice .audio-play-button,
html body:not(.figma-answer-265-active) #practice#practice .practice-panel.stage-practice .audio-play-button {
  grid-area: play !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #050607 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 24px -16px rgba(0, 0, 0, 0.74) !important;
}

html body:not(.figma-answer-265-active) #practice#practice .stage-practice .audio-play-button::before,
html body:not(.figma-answer-265-active) #practice#practice.practice-detail-mode .stage-practice .audio-play-button::before,
html body:not(.figma-answer-265-active) #practice#practice .practice-panel.stage-practice .audio-play-button::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 53% !important;
  display: block !important;
  width: 13px !important;
  height: 15px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
  transform: translate(-50%, -50%) !important;
}

html body:not(.figma-answer-265-active) #practice#practice .stage-practice .audio-play-button::after,
html body:not(.figma-answer-265-active) #practice#practice.practice-detail-mode .stage-practice .audio-play-button::after,
html body:not(.figma-answer-265-active) #practice#practice .practice-panel.stage-practice .audio-play-button::after {
  content: "" !important;
  position: absolute !important;
  display: none !important;
}

html body:not(.figma-answer-265-active) #practice#practice .stage-practice .audio-play-button.is-playing::before,
html body:not(.figma-answer-265-active) #practice#practice .stage-practice .audio-play-button[data-audio-state="playing"]::before,
html body:not(.figma-answer-265-active) #practice#practice.practice-detail-mode .stage-practice .audio-play-button.is-playing::before,
html body:not(.figma-answer-265-active) #practice#practice.practice-detail-mode .stage-practice .audio-play-button[data-audio-state="playing"]::before,
html body:not(.figma-answer-265-active) #practice#practice .practice-panel.stage-practice .audio-play-button.is-playing::before,
html body:not(.figma-answer-265-active) #practice#practice .practice-panel.stage-practice .audio-play-button[data-audio-state="playing"]::before,
html body:not(.figma-answer-265-active) #practice#practice .stage-practice .ra-demo-player #raDemoToggleButton.is-playing::before,
html body:not(.figma-answer-265-active) #practice#practice .stage-practice .ra-demo-player #raDemoToggleButton[data-audio-state="playing"]::before {
  top: 50% !important;
  left: 50% !important;
  width: 4px !important;
  height: 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: translate(calc(-50% - 5px), -50%) !important;
}

html body:not(.figma-answer-265-active) #practice#practice .stage-practice .audio-play-button.is-playing::after,
html body:not(.figma-answer-265-active) #practice#practice .stage-practice .audio-play-button[data-audio-state="playing"]::after,
html body:not(.figma-answer-265-active) #practice#practice.practice-detail-mode .stage-practice .audio-play-button.is-playing::after,
html body:not(.figma-answer-265-active) #practice#practice.practice-detail-mode .stage-practice .audio-play-button[data-audio-state="playing"]::after,
html body:not(.figma-answer-265-active) #practice#practice .practice-panel.stage-practice .audio-play-button.is-playing::after,
html body:not(.figma-answer-265-active) #practice#practice .practice-panel.stage-practice .audio-play-button[data-audio-state="playing"]::after,
html body:not(.figma-answer-265-active) #practice#practice .stage-practice .ra-demo-player #raDemoToggleButton.is-playing::after,
html body:not(.figma-answer-265-active) #practice#practice .stage-practice .ra-demo-player #raDemoToggleButton[data-audio-state="playing"]::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 4px !important;
  height: 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
  transform: translate(calc(-50% + 5px), -50%) !important;
}

html body:not(.figma-answer-265-active) #practice#practice .stage-practice .audio-track,
html body:not(.figma-answer-265-active) #practice#practice.practice-detail-mode .stage-practice .audio-track,
html body:not(.figma-answer-265-active) #practice#practice .practice-panel.stage-practice .audio-track {
  grid-area: rail !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 100px !important;
  height: 5px !important;
  min-height: 5px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(203, 210, 220, 0.72) !important;
  box-shadow: inset 0 1px 1px rgba(123, 134, 150, 0.1) !important;
  overflow: visible !important;
  --audio-prompt-progress: 0%;
}

html body:not(.figma-answer-265-active) #practice#practice .stage-practice .audio-track span,
html body:not(.figma-answer-265-active) #practice#practice.practice-detail-mode .stage-practice .audio-track span,
html body:not(.figma-answer-265-active) #practice#practice .practice-panel.stage-practice .audio-track span {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  display: block !important;
  width: var(--audio-prompt-progress, 0%) !important;
  height: 5px !important;
  min-height: 5px !important;
  border-radius: 999px !important;
  background: #050607 !important;
  animation: none !important;
  transform: translateY(-50%) !important;
}

html body:not(.figma-answer-265-active) #practice#practice .stage-practice .audio-prompt.playing .audio-track span,
html body:not(.figma-answer-265-active) #practice#practice.practice-detail-mode .stage-practice .audio-prompt.playing .audio-track span {
  animation: none !important;
}

html body:not(.figma-answer-265-active) #practice#practice .stage-practice .audio-track i,
html body:not(.figma-answer-265-active) #practice#practice.practice-detail-mode .stage-practice .audio-track i,
html body:not(.figma-answer-265-active) #practice#practice .practice-panel.stage-practice .audio-track i {
  position: absolute !important;
  top: 50% !important;
  left: var(--audio-prompt-progress, 0%) !important;
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  background: #050607 !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.2) !important;
  transform: translate(-50%, -50%) !important;
}

html body:not(.figma-answer-265-active) #practice#practice .stage-practice .audio-prompt [data-audio-duration],
html body:not(.figma-answer-265-active) #practice#practice.practice-detail-mode .stage-practice .audio-prompt [data-audio-duration],
html body:not(.figma-answer-265-active) #practice#practice .practice-panel.stage-practice .audio-prompt [data-audio-duration] {
  grid-area: duration !important;
  min-width: 34px !important;
  margin: 0 !important;
  color: rgba(82, 91, 106, 0.84) !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Early desktop glass fallback; the effective final override lives at EOF. */
@media (min-width: 981px) {
  html body:not(.view-agent) .sidebar,
  html body.view-dashboard .sidebar,
  html body.view-practice .sidebar,
  html body.view-mp3 .sidebar,
  html body.view-mock .sidebar,
  html body.view-profile .sidebar,
  html body.view-admin .sidebar {
    border: 1px solid rgba(255, 255, 255, 0.52) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(247, 249, 252, 0.32)),
      rgba(255, 255, 255, 0.26) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(15, 23, 42, 0.04),
      0 18px 42px -36px rgba(15, 23, 42, 0.44) !important;
    backdrop-filter: blur(30px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.18) !important;
  }

  html body .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 54px !important;
    padding: 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.12)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.58),
      inset 0 -1px 1px rgba(15, 23, 42, 0.045) !important;
    backdrop-filter: blur(22px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
  }

  html body .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link {
    flex: 0 1 102px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 78px !important;
    max-width: 116px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: rgba(38, 43, 52, 0.72) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body .sidebar .nav-link:hover,
  html body.view-dashboard .sidebar .nav-link:hover,
  html body.view-practice .sidebar .nav-link:hover,
  html body.view-mp3 .sidebar .nav-link:hover,
  html body.view-mock .sidebar .nav-link:hover,
  html body.view-profile .sidebar .nav-link:hover,
  html body.view-admin .sidebar .nav-link:hover {
    color: rgba(20, 23, 29, 0.92) !important;
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
  }

  html body .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active {
    color: rgba(8, 10, 14, 0.94) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
      rgba(255, 255, 255, 0.48) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -10px 20px rgba(15, 23, 42, 0.035),
      0 8px 18px -16px rgba(15, 23, 42, 0.46) !important;
    font-size: 15px !important;
    font-weight: 820 !important;
  }

  html body .sidebar .nav-link.active::after {
    bottom: 4px !important;
    width: 18px !important;
    height: 2px !important;
    background: rgba(246, 193, 59, 0.82) !important;
    box-shadow: 0 0 10px rgba(246, 193, 59, 0.32) !important;
  }

  html body .brand-copy strong,
  html body .sidebar .brand-copy strong,
  html body .sidebar .brand .brand-copy strong {
    color: rgba(17, 19, 24, 0.94) !important;
    font-size: 23px !important;
    font-weight: 880 !important;
  }

  html body .exam-type-picker select,
  html body .sidebar .exam-type-picker select,
  html body .sidebar .brand .exam-type-picker select,
  html body .sidebar-user-card,
  html body .sidebar #sidebarUserButton.sidebar-user-card {
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035) !important;
  }

  html body.view-dashboard #dashboard .home-web-hero,
  html body.view-dashboard #dashboard .home-web-card,
  html body.view-dashboard #dashboard .home-web-metric {
    border: 1px solid rgba(255, 255, 255, 0.54) !important;
    background:
      radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.58), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(250, 252, 255, 0.28)),
      rgba(255, 255, 255, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.74),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035),
      0 24px 56px -44px rgba(15, 23, 42, 0.46) !important;
    backdrop-filter: blur(28px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.16) !important;
  }

  html body.view-dashboard #dashboard .home-web-hero {
    min-height: 264px !important;
    padding: 24px 28px !important;
  }

  html body.view-dashboard #dashboard .home-web-hero-copy h2 {
    max-width: 600px !important;
    color: rgba(17, 20, 28, 0.95) !important;
    font-size: clamp(30px, 2.25vw, 42px) !important;
    font-weight: 820 !important;
    line-height: 1.12 !important;
  }

  html body.view-dashboard #dashboard .home-web-primary {
    height: 38px !important;
    padding: 0 17px !important;
    border-color: rgba(12, 14, 18, 0.92) !important;
    background: linear-gradient(180deg, #1d2027, #07080b) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 12px 24px -20px rgba(15, 23, 42, 0.66) !important;
    font-size: 13px !important;
    font-weight: 760 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal {
    padding: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)),
      rgba(255, 255, 255, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
  }

  html body.view-dashboard #dashboard .home-web-goal > span {
    color: rgba(17, 20, 28, 0.9) !important;
    font-size: 14px !important;
    font-weight: 780 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main {
    margin-top: 22px !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main strong {
    font-size: 44px !important;
    font-weight: 820 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main em,
  html body.view-dashboard #dashboard .home-web-goal p {
    color: rgba(60, 64, 74, 0.68) !important;
    font-weight: 700 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main i {
    width: 70px !important;
    height: 70px !important;
    background:
      radial-gradient(circle at center, rgba(255, 255, 255, 0.78) 0 48%, transparent 49%),
      conic-gradient(#12b886 var(--goal-progress, 0deg), rgba(60, 60, 67, 0.1) 0) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.62),
      0 12px 24px -20px rgba(15, 23, 42, 0.35) !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main i b {
    font-size: 16px !important;
    font-weight: 780 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-stats {
    display: none !important;
  }

  html body.view-dashboard #dashboard .home-web-metric span,
  html body.view-dashboard #dashboard .home-web-card p,
  html body.view-dashboard #dashboard .home-web-head p {
    color: rgba(60, 64, 74, 0.66) !important;
  }

  html body.view-dashboard #dashboard .home-web-metric strong,
  html body.view-dashboard #dashboard .home-web-head h3,
  html body.view-dashboard #dashboard .home-web-card h3 {
    color: rgba(17, 20, 28, 0.94) !important;
    font-weight: 800 !important;
  }
}

/* Desktop home calm card typography: keep the dashboard useful, not shouty. */
@media (min-width: 981px) {
  html body.view-dashboard #dashboard .home-v2-desktop-trial {
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
  }

  html body.view-dashboard #dashboard .home-web-card {
    padding: clamp(22px, 1.45vw, 28px) !important;
  }

  html body.view-dashboard #dashboard .home-web-metric {
    min-height: clamp(104px, 6vw, 124px) !important;
    padding: clamp(18px, 1.1vw, 22px) !important;
    align-content: start !important;
  }

  html body.view-dashboard #dashboard .home-web-metric span,
  html body.view-dashboard #dashboard .home-web-head > span {
    color: rgba(68, 75, 88, 0.62) !important;
    font-size: clamp(12px, 0.68vw, 13px) !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
  }

  html body.view-dashboard #dashboard .home-web-metric strong {
    margin-top: 9px !important;
    color: var(--accent) !important;
    font-size: clamp(28px, 1.55vw, 32px) !important;
    font-weight: 720 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  }

  html body.view-dashboard #dashboard .home-web-metric p {
    display: block !important;
    margin: 8px 0 0 !important;
    color: rgba(78, 86, 100, 0.58) !important;
    font-size: 12.5px !important;
    font-weight: 590 !important;
    line-height: 1.34 !important;
  }

  html body.view-dashboard #dashboard .home-web-metric i {
    display: none !important;
  }

  html body.view-dashboard #dashboard .home-web-head h3,
  html body.view-dashboard #dashboard .home-web-card h3 {
    color: rgba(22, 26, 34, 0.86) !important;
    font-size: clamp(18px, 1vw, 21px) !important;
    font-weight: 720 !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  html body.view-dashboard #dashboard .home-web-head p {
    color: rgba(78, 86, 100, 0.58) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  html body.view-dashboard #dashboard .home-web-head > span {
    min-width: 72px !important;
    height: 30px !important;
    background: rgba(255, 255, 255, 0.34) !important;
  }

  html body.view-dashboard #dashboard .home-web-task,
  html body.view-dashboard #dashboard .home-web-other button,
  html body.view-dashboard #dashboard .home-web-quick button {
    min-height: clamp(58px, 3.7vw, 72px) !important;
    padding: clamp(12px, 0.8vw, 16px) !important;
    gap: clamp(12px, 0.75vw, 16px) !important;
    border-radius: 20px !important;
  }

  html body.view-dashboard #dashboard .home-web-task > span,
  html body.view-dashboard #dashboard .home-web-other button span,
  html body.view-dashboard #dashboard .home-web-quick button span {
    width: clamp(42px, 2.55vw, 50px) !important;
    height: clamp(42px, 2.55vw, 50px) !important;
    border-radius: 16px !important;
  }

  html body.view-dashboard #dashboard .home-web-task > span svg,
  html body.view-dashboard #dashboard .home-web-other button span svg,
  html body.view-dashboard #dashboard .home-web-quick button span svg {
    width: clamp(21px, 1.16vw, 24px) !important;
    height: clamp(21px, 1.16vw, 24px) !important;
    stroke-width: 2.15 !important;
  }

  html body.view-dashboard #dashboard .home-web-task b,
  html body.view-dashboard #dashboard .home-web-other button strong,
  html body.view-dashboard #dashboard .home-web-quick button strong {
    color: rgba(22, 26, 34, 0.88) !important;
    font-size: clamp(16px, 0.92vw, 18px) !important;
    font-weight: 720 !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.56) !important;
  }

  html body.view-dashboard #dashboard .home-web-task em,
  html body.view-dashboard #dashboard .home-web-other button em,
  html body.view-dashboard #dashboard .home-web-quick button em {
    font-size: clamp(17px, 0.94vw, 20px) !important;
  }

  html body.view-dashboard #dashboard .home-web-weak-list strong {
    color: rgba(28, 32, 40, 0.82) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }

  html body.view-dashboard #dashboard .home-web-weak-list small,
  html body.view-dashboard #dashboard .home-web-weak-list b {
    color: rgba(78, 86, 100, 0.62) !important;
    font-size: 12px !important;
    font-weight: 620 !important;
  }
}

/* TRUE FINAL mobile dashboard lock: keep this after all home overrides. */
@media (max-width: 760px) {
  html body.view-dashboard #dashboard.active-view {
    padding: 14px 12px calc(108px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  html body.view-dashboard #dashboard .home-v2,
  html body.view-dashboard #dashboard .home-v2-mobile-trial,
  html body #homeDashboard .home-v2-mobile-trial,
  html body .home-v2-mobile-trial {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  html body.view-dashboard #dashboard .home-v2-mobile-trial {
    display: grid !important;
    gap: 12px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 8px 10px !important;
    border-radius: 18px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar img {
    width: 44px !important;
    height: 44px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar strong {
    overflow: hidden !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar small {
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar button {
    min-width: 66px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 34px !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard #dashboard .home-v2-mobile-trial .home-mobile-hero,
  html body #homeDashboard .home-mobile-hero,
  html body .home-mobile-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 74px !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    min-height: 0 !important;
    height: 158px !important;
    max-height: 158px !important;
    padding: 16px !important;
    border-radius: 22px !important;
  }

  html body.view-dashboard #dashboard .home-v2-mobile-trial .home-mobile-hero::before,
  html body.view-dashboard #dashboard .home-v2-mobile-trial .home-mobile-hero::after,
  html body #homeDashboard .home-mobile-hero::before,
  html body #homeDashboard .home-mobile-hero::after,
  html body .home-mobile-hero::before,
  html body .home-mobile-hero::after {
    display: none !important;
  }

  html body.view-dashboard #dashboard .home-mobile-hero > div:first-child,
  html body #homeDashboard .home-mobile-hero > div:first-child,
  html body .home-mobile-hero > div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    gap: 8px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-hero h2,
  html body #homeDashboard .home-mobile-hero h2,
  html body .home-mobile-hero h2 {
    max-width: 9em !important;
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
  }

  html body.view-dashboard #dashboard .home-mobile-primary {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: start !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    line-height: 34px !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard #dashboard .home-mobile-ring {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: end !important;
    width: 64px !important;
    height: 64px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-metrics,
  html body #homeDashboard .home-mobile-metrics,
  html body .home-mobile-metrics,
  html body.view-dashboard #dashboard .home-mobile-task-list,
  html body.view-dashboard #dashboard .home-mobile-quick > div,
  html body #homeDashboard .home-mobile-task-list,
  html body .home-mobile-task-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  html body.view-dashboard #dashboard .home-mobile-metric,
  html body.view-dashboard #dashboard .home-mobile-task,
  html body.view-dashboard #dashboard .home-mobile-quick button,
  html body #homeDashboard .home-mobile-task,
  html body .home-mobile-task {
    min-height: 82px !important;
    height: auto !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-section {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-dashboard #dashboard .home-mobile-section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    margin: 4px 2px -2px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-task,
  html body.view-dashboard #dashboard .home-mobile-quick button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html body.view-dashboard .mobile-tabbar {
    left: 12px !important;
    right: 12px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 66px !important;
    padding: 8px !important;
    border-radius: 24px !important;
  }
}

/* Final compact word popover override. */
html body .dictionary-popover {
  width: min(300px, calc(100vw - 24px)) !important;
  max-width: min(300px, calc(100vw - 24px)) !important;
  max-height: min(430px, calc(100dvh - 28px)) !important;
  padding: 12px !important;
  border-radius: 20px !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(15, 23, 42, 0.16) transparent !important;
  z-index: 5000 !important;
}

/* Final mock center lock at EOF: frosted layout, embedded controls, calm list density. */
@media (min-width: 981px) {
  html body.view-mock .app-shell {
    padding-top: 96px !important;
  }

  html body.view-mock .main {
    padding-top: 0 !important;
  }
}

html body.view-mock {
  background:
    radial-gradient(circle at 12% 4%, rgba(221, 246, 244, 0.28), transparent 34%),
    radial-gradient(circle at 96% 12%, rgba(255, 245, 217, 0.22), transparent 32%),
    linear-gradient(180deg, #f7f8fa 0%, #eef2f4 100%) !important;
}

html body.view-mock #mock.active-view {
  --mock-glass-line: rgba(255, 255, 255, 0.72);
  --mock-ink-soft: rgba(24, 30, 40, 0.9);
  --mock-muted-soft: rgba(91, 101, 116, 0.62);
  --mock-teal: #13c8b7;
  padding-top: clamp(18px, 2.2vw, 34px) !important;
  padding-inline: clamp(32px, 5vw, 88px) !important;
  background: transparent !important;
}

html body.view-mock #mock.active-view .mock-page-head {
  display: block !important;
  margin: 0 0 16px !important;
  padding: 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.view-mock #mock.active-view .mock-page-head h2,
html body.view-mock #mock.active-view .mock-paper-workbench::before {
  margin: 0 !important;
  color: var(--mock-ink-soft) !important;
  font-size: 21px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

html body.view-mock #mock.active-view .mock-page-head p,
html body.view-mock #mock.active-view .mock-page-actions,
html body.view-mock #mock.active-view .mock-report-panel,
html body.view-mock #mock.active-view .mock-redesign-history h3 {
  display: none !important;
}

html body.view-mock #mock.active-view .mock-center-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(44px, 4vw, 62px) !important;
}

html body.view-mock #mock.active-view .mock-main-column,
html body.view-mock #mock.active-view .mock-right-column {
  display: contents !important;
}

html body.view-mock #mock.active-view .mock-command-center {
  order: -1 !important;
  display: block !important;
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

html body.view-mock #mock.active-view .mock-redesign-history,
html body.view-mock #mock.active-view .mock-paper-workbench {
  border: 1px solid var(--mock-glass-line) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.78), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(247, 251, 252, 0.2)),
    rgba(255, 255, 255, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 24px 56px -44px rgba(15, 23, 42, 0.36) !important;
  backdrop-filter: blur(30px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.16) !important;
}

html body.view-mock #mock.active-view .mock-redesign-history {
  min-height: 190px !important;
  margin: 0 !important;
  padding: clamp(20px, 2vw, 30px) !important;
}

html body.view-mock #mock.active-view .mock-redesign-history-list {
  display: grid !important;
  gap: 0 !important;
  min-height: 128px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 20px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(249, 252, 253, 0.18)),
    rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 0 0 1px rgba(220, 228, 236, 0.44) !important;
}

html body.view-mock #mock.active-view .pte-history-empty {
  display: grid !important;
  align-content: center !important;
  gap: 12px !important;
  min-height: 128px !important;
  padding: 0 clamp(24px, 3vw, 44px) !important;
}

html body.view-mock #mock.active-view .pte-history-empty strong {
  color: rgba(30, 36, 46, 0.86) !important;
  font-size: 16px !important;
  font-weight: 720 !important;
}

html body.view-mock #mock.active-view .pte-history-empty span,
html body.view-mock #mock.active-view .pte-history-main span,
html body.view-mock #mock.active-view .pte-paper-copy span,
html body.view-mock #mock.active-view .mock-paper-copy p,
html body.view-mock #mock.active-view .mock-paper-copy small {
  color: var(--mock-muted-soft) !important;
  font-size: 12.5px !important;
  font-weight: 560 !important;
  line-height: 1.4 !important;
}

html body.view-mock #mock.active-view .pte-history-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px 126px !important;
  gap: 16px !important;
  align-items: center !important;
  height: 74px !important;
  min-height: 74px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(220, 228, 236, 0.48) !important;
  background: transparent !important;
}

html body.view-mock #mock.active-view .pte-history-row:last-child {
  border-bottom: 0 !important;
}

html body.view-mock #mock.active-view .pte-history-main {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
}

html body.view-mock #mock.active-view .pte-history-main strong,
html body.view-mock #mock.active-view .pte-paper-copy strong,
html body.view-mock #mock.active-view .mock-paper-copy strong {
  overflow: hidden !important;
  color: var(--mock-ink-soft) !important;
  font-size: 15px !important;
  font-weight: 710 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .pte-history-delete {
  position: relative !important;
  justify-self: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.64) !important;
  border-radius: 999px !important;
  background: rgba(255, 100, 112, 0.86) !important;
  color: transparent !important;
}

html body.view-mock #mock.active-view .pte-history-delete::before,
html body.view-mock #mock.active-view .pte-history-delete::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 13px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #fff !important;
}

html body.view-mock #mock.active-view .pte-history-delete::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

html body.view-mock #mock.active-view .pte-history-delete::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

html body.view-mock #mock.active-view .pte-history-action,
html body.view-mock #mock.active-view .mock-paper-filters button.active {
  border-color: rgba(19, 200, 183, 0.38) !important;
  background: var(--mock-teal) !important;
  color: #fff !important;
  box-shadow: 0 14px 26px -20px rgba(19, 200, 183, 0.76) !important;
}

html body.view-mock #mock.active-view .pte-history-action {
  justify-self: end !important;
  display: grid !important;
  place-items: center !important;
  min-width: 112px !important;
  min-height: 34px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 710 !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 22px clamp(18px, 2.2vw, 28px) 30px !important;
  overflow: visible !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench::before {
  content: "PTE 模考" !important;
  position: absolute !important;
  left: 2px !important;
  top: -42px !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench::after,
html body.view-mock #mock.active-view .mock-paper-tabs button.active::after,
html body.view-mock #mock.active-view .mock-paper-intro,
html body.view-mock #mock.active-view .mock-paper-ribbon,
html body.view-mock #mock.active-view .mock-paper-index,
html body.view-mock #mock.active-view .mock-paper-copy em,
html body.view-mock #mock.active-view .mock-paper-card.active::before {
  content: none !important;
  display: none !important;
}

html body.view-mock #mock.active-view .mock-paper-detail {
  order: -3 !important;
  display: block !important;
  margin: 0 0 18px !important;
  min-height: 42px !important;
}

html body.view-mock #mock.active-view .pte-mode-switch,
html body.view-mock #mock.active-view .mock-exam-mode-switch {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(520px, 100%) !important;
  height: 42px !important;
  margin: 0 auto !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.18)),
    rgba(211, 218, 218, 0.38) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.72),
    inset 0 -1px 1px rgba(15, 23, 42, 0.04) !important;
}

html body.view-mock #mock.active-view .pte-mode-switch button,
html body.view-mock #mock.active-view .mock-exam-mode-switch button {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(80, 89, 103, 0.58) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .pte-mode-switch button.active,
html body.view-mock #mock.active-view .mock-exam-mode-switch button.active {
  color: #fff !important;
  background: var(--mock-teal) !important;
  clip-path: none !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs {
  order: -2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 42px !important;
  margin: 0 0 18px !important;
  padding: 5px !important;
  overflow-x: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs button {
  min-width: 88px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(82, 92, 108, 0.62) !important;
  font-size: 13px !important;
  font-weight: 690 !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs button.active {
  color: rgba(16, 110, 101, 0.98) !important;
  background: rgba(226, 248, 245, 0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(19, 200, 183, 0.18) !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar {
  display: grid !important;
  grid-template-columns: auto minmax(220px, 320px) !important;
  gap: clamp(16px, 2vw, 28px) !important;
  align-items: center !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

html body.view-mock #mock.active-view .mock-paper-filters {
  grid-column: 1 !important;
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button,
html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  color: rgba(82, 92, 108, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button {
  min-width: 86px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 690 !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
  grid-column: 2 !important;
  justify-self: end !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 16px !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field span,
html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input::placeholder {
  color: rgba(82, 92, 108, 0.48) !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input {
  color: rgba(24, 30, 40, 0.86) !important;
  font-size: 14px !important;
  font-weight: 620 !important;
}

html body.view-mock #mock.active-view .mock-paper-list {
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid rgba(220, 228, 236, 0.52) !important;
}

html body.view-mock #mock.active-view .pte-paper-row,
html body.view-mock #mock.active-view .mock-paper-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 28px !important;
  gap: 18px !important;
  align-items: center !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 14px 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(220, 228, 236, 0.52) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  overflow: hidden !important;
}

html body.view-mock #mock.active-view .pte-paper-row:last-child,
html body.view-mock #mock.active-view .mock-paper-card:last-child {
  border-bottom: 0 !important;
}

html body.view-mock #mock.active-view .pte-paper-row.active,
html body.view-mock #mock.active-view .pte-paper-row:hover,
html body.view-mock #mock.active-view .mock-paper-card.active,
html body.view-mock #mock.active-view .mock-paper-card:hover {
  background: rgba(255, 255, 255, 0.28) !important;
}

html body.view-mock #mock.active-view .pte-paper-copy,
html body.view-mock #mock.active-view .mock-paper-copy {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

html body.view-mock #mock.active-view .pte-paper-meta,
html body.view-mock #mock.active-view .mock-paper-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  color: rgba(91, 101, 116, 0.62) !important;
  font-size: 12px !important;
  font-weight: 630 !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .pte-paper-meta span,
html body.view-mock #mock.active-view .mock-paper-meta span {
  display: inline-grid !important;
  place-items: center !important;
  min-height: 24px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.24) !important;
}

html body.view-mock #mock.active-view .pte-paper-meta span:first-child,
html body.view-mock #mock.active-view .mock-paper-meta span:first-child {
  background: rgba(255, 242, 202, 0.78) !important;
  color: rgba(122, 102, 43, 0.84) !important;
}

html body.view-mock #mock.active-view .pte-paper-row i,
html body.view-mock #mock.active-view .mock-paper-card > i,
html body.view-mock #mock.active-view .mock-paper-card::after {
  content: ">" !important;
  justify-self: center !important;
  display: block !important;
  color: rgba(28, 34, 44, 0.82) !important;
  font-size: 24px !important;
  font-style: normal !important;
  font-weight: 360 !important;
  line-height: 1 !important;
}

html body.view-mock #mock.active-view:not(.mock-exam-focus) .mock-session-area {
  display: none !important;
}

@media (max-width: 760px) {
  html body.view-mock #mock.active-view {
    padding-top: 18px !important;
    padding-inline: 16px !important;
  }

  html body.view-mock #mock.active-view .mock-page-head h2,
  html body.view-mock #mock.active-view .mock-paper-workbench::before {
    font-size: 18px !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    gap: 46px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history,
  html body.view-mock #mock.active-view .mock-paper-workbench {
    border-radius: 22px !important;
    padding: 16px !important;
  }

  html body.view-mock #mock.active-view .pte-history-row {
    grid-template-columns: minmax(0, 1fr) 34px !important;
    height: auto !important;
    min-height: 92px !important;
    padding: 14px !important;
  }

  html body.view-mock #mock.active-view .pte-history-action {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }

  html body.view-mock #mock.active-view .pte-mode-switch,
  html body.view-mock #mock.active-view .mock-exam-mode-switch,
  html body.view-mock #mock.active-view .mock-paper-tabs {
    width: 100% !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row,
  html body.view-mock #mock.active-view .mock-paper-card {
    grid-template-columns: minmax(0, 1fr) 24px !important;
    height: auto !important;
    min-height: 78px !important;
    padding: 14px 8px 14px 12px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta,
  html body.view-mock #mock.active-view .mock-paper-meta {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

/* Final mock center lock: keep this after legacy mock overrides. */
@media (min-width: 981px) {
  html body.view-mock .app-shell {
    padding-top: 96px !important;
  }

  html body.view-mock .main {
    padding-top: 0 !important;
  }
}

html body.view-mock #mock.active-view {
  --mock-glass-line: rgba(255, 255, 255, 0.72);
  --mock-soft-line: rgba(221, 228, 235, 0.62);
  --mock-ink-soft: rgba(24, 30, 40, 0.9);
  --mock-muted-soft: rgba(91, 101, 116, 0.62);
  --mock-teal: #13c8b7;
  padding-top: clamp(18px, 2.2vw, 34px) !important;
  padding-inline: clamp(32px, 5vw, 88px) !important;
  background: transparent !important;
}

/* Product Design mock center rebuild: frosted, embedded, and calmer than the legacy mock UI. */
@media (min-width: 981px) {
  html body.view-mock .app-shell {
    padding-top: 96px !important;
  }

  html body.view-mock .main {
    padding-top: 0 !important;
  }
}

html body.view-mock #mock.active-view .mock-page-head h2 {
  margin: 0 !important;
  color: var(--mock-ink-soft) !important;
  font-size: 21px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

html body.view-mock #mock.active-view .mock-redesign-history {
  display: block !important;
  min-height: 190px !important;
  margin: 0 !important;
  padding: clamp(20px, 2vw, 30px) !important;
  border: 1px solid var(--mock-glass-line) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.86), transparent 50%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(247, 251, 252, 0.2)),
    rgba(255, 255, 255, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 24px 56px -44px rgba(15, 23, 42, 0.36) !important;
  backdrop-filter: blur(30px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.16) !important;
}

html body.view-mock #mock.active-view .mock-redesign-history-list {
  display: grid !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 128px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 20px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(249, 252, 253, 0.18)),
    rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 0 0 1px rgba(220, 228, 236, 0.44) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html body.view-mock #mock.active-view .pte-history-empty {
  display: grid !important;
  align-content: center !important;
  gap: 12px !important;
  min-height: 128px !important;
  padding: 0 clamp(24px, 3vw, 44px) !important;
  color: var(--mock-muted-soft) !important;
}

html body.view-mock #mock.active-view .pte-history-empty strong {
  color: rgba(30, 36, 46, 0.86) !important;
  font-size: 16px !important;
  font-weight: 720 !important;
  line-height: 1.25 !important;
}

html body.view-mock #mock.active-view .pte-history-empty span {
  max-width: 760px !important;
  color: var(--mock-muted-soft) !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  line-height: 1.45 !important;
}

html body.view-mock #mock.active-view .pte-history-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px 126px !important;
  gap: 16px !important;
  align-items: center !important;
  min-height: 74px !important;
  height: 74px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(220, 228, 236, 0.48) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.view-mock #mock.active-view .pte-history-main strong {
  overflow: hidden !important;
  color: var(--mock-ink-soft) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .pte-history-main span {
  color: var(--mock-muted-soft) !important;
  font-size: 12.5px !important;
  font-weight: 560 !important;
}

html body.view-mock #mock.active-view .pte-history-delete {
  position: relative !important;
  justify-self: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.64) !important;
  border-radius: 999px !important;
  background: rgba(255, 100, 112, 0.86) !important;
  color: transparent !important;
  box-shadow: 0 12px 22px -18px rgba(255, 100, 112, 0.82) !important;
}

html body.view-mock #mock.active-view .pte-history-action {
  justify-self: end !important;
  display: grid !important;
  place-items: center !important;
  min-width: 112px !important;
  min-height: 34px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--mock-teal) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 710 !important;
  line-height: 1 !important;
  box-shadow: 0 14px 28px -18px rgba(19, 200, 183, 0.78) !important;
}

html body.view-mock #mock.active-view .mock-history-more {
  display: block !important;
  width: max-content !important;
  margin: 12px 8px 0 auto !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(86, 96, 111, 0.62) !important;
  font-size: 12px !important;
  font-weight: 590 !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  min-height: 0 !important;
  padding: 22px clamp(18px, 2.2vw, 28px) 30px !important;
  border: 1px solid var(--mock-glass-line) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 250, 235, 0.52), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(247, 251, 252, 0.2)),
    rgba(255, 255, 255, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 24px 56px -44px rgba(15, 23, 42, 0.36) !important;
  overflow: visible !important;
  backdrop-filter: blur(30px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.16) !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench::before {
  content: "PTE 模考" !important;
  position: absolute !important;
  left: 2px !important;
  top: -42px !important;
  color: var(--mock-ink-soft) !important;
  font-size: 21px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench::after {
  display: none !important;
  content: none !important;
}

html body.view-mock #mock.active-view .pte-mode-switch,
html body.view-mock #mock.active-view .mock-exam-mode-switch {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(520px, 100%) !important;
  height: 42px !important;
  margin: 0 auto !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.18)),
    rgba(211, 218, 218, 0.38) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.72),
    inset 0 -1px 1px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

html body.view-mock #mock.active-view .pte-mode-switch button.active,
html body.view-mock #mock.active-view .mock-exam-mode-switch button.active {
  color: #fff !important;
  background: var(--mock-teal) !important;
  clip-path: none !important;
  box-shadow: 0 12px 24px -18px rgba(19, 200, 183, 0.72) !important;
}

html body.view-mock #mock.active-view .mock-paper-intro {
  display: none !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs {
  order: -2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 42px !important;
  margin: 0 0 18px !important;
  padding: 5px !important;
  overflow-x: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs button {
  position: relative !important;
  min-width: 88px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(82, 92, 108, 0.62) !important;
  font-size: 13px !important;
  font-weight: 690 !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs button.active::after {
  content: none !important;
  display: none !important;
}

html body.view-mock #mock.active-view .mock-paper-filters {
  grid-column: 1 !important;
  display: flex !important;
  gap: 10px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button {
  min-width: 86px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  color: rgba(82, 92, 108, 0.62) !important;
  font-size: 13px !important;
  font-weight: 690 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button.active {
  border-color: rgba(19, 200, 183, 0.38) !important;
  background: var(--mock-teal) !important;
  color: #fff !important;
  box-shadow: 0 14px 26px -20px rgba(19, 200, 183, 0.76) !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
  grid-column: 2 !important;
  justify-self: end !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field span {
  color: rgba(82, 92, 108, 0.52) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input::placeholder {
  color: rgba(82, 92, 108, 0.42) !important;
}

html body.view-mock #mock.active-view .pte-paper-row,
html body.view-mock #mock.active-view .mock-paper-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 28px !important;
  gap: 18px !important;
  align-items: center !important;
  min-height: 72px !important;
  height: 72px !important;
  padding: 0 14px 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(220, 228, 236, 0.52) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  overflow: hidden !important;
}

html body.view-mock #mock.active-view .pte-paper-copy strong,
html body.view-mock #mock.active-view .mock-paper-copy strong {
  display: block !important;
  overflow: hidden !important;
  color: rgba(28, 34, 44, 0.88) !important;
  font-size: 15px !important;
  font-weight: 710 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .pte-paper-copy span,
html body.view-mock #mock.active-view .mock-paper-copy p,
html body.view-mock #mock.active-view .mock-paper-copy small {
  display: block !important;
  overflow: hidden !important;
  color: rgba(91, 101, 116, 0.58) !important;
  font-size: 12.5px !important;
  font-weight: 560 !important;
  line-height: 1.34 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .mock-paper-ribbon,
html body.view-mock #mock.active-view .mock-paper-index,
html body.view-mock #mock.active-view .mock-paper-copy em,
html body.view-mock #mock.active-view .mock-paper-card.active::before {
  display: none !important;
  content: none !important;
}

html body.view-mock #mock.active-view .pte-paper-meta span,
html body.view-mock #mock.active-view .mock-paper-meta span {
  display: inline-grid !important;
  place-items: center !important;
  min-height: 24px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.24) !important;
  color: rgba(91, 101, 116, 0.62) !important;
}

@media (max-width: 760px) {
  html body.view-mock #mock.active-view {
    padding-top: 18px !important;
    padding-inline: 16px !important;
  }

  html body.view-mock #mock.active-view .mock-page-head h2,
  html body.view-mock #mock.active-view .mock-paper-workbench::before {
    font-size: 18px !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    gap: 46px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history,
  html body.view-mock #mock.active-view .mock-paper-workbench {
    border-radius: 22px !important;
    padding: 16px !important;
  }

  html body.view-mock #mock.active-view .pte-history-row {
    grid-template-columns: minmax(0, 1fr) 34px !important;
    height: auto !important;
    min-height: 92px !important;
    padding: 14px !important;
  }

  html body.view-mock #mock.active-view .pte-history-action {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }

  html body.view-mock #mock.active-view .mock-paper-detail {
    margin-bottom: 14px !important;
  }

  html body.view-mock #mock.active-view .pte-mode-switch,
  html body.view-mock #mock.active-view .mock-exam-mode-switch {
    width: 100% !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs {
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row,
  html body.view-mock #mock.active-view .mock-paper-card {
    grid-template-columns: minmax(0, 1fr) 24px !important;
    height: auto !important;
    min-height: 78px !important;
    padding: 14px 8px 14px 12px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta,
  html body.view-mock #mock.active-view .mock-paper-meta {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

/* Absolute final sizing lock for mobile dashboard cards. */
@media (max-width: 760px) {
  html body.view-dashboard #dashboard.active-view #homeDashboard .home-v2-mobile-trial .home-mobile-hero h2 {
    max-width: 8.8em !important;
    font-size: 21px !important;
    font-weight: 820 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard .home-v2-mobile-trial .home-mobile-primary {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    line-height: 34px !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard .home-v2-mobile-trial .home-mobile-metric {
    min-height: 76px !important;
    padding: 10px 12px !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard .home-v2-mobile-trial .home-mobile-metric strong {
    font-size: 26px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard .home-v2-mobile-trial .home-mobile-task,
  html body.view-dashboard #dashboard.active-view #homeDashboard .home-v2-mobile-trial .home-mobile-quick button {
    min-height: 66px !important;
    padding: 10px 12px !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard .home-v2-mobile-trial .home-mobile-task b,
  html body.view-dashboard #dashboard.active-view #homeDashboard .home-v2-mobile-trial .home-mobile-quick button strong {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }
}

/* Typography lock for the approved mobile dashboard. */
@media (max-width: 760px) {
  html body.view-dashboard #dashboard.active-view #homeDashboard .home-v2-mobile-trial .home-mobile-hero h2 {
    max-width: 8.8em !important;
    color: #191d24 !important;
    font-size: 22px !important;
    font-weight: 820 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard .home-v2-mobile-trial .home-mobile-primary {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 820 !important;
    line-height: 34px !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard .home-v2-mobile-trial .home-mobile-metric strong {
    font-size: 28px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
  }
}

/* Final unified audio playback override: RS/RL/listening prompts share one embedded player. */
html body #practice .stage-practice .audio-prompt:not(:empty),
html body #practice.practice-detail-mode .stage-practice .audio-prompt:not(:empty),
html body #practice .practice-panel.stage-practice .audio-prompt:not(:empty) {
  display: grid !important;
  grid-template-columns: 44px minmax(120px, 1fr) auto !important;
  grid-template-areas: "play rail duration" !important;
  align-items: center !important;
  column-gap: 14px !important;
  width: min(620px, 100%) !important;
  max-width: 100% !important;
  min-height: 58px !important;
  height: 58px !important;
  margin: 12px 0 0 !important;
  padding: 7px 20px 7px 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(242, 247, 251, 0.28)),
    rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(154, 166, 184, 0.08),
    0 18px 34px -30px rgba(15, 23, 42, 0.34) !important;
  overflow: visible !important;
  backdrop-filter: blur(24px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.16) !important;
}

/* Final practice bank interaction polish: soft motion and glassy type badges. */
html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card,
html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card {
  transform: translate3d(0, 0, 0) scale(1) !important;
  transform-origin: center !important;
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms ease,
    background 260ms ease,
    border-color 260ms ease,
    filter 260ms ease !important;
  will-change: transform, box-shadow !important;
}

html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card:hover,
html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:hover,
html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card:focus-visible,
html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:focus-visible {
  transform: translate3d(0, -6px, 0) scale(1.012) !important;
  border-color: rgba(255, 255, 255, 0.66) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.22)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -18px 44px rgba(255, 255, 255, 0.18),
    0 24px 46px rgba(31, 41, 55, 0.12),
    0 8px 18px rgba(31, 41, 55, 0.08) !important;
  filter: saturate(1.04) !important;
}

html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card:active,
html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:active {
  transform: translate3d(0, -2px, 0) scale(0.996) !important;
  transition-duration: 120ms !important;
}

html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card::before,
html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card::before {
  transition: opacity 260ms ease, transform 260ms ease !important;
}

html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card:hover::before,
html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:hover::before,
html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card:focus-visible::before,
html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:focus-visible::before {
  opacity: 0.82 !important;
  transform: translate3d(0, -3px, 0) !important;
}

html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card .figma-type-dot,
html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card .figma-type-dot {
  border: 1px solid rgba(255, 255, 255, 0.44) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.18)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -12px 22px rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(31, 41, 55, 0.08) !important;
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms ease,
    background 240ms ease,
    border-color 240ms ease !important;
}

html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card:hover .figma-type-dot,
html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:hover .figma-type-dot,
html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card:focus-visible .figma-type-dot,
html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:focus-visible .figma-type-dot {
  transform: translate3d(0, -2px, 0) scale(1.04) !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.24)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -12px 22px rgba(255, 255, 255, 0.16),
    0 14px 28px rgba(31, 41, 55, 0.1) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card,
  html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card .figma-type-dot,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card .figma-type-dot {
    transition: none !important;
  }
}

/* Mock records are records only: no current-paper fallback in the history card. */
html body.view-mock #mock.active-view .pte-history-empty {
  display: grid !important;
  gap: 8px !important;
  align-content: center !important;
  min-height: 92px !important;
  padding: 0 24px !important;
  background: transparent !important;
}

html body.view-mock #mock.active-view .pte-history-empty strong {
  color: rgba(24, 30, 40, 0.88) !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
}

html body.view-mock #mock.active-view .pte-history-empty span {
  max-width: 560px !important;
  color: rgba(91, 101, 114, 0.66) !important;
  font-size: 13px !important;
  font-weight: 590 !important;
  line-height: 1.42 !important;
}

@media (min-width: 981px) {
  html body.view-dashboard #dashboard .home-web-hero-copy h2 {
    max-width: min(820px, 100%) !important;
    font-size: clamp(30px, 2.05vw, 38px) !important;
    font-weight: 780 !important;
    line-height: 1.14 !important;
  }
}

/* Mock route header normalization: keep navigation identical to the rest of the app. */
@media (min-width: 761px) and (max-width: 980px) {
  html body.view-mock .app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 64px minmax(0, 1fr) !important;
    row-gap: 12px !important;
    padding: 8px clamp(16px, 2.2vw, 30px) 14px !important;
    align-items: stretch !important;
  }

  html body.view-mock .sidebar {
    position: sticky !important;
    top: 8px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    z-index: 40 !important;
    display: grid !important;
    grid-template-columns: minmax(136px, auto) minmax(260px, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: min(1480px, 100%) !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 auto !important;
    padding: 6px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.52) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(247, 249, 252, 0.32)),
      rgba(255, 255, 255, 0.26) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(15, 23, 42, 0.04),
      0 18px 42px -36px rgba(15, 23, 42, 0.44) !important;
    transform: none !important;
    backdrop-filter: blur(30px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.18) !important;
  }

  html body.view-mock .main {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: min(1480px, 100%) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  html body.view-mock .sidebar .brand {
    display: grid !important;
    grid-template-columns: 30px auto !important;
    gap: 7px !important;
    align-items: center !important;
    min-width: 136px !important;
    height: 40px !important;
    padding: 0 4px !important;
  }

  html body.view-mock .sidebar .brand-icon {
    width: 30px !important;
    height: 30px !important;
  }

  html body.view-mock .sidebar .brand-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  html body.view-mock .sidebar .brand-copy strong {
    color: rgba(17, 19, 24, 0.94) !important;
    font-size: 16px !important;
    font-weight: 880 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body.view-mock .sidebar .exam-type-picker,
  html body.view-mock .sidebar .exam-type-picker select {
    max-width: 118px !important;
    min-height: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 1px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(70, 78, 92, 0.78) !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
  }

  html body.view-mock .sidebar .nav-link[data-view="mp3"] {
    display: none !important;
  }

  html body.view-mock .sidebar .nav-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(4px, 0.6vw, 10px) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.view-mock .sidebar .nav-link {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 clamp(8px, 0.8vw, 14px) !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: rgba(49, 54, 64, 0.78) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  html body.view-mock .sidebar .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.22) !important;
    color: rgba(20, 23, 29, 0.9) !important;
  }

  html body.view-mock .sidebar .nav-link.active {
    color: rgba(8, 10, 14, 0.94) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
      rgba(255, 255, 255, 0.48) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -10px 20px rgba(15, 23, 42, 0.035),
      0 8px 18px -16px rgba(15, 23, 42, 0.46) !important;
    font-size: 13px !important;
    font-weight: 820 !important;
  }

  html body.view-mock .sidebar .nav-link.active::after {
    bottom: 2px !important;
    width: 20px !important;
    height: 2px !important;
    background: rgba(246, 193, 59, 0.82) !important;
    box-shadow: 0 0 10px rgba(246, 193, 59, 0.32) !important;
  }

  html body.view-mock .sidebar .sidebar-user-card,
  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card {
    display: grid !important;
    grid-template-columns: 30px minmax(0, auto) auto !important;
    gap: 7px !important;
    align-items: center !important;
    justify-self: end !important;
    width: auto !important;
    max-width: 210px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 4px 8px 4px 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035) !important;
  }

  html body.view-mock .sidebar .sidebar-user-card img {
    width: 30px !important;
    height: 30px !important;
  }

  html body.view-mock .sidebar .sidebar-user-card strong {
    max-width: 96px !important;
    font-size: 12px !important;
  }

  html body.view-mock .sidebar .sidebar-user-card small {
    height: 16px !important;
    max-width: 76px !important;
    padding: 0 6px !important;
    font-size: 9px !important;
    line-height: 16px !important;
  }
}

/* Mock header final fix: fixed top bar, same proportions as the other desktop pages. */
@media (min-width: 761px) {
  html body.view-mock .app-shell {
    grid-template-rows: 82px minmax(0, 1fr) !important;
    row-gap: 12px !important;
    padding-top: 0 !important;
  }

  html body.view-mock .sidebar {
    position: fixed !important;
    top: 8px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 500 !important;
    transform: translateX(-50%) !important;
    grid-template-columns: minmax(410px, 480px) minmax(260px, 1fr) minmax(186px, 220px) !important;
    column-gap: clamp(14px, 2vw, 28px) !important;
    width: min(1480px, calc(100vw - clamp(32px, 4.4vw, 60px))) !important;
    max-width: min(1480px, calc(100vw - clamp(32px, 4.4vw, 60px))) !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    padding: 8px 20px !important;
    margin: 0 !important;
    overflow: visible !important;
    border-radius: 24px !important;
  }

  html body.view-mock .main {
    grid-row: 2 !important;
    padding-top: 0 !important;
  }

  html body.view-mock .sidebar .brand {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    height: 52px !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  html body.view-mock .sidebar .brand-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    flex: 0 0 52px !important;
  }

  html body.view-mock .sidebar .brand-copy {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body.view-mock .sidebar .brand-copy strong {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    color: rgba(17, 19, 24, 0.94) !important;
    font-size: 23px !important;
    font-weight: 880 !important;
    line-height: 1 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  html body.view-mock .sidebar .exam-type-picker {
    flex: 0 0 150px !important;
    width: 150px !important;
    max-width: 150px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035) !important;
  }

  html body.view-mock .sidebar .exam-type-picker select {
    width: 150px !important;
    max-width: 150px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 24px 0 12px !important;
    background: transparent !important;
    color: rgba(70, 78, 92, 0.78) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 30px !important;
  }

  html body.view-mock .sidebar .nav-list {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.64) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    overflow: visible !important;
    backdrop-filter: blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  }

  html body.view-mock .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link.active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 58px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 36px !important;
  }

  html body.view-mock .sidebar .nav-link.active {
    color: #111318 !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62)),
      rgba(255, 255, 255, 0.72) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      0 10px 22px -18px rgba(15, 23, 42, 0.42) !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card,
  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in {
    justify-self: end !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 196px !important;
    max-width: 196px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card img {
    width: 38px !important;
    height: 38px !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card span,
  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card b {
    display: block !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  html body.view-mock .sidebar {
    grid-template-columns: minmax(310px, 360px) minmax(220px, 1fr) 58px !important;
    column-gap: 10px !important;
    padding-inline: 14px !important;
  }

  html body.view-mock .sidebar .brand {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html body.view-mock .sidebar .brand-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  html body.view-mock .sidebar .brand-copy {
    gap: 8px !important;
  }

  html body.view-mock .sidebar .brand-copy strong {
    font-size: 20px !important;
  }

  html body.view-mock .sidebar .exam-type-picker,
  html body.view-mock .sidebar .exam-type-picker select {
    width: 132px !important;
    max-width: 132px !important;
    flex-basis: 132px !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card,
  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in {
    display: grid !important;
    grid-template-columns: 42px !important;
    place-content: center !important;
    width: 58px !important;
    max-width: 58px !important;
    height: 52px !important;
    padding: 5px !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card img {
    width: 42px !important;
    height: 42px !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card span,
  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card b {
    display: none !important;
  }
}

/* Mock header position correction: fixed full-width bar, no centering transform. */
@media (min-width: 761px) {
  html body.view-mock .app-shell {
    grid-template-rows: 82px minmax(0, 1fr) !important;
    padding-top: 0 !important;
  }

  html body.view-mock .sidebar {
    position: fixed !important;
    top: 8px !important;
    left: clamp(16px, 2.2vw, 30px) !important;
    right: clamp(16px, 2.2vw, 30px) !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    grid-template-columns: minmax(410px, 480px) minmax(260px, 1fr) minmax(186px, 220px) !important;
  }

  html body.view-mock .main {
    padding-top: 0 !important;
  }

  html body.view-mock #mock.active-view {
    padding-top: 18px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  html body.view-mock .sidebar {
    left: 14px !important;
    right: 14px !important;
    grid-template-columns: minmax(310px, 360px) minmax(220px, 1fr) 58px !important;
  }
}

/* Early desktop home polish; the effective final override lives at EOF. */
@media (min-width: 981px) {
  html body:not(.view-agent) .sidebar,
  html body.view-dashboard .sidebar,
  html body.view-practice .sidebar,
  html body.view-mp3 .sidebar,
  html body.view-mock .sidebar,
  html body.view-profile .sidebar,
  html body.view-admin .sidebar {
    border: 1px solid rgba(255, 255, 255, 0.52) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(247, 249, 252, 0.32)),
      rgba(255, 255, 255, 0.26) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(15, 23, 42, 0.04),
      0 18px 42px -36px rgba(15, 23, 42, 0.44) !important;
    backdrop-filter: blur(30px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.18) !important;
  }

  html body .nav-list,
  html body .sidebar .nav-list,
  html body.view-dashboard .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .nav-list,
  html body.view-admin .sidebar .nav-list {
    gap: 6px !important;
    padding: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.12)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.58),
      inset 0 -1px 1px rgba(15, 23, 42, 0.045) !important;
    backdrop-filter: blur(22px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
  }

  html body .nav-link,
  html body .sidebar .nav-link,
  html body.view-dashboard .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .nav-link,
  html body.view-admin .sidebar .nav-link {
    flex: 0 1 102px !important;
    min-width: 78px !important;
    max-width: 116px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 13px !important;
    color: rgba(38, 43, 52, 0.72) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html body .nav-link:hover,
  html body.view-dashboard .nav-link:hover,
  html body.view-practice .nav-link:hover,
  html body.view-mp3 .nav-link:hover,
  html body.view-mock .nav-link:hover,
  html body.view-profile .nav-link:hover,
  html body.view-admin .nav-link:hover {
    color: rgba(20, 23, 29, 0.92) !important;
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
  }

  html body .nav-link.active,
  html body.view-dashboard .nav-link.active,
  html body.view-practice .nav-link.active,
  html body.view-mp3 .nav-link.active,
  html body.view-mock .nav-link.active,
  html body.view-profile .nav-link.active,
  html body.view-admin .nav-link.active {
    color: rgba(8, 10, 14, 0.94) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
      rgba(255, 255, 255, 0.48) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -10px 20px rgba(15, 23, 42, 0.035),
      0 8px 18px -16px rgba(15, 23, 42, 0.46) !important;
    font-weight: 820 !important;
  }

  html body .nav-link.active::after {
    bottom: 4px !important;
    width: 18px !important;
    height: 2px !important;
    background: rgba(246, 193, 59, 0.82) !important;
    box-shadow: 0 0 10px rgba(246, 193, 59, 0.32) !important;
  }

  html body .brand-copy strong,
  html body .sidebar .brand-copy strong,
  html body .sidebar .brand .brand-copy strong {
    color: rgba(17, 19, 24, 0.94) !important;
    font-size: 23px !important;
    font-weight: 880 !important;
  }

  html body .exam-type-picker select,
  html body .sidebar .exam-type-picker select,
  html body .sidebar .brand .exam-type-picker select,
  html body .sidebar-user-card,
  html body .sidebar #sidebarUserButton.sidebar-user-card {
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035) !important;
  }

  html body.view-dashboard #dashboard .home-web-hero,
  html body.view-dashboard #dashboard .home-web-card,
  html body.view-dashboard #dashboard .home-web-metric {
    border: 1px solid rgba(255, 255, 255, 0.54) !important;
    background:
      radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.58), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(250, 252, 255, 0.28)),
      rgba(255, 255, 255, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.74),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035),
      0 24px 56px -44px rgba(15, 23, 42, 0.46) !important;
    backdrop-filter: blur(28px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.16) !important;
  }

  html body.view-dashboard #dashboard .home-web-hero {
    min-height: 264px !important;
    padding: 24px 28px !important;
  }

  html body.view-dashboard #dashboard .home-web-hero-copy h2 {
    max-width: 600px !important;
    color: rgba(17, 20, 28, 0.95) !important;
    font-size: clamp(30px, 2.25vw, 42px) !important;
    font-weight: 820 !important;
    line-height: 1.12 !important;
  }

  html body.view-dashboard #dashboard .home-web-primary {
    height: 38px !important;
    padding: 0 17px !important;
    border-color: rgba(12, 14, 18, 0.92) !important;
    background: linear-gradient(180deg, #1d2027, #07080b) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 12px 24px -20px rgba(15, 23, 42, 0.66) !important;
    font-size: 13px !important;
    font-weight: 760 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal {
    padding: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)),
      rgba(255, 255, 255, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
  }

  html body.view-dashboard #dashboard .home-web-goal > span {
    color: rgba(17, 20, 28, 0.9) !important;
    font-size: 14px !important;
    font-weight: 780 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main {
    margin-top: 22px !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main strong {
    font-size: 44px !important;
    font-weight: 820 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main em,
  html body.view-dashboard #dashboard .home-web-goal p {
    color: rgba(60, 64, 74, 0.68) !important;
    font-weight: 700 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main i {
    width: 70px !important;
    height: 70px !important;
    background:
      radial-gradient(circle at center, rgba(255, 255, 255, 0.78) 0 48%, transparent 49%),
      conic-gradient(#12b886 var(--goal-progress, 0deg), rgba(60, 60, 67, 0.1) 0) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.62),
      0 12px 24px -20px rgba(15, 23, 42, 0.35) !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main i b {
    font-size: 16px !important;
    font-weight: 780 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-stats {
    display: none !important;
  }

  html body.view-dashboard #dashboard .home-web-metric span,
  html body.view-dashboard #dashboard .home-web-card p,
  html body.view-dashboard #dashboard .home-web-head p {
    color: rgba(60, 64, 74, 0.66) !important;
  }

  html body.view-dashboard #dashboard .home-web-metric strong,
  html body.view-dashboard #dashboard .home-web-head h3,
  html body.view-dashboard #dashboard .home-web-card h3 {
    color: rgba(17, 20, 28, 0.94) !important;
    font-weight: 800 !important;
  }
}

/* Absolute final top navigation: individual glass buttons, MP3 removed from the header. */
@media (min-width: 761px) {
  html body .sidebar .nav-link[data-view="mp3"],
  html body.view-dashboard .sidebar .nav-link[data-view="mp3"],
  html body.view-practice .sidebar .nav-link[data-view="mp3"],
  html body.view-mp3 .sidebar .nav-link[data-view="mp3"],
  html body.view-mock .sidebar .nav-link[data-view="mp3"],
  html body.view-profile .sidebar .nav-link[data-view="mp3"],
  html body.view-admin .sidebar .nav-link[data-view="mp3"],
  html body.view-dashboard .sidebar .nav-link[data-view="mp3"],
  html body.view-practice .sidebar .nav-link[data-view="mp3"],
  html body.view-mp3 .sidebar .nav-link[data-view="mp3"],
  html body.view-mock .sidebar .nav-link[data-view="mp3"],
  html body.view-profile .sidebar .nav-link[data-view="mp3"],
  html body.view-admin .sidebar .nav-link[data-view="mp3"] {
    display: none !important;
  }

  html body .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list {
    display: flex !important;
    grid-auto-flow: initial !important;
    grid-auto-columns: initial !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 440px !important;
    max-width: none !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link {
    flex: 0 0 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.25)),
      rgba(255, 255, 255, 0.28) !important;
    color: rgba(49, 54, 64, 0.88) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 14px 34px -28px rgba(15, 23, 42, 0.5) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 44px !important;
    transform: none !important;
    backdrop-filter: blur(22px) saturate(1.22) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.22) !important;
  }

  html body .sidebar .nav-link:hover {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.34)),
      rgba(255, 255, 255, 0.34) !important;
    color: rgba(32, 36, 44, 0.94) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 16px 36px -26px rgba(15, 23, 42, 0.52) !important;
  }

  html body .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active {
    flex: 0 0 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background:
      radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.18), transparent 42%),
      linear-gradient(180deg, #202126 0%, #08090c 100%) !important;
    color: #ffffff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -12px 22px rgba(0, 0, 0, 0.28),
      0 16px 34px -24px rgba(0, 0, 0, 0.72) !important;
    font-size: 20px !important;
    line-height: 44px !important;
  }

  html body .sidebar .nav-link.active::after,
  html body.view-dashboard .sidebar .nav-link.active::after,
  html body.view-practice .sidebar .nav-link.active::after,
  html body.view-mp3 .sidebar .nav-link.active::after,
  html body.view-mock .sidebar .nav-link.active::after,
  html body.view-profile .sidebar .nav-link.active::after,
  html body.view-admin .sidebar .nav-link.active::after,
  html body.view-dashboard .sidebar .nav-link.active::after,
  html body.view-practice .sidebar .nav-link.active::after,
  html body.view-mp3 .sidebar .nav-link.active::after,
  html body.view-mock .sidebar .nav-link.active::after,
  html body.view-profile .sidebar .nav-link.active::after,
  html body.view-admin .sidebar .nav-link.active::after {
    bottom: 6px !important;
    width: 24px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #f8d34a, #f6b91f) !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  html body .sidebar .nav-list {
    gap: 12px !important;
    min-width: 360px !important;
  }

  html body .sidebar .nav-link,
  html body .sidebar .nav-link.active {
    flex-basis: 100px !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    font-size: 17px !important;
    line-height: 42px !important;
  }
}

@media (min-width: 761px) {
  html body .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active {
    flex: 0 0 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    font-size: 20px !important;
    line-height: 44px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  html body .sidebar .nav-link.active {
    flex-basis: 100px !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 12px !important;
    font-size: 17px !important;
    line-height: 42px !important;
  }
}

/* Apple-style glass scoring popover. */
html body .dictionary-popover {
  width: min(360px, calc(100vw - 28px)) !important;
  max-width: min(360px, calc(100vw - 28px)) !important;
  padding: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(246, 248, 251, 0.52)),
    rgba(255, 255, 255, 0.54) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(255, 255, 255, 0.34),
    0 24px 72px -34px rgba(15, 23, 42, 0.58) !important;
  backdrop-filter: blur(28px) saturate(1.24) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.24) !important;
}

html body .dictionary-popover .dict-card-head {
  align-items: center !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(60, 60, 67, 0.12) !important;
}

html body .dictionary-popover .dict-card-head strong {
  color: #1d1d1f !important;
  font-size: 28px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
}

html body .dictionary-popover .dict-card-head span {
  color: #9a6500 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

html body .dictionary-popover .dict-sound-btn {
  min-height: 36px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 199, 44, 0.54) !important;
  border-radius: 999px !important;
  background: rgba(255, 246, 214, 0.72) !important;
  color: #6f4b00 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  font-size: 14px !important;
  font-weight: 760 !important;
}

html body .dictionary-popover:has(.popover-score-card) .dict-meaning,
html body .dictionary-popover:has(.popover-score-card) > p,
html body .dictionary-popover:has(.popover-score-card) .word-speech-insight,
html body .dictionary-popover:has(.popover-score-card) .phoneme-feedback-summary,
html body .dictionary-popover:has(.popover-score-card) .coach-phone-advice,
html body .dictionary-popover:has(.popover-score-card) .coach-word-actions {
  display: none !important;
}

html body .dictionary-popover .popover-score-card {
  display: grid !important;
  gap: 12px !important;
  margin-top: 14px !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.56) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.28)),
    rgba(255, 255, 255, 0.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 18px 34px -30px rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(18px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.14) !important;
}

html body .dictionary-popover .popover-score-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body .dictionary-popover .popover-score-card > span,
html body .dictionary-popover .popover-score-head span {
  color: rgba(60, 60, 67, 0.72) !important;
  font-size: 14px !important;
  font-weight: 780 !important;
}

html body .dictionary-popover .popover-score-head strong {
  color: #1d1d1f !important;
  font-size: 34px !important;
  font-weight: 860 !important;
  line-height: 1 !important;
}

html body .dictionary-popover .popover-score-meta {
  display: inline-flex !important;
  width: fit-content !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(60, 60, 67, 0.1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.42) !important;
}

html body .dictionary-popover .popover-score-meta b,
html body .dictionary-popover .popover-score-meta em {
  color: rgba(29, 29, 31, 0.78) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 780 !important;
}

html body .dictionary-popover .phoneme-panel {
  border-top: 0 !important;
}

html body .dictionary-popover .phoneme-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body .dictionary-popover .phoneme-row.empty {
  display: block !important;
  color: rgba(60, 60, 67, 0.62) !important;
  font-size: 13px !important;
  font-weight: 720 !important;
}

html body .dictionary-popover .phoneme-row b {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 8px 7px !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  font-weight: 820 !important;
}

html body .dictionary-popover .phoneme-row b span {
  font-size: 19px !important;
  line-height: 1 !important;
}

html body .dictionary-popover .phoneme-row small {
  font-size: 12px !important;
  font-weight: 760 !important;
  opacity: 0.82 !important;
}

html body .dictionary-popover .phoneme-row b.good,
html body .dictionary-popover .popover-word-score.good {
  color: #0f6b46 !important;
  border-color: rgba(40, 205, 121, 0.34) !important;
  background: rgba(222, 250, 235, 0.72) !important;
}

html body .dictionary-popover .phoneme-row b.okay,
html body .dictionary-popover .popover-word-score.okay {
  color: #7a5800 !important;
  border-color: rgba(255, 204, 0, 0.38) !important;
  background: rgba(255, 244, 205, 0.76) !important;
}

html body .dictionary-popover .phoneme-row b.weak,
html body .dictionary-popover .phoneme-row b.missing,
html body .dictionary-popover .popover-word-score.weak,
html body .dictionary-popover .popover-word-score.missing {
  color: #9f271f !important;
  border-color: rgba(255, 69, 58, 0.34) !important;
  background: rgba(255, 226, 222, 0.78) !important;
}

html body .dictionary-popover .phoneme-row b.pending {
  color: rgba(60, 60, 67, 0.72) !important;
  border-color: rgba(60, 60, 67, 0.16) !important;
  background: rgba(255, 255, 255, 0.48) !important;
}

html body.view-dashboard .main,
html body.view-dashboard #dashboard,
html body.view-dashboard #dashboard.active-view,
html body.view-dashboard #dashboard .home-v2,
html body.view-dashboard #dashboard .home-v2-mobile-trial,
html body.view-dashboard #dashboard .home-v2-desktop-trial {
  background: transparent !important;
  background-image: none !important;
}

html body.view-dashboard #dashboard .home-mobile-hero,
html body.view-dashboard #dashboard .home-mobile-metric,
html body.view-dashboard #dashboard .home-mobile-section {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.72), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(250, 252, 253, 0.28)),
    rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(15, 23, 42, 0.035),
    0 22px 48px -38px rgba(15, 23, 42, 0.34) !important;
}

/* Practice question browser: shorter scroll panel and hover motion. */
html body #practice.practice-detail-mode .stage-practice .question-browser,
html body #practice .stage-practice .question-browser {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(82dvh, 760px) !important;
  overflow: hidden !important;
}

html body #practice.practice-detail-mode .stage-practice .question-list,
html body #practice .stage-practice .question-list,
html body #practice.practice-detail-mode .stage-practice .virtual-question-list,
html body #practice .stage-practice .virtual-question-list {
  min-height: 0 !important;
  max-height: clamp(360px, 54dvh, 520px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-right: 4px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(15, 23, 42, 0.18) transparent !important;
}

html body #practice.practice-detail-mode .stage-practice .question-list::-webkit-scrollbar,
html body #practice .stage-practice .question-list::-webkit-scrollbar {
  width: 6px !important;
}

html body #practice.practice-detail-mode .stage-practice .question-list::-webkit-scrollbar-thumb,
html body #practice .stage-practice .question-list::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.16) !important;
  border-radius: 999px !important;
}

html body #practice.practice-detail-mode .stage-practice .question-row.compact-question-row,
html body #practice .stage-practice .question-row.compact-question-row {
  position: relative !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    opacity 180ms ease !important;
  will-change: transform, box-shadow !important;
}

html body #practice.practice-detail-mode .stage-practice .question-row.compact-question-row::after,
html body #practice .stage-practice .question-row.compact-question-row::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.02) 46%, rgba(255, 255, 255, 0.18)) !important;
  opacity: 0 !important;
  transition: opacity 180ms ease !important;
  z-index: -1 !important;
}

html body #practice.practice-detail-mode .stage-practice .question-row.compact-question-row:hover,
html body #practice .stage-practice .question-row.compact-question-row:hover {
  transform: translateY(-2px) scale(1.008) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 18px 36px -28px rgba(15, 23, 42, 0.46) !important;
}

html body #practice.practice-detail-mode .stage-practice .question-row.compact-question-row:hover::after,
html body #practice .stage-practice .question-row.compact-question-row:hover::after {
  opacity: 1 !important;
}

html body #practice.practice-detail-mode .stage-practice .question-row.compact-question-row:active,
html body #practice .stage-practice .question-row.compact-question-row:active {
  transform: translateY(0) scale(0.996) !important;
  transition-duration: 90ms !important;
}

html body #practice.practice-detail-mode .stage-practice .question-row.compact-question-row.selected:hover,
html body #practice .stage-practice .question-row.compact-question-row.selected:hover {
  transform: translateY(-1px) scale(1.004) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 20px 40px -24px rgba(0, 0, 0, 0.58) !important;
}

html body #practice .practice-hero > img[src*="practice-banner-mascot-book-clean"] {
  display: none !important;
}

/* Practice discussion cards: glass surface plus hover motion. */
html body #practice.practice-detail-mode .stage-practice .practice-discussion,
html body #practice .stage-practice .practice-discussion {
  padding: 22px !important;
  border: 0 !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(232, 246, 255, 0.28), transparent 38%),
    radial-gradient(circle at 90% 8%, rgba(248, 242, 229, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(249, 252, 253, 0.24)),
    rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 28px 62px -48px rgba(15, 23, 42, 0.44) !important;
  backdrop-filter: blur(30px) saturate(1.26) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.26) !important;
}

html body #practice.practice-detail-mode .stage-practice .discussion-list.practice-thread-list,
html body #practice .stage-practice .discussion-list.practice-thread-list {
  display: grid !important;
  gap: 14px !important;
  padding: 0 !important;
}

html body #practice.practice-detail-mode .stage-practice .practice-thread-post.discussion-post,
html body #practice .stage-practice .practice-thread-post.discussion-post {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(232, 246, 255, 0.18), transparent 40%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(250, 252, 253, 0.66)),
    rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    inset 0 -1px 0 rgba(15, 23, 42, 0.03),
    0 12px 28px -26px rgba(15, 23, 42, 0.3) !important;
  cursor: pointer !important;
  isolation: isolate !important;
  transform: none !important;
  transition:
    box-shadow 160ms ease,
    background 160ms ease,
    opacity 180ms ease !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #practice.practice-detail-mode .stage-practice .practice-thread-post.discussion-post::after,
html body #practice .stage-practice .practice-thread-post.discussion-post::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.03) 48%, rgba(255, 255, 255, 0.22)) !important;
  opacity: 0 !important;
  z-index: -1 !important;
  transition: opacity 180ms ease !important;
}

html body #practice.practice-detail-mode .stage-practice .practice-thread-post.discussion-post:hover,
html body #practice.practice-detail-mode .stage-practice .practice-thread-post.discussion-post.is-expanded,
html body #practice .stage-practice .practice-thread-post.discussion-post:hover,
html body #practice .stage-practice .practice-thread-post.discussion-post.is-expanded {
  transform: none !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(226, 244, 255, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(250, 252, 253, 0.72)),
    rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 32px -28px rgba(15, 23, 42, 0.34) !important;
}

html body #practice.practice-detail-mode .stage-practice .practice-thread-post.discussion-post:hover::after,
html body #practice.practice-detail-mode .stage-practice .practice-thread-post.discussion-post.is-expanded::after,
html body #practice .stage-practice .practice-thread-post.discussion-post:hover::after,
html body #practice .stage-practice .practice-thread-post.discussion-post.is-expanded::after {
  opacity: 1 !important;
}

html body #practice.practice-detail-mode .stage-practice .practice-thread-avatar,
html body #practice .stage-practice .practice-thread-avatar {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 14px 24px -18px rgba(15, 23, 42, 0.48) !important;
}

html body #practice.practice-detail-mode .stage-practice .practice-thread-meta b,
html body #practice .stage-practice .practice-thread-meta b {
  border: 0 !important;
  border-radius: 10px !important;
  color: #8a6500 !important;
  background:
    linear-gradient(145deg, rgba(255, 243, 198, 0.9), rgba(255, 255, 255, 0.48)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 18px -16px rgba(132, 92, 0, 0.32) !important;
}

html body #practice.practice-detail-mode .stage-practice .practice-thread-content mark,
html body #practice.practice-detail-mode .stage-practice .forum-thread-reply mark,
html body #practice .stage-practice .practice-thread-content mark,
html body #practice .stage-practice .forum-thread-reply mark {
  border: 0 !important;
  border-radius: 8px !important;
  color: #0076c7 !important;
  background:
    linear-gradient(145deg, rgba(205, 236, 255, 0.88), rgba(255, 255, 255, 0.5)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 8px 14px -14px rgba(0, 118, 199, 0.3) !important;
}

html body #practice.practice-detail-mode .stage-practice .practice-thread-post .discussion-post-actions,
html body #practice .stage-practice .practice-thread-post .discussion-post-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

html body #practice.practice-detail-mode .stage-practice .practice-thread-post .discussion-post-actions button,
html body #practice .stage-practice .practice-thread-post .discussion-post-actions button {
  min-height: 32px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: rgba(93, 103, 117, 0.86) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    transform 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease !important;
}

html body #practice.practice-detail-mode .stage-practice .practice-thread-post .discussion-post-actions button:hover,
html body #practice .stage-practice .practice-thread-post .discussion-post-actions button:hover {
  transform: translateY(-1px) !important;
  color: #111316 !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(247, 250, 252, 0.24)),
    rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 12px 22px -18px rgba(15, 23, 42, 0.32) !important;
}

html body #practice.practice-detail-mode .stage-practice .practice-thread-post .discussion-post-actions button.is-liked,
html body #practice .stage-practice .practice-thread-post .discussion-post-actions button.is-liked {
  color: #057052 !important;
  background:
    linear-gradient(145deg, rgba(226, 247, 240, 0.86), rgba(255, 255, 255, 0.46)) !important;
}

html body #practice.practice-detail-mode .stage-practice .practice-thread-post .discussion-expanded,
html body #practice .stage-practice .practice-thread-post .discussion-expanded {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 0 !important;
}

html body #practice.practice-detail-mode .stage-practice .practice-thread-post .forum-thread-reply,
html body #practice .stage-practice .practice-thread-post .forum-thread-reply {
  border: 0 !important;
  border-radius: 16px !important;
  padding: 10px 12px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(248, 251, 252, 0.18)),
    rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 12px 24px -22px rgba(15, 23, 42, 0.28) !important;
}

html body #practice.practice-detail-mode .stage-practice .practice-thread-post .forum-reply-line,
html body #practice .stage-practice .practice-thread-post .forum-reply-line {
  background: rgba(0, 156, 107, 0.24) !important;
}

@media (max-width: 760px) {
  html body #practice.practice-detail-mode .stage-practice .practice-discussion,
  html body #practice .stage-practice .practice-discussion {
    padding: 16px !important;
    border-radius: 24px !important;
  }

  html body #practice.practice-detail-mode .stage-practice .practice-thread-post.discussion-post,
  html body #practice .stage-practice .practice-thread-post.discussion-post {
    padding: 14px !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
  }
}

/* Compact audio question card: smaller play icon, tighter glass player. */
html body #practice.practice-detail-mode:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .question-card.active-question,
html body #practice:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .question-card.active-question,
html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .question-card.active-question,
html body #practice .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .question-card.active-question {
  min-height: 0 !important;
  height: auto !important;
  gap: 14px !important;
  grid-template-rows: auto auto auto !important;
  padding: clamp(18px, 2vw, 26px) !important;
  padding-bottom: clamp(18px, 2vw, 24px) !important;
}

html body #practice.practice-detail-mode:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice #questionText,
html body #practice:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice #questionText,
html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) #questionText,
html body #practice .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) #questionText {
  min-height: 0 !important;
  margin: 0 !important;
}

html body #practice.practice-detail-mode:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice #questionText .ghost-btn,
html body #practice:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice #questionText .ghost-btn,
html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) #questionText .ghost-btn,
html body #practice .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) #questionText .ghost-btn {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
}

html body #practice.practice-detail-mode:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-prompt:not(:empty),
html body #practice:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-prompt:not(:empty),
html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-prompt:not(:empty),
html body #practice .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-prompt:not(:empty) {
  display: grid !important;
  grid-template-columns: 30px minmax(110px, 220px) auto !important;
  grid-template-areas: "play rail duration" !important;
  align-items: center !important;
  justify-content: start !important;
  column-gap: 9px !important;
  width: fit-content !important;
  max-width: min(340px, 78%) !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 8px 0 0 !important;
  padding: 3px 10px 3px 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(236, 244, 250, 0.18)),
    rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 24px -22px rgba(15, 23, 42, 0.32) !important;
  overflow: visible !important;
  backdrop-filter: blur(20px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.18) !important;
}

html body #practice.practice-detail-mode:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-play-button,
html body #practice:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-play-button,
html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-play-button,
html body #practice .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-play-button {
  grid-area: play !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 9px 18px -14px rgba(0, 0, 0, 0.62) !important;
}

html body #practice.practice-detail-mode:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-play-button::before,
html body #practice:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-play-button::before,
html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-play-button::before,
html body #practice .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-play-button::before {
  width: 8px !important;
  height: 10px !important;
}

html body #practice.practice-detail-mode:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-play-button.is-playing::before,
html body #practice:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-play-button.is-playing::before,
html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-play-button.is-playing::before,
html body #practice .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-play-button.is-playing::before {
  width: 3px !important;
  height: 11px !important;
  box-shadow: 6px 0 0 #fff !important;
  transform: translate(-5px, -50%) !important;
}

html body #practice.practice-detail-mode:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-track,
html body #practice:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-track,
html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-track,
html body #practice .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-track {
  grid-area: rail !important;
  width: 190px !important;
  max-width: 24vw !important;
  min-width: 110px !important;
  height: 4px !important;
  min-height: 4px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(205, 211, 220, 0.78) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body #practice.practice-detail-mode:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-track span,
html body #practice:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-track span,
html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-track span,
html body #practice .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-track span {
  height: 4px !important;
  min-height: 4px !important;
}

html body #practice.practice-detail-mode:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-track i,
html body #practice:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-track i,
html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-track i,
html body #practice .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-track i {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  border-width: 2px !important;
}

html body #practice.practice-detail-mode:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-prompt [data-audio-duration],
html body #practice:is([data-active-question-type="RS"], [data-active-question-type="RL"], [data-active-question-type="RTS"], [data-active-question-type="SGD"], [data-active-question-type="ASQ"]) .stage-practice .audio-prompt [data-audio-duration],
html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-prompt [data-audio-duration],
html body #practice .practice-panel.stage-practice:is([data-active-type="RS"], [data-active-type="RL"], [data-active-type="RTS"], [data-active-type="SGD"], [data-active-type="ASQ"]) .audio-prompt [data-audio-duration] {
  grid-area: duration !important;
  min-width: 24px !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Writing answer workspace: tighter vertical rhythm and compact word counter. */
html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-workspace,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-workspace {
  display: grid !important;
  gap: 10px !important;
  margin-top: 10px !important;
  padding: 16px 18px 18px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 247, 228, 0.24), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.64), rgba(250, 252, 253, 0.22)),
    rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 18px 42px -36px rgba(15, 23, 42, 0.36) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-workspace > div:first-child,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-workspace > div:first-child {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-workspace .eyebrow,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-workspace .eyebrow {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-workspace h3,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-workspace h3 {
  margin: 0 !important;
  font-size: clamp(22px, 1.8vw, 30px) !important;
  line-height: 1.15 !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-hint-bar,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-hint-bar {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .we-word-status,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .we-word-status {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  min-height: 36px !important;
  gap: 6px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255, 247, 229, 0.74), rgba(255, 255, 255, 0.34)),
    rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 10px 22px -20px rgba(132, 92, 0, 0.24) !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .we-word-status strong,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .we-word-status strong {
  font-size: 22px !important;
  line-height: 1 !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .we-word-status span,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .we-word-status span {
  font-size: 13px !important;
  line-height: 1 !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .text-answer,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .text-answer {
  margin-top: 4px !important;
  padding: 16px 18px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(250, 252, 253, 0.28)),
    rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 14px 32px -30px rgba(15, 23, 42, 0.32) !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="WE"] .text-answer,
html body #practice .practice-panel.stage-practice[data-active-type="WE"] .text-answer {
  min-height: clamp(250px, 36vh, 320px) !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="SWT"] .text-answer,
html body #practice .practice-panel.stage-practice[data-active-type="SWT"] .text-answer,
html body #practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="SST"] .text-answer,
html body #practice .practice-panel.stage-practice[data-active-type="SST"] .text-answer,
html body #practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="WFD"] .text-answer,
html body #practice .practice-panel.stage-practice[data-active-type="WFD"] .text-answer {
  min-height: clamp(120px, 22vh, 180px) !important;
}

@media (max-width: 760px) {
  html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-workspace,
  html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-workspace {
    padding: 14px !important;
    border-radius: 20px !important;
  }

  html body #practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="WE"] .text-answer,
  html body #practice .practice-panel.stage-practice[data-active-type="WE"] .text-answer {
    min-height: 240px !important;
  }
}

/* Writing compact pass: remove the oversized empty space above text answers. */
html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .question-card.active-question,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .question-card.active-question {
  min-height: 0 !important;
  gap: 10px !important;
  padding: 18px 20px 16px !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .question-card.active-question #questionText,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .question-card.active-question #questionText {
  margin: 8px 0 0 !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-workspace,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-workspace {
  gap: 8px !important;
  margin-top: 8px !important;
  padding: 14px 16px 16px !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-hint-bar,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .answer-hint-bar {
  margin-top: 2px !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .we-word-status,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .we-word-status {
  min-height: 32px !important;
  padding: 0 12px !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .we-word-status strong,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .we-word-status strong {
  font-size: 20px !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .text-answer,
html body #practice .practice-panel.stage-practice:is([data-active-type="WE"], [data-active-type="SWT"], [data-active-type="SST"], [data-active-type="WFD"]) .text-answer {
  margin-top: 2px !important;
  padding: 14px 16px !important;
}

html body #practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="WE"] .text-answer,
html body #practice .practice-panel.stage-practice[data-active-type="WE"] .text-answer {
  min-height: clamp(220px, 32vh, 290px) !important;
}

/* Home desktop IA pass: keep practice types separate from utility shortcuts. */
html body .home-web-grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.98fr) !important;
  grid-template-areas:
    "path overview"
    "quick overview"
    "forum forum" !important;
  gap: clamp(16px, 1.4vw, 24px) !important;
}

html body .home-web-other {
  display: none !important;
}

html body .home-web-path {
  align-self: start !important;
}

html body .home-web-task-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1vw, 16px) !important;
  margin-top: clamp(18px, 1.35vw, 24px) !important;
}

html body .home-web-task {
  min-height: clamp(78px, 5vw, 96px) !important;
  padding: clamp(14px, 1vw, 18px) !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.86), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(246, 249, 252, 0.34)),
    rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 34px -28px rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}

html body .home-web-task:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 22px 42px -28px rgba(15, 23, 42, 0.5) !important;
}

html body .home-web-quick {
  grid-area: quick !important;
  align-self: stretch !important;
}

html body .home-web-quick > div {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1vw, 16px) !important;
  margin-top: clamp(16px, 1.2vw, 22px) !important;
}

html body .home-web-quick button {
  min-height: clamp(84px, 5.2vw, 106px) !important;
  grid-template-columns: 46px minmax(0, 1fr) 18px !important;
  padding: clamp(14px, 1vw, 18px) !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.84), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(247, 250, 252, 0.28)),
    rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 38px -30px rgba(15, 23, 42, 0.48) !important;
  backdrop-filter: blur(22px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}

html body .home-web-quick button:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 24px 48px -30px rgba(15, 23, 42, 0.52) !important;
}

html body .home-web-quick [data-home-view="mp3"]::after,
html body .home-web-task.home-web-mp3-task::after,
html body .home-mobile-task.home-mobile-mp3-task::after {
  content: none !important;
  display: none !important;
}

html body .home-web-quick [data-home-view="mp3"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.86), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(217, 227, 255, 0.34), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(246, 249, 252, 0.32)),
    rgba(255, 255, 255, 0.24) !important;
}

html body .home-v2-path .home-mp3-home-button {
  display: none !important;
}

html body .home-v2-quick > div:last-child {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* MP3 library: homepage entry, categorized list, and focused glass player. */
html body .home-mp3-home-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #17181d !important;
  font-weight: 950 !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.72), transparent 40%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(244, 248, 250, 0.36)),
    rgba(255, 255, 255, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 14px 34px -26px rgba(15, 23, 42, 0.48) !important;
  backdrop-filter: blur(22px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.18) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

html body .home-mp3-home-button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 24px;
  border-radius: 999px;
  color: #fff;
  background: #050609;
}

html body .home-mp3-home-button:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 22px 44px -30px rgba(15, 23, 42, 0.58) !important;
}

html body .home-web-task.home-web-mp3-task,
html body .home-mobile-task.home-mobile-mp3-task {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(239, 245, 249, 0.32)),
    rgba(255, 255, 255, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 38px -30px rgba(15, 23, 42, 0.46) !important;
}

html body .home-web-task.home-web-mp3-task::after,
html body .home-mobile-task.home-mobile-mp3-task::after {
  content: "";
  position: absolute;
  inset: auto 14px 12px 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(17, 18, 23, 0.82), rgba(17, 18, 23, 0.12));
  opacity: 0.78;
}


/* Practice splitter drag: avoid temporary paint clipping while resizing columns. */
@media (min-width: 761px) {
  html body.is-resizing-practice #practice.practice-detail-mode .question-browser,
  html body.is-resizing-practice #practice.practice-detail-mode .answer-stage,
  html body.is-resizing-practice #practice.practice-detail-mode .feedback-panel {
    contain: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    isolation: auto !important;
  }

  html body.is-resizing-practice #practice.practice-detail-mode .question-card,
  html body.is-resizing-practice #practice.practice-detail-mode .answer-action-bar,
  html body.is-resizing-practice #practice.practice-detail-mode .discussion-section,
  html body.is-resizing-practice #practice.practice-detail-mode .feedback-idle-card,
  html body.is-resizing-practice #practice.practice-detail-mode .reading-ai-wait-card {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* Global desktop chrome: keep every page using the MP3-style navigation bar. */
@media (min-width: 761px) {
  html body:not(.view-agent) .app-shell,
  html body.view-dashboard .app-shell,
  html body.view-practice .app-shell,
  html body.view-mp3 .app-shell,
  html body.view-mock .app-shell,
  html body.view-profile .app-shell,
  html body.view-admin .app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 14px clamp(18px, 2.2vw, 34px) 28px !important;
    overflow-x: hidden !important;
  }

  html body:not(.view-agent) .sidebar,
  html body.view-dashboard .sidebar,
  html body.view-practice .sidebar,
  html body.view-mp3 .sidebar,
  html body.view-mock .sidebar,
  html body.view-profile .sidebar,
  html body.view-admin .sidebar {
    position: sticky !important;
    top: 12px !important;
    z-index: 150 !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 310px) minmax(360px, 1fr) minmax(170px, 260px) !important;
    align-items: center !important;
    gap: 16px !important;
    width: min(100%, 1880px) !important;
    max-width: min(100%, 1880px) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 70px !important;
    margin: 0 auto !important;
    padding: 10px 18px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 26px !important;
    color: #1f2229 !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 252, 0.42)),
      rgba(255, 255, 255, 0.38) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 20px 46px -34px rgba(15, 23, 42, 0.34) !important;
    backdrop-filter: blur(26px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.2) !important;
  }

  html body:not(.view-agent) .main,
  html body.view-dashboard .main,
  html body.view-practice .main,
  html body.view-mp3 .main,
  html body.view-mock .main,
  html body.view-profile .main,
  html body.view-admin .main {
    width: min(100%, 1880px) !important;
    max-width: min(100%, 1880px) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }

  html body .brand,
  html body .sidebar .brand,
  html body .sidebar a.brand,
  html body.view-dashboard .brand,
  html body.view-practice .brand,
  html body.view-mp3 .brand,
  html body.view-mock .brand,
  html body.view-profile .brand,
  html body.view-admin .brand {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 50px !important;
    padding: 0 !important;
    color: #111318 !important;
  }

  html body .brand-icon,
  html body .sidebar .brand-icon,
  html body .sidebar .brand .brand-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    flex: 0 0 46px !important;
    border-radius: 999px !important;
  }

  html body .brand-copy,
  html body .sidebar .brand-copy,
  html body .sidebar .brand .brand-copy {
    display: grid !important;
    grid-template-columns: auto minmax(132px, 170px) !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body .brand-copy strong,
  html body .sidebar .brand-copy strong,
  html body .sidebar .brand .brand-copy strong {
    color: #111318 !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body .exam-type-picker select,
  html body .sidebar .exam-type-picker select,
  html body .sidebar .brand .exam-type-picker select {
    width: 100% !important;
    max-width: 170px !important;
    min-height: 34px !important;
    padding: 0 24px 0 12px !important;
    border: 1px solid rgba(214, 219, 226, 0.7) !important;
    border-radius: 10px !important;
    color: #6f7684 !important;
    background: rgba(255, 255, 255, 0.62) !important;
    font-size: 13px !important;
    font-weight: 820 !important;
  }

  html body .nav-list,
  html body .sidebar .nav-list,
  html body.view-dashboard .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .nav-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.32) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  }

  html body .nav-link,
  html body .sidebar .nav-link,
  html body.view-dashboard .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .nav-link {
    flex: 0 1 110px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 82px !important;
    max-width: 128px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #4b515d !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body .nav-link:hover,
  html body .nav-link.active,
  html body.view-dashboard .nav-link:hover,
  html body.view-dashboard .nav-link.active,
  html body.view-practice .nav-link:hover,
  html body.view-practice .nav-link.active,
  html body.view-mp3 .nav-link:hover,
  html body.view-mp3 .nav-link.active,
  html body.view-mock .nav-link:hover,
  html body.view-mock .nav-link.active,
  html body.view-profile .nav-link:hover,
  html body.view-profile .nav-link.active,
  html body.view-admin .nav-link:hover,
  html body.view-admin .nav-link.active {
    color: #090a0d !important;
    background: rgba(255, 255, 255, 0.68) !important;
  }

  html body .nav-link.active::after {
    bottom: 5px !important;
    width: 24px !important;
    height: 3px !important;
  }

  html body .nav-link .icon {
    display: none !important;
  }

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

  html body .sidebar-user-card,
  html body .sidebar #sidebarUserButton.sidebar-user-card,
  html body .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body.view-dashboard .sidebar-user-card,
  html body.view-practice .sidebar-user-card,
  html body.view-mp3 .sidebar-user-card,
  html body.view-mock .sidebar-user-card,
  html body.view-profile .sidebar-user-card,
  html body.view-admin .sidebar-user-card {
    justify-self: end !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 32px !important;
    align-items: center !important;
    gap: 9px !important;
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #15171c !important;
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  }

  html body .sidebar-user-card img,
  html body .sidebar #sidebarUserButton.sidebar-user-card img,
  html body.view-dashboard .sidebar-user-card img,
  html body.view-practice .sidebar-user-card img,
  html body.view-mp3 .sidebar-user-card img,
  html body.view-mock .sidebar-user-card img,
  html body.view-profile .sidebar-user-card img,
  html body.view-admin .sidebar-user-card img {
    width: 38px !important;
    height: 38px !important;
  }

  html body .sidebar-user-card span,
  html body .sidebar #sidebarUserButton.sidebar-user-card span,
  html body.view-dashboard .sidebar-user-card span,
  html body.view-practice .sidebar-user-card span,
  html body.view-mp3 .sidebar-user-card span,
  html body.view-mock .sidebar-user-card span,
  html body.view-profile .sidebar-user-card span,
  html body.view-admin .sidebar-user-card span {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body .sidebar-user-card strong,
  html body .sidebar-user-card small,
  html body .sidebar #sidebarUserButton.sidebar-user-card strong,
  html body .sidebar #sidebarUserButton.sidebar-user-card small,
  html body.view-dashboard .sidebar-user-card strong,
  html body.view-dashboard .sidebar-user-card small,
  html body.view-practice .sidebar-user-card strong,
  html body.view-practice .sidebar-user-card small,
  html body.view-mp3 .sidebar-user-card strong,
  html body.view-mp3 .sidebar-user-card small,
  html body.view-mock .sidebar-user-card strong,
  html body.view-mock .sidebar-user-card small,
  html body.view-profile .sidebar-user-card strong,
  html body.view-profile .sidebar-user-card small,
  html body.view-admin .sidebar-user-card strong,
  html body.view-admin .sidebar-user-card small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .sidebar-user-card b,
  html body .sidebar #sidebarUserButton.sidebar-user-card b,
  html body.view-dashboard .sidebar-user-card b,
  html body.view-practice .sidebar-user-card b,
  html body.view-mp3 .sidebar-user-card b,
  html body.view-mock .sidebar-user-card b,
  html body.view-profile .sidebar-user-card b,
  html body.view-admin .sidebar-user-card b {
    display: grid !important;
    width: 32px !important;
    height: 32px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #5f6672 !important;
    background: rgba(255, 255, 255, 0.62) !important;
  }
}


/* Practice detail grouping: keep the action buttons inside the question glass card. */
@media (min-width: 761px) {
  html body #practice.practice-detail-mode .stage-practice .question-card.active-question,
  html body #practice .stage-practice .question-card.active-question {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.76),
      0 16px 40px -34px rgba(15, 23, 42, 0.36) !important;
  }

  html body #practice.practice-detail-mode .stage-practice .recorder,
  html body #practice .stage-practice .recorder {
    width: 100% !important;
    margin: -2px 0 0 !important;
    padding: 16px 22px 20px !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 18px 18px 30px 30px !important;
    background:
      radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.68), transparent 42%),
      radial-gradient(circle at 92% 20%, rgba(255, 246, 220, 0.16), transparent 38%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(247, 251, 252, 0.08)),
      rgba(255, 255, 255, 0.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.62),
      0 26px 54px -44px rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(26px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.16) !important;
  }

  html body #practice.practice-detail-mode .stage-practice .recorder .timer,
  html body #practice.practice-detail-mode .stage-practice .recorder .wave,
  html body #practice .stage-practice .recorder .timer,
  html body #practice .stage-practice .recorder .wave {
    display: none !important;
  }

  html body #practice.practice-detail-mode .stage-practice .recorder-actions,
  html body #practice .stage-practice .recorder-actions {
    justify-content: center !important;
    gap: clamp(14px, 1.45vw, 24px) !important;
  }

  html body #practice.practice-detail-mode .stage-practice .practice-discussion,
  html body #practice .stage-practice .practice-discussion {
    position: relative !important;
    margin-top: clamp(30px, 3vw, 46px) !important;
    border-radius: 32px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.72) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(221, 244, 255, 0.2), transparent 36%),
      radial-gradient(circle at 96% 6%, rgba(255, 244, 216, 0.22), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.45), rgba(247, 251, 252, 0.12)),
      rgba(255, 255, 255, 0.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 14px 22px -24px rgba(15, 23, 42, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 30px 70px -48px rgba(15, 23, 42, 0.52) !important;
  }
}

@media (min-width: 761px) {
  html body #practice.practice-detail-mode .stage-practice .practice-discussion::before,
  html body #practice .stage-practice .practice-discussion::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: clamp(22px, 3vw, 44px) !important;
    right: clamp(22px, 3vw, 44px) !important;
    height: 1px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92), transparent) !important;
    pointer-events: none !important;
  }
}

/* Splitter independence: left list resizing must not move the right report column. */
@media (min-width: 761px) {
  html body #practice.practice-detail-mode .practice-dashboard-layout {
    grid-template-columns:
      minmax(0, 1fr)
      14px
      minmax(300px, clamp(300px, var(--practice-feedback-width, 372px), 640px)) !important;
    gap: 0 !important;
    align-items: start !important;
  }

  html body #practice.practice-detail-mode .practice-dashboard-layout > .practice-panel.stage-practice,
  html body #practice.practice-detail-mode .practice-panel.stage-practice,
  html body #practice.practice-detail-mode .feedback-panel {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body #practice.practice-detail-mode .stage-practice .practice-workbench,
  html body #practice .stage-practice .practice-workbench,
  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .practice-workbench,
  html body.is-resizing-practice #practice .stage-practice .practice-workbench {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns:
      minmax(220px, clamp(220px, var(--practice-list-width, 220px), 360px))
      14px
      minmax(420px, 1fr) !important;
  }

  html body #practice.practice-detail-mode .stage-practice .question-browser,
  html body #practice.practice-detail-mode .stage-practice .answer-stage,
  html body #practice .stage-practice .question-browser,
  html body #practice .stage-practice .answer-stage,
  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .answer-stage,
  html body.is-resizing-practice #practice .stage-practice .answer-stage {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body #practice.practice-detail-mode .stage-practice .answer-stage,
  html body #practice .stage-practice .answer-stage {
    min-width: 420px !important;
    overflow: visible !important;
  }
}

@media (min-width: 1320px) {
  html body #practice.practice-detail-mode .stage-practice .practice-workbench,
  html body #practice .stage-practice .practice-workbench,
  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .practice-workbench,
  html body.is-resizing-practice #practice .stage-practice .practice-workbench {
    grid-template-columns:
      minmax(220px, clamp(220px, var(--practice-list-width, 220px), 360px))
      14px
      minmax(500px, 1fr) !important;
  }

  html body #practice.practice-detail-mode .stage-practice .answer-stage,
  html body #practice .stage-practice .answer-stage {
    min-width: 500px !important;
  }
}

@media (min-width: 1600px) {
  html body #practice.practice-detail-mode .stage-practice .practice-workbench,
  html body #practice .stage-practice .practice-workbench,
  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .practice-workbench,
  html body.is-resizing-practice #practice .stage-practice .practice-workbench {
    grid-template-columns:
      minmax(220px, clamp(220px, var(--practice-list-width, 220px), 360px))
      14px
      minmax(560px, 1fr) !important;
  }

  html body #practice.practice-detail-mode .stage-practice .answer-stage,
  html body #practice .stage-practice .answer-stage {
    min-width: 560px !important;
  }
}

/* Global desktop navigation: keep one selected style and one font scale on every page. */
@media (min-width: 761px) {
  html body .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list {
    display: inline-flex !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: min(46vw, 720px) !important;
    min-width: 520px !important;
    max-width: 720px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 auto !important;
    padding: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 999px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.62), transparent 46%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.24)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 18px 44px -36px rgba(15, 23, 42, 0.42) !important;
    overflow: visible !important;
    backdrop-filter: blur(24px) saturate(1.24) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.24) !important;
  }

  html body .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link {
    position: relative !important;
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 18px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    color: rgba(37, 42, 52, 0.78) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 18px !important;
    font-weight: 860 !important;
    line-height: 42px !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: translateY(0) !important;
    transition:
      background 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease,
      color 180ms ease,
      transform 180ms ease !important;
  }

  html body .sidebar .nav-link .icon {
    display: none !important;
  }

  html body .sidebar .nav-link:hover,
  html body.view-dashboard .sidebar .nav-link:hover,
  html body.view-practice .sidebar .nav-link:hover,
  html body.view-mp3 .sidebar .nav-link:hover,
  html body.view-mock .sidebar .nav-link:hover,
  html body.view-profile .sidebar .nav-link:hover,
  html body.view-admin .sidebar .nav-link:hover {
    color: #16191f !important;
    border-color: rgba(255, 255, 255, 0.68) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.24)),
      rgba(255, 255, 255, 0.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.74),
      0 12px 28px -24px rgba(15, 23, 42, 0.4) !important;
    transform: translateY(-1px) !important;
  }

  html body .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link[data-view="dashboard"],
  html body.view-practice .sidebar .nav-link[data-view="practice"],
  html body.view-mp3 .sidebar .nav-link[data-view="mp3"],
  html body.view-mock .sidebar .nav-link[data-view="mock"],
  html body.view-profile .sidebar .nav-link[data-view="profile"],
  html body.view-admin .sidebar .nav-link[data-view="admin"] {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background:
      radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.18), transparent 42%),
      linear-gradient(180deg, #202126 0%, #08090c 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -12px 22px rgba(0, 0, 0, 0.28),
      0 16px 34px -24px rgba(0, 0, 0, 0.72) !important;
    transform: translateY(0) !important;
  }

  html body .sidebar .nav-link.active::after,
  html body.view-dashboard .sidebar .nav-link.active::after,
  html body.view-practice .sidebar .nav-link.active::after,
  html body.view-mp3 .sidebar .nav-link.active::after,
  html body.view-mock .sidebar .nav-link.active::after,
  html body.view-profile .sidebar .nav-link.active::after,
  html body.view-admin .sidebar .nav-link.active::after,
  html body.view-dashboard .sidebar .nav-link[data-view="dashboard"]::after,
  html body.view-practice .sidebar .nav-link[data-view="practice"]::after,
  html body.view-mp3 .sidebar .nav-link[data-view="mp3"]::after,
  html body.view-mock .sidebar .nav-link[data-view="mock"]::after,
  html body.view-profile .sidebar .nav-link[data-view="profile"]::after,
  html body.view-admin .sidebar .nav-link[data-view="admin"]::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 7px !important;
    width: 24px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #ffd66b, #f5b400) !important;
    box-shadow: 0 3px 10px rgba(245, 180, 0, 0.38) !important;
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
    transform-origin: center !important;
    transition: transform 180ms ease, opacity 180ms ease !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  html body .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list {
    width: min(52vw, 560px) !important;
    min-width: 360px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    gap: 6px !important;
    padding: 5px !important;
  }

  html body .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 10px !important;
    font-size: 15px !important;
    line-height: 36px !important;
  }
}

/* Final top navigation shape: separate glass buttons and no MP3 item in the header. */
@media (min-width: 761px) {
  html body .sidebar .nav-link[data-view="mp3"],
  html body.view-dashboard .sidebar .nav-link[data-view="mp3"],
  html body.view-practice .sidebar .nav-link[data-view="mp3"],
  html body.view-mp3 .sidebar .nav-link[data-view="mp3"],
  html body.view-mock .sidebar .nav-link[data-view="mp3"],
  html body.view-profile .sidebar .nav-link[data-view="mp3"],
  html body.view-admin .sidebar .nav-link[data-view="mp3"],
  html body.view-dashboard .sidebar .nav-link[data-view="mp3"],
  html body.view-practice .sidebar .nav-link[data-view="mp3"],
  html body.view-mp3 .sidebar .nav-link[data-view="mp3"],
  html body.view-mock .sidebar .nav-link[data-view="mp3"],
  html body.view-profile .sidebar .nav-link[data-view="mp3"],
  html body.view-admin .sidebar .nav-link[data-view="mp3"] {
    display: none !important;
  }

  html body .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list {
    display: flex !important;
    grid-auto-flow: initial !important;
    grid-auto-columns: initial !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 440px !important;
    max-width: none !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link {
    flex: 0 0 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.24)),
      rgba(255, 255, 255, 0.28) !important;
    color: rgba(49, 54, 64, 0.88) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 14px 34px -28px rgba(15, 23, 42, 0.46) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 44px !important;
    backdrop-filter: blur(22px) saturate(1.22) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.22) !important;
  }

  html body .sidebar .nav-link:hover:not(.active),
  html body.view-dashboard .sidebar .nav-link:hover:not(.active),
  html body.view-practice .sidebar .nav-link:hover:not(.active),
  html body.view-mp3 .sidebar .nav-link:hover:not(.active),
  html body.view-mock .sidebar .nav-link:hover:not(.active),
  html body.view-profile .sidebar .nav-link:hover:not(.active),
  html body.view-admin .sidebar .nav-link:hover:not(.active),
  html body.view-dashboard .sidebar .nav-link:hover:not(.active),
  html body.view-practice .sidebar .nav-link:hover:not(.active),
  html body.view-mp3 .sidebar .nav-link:hover:not(.active),
  html body.view-mock .sidebar .nav-link:hover:not(.active),
  html body.view-profile .sidebar .nav-link:hover:not(.active),
  html body.view-admin .sidebar .nav-link:hover:not(.active) {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.36)),
      rgba(255, 255, 255, 0.34) !important;
    color: #15181f !important;
  }

  html body .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background:
      radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.18), transparent 42%),
      linear-gradient(180deg, #202126 0%, #08090c 100%) !important;
    color: #ffffff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -12px 22px rgba(0, 0, 0, 0.28),
      0 18px 34px -24px rgba(0, 0, 0, 0.72) !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  html body .sidebar .nav-list {
    gap: 12px !important;
    min-width: 330px !important;
  }

  html body .sidebar .nav-link,
  html body .sidebar .nav-link.active {
    flex-basis: 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    font-size: 17px !important;
    line-height: 42px !important;
    padding: 0 12px !important;
  }
}

/* Resizer final fix: dragging must use the same layout rules as the resting state. */
@media (min-width: 761px) {
  html body.is-resizing-practice #practice.practice-detail-mode .practice-dashboard-layout {
    grid-template-columns:
      minmax(0, 1fr)
      14px
      minmax(300px, clamp(300px, var(--practice-feedback-width, 372px), 640px)) !important;
    gap: 0 !important;
    align-items: start !important;
    overflow: visible !important;
  }

  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .practice-workbench,
  html body.is-resizing-practice #practice .stage-practice .practice-workbench {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns:
      minmax(220px, clamp(220px, var(--practice-list-width, 220px), 360px))
      14px
      minmax(420px, 1fr) !important;
    gap: 0 !important;
    align-items: start !important;
    overflow: visible !important;
  }

  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .question-browser,
  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .answer-stage,
  html body.is-resizing-practice #practice.practice-detail-mode .feedback-panel,
  html body.is-resizing-practice #practice .stage-practice .question-browser,
  html body.is-resizing-practice #practice .stage-practice .answer-stage {
    min-width: 0 !important;
    max-width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    contain: layout paint !important;
  }

  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .answer-stage,
  html body.is-resizing-practice #practice .stage-practice .answer-stage {
    min-width: 420px !important;
  }

  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .question-card,
  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .recorder,
  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .practice-discussion,
  html body.is-resizing-practice #practice .stage-practice .question-card,
  html body.is-resizing-practice #practice .stage-practice .recorder,
  html body.is-resizing-practice #practice .stage-practice .practice-discussion {
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
}

@media (min-width: 1320px) {
  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .practice-workbench,
  html body.is-resizing-practice #practice .stage-practice .practice-workbench {
    grid-template-columns:
      minmax(220px, clamp(220px, var(--practice-list-width, 220px), 360px))
      14px
      minmax(500px, 1fr) !important;
  }

  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .answer-stage,
  html body.is-resizing-practice #practice .stage-practice .answer-stage {
    min-width: 500px !important;
  }
}

@media (min-width: 1600px) {
  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .practice-workbench,
  html body.is-resizing-practice #practice .stage-practice .practice-workbench {
    grid-template-columns:
      minmax(220px, clamp(220px, var(--practice-list-width, 220px), 360px))
      14px
      minmax(560px, 1fr) !important;
  }

  html body.is-resizing-practice #practice.practice-detail-mode .stage-practice .answer-stage,
  html body.is-resizing-practice #practice .stage-practice .answer-stage {
    min-width: 560px !important;
  }
}

/* Transparent macOS-style glass for question-type cards. */
html body #practice:not(.practice-detail-mode) .figma-type-card,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.56) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.72), transparent 36%),
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.34), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.13)),
    rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2),
    0 26px 54px -42px rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(28px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.18) !important;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease !important;
}

html body #practice:not(.practice-detail-mode) .figma-type-card::before,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 48%) !important;
  opacity: 0.84 !important;
}

html body #practice:not(.practice-detail-mode) .figma-type-card::after,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
}

html body #practice:not(.practice-detail-mode) .figma-type-card:hover,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card:hover,
html body #practice:not(.practice-detail-mode) .figma-type-card:focus-visible,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card:focus-visible {
  border-color: rgba(255, 255, 255, 0.74) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.84), transparent 38%),
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.42), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.16)),
    rgba(255, 255, 255, 0.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(255, 255, 255, 0.24),
    0 30px 62px -42px rgba(15, 23, 42, 0.48) !important;
  transform: translateY(-2px) !important;
}

html body #practice:not(.practice-detail-mode) .figma-type-dot,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-dot,
html body #practice:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-dot,
html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-dot {
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  background:
    radial-gradient(circle at 28% 12%, rgba(255, 255, 255, 0.76), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.14)),
    color-mix(in srgb, var(--type-color, #4b5563) 8%, rgba(255, 255, 255, 0.14)) !important;
  color: var(--type-color, #111827) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18),
    0 16px 34px -28px rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(22px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}

html body #practice:not(.practice-detail-mode) .figma-type-card:hover .figma-type-dot,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card:hover .figma-type-dot {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background:
    radial-gradient(circle at 28% 12%, rgba(255, 255, 255, 0.84), transparent 50%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16)),
    color-mix(in srgb, var(--type-color, #4b5563) 10%, rgba(255, 255, 255, 0.16)) !important;
}

html body #practice:not(.practice-detail-mode) .mobile-type-meta,
html body #practice.active-view:not(.practice-detail-mode) .mobile-type-meta,
html body #practice:not(.practice-detail-mode) .figma-type-card .mobile-type-meta,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card .mobile-type-meta,
html body #practice:not(.practice-detail-mode) .figma-type-card i,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card i {
  border: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.18)),
    rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 12px 28px -24px rgba(15, 23, 42, 0.34) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

/* Practice question card: fill the inner white surface to the glass edge. */
html body #practice.practice-detail-mode .stage-practice .question-card.active-question,
html body #practice .stage-practice .question-card.active-question {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.86), transparent 34%),
    radial-gradient(circle at 96% 6%, rgba(255, 255, 255, 0.62), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.58)),
    rgba(255, 255, 255, 0.68) !important;
  background-clip: border-box !important;
  outline: 1px solid rgba(255, 255, 255, 0.68) !important;
  outline-offset: -1px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.24),
    0 24px 52px -42px rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(26px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.14) !important;
}

html body #practice.practice-detail-mode .stage-practice .question-card.active-question::before,
html body #practice.practice-detail-mode .stage-practice .question-card.active-question::after,
html body #practice .stage-practice .question-card.active-question::before,
html body #practice .stage-practice .question-card.active-question::after {
  display: none !important;
}

/* Practice split scrolling: each desktop column owns its own wheel scroll. */
@media (min-width: 761px) and (max-width: 980px) {
  html body.view-practice {
    overflow: hidden !important;
  }

  html body.view-practice .main,
  html body.view-practice #practice.active-view,
  html body.view-practice #practice.practice-detail-mode {
    min-height: 0 !important;
    height: calc(100dvh - 132px) !important;
    overflow: hidden !important;
  }

  html body.view-practice #practice.practice-detail-mode .practice-dashboard-layout {
    min-height: 0 !important;
    height: 100% !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html body.view-practice #practice.practice-detail-mode .stage-practice .practice-workbench {
    min-height: 0 !important;
    height: 100% !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  html body.view-practice #practice.practice-detail-mode .stage-practice .question-browser {
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  html body.view-practice #practice.practice-detail-mode .stage-practice .question-list,
  html body.view-practice #practice.practice-detail-mode .stage-practice .virtual-question-list {
    max-height: none !important;
    height: calc(100% - 210px) !important;
    min-height: 220px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.view-practice #practice.practice-detail-mode .stage-practice .answer-stage {
    min-height: 0 !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent !important;
  }

  html body.view-practice #practice.practice-detail-mode .feedback-panel {
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent !important;
  }

  html body.view-practice:not(.practice-answer-detail-active) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body.view-practice:not(.practice-answer-detail-active) .main,
  html body.view-practice:not(.practice-answer-detail-active) #practice.active-view:not(.practice-detail-mode) {
    min-height: calc(100dvh - 132px) !important;
    height: auto !important;
    overflow: visible !important;
  }

  html body.view-practice #practice.practice-detail-mode .stage-practice .answer-stage::-webkit-scrollbar,
  html body.view-practice #practice.practice-detail-mode .feedback-panel::-webkit-scrollbar {
    width: 6px !important;
  }

  html body.view-practice #practice.practice-detail-mode .stage-practice .answer-stage::-webkit-scrollbar-thumb,
  html body.view-practice #practice.practice-detail-mode .feedback-panel::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.16) !important;
  }

  html body.view-practice #practice.practice-detail-mode .stage-practice .answer-stage::-webkit-scrollbar-track,
  html body.view-practice #practice.practice-detail-mode .feedback-panel::-webkit-scrollbar-track {
    background: transparent !important;
  }

  html body.view-practice .dictionary-popover.show {
    pointer-events: auto !important;
  }

  html body.view-practice .dictionary-popover.show [data-dict-speak],
  html body.view-practice .dictionary-popover.show button,
  html body.view-practice .dictionary-popover.show a {
    pointer-events: auto !important;
  }
}

/* Practice detail final scroll repair: keep cards in normal order and make each column scroll by itself. */
@media (min-width: 761px) and (max-width: 980px) {
  html body.view-practice:has(#practice.practice-detail-mode) {
    overflow: hidden !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) .main,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.active-view,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode {
    min-height: 0 !important;
    height: calc(100dvh - 132px) !important;
    overflow: hidden !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .practice-dashboard-layout {
    min-height: 0 !important;
    height: 100% !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .practice-panel.stage-practice {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .practice-workbench {
    min-height: 0 !important;
    height: 100% !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .question-browser {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .question-list,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .virtual-question-list {
    height: calc(100% - 210px) !important;
    min-height: 220px !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .answer-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    grid-template-rows: none !important;
    align-content: stretch !important;
    gap: clamp(14px, 1.3vw, 22px) !important;
    min-width: 420px !important;
    min-height: 0 !important;
    height: 100% !important;
    padding-bottom: clamp(16px, 1.6vw, 24px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(15, 23, 42, 0.16) transparent !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .practice-navigator,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .question-card,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .answer-workspace,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .recorder,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .mobile-report-summary,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .practice-discussion {
    flex: 0 0 auto !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .question-card.active-question {
    min-height: auto !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .recorder {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    margin: 0 !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .practice-discussion {
    position: relative !important;
    z-index: 1 !important;
    margin-top: clamp(18px, 2vw, 28px) !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel {
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(15, 23, 42, 0.16) transparent !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .answer-stage::-webkit-scrollbar,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel::-webkit-scrollbar {
    width: 6px !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .answer-stage::-webkit-scrollbar-thumb,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.14) !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .answer-stage::-webkit-scrollbar-track,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel::-webkit-scrollbar-track {
    background: transparent !important;
  }
}

/* Final desktop navigation lock: keep the top bar identical while switching sections. */
@media (min-width: 761px) {
  html body:not(.view-agent) .app-shell,
  html body.view-dashboard .app-shell,
  html body.view-practice .app-shell,
  html body.view-mp3 .app-shell,
  html body.view-mock .app-shell,
  html body.view-profile .app-shell,
  html body.view-admin .app-shell,
  html body.view-dashboard .app-shell,
  html body.view-mp3 .app-shell {
    grid-template-rows: 64px minmax(0, 1fr) !important;
    row-gap: 12px !important;
    padding-top: 8px !important;
  }

  html body:not(.view-agent) .sidebar,
  html body.view-dashboard .sidebar,
  html body.view-practice .sidebar,
  html body.view-mp3 .sidebar,
  html body.view-mock .sidebar,
  html body.view-profile .sidebar,
  html body.view-admin .sidebar,
  html body.view-dashboard .sidebar,
  html body.view-mp3 .sidebar {
    display: grid !important;
    grid-template-columns: minmax(136px, auto) minmax(320px, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 6px 12px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  html body .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(6px, 0.7vw, 12px) !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .sidebar .nav-link,
  html body .sidebar .nav-link.active,
  html body .sidebar .nav-link:hover,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link.active {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 clamp(78px, 6.8vw, 112px) !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(78px, 6.8vw, 112px) !important;
    min-width: clamp(78px, 6.8vw, 112px) !important;
    max-width: clamp(78px, 6.8vw, 112px) !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 16px !important;
    font-weight: 860 !important;
    line-height: 36px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease !important;
  }

  html body .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link {
    background: transparent !important;
    color: #3f424a !important;
  }

  html body .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active {
    background:
      linear-gradient(180deg, rgba(28, 30, 35, 0.98), rgba(5, 6, 8, 0.95)),
      #090a0c !important;
    color: #ffffff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 14px 28px -20px rgba(0, 0, 0, 0.64) !important;
  }

  html body .sidebar .nav-link:hover:not(.active),
  html body.view-dashboard .sidebar .nav-link:hover:not(.active),
  html body.view-practice .sidebar .nav-link:hover:not(.active),
  html body.view-mp3 .sidebar .nav-link:hover:not(.active),
  html body.view-mock .sidebar .nav-link:hover:not(.active),
  html body.view-profile .sidebar .nav-link:hover:not(.active),
  html body.view-admin .sidebar .nav-link:hover:not(.active),
  html body.view-dashboard .sidebar .nav-link:hover:not(.active),
  html body.view-mp3 .sidebar .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5) !important;
    color: #17191f !important;
  }

  html body .sidebar .nav-link.active::after,
  html body.view-dashboard .sidebar .nav-link.active::after,
  html body.view-practice .sidebar .nav-link.active::after,
  html body.view-mp3 .sidebar .nav-link.active::after,
  html body.view-mock .sidebar .nav-link.active::after,
  html body.view-profile .sidebar .nav-link.active::after,
  html body.view-admin .sidebar .nav-link.active::after,
  html body.view-dashboard .sidebar .nav-link.active::after,
  html body.view-mp3 .sidebar .nav-link.active::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 5px !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #f5b400 !important;
    transform: translateX(-50%) !important;
  }

  html body .sidebar .nav-link .icon,
  html body.view-dashboard .sidebar .nav-link .icon,
  html body.view-practice .sidebar .nav-link .icon,
  html body.view-mp3 .sidebar .nav-link .icon,
  html body.view-mock .sidebar .nav-link .icon,
  html body.view-profile .sidebar .nav-link .icon,
  html body.view-admin .sidebar .nav-link .icon {
    display: none !important;
  }
}

/* Absolute final top-nav parity: every desktop section uses the question-bank scale. */
@media (min-width: 761px) {
  html body:not(.view-agent) .app-shell,
  html body.view-dashboard .app-shell,
  html body.view-practice .app-shell,
  html body.view-mp3 .app-shell,
  html body.view-mock .app-shell,
  html body.view-profile .app-shell,
  html body.view-admin .app-shell,
  html body.view-dashboard .app-shell,
  html body.view-practice .app-shell,
  html body.view-mp3 .app-shell,
  html body.view-mock .app-shell,
  html body.view-profile .app-shell,
  html body.view-admin .app-shell {
    grid-template-rows: 82px minmax(0, 1fr) !important;
    row-gap: 12px !important;
    padding-top: 10px !important;
  }

  html body:not(.view-agent) .sidebar,
  html body.view-dashboard .sidebar,
  html body.view-practice .sidebar,
  html body.view-mp3 .sidebar,
  html body.view-mock .sidebar,
  html body.view-profile .sidebar,
  html body.view-admin .sidebar,
  html body.view-dashboard .sidebar,
  html body.view-practice .sidebar,
  html body.view-mp3 .sidebar,
  html body.view-mock .sidebar,
  html body.view-profile .sidebar,
  html body.view-admin .sidebar {
    display: grid !important;
    grid-template-columns: minmax(440px, 0.42fr) minmax(560px, 0.58fr) auto !important;
    align-items: center !important;
    column-gap: 18px !important;
    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding: 8px 18px !important;
    border-radius: 24px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 252, 0.42)),
      rgba(255, 255, 255, 0.38) !important;
    overflow: hidden !important;
  }

  html body .sidebar .brand,
  html body.view-dashboard .sidebar .brand,
  html body.view-practice .sidebar .brand,
  html body.view-mp3 .sidebar .brand,
  html body.view-mock .sidebar .brand,
  html body.view-profile .sidebar .brand,
  html body.view-admin .sidebar .brand,
  html body.view-dashboard .sidebar .brand,
  html body.view-practice .sidebar .brand,
  html body.view-mp3 .sidebar .brand,
  html body.view-mock .sidebar .brand,
  html body.view-profile .sidebar .brand,
  html body.view-admin .sidebar .brand {
    display: grid !important;
    grid-template-columns: 54px minmax(360px, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 430px !important;
    height: 54px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body .sidebar .brand-icon,
  html body.view-dashboard .sidebar .brand-icon,
  html body.view-practice .sidebar .brand-icon,
  html body.view-mp3 .sidebar .brand-icon,
  html body.view-mock .sidebar .brand-icon,
  html body.view-profile .sidebar .brand-icon,
  html body.view-admin .sidebar .brand-icon {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }

  html body .sidebar .brand-copy,
  html body.view-dashboard .sidebar .brand-copy,
  html body.view-practice .sidebar .brand-copy,
  html body.view-mp3 .sidebar .brand-copy,
  html body.view-mock .sidebar .brand-copy,
  html body.view-profile .sidebar .brand-copy,
  html body.view-admin .sidebar .brand-copy,
  html body.view-dashboard .sidebar .brand-copy,
  html body.view-practice .sidebar .brand-copy,
  html body.view-mp3 .sidebar .brand-copy,
  html body.view-mock .sidebar .brand-copy,
  html body.view-profile .sidebar .brand-copy,
  html body.view-admin .sidebar .brand-copy {
    display: grid !important;
    grid-template-columns: max-content 210px !important;
    align-items: center !important;
    gap: 22px !important;
    height: 54px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body .sidebar .brand-copy strong,
  html body.view-dashboard .sidebar .brand-copy strong,
  html body.view-practice .sidebar .brand-copy strong,
  html body.view-mp3 .sidebar .brand-copy strong,
  html body.view-mock .sidebar .brand-copy strong,
  html body.view-profile .sidebar .brand-copy strong,
  html body.view-admin .sidebar .brand-copy strong,
  html body.view-dashboard .sidebar .brand-copy strong,
  html body.view-practice .sidebar .brand-copy strong,
  html body.view-mp3 .sidebar .brand-copy strong,
  html body.view-mock .sidebar .brand-copy strong,
  html body.view-profile .sidebar .brand-copy strong,
  html body.view-admin .sidebar .brand-copy strong {
    display: block !important;
    color: #111318 !important;
    font-size: 28px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body .sidebar .exam-type-picker,
  html body.view-dashboard .sidebar .exam-type-picker,
  html body.view-practice .sidebar .exam-type-picker,
  html body.view-mp3 .sidebar .exam-type-picker,
  html body.view-mock .sidebar .exam-type-picker,
  html body.view-profile .sidebar .exam-type-picker,
  html body.view-admin .sidebar .exam-type-picker {
    display: block !important;
    width: 210px !important;
    height: 40px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    overflow: hidden !important;
  }

  html body .sidebar .exam-type-picker select,
  html body.view-dashboard .sidebar .exam-type-picker select,
  html body.view-practice .sidebar .exam-type-picker select,
  html body.view-mp3 .sidebar .exam-type-picker select,
  html body.view-mock .sidebar .exam-type-picker select,
  html body.view-profile .sidebar .exam-type-picker select,
  html body.view-admin .sidebar .exam-type-picker select,
  html body.view-dashboard .sidebar .exam-type-picker select,
  html body.view-practice .sidebar .exam-type-picker select,
  html body.view-mp3 .sidebar .exam-type-picker select,
  html body.view-mock .sidebar .exam-type-picker select,
  html body.view-profile .sidebar .exam-type-picker select,
  html body.view-admin .sidebar .exam-type-picker select {
    width: 210px !important;
    max-width: 210px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 34px 0 14px !important;
    font-size: 16px !important;
    font-weight: 820 !important;
    line-height: 40px !important;
  }

  html body .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(118px, 1fr) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 560px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  html body .sidebar .nav-link,
  html body .sidebar .nav-link.active,
  html body .sidebar .nav-link:hover,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link.active {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 118px !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 42px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active {
    background:
      radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.18), transparent 42%),
      linear-gradient(180deg, #202126 0%, #08090c 100%) !important;
    color: #ffffff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -12px 22px rgba(0, 0, 0, 0.28),
      0 16px 34px -24px rgba(0, 0, 0, 0.72) !important;
  }

  html body .sidebar .nav-link.active::after,
  html body.view-dashboard .sidebar .nav-link.active::after,
  html body.view-practice .sidebar .nav-link.active::after,
  html body.view-mp3 .sidebar .nav-link.active::after,
  html body.view-mock .sidebar .nav-link.active::after,
  html body.view-profile .sidebar .nav-link.active::after,
  html body.view-admin .sidebar .nav-link.active::after,
  html body.view-dashboard .sidebar .nav-link.active::after,
  html body.view-practice .sidebar .nav-link.active::after,
  html body.view-mp3 .sidebar .nav-link.active::after,
  html body.view-mock .sidebar .nav-link.active::after {
    bottom: 6px !important;
    width: 24px !important;
    height: 3px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  html body:not(.view-agent) .sidebar,
  html body.view-dashboard .sidebar,
  html body.view-practice .sidebar,
  html body.view-mp3 .sidebar,
  html body.view-mock .sidebar,
  html body.view-profile .sidebar,
  html body.view-admin .sidebar {
    grid-template-columns: minmax(320px, 0.42fr) minmax(420px, 0.58fr) auto !important;
  }

  html body .sidebar .brand {
    grid-template-columns: 46px minmax(260px, 1fr) !important;
    min-width: 320px !important;
  }

  html body .sidebar .brand-icon {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  html body .sidebar .brand-copy {
    grid-template-columns: max-content 170px !important;
    gap: 14px !important;
  }

  html body .sidebar .brand-copy strong {
    font-size: 24px !important;
  }

  html body .sidebar .exam-type-picker,
  html body .sidebar .exam-type-picker select {
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
    font-size: 14px !important;
  }

  html body .sidebar .nav-list {
    min-width: 420px !important;
    grid-auto-columns: minmax(92px, 1fr) !important;
  }

  html body .sidebar .nav-link,
  html body .sidebar .nav-link.active {
    min-width: 92px !important;
    font-size: 17px !important;
    padding: 0 12px !important;
  }
}

/* Last-write top navigation: individual glass buttons, no MP3 item in the header. */
@media (min-width: 761px) {
  html body .sidebar .nav-link[data-view="mp3"],
  html body.view-dashboard .sidebar .nav-link[data-view="mp3"],
  html body.view-practice .sidebar .nav-link[data-view="mp3"],
  html body.view-mp3 .sidebar .nav-link[data-view="mp3"],
  html body.view-mock .sidebar .nav-link[data-view="mp3"],
  html body.view-profile .sidebar .nav-link[data-view="mp3"],
  html body.view-admin .sidebar .nav-link[data-view="mp3"],
  html body.view-dashboard .sidebar .nav-link[data-view="mp3"],
  html body.view-practice .sidebar .nav-link[data-view="mp3"],
  html body.view-mp3 .sidebar .nav-link[data-view="mp3"],
  html body.view-mock .sidebar .nav-link[data-view="mp3"],
  html body.view-profile .sidebar .nav-link[data-view="mp3"],
  html body.view-admin .sidebar .nav-link[data-view="mp3"] {
    display: none !important;
  }

  html body .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list {
    display: flex !important;
    grid-auto-flow: initial !important;
    grid-auto-columns: initial !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 440px !important;
    max-width: none !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link {
    flex: 0 0 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.25)),
      rgba(255, 255, 255, 0.28) !important;
    color: rgba(49, 54, 64, 0.88) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 14px 34px -28px rgba(15, 23, 42, 0.5) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 44px !important;
    transform: none !important;
    backdrop-filter: blur(22px) saturate(1.22) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.22) !important;
  }

  html body .sidebar .nav-link:hover {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.34)),
      rgba(255, 255, 255, 0.34) !important;
    color: rgba(32, 36, 44, 0.94) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 16px 36px -26px rgba(15, 23, 42, 0.52) !important;
  }

  html body .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background:
      radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.18), transparent 42%),
      linear-gradient(180deg, #202126 0%, #08090c 100%) !important;
    color: #ffffff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -12px 22px rgba(0, 0, 0, 0.28),
      0 16px 34px -24px rgba(0, 0, 0, 0.72) !important;
  }

  html body .sidebar .nav-link.active::after,
  html body.view-dashboard .sidebar .nav-link.active::after,
  html body.view-practice .sidebar .nav-link.active::after,
  html body.view-mp3 .sidebar .nav-link.active::after,
  html body.view-mock .sidebar .nav-link.active::after,
  html body.view-profile .sidebar .nav-link.active::after,
  html body.view-admin .sidebar .nav-link.active::after,
  html body.view-dashboard .sidebar .nav-link.active::after,
  html body.view-practice .sidebar .nav-link.active::after,
  html body.view-mp3 .sidebar .nav-link.active::after,
  html body.view-mock .sidebar .nav-link.active::after,
  html body.view-profile .sidebar .nav-link.active::after,
  html body.view-admin .sidebar .nav-link.active::after {
    bottom: 6px !important;
    width: 24px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #f8d34a, #f6b91f) !important;
  }
}

/* Final active-state size lock for the separated glass nav. */
@media (min-width: 761px) {
  html body .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active {
    flex: 0 0 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    font-size: 20px !important;
    line-height: 44px !important;
  }
}

/* Final practice detail bottom finish: keep desktop columns from ending as a hard crop. */
@media (min-width: 761px) and (max-width: 980px) {
  html body.view-practice:has(#practice.practice-detail-mode) {
    --practice-detail-bottom-air: clamp(72px, 8vh, 108px);
    --practice-detail-bottom-fade: clamp(58px, 7vh, 92px);
  }

  html body.view-practice:has(#practice.practice-detail-mode) .main {
    padding-bottom: var(--practice-detail-bottom-air) !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .answer-stage,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel {
    padding-bottom: var(--practice-detail-bottom-air) !important;
    scroll-padding-bottom: var(--practice-detail-bottom-air) !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .question-list,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .virtual-question-list {
    padding-bottom: var(--practice-detail-bottom-air) !important;
    scroll-padding-bottom: var(--practice-detail-bottom-air) !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .recorder {
    margin-top: clamp(22px, 3vh, 42px) !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .answer-stage,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .question-list,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .virtual-question-list {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--practice-detail-bottom-fade)), transparent 100%) !important;
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--practice-detail-bottom-fade)), transparent 100%) !important;
  }
}

/* Practice detail breathing scroll: page scrolls, side panels stay in view. */
@media (min-width: 761px) and (max-width: 980px) {
  html body.view-practice:has(#practice.practice-detail-mode) {
    --practice-detail-sticky-top: clamp(96px, 9vh, 124px);
    --practice-detail-bottom-air: clamp(110px, 12vh, 160px);
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) .app-shell {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) .main,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.active-view,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode {
    height: max-content !important;
    min-height: calc(100dvh - 96px) !important;
    overflow: visible !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) .main {
    padding-bottom: var(--practice-detail-bottom-air) !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .practice-dashboard-layout,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .practice-panel.stage-practice,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .practice-workbench {
    height: auto !important;
    min-height: calc(100dvh - 112px) !important;
    align-items: flex-start !important;
    overflow: visible !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .question-browser,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel {
    position: sticky !important;
    top: var(--practice-detail-sticky-top) !important;
    align-self: flex-start !important;
    z-index: 3 !important;
    max-height: calc(100dvh - var(--practice-detail-sticky-top) - 24px) !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel.has-report,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel.speech-result-ready,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel.speech-report-mode,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel.reading-report-mode,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel.swt-report-mode,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel.we-report-mode {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: clamp(72px, 10vh, 132px) !important;
    scroll-padding-bottom: clamp(72px, 10vh, 132px) !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .question-browser {
    height: calc(100dvh - var(--practice-detail-sticky-top) - 24px) !important;
    min-height: clamp(620px, 72vh, 780px) !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .question-list,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .virtual-question-list {
    height: calc(100% - 250px) !important;
    min-height: 320px !important;
    overflow-y: auto !important;
    padding-bottom: clamp(52px, 7vh, 92px) !important;
    scroll-padding-bottom: clamp(52px, 7vh, 92px) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 54px), transparent 100%) !important;
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 54px), transparent 100%) !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .answer-stage {
    height: auto !important;
    min-height: calc(100dvh - 112px) !important;
    overflow: visible !important;
    padding-bottom: var(--practice-detail-bottom-air) !important;
    scroll-padding-bottom: var(--practice-detail-bottom-air) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel {
    height: auto !important;
    min-height: min(820px, calc(100dvh - var(--practice-detail-sticky-top) - 24px)) !important;
    padding-bottom: clamp(56px, 8vh, 104px) !important;
    scroll-padding-bottom: clamp(56px, 8vh, 104px) !important;
  }
}

/* Final desktop nav alignment: keep the main navigation flush with the top on every page. */
@media (min-width: 761px) {
  html body:not(.view-agent) .app-shell,
  html body.view-dashboard .app-shell,
  html body.view-practice .app-shell,
  html body.view-mp3 .app-shell,
  html body.view-mock .app-shell,
  html body.view-profile .app-shell,
  html body.view-admin .app-shell {
    padding-top: 0 !important;
  }

  html body:not(.view-agent) .sidebar,
  html body.view-dashboard .sidebar,
  html body.view-practice .sidebar,
  html body.view-mp3 .sidebar,
  html body.view-mock .sidebar,
  html body.view-profile .sidebar,
  html body.view-admin .sidebar {
    top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Final lock: detail pages use document scroll with sticky side panels. */
@media (min-width: 761px) and (max-width: 980px) {
  html body.view-practice:has(#practice.practice-detail-mode) {
    overflow-y: auto !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) .app-shell,
  html body.view-practice:has(#practice.practice-detail-mode) .main,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .practice-dashboard-layout,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .practice-panel.stage-practice,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .practice-workbench {
    height: auto !important;
    overflow: visible !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .question-browser,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel {
    position: sticky !important;
    top: var(--practice-detail-sticky-top, clamp(96px, 9vh, 124px)) !important;
  }
}

/* Final nav material: clearer individual glass buttons, lighter selected state, no underline. */
@media (min-width: 761px) {
  html body .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link {
    border: 1px solid rgba(190, 201, 216, 0.46) !important;
    color: rgba(35, 40, 49, 0.86) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.28)),
      rgba(255, 255, 255, 0.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -1px 0 rgba(15, 23, 42, 0.08),
      0 1px 0 rgba(255, 255, 255, 0.6),
      0 14px 34px -24px rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(24px) saturate(1.28) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.28) !important;
  }

  html body .sidebar .nav-link:hover:not(.active),
  html body.view-dashboard .sidebar .nav-link:hover:not(.active),
  html body.view-practice .sidebar .nav-link:hover:not(.active),
  html body.view-mp3 .sidebar .nav-link:hover:not(.active),
  html body.view-mock .sidebar .nav-link:hover:not(.active),
  html body.view-profile .sidebar .nav-link:hover:not(.active),
  html body.view-admin .sidebar .nav-link:hover:not(.active) {
    color: rgba(22, 27, 35, 0.94) !important;
    border-color: rgba(153, 168, 188, 0.5) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.34)),
      rgba(255, 255, 255, 0.3) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(15, 23, 42, 0.09),
      0 18px 38px -28px rgba(15, 23, 42, 0.5) !important;
  }

  html body .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active {
    color: rgba(14, 18, 25, 0.96) !important;
    border-color: rgba(132, 145, 163, 0.56) !important;
    background:
      linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.36) 46%, rgba(18, 24, 32, 0.18)),
      linear-gradient(180deg, rgba(31, 36, 44, 0.14), rgba(31, 36, 44, 0.06)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(12, 18, 28, 0.12),
      0 1px 0 rgba(255, 255, 255, 0.54),
      0 18px 44px -26px rgba(15, 23, 42, 0.56) !important;
  }

  html body .sidebar .nav-link.active::after,
  html body.view-dashboard .sidebar .nav-link.active::after,
  html body.view-practice .sidebar .nav-link.active::after,
  html body.view-mp3 .sidebar .nav-link.active::after,
  html body.view-mock .sidebar .nav-link.active::after,
  html body.view-profile .sidebar .nav-link.active::after,
  html body.view-admin .sidebar .nav-link.active::after {
    display: none !important;
    opacity: 0 !important;
  }

  html body .sidebar .sidebar-user-card,
  html body .sidebar #sidebarUserButton.sidebar-user-card,
  html body .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body.view-dashboard .sidebar .sidebar-user-card,
  html body.view-dashboard .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body.view-practice .sidebar .sidebar-user-card,
  html body.view-practice .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body.view-mp3 .sidebar .sidebar-user-card,
  html body.view-mp3 .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body.view-mock .sidebar .sidebar-user-card,
  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body.view-profile .sidebar .sidebar-user-card,
  html body.view-profile .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body.view-admin .sidebar .sidebar-user-card,
  html body.view-admin .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in {
    border: 1px solid rgba(190, 201, 216, 0.44) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.3)),
      rgba(255, 255, 255, 0.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -1px 0 rgba(15, 23, 42, 0.07),
      0 16px 36px -26px rgba(15, 23, 42, 0.46) !important;
    backdrop-filter: blur(24px) saturate(1.26) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.26) !important;
  }
}

/* Final practice detail top rhythm: align left and center cards with the feedback panel. */
@media (min-width: 761px) and (max-width: 980px) {
  html body.view-practice:has(#practice.practice-detail-mode) {
    --practice-detail-panel-top-air: clamp(22px, 2.8vh, 34px);
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .question-browser,
  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .answer-stage {
    margin-top: var(--practice-detail-panel-top-air) !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .question-browser {
    height: calc(100dvh - var(--practice-detail-sticky-top, clamp(96px, 9vh, 124px)) - var(--practice-detail-panel-top-air) - 24px) !important;
    min-height: clamp(590px, 68vh, 748px) !important;
  }
}

/* Absolute mobile homepage lock: outrank older #homeDashboard mobile rules. */
@media (max-width: 760px) {
  html body #homeDashboard .home-mobile-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 62px !important;
    grid-template-areas:
      "copy ring"
      "action action" !important;
    column-gap: 12px !important;
    row-gap: 16px !important;
    align-items: start !important;
    min-height: 0 !important;
    padding: 22px 18px 18px !important;
    overflow: hidden !important;
    border-radius: 24px !important;
  }

  html body #homeDashboard .home-mobile-hero > div:first-child {
    grid-area: copy !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  html body #homeDashboard .home-mobile-hero h2 {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(23px, 6.4vw, 27px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  html body #homeDashboard .home-mobile-hero p {
    width: auto !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    font-size: 13.5px !important;
    line-height: 1.38 !important;
  }

  html body #homeDashboard .home-mobile-primary {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    grid-area: action !important;
    justify-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    z-index: 1 !important;
    border: 1px solid rgba(132, 145, 163, 0.54) !important;
    color: rgba(14, 18, 25, 0.96) !important;
    background:
      linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.36) 46%, rgba(18, 24, 32, 0.16)),
      linear-gradient(180deg, rgba(31, 36, 44, 0.12), rgba(31, 36, 44, 0.05)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(12, 18, 28, 0.1),
      0 12px 28px -20px rgba(15, 23, 42, 0.5) !important;
  }

  html body #homeDashboard .home-mobile-ring {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    grid-area: ring !important;
    justify-self: end !important;
    align-self: center !important;
    width: 62px !important;
    height: 62px !important;
  }
}

/* Final mobile sync: use the same light glass language and prevent homepage overlap. */
@media (max-width: 760px) {
  html body:not(.view-agent):not(.view-mistakes) {
    background: #f5f5f7 !important;
    padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
  }

  html body .mobile-tabbar {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    min-height: 58px !important;
    padding: 7px !important;
    border: 1px solid rgba(190, 201, 216, 0.46) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.38)),
      rgba(255, 255, 255, 0.32) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -1px 0 rgba(15, 23, 42, 0.06),
      0 18px 44px -28px rgba(15, 23, 42, 0.52) !important;
    backdrop-filter: blur(24px) saturate(1.28) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.28) !important;
  }

  html body .mobile-tab {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 6px !important;
    border: 1px solid rgba(190, 201, 216, 0.32) !important;
    border-radius: 18px !important;
    color: rgba(35, 40, 49, 0.76) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.18)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(15, 23, 42, 0.04) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body .mobile-tab.active {
    color: rgba(14, 18, 25, 0.96) !important;
    border-color: rgba(132, 145, 163, 0.54) !important;
    background:
      linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.36) 46%, rgba(18, 24, 32, 0.16)),
      linear-gradient(180deg, rgba(31, 36, 44, 0.12), rgba(31, 36, 44, 0.05)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(12, 18, 28, 0.1),
      0 12px 28px -20px rgba(15, 23, 42, 0.5) !important;
  }

  html body .home-v2 {
    --mobile-card-radius: 24px;
    width: 100% !important;
    padding: 14px 16px calc(112px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    background: #f5f5f7 !important;
  }

  html body .home-v2-mobile-trial {
    width: 100% !important;
    max-width: min(430px, 100%) !important;
    gap: 14px !important;
    margin: 0 auto !important;
  }

  html body .home-mobile-hero,
  html body .home-mobile-section,
  html body .home-mobile-metric {
    border: 1px solid rgba(190, 201, 216, 0.38) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.42)),
      rgba(255, 255, 255, 0.36) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 18px 40px -30px rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(22px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.18) !important;
  }

  html body .home-mobile-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    grid-template-areas:
      "copy ring"
      "action action" !important;
    column-gap: 12px !important;
    row-gap: 16px !important;
    align-items: start !important;
    min-height: 0 !important;
    padding: 22px 18px 18px !important;
    overflow: hidden !important;
    border-radius: var(--mobile-card-radius) !important;
  }

  html body .home-mobile-hero > div:first-child {
    grid-area: copy !important;
    min-width: 0 !important;
  }

  html body .home-mobile-hero h2 {
    max-width: 100% !important;
    font-size: clamp(24px, 7vw, 29px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  html body .home-mobile-hero p {
    max-width: 100% !important;
    margin-top: 8px !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
  }

  html body .home-mobile-primary {
    position: static !important;
    grid-area: action !important;
    justify-self: start !important;
    width: auto !important;
    max-width: 100% !important;
    height: 44px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(132, 145, 163, 0.54) !important;
    border-radius: 999px !important;
    color: rgba(14, 18, 25, 0.96) !important;
    background:
      linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.36) 46%, rgba(18, 24, 32, 0.16)),
      linear-gradient(180deg, rgba(31, 36, 44, 0.12), rgba(31, 36, 44, 0.05)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(12, 18, 28, 0.1),
      0 12px 28px -20px rgba(15, 23, 42, 0.5) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body .home-mobile-ring {
    position: static !important;
    grid-area: ring !important;
    justify-self: end !important;
    align-self: center !important;
    width: 64px !important;
    height: 64px !important;
  }

  html body .home-mobile-ring strong {
    font-size: 18px !important;
  }

  html body .home-mobile-metrics {
    gap: 12px !important;
  }

  html body .home-mobile-metric {
    min-height: 104px !important;
    height: auto !important;
    padding: 16px 14px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  html body .home-mobile-metric span {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  html body .home-mobile-metric strong {
    margin-top: 12px !important;
    font-size: clamp(28px, 8vw, 34px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body .home-mobile-section {
    padding: 18px !important;
    border-radius: var(--mobile-card-radius) !important;
  }

  html body .home-mobile-section h3,
  html body .home-mobile-section-head h3 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  html body .home-mobile-path,
  html body .home-mobile-quick {
    min-height: 0 !important;
  }

  html body .home-mobile-task-list,
  html body .home-mobile-quick > div {
    gap: 12px !important;
    margin-top: 18px !important;
  }
}

/* Mobile homepage classic layout restore: keep the old composition, only fix overlap and glass. */
@media (max-width: 760px) {
  html body #homeDashboard .home-mobile-hero,
  html body .home-mobile-hero {
    position: relative !important;
    display: block !important;
    min-height: 268px !important;
    padding: 38px clamp(18px, 5vw, 24px) 106px !important;
    overflow: hidden !important;
    border-radius: 24px !important;
  }

  html body #homeDashboard .home-mobile-hero > div:first-child,
  html body .home-mobile-hero > div:first-child {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body #homeDashboard .home-mobile-hero h2,
  html body .home-mobile-hero h2 {
    width: auto !important;
    max-width: min(100%, 300px) !important;
    margin: 0 !important;
    font-size: clamp(28px, 8.2vw, 34px) !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    overflow-wrap: normal !important;
  }

  html body #homeDashboard .home-mobile-hero p,
  html body .home-mobile-hero p {
    max-width: min(100%, 280px) !important;
    margin: 8px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
  }

  html body #homeDashboard .home-mobile-primary,
  html body .home-mobile-primary {
    position: absolute !important;
    left: clamp(18px, 5vw, 24px) !important;
    right: auto !important;
    bottom: 22px !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 132px) !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 20px !important;
    z-index: 2 !important;
    white-space: nowrap !important;
  }

  html body #homeDashboard .home-mobile-ring,
  html body .home-mobile-ring {
    position: absolute !important;
    right: clamp(22px, 7vw, 36px) !important;
    bottom: 18px !important;
    width: 68px !important;
    height: 68px !important;
  }

  html body #homeDashboard .home-mobile-ring strong,
  html body .home-mobile-ring strong {
    font-size: 19px !important;
  }
}

/* True frosted-glass pass: soft translucent material, no metallic edges. */
@media (min-width: 761px) {
  html body .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link {
    border: 1px solid rgba(255, 255, 255, 0.66) !important;
    color: rgba(28, 32, 39, 0.78) !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 16px 38px -34px rgba(15, 23, 42, 0.34) !important;
    backdrop-filter: blur(30px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.2) !important;
  }

  html body .sidebar .nav-link:hover:not(.active),
  html body.view-dashboard .sidebar .nav-link:hover:not(.active),
  html body.view-practice .sidebar .nav-link:hover:not(.active),
  html body.view-mp3 .sidebar .nav-link:hover:not(.active),
  html body.view-mock .sidebar .nav-link:hover:not(.active),
  html body.view-profile .sidebar .nav-link:hover:not(.active),
  html body.view-admin .sidebar .nav-link:hover:not(.active),
  html body .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active {
    border-color: rgba(255, 255, 255, 0.82) !important;
    color: rgba(18, 22, 29, 0.94) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 18px 42px -34px rgba(15, 23, 42, 0.38) !important;
  }

  html body .sidebar .nav-link.active::after {
    display: none !important;
    opacity: 0 !important;
  }

  html body .sidebar .sidebar-user-card,
  html body .sidebar #sidebarUserButton.sidebar-user-card,
  html body .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body.view-dashboard .sidebar .sidebar-user-card,
  html body.view-dashboard .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body.view-practice .sidebar .sidebar-user-card,
  html body.view-practice .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body.view-mp3 .sidebar .sidebar-user-card,
  html body.view-mp3 .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body.view-mock .sidebar .sidebar-user-card,
  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body.view-profile .sidebar .sidebar-user-card,
  html body.view-profile .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body.view-admin .sidebar .sidebar-user-card,
  html body.view-admin .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in {
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    background: rgba(255, 255, 255, 0.36) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      0 16px 38px -34px rgba(15, 23, 42, 0.34) !important;
    backdrop-filter: blur(30px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.2) !important;
  }
}

@media (max-width: 760px) {
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-hero,
  html body #homeDashboard .home-mobile-hero,
  html body .home-mobile-hero {
    position: relative !important;
    display: block !important;
    min-height: 268px !important;
    height: auto !important;
    padding: 42px clamp(18px, 5vw, 24px) 108px !important;
    overflow: hidden !important;
    border-radius: 26px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-hero,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-section,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric,
  html body #homeDashboard .home-mobile-hero,
  html body #homeDashboard .home-mobile-section,
  html body #homeDashboard .home-mobile-metric,
  html body .home-mobile-hero,
  html body .home-mobile-section,
  html body .home-mobile-metric {
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.48) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.84),
      0 20px 52px -42px rgba(15, 23, 42, 0.36) !important;
    backdrop-filter: blur(30px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.18) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-hero h2,
  html body #homeDashboard .home-mobile-hero h2,
  html body .home-mobile-hero h2 {
    max-width: min(100%, 310px) !important;
    margin: 0 !important;
    font-size: clamp(29px, 8.8vw, 36px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-hero p,
  html body #homeDashboard .home-mobile-hero p,
  html body .home-mobile-hero p {
    max-width: min(100%, 285px) !important;
    margin: 8px 0 0 !important;
    color: rgba(79, 84, 94, 0.78) !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-primary,
  html body #homeDashboard .home-mobile-primary,
  html body .home-mobile-primary {
    position: absolute !important;
    left: clamp(18px, 5vw, 24px) !important;
    right: auto !important;
    bottom: 22px !important;
    width: auto !important;
    max-width: calc(100% - 132px) !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    color: rgba(18, 22, 29, 0.94) !important;
    background: rgba(255, 255, 255, 0.55) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      0 16px 36px -30px rgba(15, 23, 42, 0.38) !important;
    backdrop-filter: blur(28px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.2) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-ring,
  html body #homeDashboard .home-mobile-ring,
  html body .home-mobile-ring {
    position: absolute !important;
    right: clamp(22px, 7vw, 36px) !important;
    bottom: 18px !important;
    width: 68px !important;
    height: 68px !important;
  }

  html body .mobile-tabbar {
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.48) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 22px 54px -34px rgba(15, 23, 42, 0.44) !important;
    backdrop-filter: blur(30px) saturate(1.22) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.22) !important;
  }

  html body .mobile-tab {
    border: 1px solid rgba(255, 255, 255, 0.56) !important;
    color: rgba(42, 47, 56, 0.76) !important;
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
    backdrop-filter: blur(24px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
  }

  html body .mobile-tab.active {
    border-color: rgba(255, 255, 255, 0.82) !important;
    color: rgba(18, 22, 29, 0.94) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 14px 32px -28px rgba(15, 23, 42, 0.36) !important;
  }
}

/* Mobile practice report page state: report becomes a full page, not a half overlay. */
@media (max-width: 760px) {
  html body.practice-mobile-report-page {
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  html body.practice-mobile-report-page .mobile-tabbar,
  html body.practice-mobile-report-page #practice.practice-detail-mode .stage-practice,
  html body.practice-mobile-report-page #practice.practice-detail-mode .feedback-resizer {
    display: none !important;
  }

  html body.practice-mobile-report-page .app-shell,
  html body.practice-mobile-report-page .main,
  html body.practice-mobile-report-page #practice.practice-detail-mode,
  html body.practice-mobile-report-page #practice.practice-detail-mode .practice-dashboard-layout {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.practice-mobile-report-page #practice.practice-detail-mode {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1800 !important;
    background: #f5f5f7 !important;
  }

  html body.practice-mobile-report-page #practice.practice-detail-mode .feedback-panel,
  html body.practice-mobile-report-page #practice.practice-detail-mode .feedback-panel.mobile-report-open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1810 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: max(18px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important;
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.practice-mobile-report-page #practice.practice-detail-mode .mobile-feedback-close {
    display: grid !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    margin-left: auto !important;
  }

  html body.practice-mobile-report-page #practice.practice-detail-mode .mobile-report-summary {
    display: none !important;
  }
}

/* Final home metric scale: keep the four dashboard numbers compact and airy. */
html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metrics,
html body #homeDashboard .home-mobile-metrics,
html body .home-mobile-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric,
html body #homeDashboard .home-mobile-metric,
html body .home-mobile-metric {
  min-height: 94px !important;
  height: 94px !important;
  padding: 14px 16px 13px !important;
  align-content: start !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric span,
html body #homeDashboard .home-mobile-metric span,
html body .home-mobile-metric span {
  color: rgba(69, 74, 84, 0.72) !important;
  font-size: 13px !important;
  font-weight: 780 !important;
  line-height: 1.22 !important;
}

html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric strong,
html body #homeDashboard .home-mobile-metric strong,
html body .home-mobile-metric strong {
  margin-top: 10px !important;
  color: rgba(20, 22, 27, 0.98) !important;
  font-size: clamp(28px, 7.2vw, 32px) !important;
  font-weight: 880 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric i,
html body #homeDashboard .home-mobile-metric i,
html body .home-mobile-metric i {
  width: 42px !important;
  height: 3px !important;
  margin-top: auto !important;
}

/* Final mobile metric polish: softer, embedded dashboard numbers. */
html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric,
html body #homeDashboard .home-mobile-metric,
html body .home-mobile-metric {
  height: 90px !important;
  min-height: 90px !important;
  padding: 14px 16px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.66), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.2)),
    rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(15, 23, 42, 0.035),
    0 18px 42px -38px rgba(15, 23, 42, 0.36) !important;
}

html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric span,
html body #homeDashboard .home-mobile-metric span,
html body .home-mobile-metric span {
  color: rgba(76, 82, 93, 0.62) !important;
  font-size: 12.5px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
}

html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric strong,
html body #homeDashboard .home-mobile-metric strong,
html body .home-mobile-metric strong {
  margin-top: 8px !important;
  color: rgba(22, 25, 31, 0.92) !important;
  font-size: clamp(24px, 6.4vw, 28px) !important;
  font-weight: 760 !important;
  line-height: 0.98 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.52),
    0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric i,
html body #homeDashboard .home-mobile-metric i,
html body .home-mobile-metric i {
  width: 34px !important;
  height: 2px !important;
  margin-top: 8px !important;
  border-radius: 999px !important;
  opacity: 0.86 !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 86%, #ffffff), var(--accent)) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.54),
    0 4px 10px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* Mobile answer typography: make RA reading text fit phone reading rhythm. */
@media (max-width: 760px) {
  html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="RA"] .question-card.active-question,
  html body.view-practice #practice.practice-detail-mode[data-active-question-type="RA"] .stage-practice .question-card.active-question {
    padding: 96px 18px 20px !important;
  }

  html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="RA"] .answer-hint-bar.ra-mode-inline,
  html body.view-practice #practice.practice-detail-mode[data-active-question-type="RA"] .stage-practice .answer-hint-bar.ra-mode-inline {
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 0 22px !important;
    padding: 4px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.76),
      0 10px 24px -22px rgba(15, 23, 42, 0.32) !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
  }

  html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="RA"] .ra-mode-control,
  html body.view-practice #practice.practice-detail-mode[data-active-question-type="RA"] .stage-practice .ra-mode-control {
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }

  html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="RA"] .ra-mode-control span,
  html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="RA"] .ra-mode-control small,
  html body.view-practice #practice.practice-detail-mode[data-active-question-type="RA"] .stage-practice .ra-mode-control span,
  html body.view-practice #practice.practice-detail-mode[data-active-question-type="RA"] .stage-practice .ra-mode-control small {
    display: none !important;
  }

  html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="RA"] .ra-mode-control button,
  html body.view-practice #practice.practice-detail-mode[data-active-question-type="RA"] .stage-practice .ra-mode-control button {
    min-height: 36px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="RA"] #questionText,
  html body.view-practice #practice.practice-detail-mode[data-active-question-type="RA"] .stage-practice #questionText {
    margin: 0 0 24px !important;
    color: rgba(7, 10, 16, 0.98) !important;
    font-size: clamp(22px, 6vw, 24px) !important;
    font-weight: 760 !important;
    line-height: 1.52 !important;
    letter-spacing: 0 !important;
    overflow-wrap: break-word !important;
  }

  html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice[data-active-type="RA"] #questionText .ra-text-line,
  html body.view-practice #practice.practice-detail-mode[data-active-question-type="RA"] .stage-practice #questionText .ra-text-line {
    font: inherit !important;
    line-height: inherit !important;
  }
}

/* Mobile answer detail: expose a clear return path without covering question content. */
@media (max-width: 760px) {
  html body.view-practice #practice.practice-detail-mode .stage-practice .practice-navigator {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 2px !important;
    background: transparent !important;
    position: relative !important;
    z-index: 5 !important;
  }

  html body.view-practice #practice.practice-detail-mode .stage-practice .practice-navigator .mobile-question-list-back[hidden] {
    display: none !important;
  }

  html body.view-practice #practice.practice-detail-mode .stage-practice .practice-navigator .mobile-question-list-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 92px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 14px 0 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 999px !important;
    color: rgba(23, 27, 34, 0.88) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      0 14px 34px -28px rgba(15, 23, 42, 0.42) !important;
    backdrop-filter: blur(22px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html body.view-practice #practice.practice-detail-mode .stage-practice .practice-navigator .mobile-question-list-back::before {
    content: "<" !important;
    margin-right: 6px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body.view-practice #practice.practice-detail-mode .stage-practice .practice-navigator [data-nav-step],
  html body.view-practice #practice.practice-detail-mode .stage-practice .practice-navigator .current-question-pill {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 38px !important;
    white-space: nowrap !important;
  }
}

/* Final mobile home navigation and task cards. */
@media (max-width: 980px) {
  html body .mobile-tabbar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body #practice:not(.practice-detail-mode) .mobile-question-flow.subject-selected .mobile-type-section-head,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .mobile-type-section-head {
    display: none !important;
  }

  html body #practice:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-skill,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-skill,
  html body #practice:not(.practice-detail-mode) .mobile-question-flow.subject-selected .mobile-type-section-head > div,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .mobile-type-section-head > div {
    display: none !important;
  }

  html body #practice:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-grid-head,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-grid-head {
    align-items: center !important;
  }

  html body #practice:not(.practice-detail-mode) .mobile-question-flow.subject-selected .mobile-subject-reset-button,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .mobile-subject-reset-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(24, 24, 27, 0.1) !important;
    border-radius: 999px !important;
    color: rgba(24, 24, 27, 0.94) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 14px 32px -28px rgba(15, 23, 42, 0.32) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    backdrop-filter: blur(20px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
  }

  html body #practice:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-card,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-card {
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    grid-template-rows: 1fr 1fr !important;
    align-items: center !important;
    min-height: 92px !important;
    gap: 4px 8px !important;
  }

  html body #practice:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-dot,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-dot {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  html body #practice:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-card strong,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-card strong {
    grid-column: 2 !important;
    grid-row: 1 / -1 !important;
    align-self: center !important;
    color: rgba(18, 22, 29, 0.98) !important;
    font-size: 17px !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body #practice:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-card small,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-card small,
  html body #practice:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-card i,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-card i {
    display: none !important;
  }

  html body #practice:not(.practice-detail-mode) .mobile-question-flow.subject-selected .mobile-type-meta,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .mobile-type-meta {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: end !important;
    justify-self: end !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-size: 15px !important;
    font-weight: 850 !important;
  }

  html body #practice:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-card b,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-card b {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: start !important;
    justify-self: end !important;
    padding: 0 8px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-path,
  html body #homeDashboard .home-mobile-path,
  html body .home-mobile-path {
    min-height: 0 !important;
    padding: 18px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task-list,
  html body #homeDashboard .home-mobile-task-list,
  html body .home-mobile-task-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 76px) !important;
    grid-auto-rows: 76px !important;
    grid-auto-flow: row !important;
    gap: 8px 12px !important;
    margin-top: 16px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task,
  html body #homeDashboard .home-mobile-task,
  html body .home-mobile-task {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto 1fr !important;
    align-content: space-between !important;
    align-items: start !important;
    height: 76px !important;
    min-height: 76px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.66) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.24)),
      rgba(255, 255, 255, 0.3) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 16px 38px -32px rgba(15, 23, 42, 0.42) !important;
    backdrop-filter: blur(24px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
    text-align: left !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task.active,
  html body #homeDashboard .home-mobile-task.active,
  html body .home-mobile-task.active {
    border-color: rgba(255, 255, 255, 0.78) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.34)),
      rgba(255, 255, 255, 0.36) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task > span,
  html body #homeDashboard .home-mobile-task > span,
  html body .home-mobile-task > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    width: 32px !important;
    height: 32px !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 13px !important;
    color: rgba(30, 37, 48, 0.72) !important;
    background: rgba(255, 255, 255, 0.44) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task b,
  html body #homeDashboard .home-mobile-task b,
  html body .home-mobile-task b {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: end !important;
    min-width: 0 !important;
    color: rgba(18, 22, 29, 0.96) !important;
    font-size: 16px !important;
    font-weight: 880 !important;
    line-height: 1.15 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task em,
  html body #homeDashboard .home-mobile-task em,
  html body .home-mobile-task em {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    width: 24px !important;
    height: 24px !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: rgba(0, 122, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.36) !important;
    font-style: normal !important;
  }
}

/* Final mobile home subject grid: four standalone frosted blocks, no section title shell. */
@media (max-width: 980px) {
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-path,
  html body #homeDashboard .home-mobile-path,
  html body .home-mobile-path {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-path .home-mobile-section-head,
  html body #homeDashboard .home-mobile-path .home-mobile-section-head,
  html body .home-mobile-path .home-mobile-section-head {
    display: none !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task-list,
  html body #homeDashboard .home-mobile-task-list,
  html body .home-mobile-task-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 90px) !important;
    grid-auto-rows: 90px !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task,
  html body #homeDashboard .home-mobile-task,
  html body .home-mobile-task {
    height: 90px !important;
    min-height: 90px !important;
    padding: 14px 16px 13px !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.66), transparent 46%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.2)),
      rgba(255, 255, 255, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035),
      0 18px 42px -38px rgba(15, 23, 42, 0.36) !important;
    backdrop-filter: blur(24px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task.active,
  html body #homeDashboard .home-mobile-task.active,
  html body .home-mobile-task.active {
    border-color: rgba(255, 255, 255, 0.7) !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.7), transparent 46%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.23)),
      rgba(255, 255, 255, 0.24) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task > span,
  html body #homeDashboard .home-mobile-task > span,
  html body .home-mobile-task > span {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: rgba(78, 84, 95, 0.74) !important;
    background: transparent !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task b,
  html body #homeDashboard .home-mobile-task b,
  html body .home-mobile-task b {
    color: rgba(22, 25, 31, 0.92) !important;
    font-size: clamp(21px, 5.8vw, 24px) !important;
    font-weight: 780 !important;
    line-height: 1 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.52),
      0 8px 18px rgba(15, 23, 42, 0.08) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task em,
  html body #homeDashboard .home-mobile-task em,
  html body .home-mobile-task em {
    width: 28px !important;
    height: 28px !important;
    color: rgba(0, 122, 255, 0.88) !important;
    background: transparent !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick,
  html body #homeDashboard .home-mobile-quick,
  html body .home-mobile-quick {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick > h3,
  html body #homeDashboard .home-mobile-quick > h3,
  html body .home-mobile-quick > h3 {
    display: none !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick > div,
  html body #homeDashboard .home-mobile-quick > div,
  html body .home-mobile-quick > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 90px) !important;
    grid-auto-rows: 90px !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button,
  html body #homeDashboard .home-mobile-quick button,
  html body .home-mobile-quick button {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto 1fr !important;
    align-content: space-between !important;
    align-items: start !important;
    width: 100% !important;
    height: 90px !important;
    min-height: 90px !important;
    padding: 14px 16px 13px !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    border-radius: 22px !important;
    color: rgba(22, 25, 31, 0.92) !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.66), transparent 46%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.2)),
      rgba(255, 255, 255, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035),
      0 18px 42px -38px rgba(15, 23, 42, 0.36) !important;
    backdrop-filter: blur(24px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
    text-align: left !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button span,
  html body #homeDashboard .home-mobile-quick button span,
  html body .home-mobile-quick button span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: rgba(78, 84, 95, 0.74) !important;
    background: transparent !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button strong,
  html body #homeDashboard .home-mobile-quick button strong,
  html body .home-mobile-quick button strong {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: end !important;
    min-width: 0 !important;
    color: rgba(22, 25, 31, 0.92) !important;
    font-size: clamp(19px, 5.2vw, 22px) !important;
    font-weight: 780 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.52),
      0 8px 18px rgba(15, 23, 42, 0.08) !important;
  }
}

/* Final mobile home card crop guard: keep standalone glass cards fully rounded. */
@media (max-width: 980px) {
  html body #dashboard.active-view .home-v2-mobile-trial,
  html body #homeDashboard .home-v2-mobile-trial,
  html body .home-v2-mobile-trial {
    width: 100% !important;
    max-width: min(430px, calc(100vw - 32px)) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-path,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick,
  html body #homeDashboard .home-mobile-path,
  html body #homeDashboard .home-mobile-quick,
  html body .home-mobile-path,
  html body .home-mobile-quick {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task-list,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick > div,
  html body #homeDashboard .home-mobile-task-list,
  html body #homeDashboard .home-mobile-quick > div,
  html body .home-mobile-task-list,
  html body .home-mobile-quick > div {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button,
  html body #homeDashboard .home-mobile-task,
  html body #homeDashboard .home-mobile-quick button,
  html body .home-mobile-task,
  html body .home-mobile-quick button {
    max-width: 100% !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background-clip: padding-box !important;
    clip-path: inset(0 round 22px) !important;
  }
}

/* Final desktop home ambient glass: give white cards a soft colored environment. */
@media (min-width: 761px) {
  html body.view-dashboard {
    background:
      linear-gradient(128deg, rgba(224, 246, 240, 0.74) 0%, rgba(224, 246, 240, 0) 38%),
      linear-gradient(236deg, rgba(255, 241, 198, 0.58) 0%, rgba(255, 241, 198, 0) 44%),
      linear-gradient(180deg, #f8fafb 0%, #eef5f3 46%, #f7f2e8 100%) !important;
    background-attachment: fixed !important;
  }

  html body.view-dashboard .app-shell {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)),
      linear-gradient(180deg, rgba(246, 249, 250, 0.34), rgba(239, 247, 244, 0.18)) !important;
  }

  html body.view-dashboard .main,
  html body.view-dashboard #dashboard,
  html body.view-dashboard #dashboard.active-view,
  html body.view-dashboard #dashboard .home-v2,
  html body.view-dashboard #dashboard .home-v2-desktop-trial {
    background: transparent !important;
    background-image: none !important;
  }

  html body.view-dashboard #dashboard .home-web-hero,
  html body.view-dashboard #dashboard .home-web-card,
  html body.view-dashboard #dashboard .home-web-metric,
  html body.view-dashboard #dashboard .home-web-goal {
    border-color: rgba(255, 255, 255, 0.58) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.24)),
      rgba(255, 255, 255, 0.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035),
      0 22px 54px -42px rgba(15, 23, 42, 0.34) !important;
    backdrop-filter: blur(28px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.18) !important;
  }

  html body.view-dashboard #dashboard .home-web-goal {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.22)),
      rgba(249, 255, 248, 0.28) !important;
  }
}

/* True final desktop glass pass: keep this at EOF so older nav overrides cannot win. */
@media (min-width: 981px) {
  html body:not(.view-agent) .sidebar,
  html body.view-dashboard .sidebar,
  html body.view-practice .sidebar,
  html body.view-mp3 .sidebar,
  html body.view-mock .sidebar,
  html body.view-profile .sidebar,
  html body.view-admin .sidebar {
    border: 1px solid rgba(255, 255, 255, 0.52) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(247, 249, 252, 0.32)),
      rgba(255, 255, 255, 0.26) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(15, 23, 42, 0.04),
      0 18px 42px -36px rgba(15, 23, 42, 0.44) !important;
    backdrop-filter: blur(30px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.18) !important;
  }

  html body .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 54px !important;
    padding: 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.12)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.58),
      inset 0 -1px 1px rgba(15, 23, 42, 0.045) !important;
    backdrop-filter: blur(22px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
  }

  html body .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link {
    flex: 0 1 102px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 78px !important;
    max-width: 116px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: rgba(38, 43, 52, 0.72) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body .sidebar .nav-link:hover,
  html body.view-dashboard .sidebar .nav-link:hover,
  html body.view-practice .sidebar .nav-link:hover,
  html body.view-mp3 .sidebar .nav-link:hover,
  html body.view-mock .sidebar .nav-link:hover,
  html body.view-profile .sidebar .nav-link:hover,
  html body.view-admin .sidebar .nav-link:hover {
    color: rgba(20, 23, 29, 0.92) !important;
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
  }

  html body .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active {
    color: rgba(8, 10, 14, 0.94) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
      rgba(255, 255, 255, 0.48) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -10px 20px rgba(15, 23, 42, 0.035),
      0 8px 18px -16px rgba(15, 23, 42, 0.46) !important;
    font-size: 15px !important;
    font-weight: 820 !important;
  }

  html body .sidebar .nav-link.active::after {
    bottom: 4px !important;
    width: 18px !important;
    height: 2px !important;
    background: rgba(246, 193, 59, 0.82) !important;
    box-shadow: 0 0 10px rgba(246, 193, 59, 0.32) !important;
  }

  html body .brand-copy strong,
  html body .sidebar .brand-copy strong,
  html body .sidebar .brand .brand-copy strong {
    color: rgba(17, 19, 24, 0.94) !important;
    font-size: 23px !important;
    font-weight: 880 !important;
  }

  html body .exam-type-picker select,
  html body .sidebar .exam-type-picker select,
  html body .sidebar .brand .exam-type-picker select,
  html body .sidebar-user-card,
  html body .sidebar #sidebarUserButton.sidebar-user-card {
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035) !important;
  }

  html body.view-dashboard #dashboard .home-web-hero,
  html body.view-dashboard #dashboard .home-web-card,
  html body.view-dashboard #dashboard .home-web-metric {
    border: 1px solid rgba(255, 255, 255, 0.54) !important;
    background:
      radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.58), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(250, 252, 255, 0.28)),
      rgba(255, 255, 255, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.74),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035),
      0 24px 56px -44px rgba(15, 23, 42, 0.46) !important;
    backdrop-filter: blur(28px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.16) !important;
  }

  html body.view-dashboard #dashboard .home-web-hero {
    min-height: 264px !important;
    padding: 24px 28px !important;
  }

  html body.view-dashboard #dashboard .home-web-hero-copy h2 {
    max-width: 600px !important;
    color: rgba(17, 20, 28, 0.95) !important;
    font-size: clamp(30px, 2.25vw, 42px) !important;
    font-weight: 820 !important;
    line-height: 1.12 !important;
  }

  html body.view-dashboard #dashboard .home-web-primary {
    height: 38px !important;
    padding: 0 17px !important;
    border-color: rgba(12, 14, 18, 0.92) !important;
    background: linear-gradient(180deg, #1d2027, #07080b) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 12px 24px -20px rgba(15, 23, 42, 0.66) !important;
    font-size: 13px !important;
    font-weight: 760 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal {
    padding: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)),
      rgba(255, 255, 255, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
  }

  html body.view-dashboard #dashboard .home-web-goal > span {
    color: rgba(17, 20, 28, 0.9) !important;
    font-size: 14px !important;
    font-weight: 780 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main {
    margin-top: 22px !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main strong {
    font-size: 44px !important;
    font-weight: 820 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main em,
  html body.view-dashboard #dashboard .home-web-goal p {
    color: rgba(60, 64, 74, 0.68) !important;
    font-weight: 700 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main i {
    width: 70px !important;
    height: 70px !important;
    background:
      radial-gradient(circle at center, rgba(255, 255, 255, 0.78) 0 48%, transparent 49%),
      conic-gradient(#12b886 var(--goal-progress, 0deg), rgba(60, 60, 67, 0.1) 0) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.62),
      0 12px 24px -20px rgba(15, 23, 42, 0.35) !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main i b {
    font-size: 16px !important;
    font-weight: 780 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-stats {
    display: none !important;
  }

  html body.view-dashboard #dashboard .home-web-metric span,
  html body.view-dashboard #dashboard .home-web-card p,
  html body.view-dashboard #dashboard .home-web-head p {
    color: rgba(60, 64, 74, 0.66) !important;
  }

  html body.view-dashboard #dashboard .home-web-metric strong,
  html body.view-dashboard #dashboard .home-web-head h3,
  html body.view-dashboard #dashboard .home-web-card h3 {
    color: rgba(17, 20, 28, 0.94) !important;
    font-weight: 800 !important;
  }
}
/* Practice bank desktop typography: lighter system hierarchy. */
@media (min-width: 981px) {
  html body #practice:not(.practice-detail-mode) .practice-side-card h3,
  html body #practice.active-view:not(.practice-detail-mode) .practice-side-card h3 {
    color: rgba(35, 40, 50, 0.78) !important;
    font-size: clamp(22px, 1.42vw, 28px) !important;
    font-weight: 740 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-category-list button strong,
  html body #practice.active-view:not(.practice-detail-mode) .practice-category-list button strong {
    color: rgba(24, 28, 36, 0.86) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-category-list button.active strong,
  html body #practice.active-view:not(.practice-detail-mode) .practice-category-list button.active strong {
    color: rgba(255, 255, 255, 0.94) !important;
    font-weight: 740 !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-category-list button em,
  html body #practice.active-view:not(.practice-detail-mode) .practice-category-list button em {
    font-weight: 700 !important;
  }

  html body #practice:not(.practice-detail-mode) .figma-type-card strong,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card strong {
    color: rgba(17, 20, 28, 0.92) !important;
    font-size: clamp(25px, 1.55vw, 32px) !important;
    font-weight: 730 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  html body #practice:not(.practice-detail-mode) .figma-type-card small,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card small {
    color: rgba(70, 76, 88, 0.72) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.38 !important;
    letter-spacing: 0 !important;
  }

  html body #practice:not(.practice-detail-mode) .figma-type-card b,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card b {
    font-size: 15px !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
  }

  html body #practice:not(.practice-detail-mode) .figma-type-card .mobile-type-meta,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card .mobile-type-meta {
    color: rgba(65, 72, 86, 0.76) !important;
    font-weight: 700 !important;
  }
}

/* Final transparent desktop glass: make homepage cards feel thicker and more frosted. */
@media (min-width: 981px) {
  html body.view-dashboard {
    background:
      radial-gradient(circle at 8% 10%, rgba(174, 232, 224, 0.68), rgba(174, 232, 224, 0) 34%),
      radial-gradient(circle at 88% 4%, rgba(255, 230, 158, 0.62), rgba(255, 230, 158, 0) 36%),
      linear-gradient(180deg, #edf7f5 0%, #dcefed 50%, #f4ead8 100%) !important;
    background-attachment: fixed !important;
  }

  html body.view-dashboard .main,
  html body.view-dashboard #dashboard,
  html body.view-dashboard #dashboard.active-view,
  html body.view-dashboard #dashboard .home-v2,
  html body.view-dashboard #dashboard .home-v2-desktop-trial {
    background: transparent !important;
    background-image: none !important;
  }

  html body.view-dashboard #dashboard .home-web-hero,
  html body.view-dashboard #dashboard .home-web-card,
  html body.view-dashboard #dashboard .home-web-metric,
  html body.view-dashboard #dashboard .home-web-goal {
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    background:
      radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.46), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.18)),
      rgba(255, 255, 255, 0.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.84),
      inset 0 -1px 0 rgba(15, 23, 42, 0.06),
      0 28px 64px -48px rgba(15, 23, 42, 0.46) !important;
    backdrop-filter: blur(58px) saturate(1.42) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(58px) saturate(1.42) brightness(1.04) !important;
  }

  html body.view-dashboard #dashboard .home-web-hero {
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.42), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16)),
      rgba(255, 255, 255, 0.22) !important;
  }

  html body.view-dashboard #dashboard .home-web-goal {
    background:
      radial-gradient(circle at 80% 16%, rgba(255, 255, 255, 0.42), transparent 40%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.16)),
      rgba(235, 255, 246, 0.24) !important;
  }
}
/* Practice bank hero title: match the lighter glass typography. */
@media (min-width: 981px) {
  html body #practice:not(.practice-detail-mode) .practice-hero h2,
  html body #practice.active-view:not(.practice-detail-mode) .practice-hero h2 {
    color: rgba(17, 20, 28, 0.9) !important;
    font-size: clamp(30px, 2.05vw, 38px) !important;
    font-weight: 760 !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-hero p,
  html body #practice.active-view:not(.practice-detail-mode) .practice-hero p {
    color: rgba(60, 64, 74, 0.66) !important;
    font-weight: 620 !important;
  }
}

/* Mobile home rounded glass layer: paint glass inside the card so no square backing can show. */
@media (max-width: 980px) {
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button,
  html body #homeDashboard .home-mobile-task,
  html body #homeDashboard .home-mobile-quick button,
  html body .home-mobile-task,
  html body .home-mobile-quick button {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    contain: paint !important;
    transform: translateZ(0) !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    clip-path: inset(0 round 24px) !important;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task::before,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button::before,
  html body #homeDashboard .home-mobile-task::before,
  html body #homeDashboard .home-mobile-quick button::before,
  html body .home-mobile-task::before,
  html body .home-mobile-quick button::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.64), transparent 46%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.18)),
      rgba(255, 255, 255, 0.2) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035),
      0 18px 42px -38px rgba(15, 23, 42, 0.36) !important;
    backdrop-filter: blur(24px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
    pointer-events: none !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task::after,
  html body #homeDashboard .home-mobile-task::after,
  html body .home-mobile-task::after {
    content: none !important;
    display: none !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task > *,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button > *,
  html body #homeDashboard .home-mobile-task > *,
  html body #homeDashboard .home-mobile-quick button > *,
  html body .home-mobile-task > *,
  html body .home-mobile-quick button > * {
    position: relative !important;
    z-index: 1 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task.active,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task.home-mobile-mp3-task,
  html body #homeDashboard .home-mobile-task.active,
  html body #homeDashboard .home-mobile-task.home-mobile-mp3-task,
  html body .home-mobile-task.active,
  html body .home-mobile-task.home-mobile-mp3-task {
    border: 0 !important;
    border-radius: 24px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    clip-path: inset(0 round 24px) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task.active::before,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task.home-mobile-mp3-task::before,
  html body #homeDashboard .home-mobile-task.active::before,
  html body #homeDashboard .home-mobile-task.home-mobile-mp3-task::before,
  html body .home-mobile-task.active::before,
  html body .home-mobile-task.home-mobile-mp3-task::before {
    border-radius: inherit !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.64), transparent 46%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.18)),
      rgba(255, 255, 255, 0.2) !important;
  }
}
/* Practice bank ultra-light pass: reduce headline weight another step. */
@media (min-width: 981px) {
  html body #practice:not(.practice-detail-mode) .practice-hero h2,
  html body #practice.active-view:not(.practice-detail-mode) .practice-hero h2 {
    color: rgba(22, 26, 34, 0.74) !important;
    font-size: clamp(27px, 1.78vw, 34px) !important;
    font-weight: 590 !important;
    line-height: 1.18 !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-plan-card strong,
  html body #practice.active-view:not(.practice-detail-mode) .practice-plan-card strong {
    color: rgba(18, 22, 30, 0.86) !important;
    font-size: clamp(25px, 1.62vw, 32px) !important;
    font-weight: 620 !important;
    line-height: 1.16 !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-side-card h3,
  html body #practice.active-view:not(.practice-detail-mode) .practice-side-card h3 {
    color: rgba(42, 48, 58, 0.68) !important;
    font-size: clamp(20px, 1.22vw, 24px) !important;
    font-weight: 580 !important;
    line-height: 1.16 !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-category-list button strong,
  html body #practice.active-view:not(.practice-detail-mode) .practice-category-list button strong {
    color: rgba(32, 38, 48, 0.76) !important;
    font-size: 16px !important;
    font-weight: 560 !important;
    line-height: 1.14 !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-category-list button.active strong,
  html body #practice.active-view:not(.practice-detail-mode) .practice-category-list button.active strong {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 620 !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-category-list button em,
  html body #practice.active-view:not(.practice-detail-mode) .practice-category-list button em,
  html body #practice:not(.practice-detail-mode) .figma-type-card .mobile-type-meta,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card .mobile-type-meta {
    color: rgba(80, 88, 102, 0.68) !important;
    font-weight: 560 !important;
  }

  html body #practice:not(.practice-detail-mode) .figma-type-card strong,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card strong {
    color: rgba(19, 23, 31, 0.82) !important;
    font-size: clamp(22px, 1.32vw, 27px) !important;
    font-weight: 590 !important;
    line-height: 1.14 !important;
  }

  html body #practice:not(.practice-detail-mode) .figma-type-card small,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card small {
    color: rgba(70, 78, 92, 0.62) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.42 !important;
  }

  html body #practice:not(.practice-detail-mode) .figma-type-card b,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card b {
    font-size: 14px !important;
    font-weight: 590 !important;
  }
}
/* Practice banner embedded plan: remove the separate right-side card. */
@media (min-width: 981px) {
  html body #practice:not(.practice-detail-mode) > .practice-top-grid,
  html body #practice.active-view:not(.practice-detail-mode) > .practice-top-grid {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px) !important;
    align-items: stretch !important;
    gap: clamp(28px, 4vw, 72px) !important;
    min-height: clamp(230px, 17.6vw, 300px) !important;
    margin-bottom: 28px !important;
    padding: clamp(34px, 4vw, 56px) clamp(42px, 5vw, 76px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.54) !important;
    border-radius: 32px !important;
    background:
      radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.46), transparent 42%),
      radial-gradient(circle at 88% 0%, rgba(255, 236, 186, 0.36), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12)),
      rgba(255, 255, 255, 0.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035),
      0 28px 72px -52px rgba(15, 23, 42, 0.42) !important;
    backdrop-filter: blur(34px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.18) !important;
  }

  html body #practice:not(.practice-detail-mode) > .practice-top-grid::before,
  html body #practice.active-view:not(.practice-detail-mode) > .practice-top-grid::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 0 auto !important;
    width: min(36%, 520px) !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg, transparent, rgba(255, 239, 193, 0.22)),
      radial-gradient(circle at 72% 36%, rgba(255, 255, 255, 0.34), transparent 48%) !important;
    opacity: 0.86 !important;
  }

  html body #practice:not(.practice-detail-mode) > .practice-top-grid::after,
  html body #practice.active-view:not(.practice-detail-mode) > .practice-top-grid::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-top-grid .practice-hero,
  html body #practice.active-view:not(.practice-detail-mode) .practice-top-grid .practice-hero {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    align-content: center !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-plan-card,
  html body #practice.active-view:not(.practice-detail-mode) .practice-plan-card {
    position: relative !important;
    z-index: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    display: grid !important;
    align-content: center !important;
    gap: 16px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-plan-card::before,
  html body #practice:not(.practice-detail-mode) .practice-plan-card::after,
  html body #practice.active-view:not(.practice-detail-mode) .practice-plan-card::before,
  html body #practice.active-view:not(.practice-detail-mode) .practice-plan-card::after {
    content: none !important;
    display: none !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-plan-card > div,
  html body #practice.active-view:not(.practice-detail-mode) .practice-plan-card > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-plan-card > div > span,
  html body #practice.active-view:not(.practice-detail-mode) .practice-plan-card > div > span {
    color: rgba(66, 73, 86, 0.72) !important;
    font-size: 15px !important;
    font-weight: 620 !important;
    line-height: 1.2 !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-plan-card .ghost-btn,
  html body #practice.active-view:not(.practice-detail-mode) .practice-plan-card .ghost-btn {
    min-height: 38px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(60, 60, 67, 0.12) !important;
    border-radius: 16px !important;
    color: rgba(18, 22, 30, 0.9) !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-plan-card strong,
  html body #practice.active-view:not(.practice-detail-mode) .practice-plan-card strong {
    margin: 0 !important;
    color: rgba(20, 24, 32, 0.9) !important;
    font-size: clamp(30px, 2.1vw, 44px) !important;
    font-weight: 650 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-plan-card p,
  html body #practice.active-view:not(.practice-detail-mode) .practice-plan-card p {
    margin: 0 !important;
    color: rgba(65, 72, 86, 0.68) !important;
    font-size: 15px !important;
    font-weight: 560 !important;
    line-height: 1.45 !important;
  }

  html body #practice:not(.practice-detail-mode) .practice-plan-card .primary-btn,
  html body #practice.active-view:not(.practice-detail-mode) .practice-plan-card .primary-btn {
    justify-self: start !important;
    min-height: 42px !important;
    padding: 0 24px !important;
    border: 1px solid rgba(60, 60, 67, 0.1) !important;
    border-radius: 999px !important;
    color: rgba(8, 10, 14, 0.94) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.36)),
      rgba(255, 255, 255, 0.36) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      0 12px 28px -24px rgba(15, 23, 42, 0.32) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  html body #practice:not(.practice-detail-mode) > .practice-top-grid,
  html body #practice.active-view:not(.practice-detail-mode) > .practice-top-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
    padding-inline: clamp(30px, 4vw, 48px) !important;
  }
}

/* Mock center redesign: task-console layout inspired by exam history workflows. */
html body.view-mock {
  background:
    linear-gradient(180deg, #f6f7f8 0%, #eef3f4 46%, #f7f5ef 100%) !important;
}

html body #mock.active-view {
  --mock-redesign-ink: #15191f;
  --mock-redesign-muted: #66717d;
  --mock-redesign-line: #dfe6ea;
  --mock-redesign-soft: #f6f8f9;
  --mock-redesign-panel: #ffffff;
  --mock-redesign-teal: #11b8a6;
  --mock-redesign-blue: #3378d8;
  --mock-redesign-gold: #d99a16;
  --mock-redesign-coral: #f0645d;
  color: var(--mock-redesign-ink) !important;
  background: transparent !important;
}

html body #mock.active-view .mock-page-head,
html body #mock.active-view .mock-paper-workbench,
html body #mock.active-view .mock-flow-panel,
html body #mock.active-view .mock-report-panel,
html body #mock.active-view .mock-redesign-history,
html body #mock.active-view .mock-node82-metric,
html body #mock.active-view.mock-exam-focus .mock-session-area > .panel,
html body #mock.active-view .mock-exam-card {
  border: 1px solid var(--mock-redesign-line) !important;
  border-radius: 8px !important;
  background: var(--mock-redesign-panel) !important;
  box-shadow: 0 18px 42px -34px rgba(21, 25, 31, 0.28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #mock.active-view .mock-page-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px) auto !important;
  gap: 22px !important;
  align-items: center !important;
  min-height: 0 !important;
  margin-bottom: 18px !important;
  padding: 26px 28px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(17, 184, 166, 0.12), transparent 38%),
    linear-gradient(180deg, #fff, #fbfcfd) !important;
}

html body #mock.active-view .mock-page-head > div:first-child {
  grid-column: 1 !important;
  grid-row: auto !important;
}

html body #mock.active-view .mock-page-head h2 {
  margin: 0 !important;
  color: var(--mock-redesign-ink) !important;
  font-size: clamp(31px, 3vw, 44px) !important;
  font-weight: 780 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

html body #mock.active-view .mock-page-head p {
  max-width: 36em !important;
  margin: 8px 0 0 !important;
  color: var(--mock-redesign-muted) !important;
  font-size: 15px !important;
  font-weight: 560 !important;
  line-height: 1.5 !important;
}

html body #mock.active-view .mock-glass-summary {
  display: none !important;
}

html body #mock.active-view .mock-node82-hero-score {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  display: grid !important;
  gap: 10px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid #d7ece8 !important;
  border-radius: 8px !important;
  background: #f2fbf9 !important;
  box-shadow: none !important;
}

html body #mock.active-view .mock-node82-hero-score > span,
html body #mock.active-view .mock-node82-hero-score small {
  color: #48756f !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body #mock.active-view .mock-node82-hero-score strong {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 0 !important;
  color: #0d746a !important;
  font-size: 34px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
}

html body #mock.active-view .mock-node82-hero-score div {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

html body #mock.active-view .mock-node82-hero-score b {
  display: grid !important;
  min-height: 42px !important;
  padding: 8px !important;
  border: 1px solid #d7ece8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #6b7b80 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

html body #mock.active-view .mock-node82-hero-score em {
  color: var(--mock-redesign-ink) !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

html body #mock.active-view .mock-page-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-content: end !important;
}

html body #mock.active-view .mock-page-actions .primary-btn,
html body #mock.active-view .mock-exam-actions .primary-btn,
html body #mock.active-view .mock-paper-card.active > i {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--mock-redesign-teal) !important;
  color: #fff !important;
  box-shadow: 0 14px 26px -20px rgba(17, 184, 166, 0.7) !important;
  font-weight: 760 !important;
}

html body #mock.active-view .mock-center-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.9fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

html body #mock.active-view .mock-main-column,
html body #mock.active-view .mock-right-column {
  display: contents !important;
}

html body #mock.active-view .mock-command-center {
  grid-column: 1 / -1 !important;
  order: -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  margin: 0 !important;
}

html body #mock.active-view .mock-redesign-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

html body #mock.active-view .mock-redesign-section-head span {
  display: block !important;
  color: var(--mock-redesign-muted) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
}

html body #mock.active-view .mock-redesign-section-head strong {
  display: block !important;
  margin-top: 2px !important;
  color: var(--mock-redesign-ink) !important;
  font-size: 20px !important;
  font-weight: 780 !important;
}

html body #mock.active-view .mock-redesign-history {
  padding: 20px !important;
}

html body #mock.active-view .mock-redesign-history-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body #mock.active-view .mock-redesign-history-list article {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  gap: 8px 12px !important;
  align-items: center !important;
  min-height: 112px !important;
  padding: 14px !important;
  border: 1px solid var(--mock-redesign-line) !important;
  border-radius: 8px !important;
  background: var(--mock-redesign-soft) !important;
}

html body #mock.active-view .mock-redesign-history-score {
  grid-row: 1 / span 2 !important;
  width: 54px !important;
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  background: #e8f7f5 !important;
  color: #0d746a !important;
  font-size: 17px !important;
  font-weight: 820 !important;
}

html body #mock.active-view .mock-redesign-history-list strong {
  display: block !important;
  color: var(--mock-redesign-ink) !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  line-height: 1.28 !important;
  overflow-wrap: anywhere !important;
}

html body #mock.active-view .mock-redesign-history-list span,
html body #mock.active-view .mock-redesign-history-list small {
  color: var(--mock-redesign-muted) !important;
  font-size: 12px !important;
  font-weight: 620 !important;
}

html body #mock.active-view .mock-redesign-history-list small {
  justify-self: end !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  background: #fff !important;
}

html body #mock.active-view .mock-redesign-history-list button,
html body #mock.active-view .mock-redesign-section-head button {
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid var(--mock-redesign-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--mock-redesign-ink) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  cursor: pointer !important;
}

html body #mock.active-view .mock-redesign-history-list button {
  grid-column: 2 / -1 !important;
  justify-self: start !important;
}

html body #mock.active-view .mock-node82-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body #mock.active-view .mock-today-brief {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px 16px !important;
  border: 1px solid var(--mock-redesign-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
}

html body #mock.active-view .mock-today-brief > div:first-child {
  display: grid !important;
  gap: 3px !important;
}

html body #mock.active-view .mock-today-brief span {
  color: var(--mock-redesign-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body #mock.active-view .mock-today-brief strong {
  color: var(--mock-redesign-ink) !important;
  font-size: 14px !important;
  font-weight: 760 !important;
}

html body #mock.active-view .mock-task-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

html body #mock.active-view .mock-task-pills span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  background: var(--mock-redesign-soft) !important;
}

html body #mock.active-view .mock-node82-metric {
  min-height: 96px !important;
  padding: 16px !important;
  overflow: hidden !important;
}

html body #mock.active-view .mock-node82-metric span,
html body #mock.active-view .mock-node82-metric small {
  color: var(--mock-redesign-muted) !important;
  font-weight: 620 !important;
}

html body #mock.active-view .mock-node82-metric strong {
  margin-top: 8px !important;
  color: var(--mock-redesign-ink) !important;
  font-size: 25px !important;
  font-weight: 800 !important;
}

html body #mock.active-view .mock-node82-metric i {
  left: 16px !important;
  bottom: 12px !important;
  width: 46px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: var(--mock-redesign-blue) !important;
}

html body #mock.active-view .mock-node82-metric.tone-green i { background: var(--mock-redesign-teal) !important; }
html body #mock.active-view .mock-node82-metric.tone-yellow i { background: var(--mock-redesign-gold) !important; }
html body #mock.active-view .mock-node82-metric.tone-red i { background: var(--mock-redesign-coral) !important; }

html body #mock.active-view .mock-paper-workbench {
  grid-column: 1 / 2 !important;
  order: 0 !important;
  display: grid !important;
  gap: 14px !important;
  min-height: 0 !important;
  padding: 20px !important;
}

html body #mock.active-view .mock-paper-workbench::before {
  content: "PTE 模考试卷" !important;
  color: var(--mock-redesign-ink) !important;
  font-size: 20px !important;
  font-weight: 780 !important;
}

html body #mock.active-view .mock-paper-workbench::after {
  content: "按阶段选择全套、分项或老师推荐卷。" !important;
  margin-top: -12px !important;
  color: var(--mock-redesign-muted) !important;
  font-size: 13px !important;
}

html body #mock.active-view .mock-paper-tabs {
  position: static !important;
  display: flex !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow-x: auto !important;
}

html body #mock.active-view .mock-paper-tabs button,
html body #mock.active-view .mock-paper-filters button {
  min-height: 34px !important;
  padding: 0 13px !important;
  border: 1px solid var(--mock-redesign-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--mock-redesign-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body #mock.active-view .mock-paper-tabs button.active,
html body #mock.active-view .mock-paper-filters button.active {
  border-color: var(--mock-redesign-teal) !important;
  background: #e8f7f5 !important;
  color: #0d746a !important;
}

html body #mock.active-view .mock-paper-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #mock.active-view .mock-paper-toolbar .search-field {
  min-height: 38px !important;
  max-width: none !important;
  border: 1px solid var(--mock-redesign-line) !important;
  border-radius: 8px !important;
  background: var(--mock-redesign-soft) !important;
}

html body #mock.active-view .mock-paper-list {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #mock.active-view .mock-paper-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 82px !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 76px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--mock-redesign-line) !important;
  border-radius: 8px !important;
  background: var(--mock-redesign-soft) !important;
  box-shadow: none !important;
}

html body #mock.active-view .mock-paper-card.active {
  border-color: #9adbd2 !important;
  background: #f3fbfa !important;
  box-shadow: inset 4px 0 0 var(--mock-redesign-teal) !important;
}

html body #mock.active-view .mock-paper-card.active::before,
html body #mock.active-view .mock-paper-ribbon,
html body #mock.active-view .mock-paper-index,
html body #mock.active-view .mock-paper-copy em,
html body #mock.active-view .mock-paper-copy small {
  display: none !important;
  content: none !important;
}

html body #mock.active-view .mock-paper-copy strong {
  display: block !important;
  margin: 0 0 4px !important;
  color: var(--mock-redesign-ink) !important;
  font-size: 16px !important;
  font-weight: 760 !important;
}

html body #mock.active-view .mock-paper-copy p,
html body #mock.active-view .mock-paper-meta {
  color: var(--mock-redesign-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

html body #mock.active-view .mock-paper-meta {
  display: flex !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

html body #mock.active-view .mock-paper-card > i {
  min-width: 78px !important;
  min-height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--mock-redesign-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--mock-redesign-ink) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 760 !important;
}

html body #mock.active-view .mock-paper-detail {
  display: none !important;
}

html body #mock.active-view .mock-report-panel {
  grid-column: 2 / 3 !important;
  order: 0 !important;
  min-height: 100% !important;
  padding: 20px !important;
}

html body #mock.active-view .mock-report-panel .eyebrow,
html body #mock.active-view .mock-report-panel .score-ring {
  display: none !important;
}

html body #mock.active-view .mock-report-panel h2,
html body #mock.active-view .mock-flow-panel h3 {
  margin: 0 0 12px !important;
  color: var(--mock-redesign-ink) !important;
  font-size: 20px !important;
  font-weight: 780 !important;
}

html body #mock.active-view .mock-node82-report-ready {
  display: grid !important;
  gap: 4px !important;
  margin: 0 0 14px !important;
  color: var(--mock-redesign-muted) !important;
}

html body #mock.active-view .mock-node82-report-rows {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
}

html body #mock.active-view .mock-node82-report-rows article,
html body #mock.active-view .mock-latest-empty {
  display: grid !important;
  gap: 4px !important;
  min-height: 52px !important;
  padding: 12px !important;
  border: 1px solid var(--mock-redesign-line) !important;
  border-radius: 8px !important;
  background: var(--mock-redesign-soft) !important;
}

html body #mock.active-view .mock-node82-report-rows b {
  color: var(--mock-redesign-ink) !important;
  font-size: 13px !important;
}

html body #mock.active-view .mock-node82-report-rows span,
html body #mock.active-view .mock-latest-empty p {
  color: var(--mock-redesign-muted) !important;
  font-size: 12px !important;
}

html body #mock.active-view .mock-flow-panel {
  grid-column: 1 / -1 !important;
  order: 1 !important;
  padding: 20px !important;
}

html body #mock.active-view .mock-flow-panel .mock-task-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body #mock.active-view .mock-flow-panel .mock-task {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: start !important;
  min-height: 104px !important;
  padding: 14px !important;
  border: 1px solid var(--mock-redesign-line) !important;
  border-radius: 8px !important;
  background: var(--mock-redesign-soft) !important;
  box-shadow: none !important;
}

html body #mock.active-view .mock-flow-panel .mock-task-index {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  background: #e7effb !important;
  color: var(--mock-redesign-blue) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

html body #mock.active-view .mock-flow-panel .mock-task.tone-green .mock-task-index { background: #e8f7f5 !important; color: var(--mock-redesign-teal) !important; }
html body #mock.active-view .mock-flow-panel .mock-task.tone-yellow .mock-task-index { background: #fff5df !important; color: var(--mock-redesign-gold) !important; }
html body #mock.active-view .mock-flow-panel .mock-task.tone-red .mock-task-index { background: #fff0ef !important; color: var(--mock-redesign-coral) !important; }

html body #mock.active-view .mock-flow-panel .mock-task strong {
  color: var(--mock-redesign-ink) !important;
  font-size: 14px !important;
}

html body #mock.active-view .mock-flow-panel .mock-task small,
html body #mock.active-view .mock-flow-panel .mock-task > span:last-child {
  color: var(--mock-redesign-muted) !important;
  font-size: 11px !important;
}

html body #mock.active-view .mock-flow-panel .mock-task i {
  display: none !important;
}

@media (max-width: 1180px) {
  html body #mock.active-view .mock-page-head,
  html body #mock.active-view .mock-center-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #mock.active-view .mock-node82-hero-score,
  html body #mock.active-view .mock-page-actions,
  html body #mock.active-view .mock-paper-workbench,
  html body #mock.active-view .mock-report-panel,
  html body #mock.active-view .mock-flow-panel {
    grid-column: 1 / -1 !important;
  }

  html body #mock.active-view .mock-page-actions {
    justify-content: start !important;
  }

  html body #mock.active-view .mock-node82-hero-score,
  html body #mock.active-view .mock-page-actions {
    grid-row: auto !important;
  }

  html body #mock.active-view .mock-redesign-history-list,
  html body #mock.active-view .mock-node82-metrics,
  html body #mock.active-view .mock-flow-panel .mock-task-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body #mock.active-view .mock-today-brief {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #mock.active-view .mock-task-pills {
    justify-content: flex-start !important;
  }
}

@media (max-width: 760px) {
  html body #mock.active-view {
    padding: 0 0 96px !important;
  }

  html body #mock.active-view .mock-page-head,
  html body #mock.active-view .mock-paper-workbench,
  html body #mock.active-view .mock-flow-panel,
  html body #mock.active-view .mock-report-panel,
  html body #mock.active-view .mock-redesign-history,
  html body #mock.active-view.mock-exam-focus .mock-session-area > .panel {
    padding: 16px !important;
    border-radius: 8px !important;
  }

  html body #mock.active-view .mock-page-head h2 {
    font-size: 30px !important;
  }

  html body #mock.active-view .mock-node82-hero-score div,
  html body #mock.active-view .mock-redesign-history-list,
  html body #mock.active-view .mock-node82-metrics,
  html body #mock.active-view .mock-flow-panel .mock-task-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #mock.active-view .mock-redesign-history-list article {
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }

  html body #mock.active-view .mock-redesign-history-list small {
    justify-self: start !important;
  }

  html body #mock.active-view .mock-paper-toolbar,
  html body #mock.active-view .mock-paper-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #mock.active-view .mock-paper-meta {
    flex-wrap: wrap !important;
  }

  html body #mock.active-view .mock-paper-card > i {
    justify-self: start !important;
  }
}

/* Mock center cleanup pass: keep only useful modules after functional review. */
html body #mock.active-view .mock-page-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  padding: 24px 28px !important;
}

html body #mock.active-view .mock-page-actions {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

html body #mock.active-view .mock-command-center {
  order: -1 !important;
  grid-column: 1 / -1 !important;
}

html body #mock.active-view .mock-redesign-history {
  padding: 18px 20px !important;
}

html body #mock.active-view .mock-redesign-history-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body #mock.active-view .mock-redesign-history-empty {
  display: grid !important;
  gap: 6px !important;
  min-height: 88px !important;
  align-content: center !important;
  padding: 18px !important;
  border: 1px dashed var(--mock-redesign-line) !important;
  border-radius: 8px !important;
  background: var(--mock-redesign-soft) !important;
}

html body #mock.active-view .mock-redesign-history-empty strong {
  color: var(--mock-redesign-ink) !important;
  font-size: 16px !important;
}

html body #mock.active-view .mock-redesign-history-empty span {
  color: var(--mock-redesign-muted) !important;
  font-size: 13px !important;
}

html body #mock.active-view .mock-paper-workbench,
html body #mock.active-view .mock-report-panel {
  align-self: stretch !important;
}

@media (max-width: 1180px) {
  html body #mock.active-view .mock-page-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #mock.active-view .mock-page-actions {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-content: start !important;
  }

  html body #mock.active-view .mock-redesign-history-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html body #mock.active-view .mock-page-head {
    padding: 18px !important;
  }

  html body #mock.active-view .mock-page-actions,
  html body #mock.active-view .mock-page-actions .primary-btn {
    width: 100% !important;
  }

  html body #mock.active-view .mock-redesign-history-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Mock center design pass: make the reduced page feel intentional, not merely empty. */
html body #mock.active-view .mock-page-head {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  gap: 18px !important;
  min-height: 246px !important;
  padding: 30px !important;
  overflow: hidden !important;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 250, 0.88) 45%, rgba(236, 247, 244, 0.92)),
    #fff !important;
}

html body #mock.active-view .mock-page-head > div:first-child {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  align-content: end !important;
}

html body #mock.active-view .mock-page-head h2 {
  max-width: 520px !important;
  font-size: clamp(38px, 4vw, 60px) !important;
  font-weight: 840 !important;
  line-height: 1 !important;
}

html body #mock.active-view .mock-page-head p {
  max-width: 420px !important;
  margin-top: 14px !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

html body #mock.active-view .mock-redesign-hero-card-slot {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  min-width: 0 !important;
}

html body #mock.active-view .mock-redesign-hero-card {
  display: grid !important;
  align-content: space-between !important;
  gap: 14px !important;
  min-height: 186px !important;
  padding: 20px !important;
  border: 1px solid rgba(15, 21, 27, 0.92) !important;
  border-radius: 8px !important;
  color: #fff !important;
  background:
    linear-gradient(145deg, rgba(20, 28, 34, 0.96), rgba(15, 18, 22, 0.98)),
    #15191f !important;
  box-shadow: 0 24px 48px -34px rgba(15, 21, 27, 0.72) !important;
}

html body #mock.active-view .mock-redesign-hero-card > span {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

html body #mock.active-view .mock-redesign-hero-card strong {
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 820 !important;
  line-height: 1.18 !important;
}

html body #mock.active-view .mock-redesign-hero-card p {
  max-width: none !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

html body #mock.active-view .mock-redesign-hero-card div {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body #mock.active-view .mock-redesign-hero-card b {
  display: grid !important;
  gap: 3px !important;
  min-height: 54px !important;
  align-content: center !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  font-size: 19px !important;
  font-weight: 820 !important;
}

html body #mock.active-view .mock-redesign-hero-card small {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

html body #mock.active-view .mock-redesign-hero-card footer {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

html body #mock.active-view .mock-redesign-hero-card footer span {
  min-height: 24px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #10201d !important;
  background: #a7efe2 !important;
  font-size: 11px !important;
  font-weight: 780 !important;
}

html body #mock.active-view .mock-page-actions {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: start !important;
  justify-content: start !important;
  margin-top: 22px !important;
}

html body #mock.active-view .mock-page-actions .primary-btn {
  min-width: 148px !important;
  min-height: 48px !important;
  border-radius: 8px !important;
}

html body #mock.active-view .mock-command-center {
  gap: 0 !important;
}

html body #mock.active-view .mock-redesign-history {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #mock.active-view .mock-redesign-section-head {
  margin-bottom: 10px !important;
}

html body #mock.active-view .mock-redesign-section-head strong {
  font-size: 22px !important;
}

html body #mock.active-view .mock-redesign-history-list article,
html body #mock.active-view .mock-redesign-history-empty {
  min-height: 132px !important;
  background:
    linear-gradient(180deg, #ffffff, #f8fafb),
    #fff !important;
  box-shadow: 0 16px 34px -30px rgba(15, 21, 27, 0.3) !important;
}

html body #mock.active-view .mock-redesign-history-empty {
  grid-template-columns: 92px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 18px !important;
  border-style: solid !important;
}

html body #mock.active-view .mock-redesign-history-empty > div {
  display: grid !important;
  place-items: center !important;
  width: 82px !important;
  height: 82px !important;
  border-radius: 8px !important;
  background: #15191f !important;
}

html body #mock.active-view .mock-redesign-history-empty b {
  color: #fff !important;
  font-size: 34px !important;
  line-height: 1 !important;
}

html body #mock.active-view .mock-redesign-history-empty > div span {
  color: rgba(255, 255, 255, 0.56) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

html body #mock.active-view .mock-redesign-history-empty section {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body #mock.active-view .mock-redesign-history-empty button {
  justify-self: start !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: var(--mock-redesign-teal) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  cursor: pointer !important;
}

html body #mock.active-view .mock-center-layout {
  gap: 18px !important;
}

html body #mock.active-view .mock-paper-workbench,
html body #mock.active-view .mock-report-panel {
  padding: 22px !important;
  border-radius: 8px !important;
}

html body #mock.active-view .mock-paper-workbench::before,
html body #mock.active-view .mock-report-panel h2 {
  font-size: 24px !important;
  font-weight: 820 !important;
}

html body #mock.active-view .mock-paper-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body #mock.active-view .mock-paper-tabs button,
html body #mock.active-view .mock-paper-filters button {
  min-height: 38px !important;
  border-radius: 8px !important;
}

html body #mock.active-view .mock-paper-card {
  grid-template-columns: 58px minmax(0, 1fr) auto !important;
  min-height: 104px !important;
  padding: 16px !important;
  background:
    linear-gradient(90deg, rgba(232, 247, 245, 0.86), transparent 44%),
    #fff !important;
}

html body #mock.active-view .mock-paper-card.active {
  background:
    linear-gradient(90deg, rgba(211, 246, 239, 0.94), rgba(255, 255, 255, 0.98)),
    #fff !important;
}

html body #mock.active-view .mock-paper-ribbon {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: #15191f !important;
  font-size: 12px !important;
}

html body #mock.active-view .mock-paper-card.tone-mint .mock-paper-ribbon,
html body #mock.active-view .mock-paper-card.tone-blue .mock-paper-ribbon {
  background: var(--mock-redesign-teal) !important;
}

html body #mock.active-view .mock-paper-card.tone-violet .mock-paper-ribbon {
  background: #4d64d8 !important;
}

html body #mock.active-view .mock-paper-copy em {
  display: inline-flex !important;
  min-height: 22px !important;
  margin: 4px 6px 0 0 !important;
  padding: 0 7px !important;
  border-radius: 8px !important;
  color: #0d746a !important;
  background: #e8f7f5 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 760 !important;
}

html body #mock.active-view .mock-paper-copy p {
  margin-top: 8px !important;
}

html body #mock.active-view .mock-paper-meta {
  display: grid !important;
  gap: 5px !important;
}

html body #mock.active-view .mock-paper-card > i {
  min-height: 40px !important;
  padding: 0 15px !important;
}

html body #mock.active-view .mock-report-empty-redesign {
  display: grid !important;
  gap: 14px !important;
  min-height: 238px !important;
  align-content: center !important;
  padding: 22px !important;
  border-radius: 8px !important;
  color: #fff !important;
  background:
    linear-gradient(145deg, rgba(21, 25, 31, 0.96), rgba(30, 39, 45, 0.98)),
    #15191f !important;
}

html body #mock.active-view .mock-report-empty-redesign span {
  color: rgba(167, 239, 226, 0.8) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html body #mock.active-view .mock-report-empty-redesign strong {
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1.18 !important;
}

html body #mock.active-view .mock-report-empty-redesign p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.66) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

html body #mock.active-view .mock-report-empty-redesign div {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body #mock.active-view .mock-report-empty-redesign b {
  min-height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  color: #10201d !important;
  background: #a7efe2 !important;
  font-size: 12px !important;
}

@media (max-width: 1180px) {
  html body #mock.active-view .mock-page-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #mock.active-view .mock-redesign-hero-card-slot,
  html body #mock.active-view .mock-page-actions {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  html body #mock.active-view .mock-page-actions {
    align-self: start !important;
  }
}

@media (max-width: 760px) {
  html body #mock.active-view .mock-page-head {
    min-height: 0 !important;
    padding: 18px !important;
  }

  html body #mock.active-view .mock-page-head h2 {
    font-size: 31px !important;
  }

  html body #mock.active-view .mock-redesign-hero-card {
    min-height: 0 !important;
  }

  html body #mock.active-view .mock-redesign-hero-card div,
  html body #mock.active-view .mock-report-empty-redesign div {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #mock.active-view .mock-redesign-history-empty {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #mock.active-view .mock-paper-card {
    grid-template-columns: 52px minmax(0, 1fr) !important;
  }

  html body #mock.active-view .mock-paper-card > i {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

/* Mobile home final glass corner fix: remove the parent white plate so the card radius is visible. */
@media (max-width: 980px) {
  html body #dashboard.active-view .home-v2-mobile-trial,
  html body #homeDashboard .home-v2-mobile-trial,
  html body .home-v2-mobile-trial,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-path,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick,
  html body #homeDashboard .home-mobile-path,
  html body #homeDashboard .home-mobile-quick,
  html body .home-mobile-path,
  html body .home-mobile-quick {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial::before,
  html body #dashboard.active-view .home-v2-mobile-trial::after,
  html body #homeDashboard .home-v2-mobile-trial::before,
  html body #homeDashboard .home-v2-mobile-trial::after,
  html body .home-v2-mobile-trial::before,
  html body .home-v2-mobile-trial::after,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-path::before,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-path::after,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick::before,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick::after,
  html body #homeDashboard .home-mobile-path::before,
  html body #homeDashboard .home-mobile-path::after,
  html body #homeDashboard .home-mobile-quick::before,
  html body #homeDashboard .home-mobile-quick::after,
  html body .home-mobile-path::before,
  html body .home-mobile-path::after,
  html body .home-mobile-quick::before,
  html body .home-mobile-quick::after {
    content: none !important;
    display: none !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task-list,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick > div,
  html body #homeDashboard .home-mobile-task-list,
  html body #homeDashboard .home-mobile-quick > div,
  html body .home-mobile-task-list,
  html body .home-mobile-quick > div {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 2px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task-list::before,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task-list::after,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick > div::before,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick > div::after,
  html body #homeDashboard .home-mobile-task-list::before,
  html body #homeDashboard .home-mobile-task-list::after,
  html body #homeDashboard .home-mobile-quick > div::before,
  html body #homeDashboard .home-mobile-quick > div::after,
  html body .home-mobile-task-list::before,
  html body .home-mobile-task-list::after,
  html body .home-mobile-quick > div::before,
  html body .home-mobile-quick > div::after {
    content: none !important;
    display: none !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button,
  html body #homeDashboard .home-mobile-task,
  html body #homeDashboard .home-mobile-quick button,
  html body .home-mobile-task,
  html body .home-mobile-quick button {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    contain: paint !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    clip-path: inset(0 round 24px) !important;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000) !important;
    transform: translateZ(0) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task::before,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button::before,
  html body #homeDashboard .home-mobile-task::before,
  html body #homeDashboard .home-mobile-quick button::before,
  html body .home-mobile-task::before,
  html body .home-mobile-quick button::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.72), transparent 48%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(15, 23, 42, 0.04),
      0 14px 34px -30px rgba(15, 23, 42, 0.38) !important;
    backdrop-filter: blur(30px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.18) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task::after,
  html body #homeDashboard .home-mobile-task::after,
  html body .home-mobile-task::after {
    content: none !important;
    display: none !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task > *,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button > *,
  html body #homeDashboard .home-mobile-task > *,
  html body #homeDashboard .home-mobile-quick button > *,
  html body .home-mobile-task > *,
  html body .home-mobile-quick button > * {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Mock center reference-aligned rebuild: history first, exam shelf second. */
html body.view-mock {
  background: #f6f6f6 !important;
}

html body #mock.active-view {
  --mock-ref-ink: #1f2933;
  --mock-ref-muted: #8b95a1;
  --mock-ref-line: #eef0f2;
  --mock-ref-panel: #fff;
  --mock-ref-teal: #12c8b6;
  --mock-ref-blue: #36aee2;
  --mock-ref-red: #ff6470;
  padding-top: 18px !important;
  color: var(--mock-ref-ink) !important;
  background: transparent !important;
}

html body #mock.active-view .mock-page-head {
  display: block !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #mock.active-view .mock-page-head h2 {
  margin: 0 !important;
  color: var(--mock-ref-ink) !important;
  font-size: 16px !important;
  font-weight: 720 !important;
  line-height: 1.3 !important;
}

html body #mock.active-view .mock-page-head p,
html body #mock.active-view .mock-redesign-hero-card-slot,
html body #mock.active-view .mock-page-actions,
html body #mock.active-view .mock-report-panel {
  display: none !important;
}

html body #mock.active-view .mock-center-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  align-items: stretch !important;
}

html body #mock.active-view .mock-command-center {
  order: -1 !important;
  display: block !important;
  margin: 0 !important;
}

html body #mock.active-view .mock-redesign-history {
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #mock.active-view .mock-redesign-history h3 {
  margin: 0 0 14px !important;
  color: var(--mock-ref-ink) !important;
  font-size: 16px !important;
  font-weight: 720 !important;
  line-height: 1.3 !important;
}

html body #mock.active-view .mock-redesign-history-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--mock-ref-line) !important;
  border-radius: 8px !important;
  background: var(--mock-ref-panel) !important;
  box-shadow: 0 10px 30px rgba(20, 28, 38, 0.06) !important;
}

html body #mock.active-view .mock-history-row,
html body #mock.active-view .mock-redesign-history-list article {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 48px 130px !important;
  gap: 18px !important;
  align-items: center !important;
  min-height: 88px !important;
  padding: 18px 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mock-ref-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body #mock.active-view .mock-history-row:last-child,
html body #mock.active-view .mock-redesign-history-list article:last-child {
  border-bottom: 0 !important;
}

html body #mock.active-view .mock-history-main {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body #mock.active-view .mock-history-main strong {
  display: block !important;
  overflow: hidden !important;
  color: var(--mock-ref-ink) !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #mock.active-view .mock-history-main span {
  display: block !important;
  color: var(--mock-ref-muted) !important;
  font-size: 13px !important;
  font-weight: 520 !important;
}

html body #mock.active-view .mock-history-delete {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  justify-self: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--mock-ref-red) !important;
  color: transparent !important;
  cursor: pointer !important;
  position: relative !important;
}

html body #mock.active-view .mock-history-delete::before {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 11px !important;
  width: 14px !important;
  height: 13px !important;
  border: 2px solid #fff !important;
  border-top: 0 !important;
  border-radius: 0 0 3px 3px !important;
}

html body #mock.active-view .mock-history-delete::after {
  content: "" !important;
  position: absolute !important;
  left: 9px !important;
  top: 8px !important;
  width: 16px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 4px -3px 0 -1px #fff !important;
}

html body #mock.active-view .mock-history-delete-placeholder,
html body #mock.active-view .mock-history-delete-placeholder::before,
html body #mock.active-view .mock-history-delete-placeholder::after {
  visibility: hidden !important;
}

html body #mock.active-view .mock-history-action {
  min-width: 118px !important;
  min-height: 34px !important;
  justify-self: end !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--mock-ref-teal) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html body #mock.active-view .mock-history-row:nth-child(2) .mock-history-action {
  background: var(--mock-ref-blue) !important;
}

html body #mock.active-view .mock-history-more {
  justify-self: end !important;
  margin: -46px 22px 22px 0 !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #8a8f96 !important;
  font-size: 12px !important;
  font-weight: 520 !important;
  cursor: pointer !important;
}

html body #mock.active-view .mock-paper-workbench {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 24px 36px !important;
  border: 1px solid var(--mock-ref-line) !important;
  border-radius: 8px !important;
  background: var(--mock-ref-panel) !important;
  box-shadow: 0 10px 30px rgba(20, 28, 38, 0.06) !important;
}

html body #mock.active-view .mock-paper-workbench::before {
  content: "PTE 模考" !important;
  position: absolute !important;
  left: 0 !important;
  top: -38px !important;
  color: var(--mock-ref-ink) !important;
  font-size: 16px !important;
  font-weight: 720 !important;
}

html body #mock.active-view .mock-paper-workbench::after {
  display: none !important;
}

html body #mock.active-view .mock-paper-detail {
  order: -3 !important;
  display: grid !important;
  gap: 18px !important;
  margin: 0 -24px !important;
}

html body #mock.active-view .mock-exam-mode-switch {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 0.85fr) !important;
  justify-self: end !important;
  width: min(454px, 100%) !important;
  height: 38px !important;
  margin-top: -38px !important;
  overflow: hidden !important;
  border-radius: 14px 14px 0 0 !important;
  background: #d8dcdb !important;
}

html body #mock.active-view .mock-exam-mode-switch button {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8d9399 !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  cursor: pointer !important;
}

html body #mock.active-view .mock-exam-mode-switch button.active {
  color: #fff !important;
  background: var(--mock-ref-teal) !important;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 100%, 0 100%) !important;
}

html body #mock.active-view .mock-paper-intro {
  display: none !important;
}

html body #mock.active-view .mock-paper-tabs {
  order: -2 !important;
  display: flex !important;
  gap: 34px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #dfe3e6 !important;
  overflow-x: auto !important;
}

html body #mock.active-view .mock-paper-tabs button {
  position: relative !important;
  min-height: 34px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8b9097 !important;
  font-size: 14px !important;
  font-weight: 620 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

html body #mock.active-view .mock-paper-tabs button.active {
  color: var(--mock-ref-teal) !important;
  background: transparent !important;
}

html body #mock.active-view .mock-paper-tabs button.active::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 2px !important;
  background: var(--mock-ref-teal) !important;
}

html body #mock.active-view .mock-paper-toolbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: center !important;
  margin: 24px 0 16px !important;
  padding: 0 !important;
}

html body #mock.active-view .mock-paper-toolbar .search-field {
  justify-self: end !important;
  min-height: 36px !important;
  width: min(240px, 100%) !important;
  border: 1px solid #edf0f2 !important;
  border-radius: 999px !important;
  background: #fafafa !important;
}

html body #mock.active-view .mock-paper-toolbar .search-field span {
  color: #a0a6ad !important;
  font-size: 12px !important;
}

html body #mock.active-view .mock-paper-filters {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  gap: 20px !important;
}

html body #mock.active-view .mock-paper-filters button {
  min-width: 112px !important;
  min-height: 36px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f8f8f8 !important;
  color: #8b9097 !important;
  font-size: 14px !important;
  font-weight: 620 !important;
}

html body #mock.active-view .mock-paper-filters button.active {
  background: var(--mock-ref-teal) !important;
  color: #fff !important;
}

html body #mock.active-view .mock-paper-list {
  display: grid !important;
  gap: 0 !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--mock-ref-line) !important;
}

html body #mock.active-view .mock-paper-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 182px 34px !important;
  gap: 16px !important;
  align-items: center !important;
  min-height: 70px !important;
  padding: 16px 14px 16px 28px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mock-ref-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: left !important;
}

html body #mock.active-view .mock-paper-card.active {
  background: #fbfffe !important;
  box-shadow: none !important;
}

html body #mock.active-view .mock-paper-card::after {
  content: ">" !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  color: #26313b !important;
  font-size: 26px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  justify-self: center !important;
}

html body #mock.active-view .mock-paper-ribbon,
html body #mock.active-view .mock-paper-index,
html body #mock.active-view .mock-paper-copy em,
html body #mock.active-view .mock-paper-card > i {
  display: none !important;
}

html body #mock.active-view .mock-paper-copy {
  min-width: 0 !important;
}

html body #mock.active-view .mock-paper-copy strong {
  display: block !important;
  overflow: hidden !important;
  color: #313942 !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #mock.active-view .mock-paper-copy p {
  display: none !important;
}

html body #mock.active-view .mock-paper-copy small {
  display: block !important;
  margin-top: 5px !important;
  color: var(--mock-ref-muted) !important;
  font-size: 12px !important;
  font-weight: 520 !important;
}

html body #mock.active-view .mock-paper-meta {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  color: var(--mock-ref-muted) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

html body #mock.active-view .mock-session-area {
  margin-top: 28px !important;
}

html body #mock.active-view:not(.mock-exam-focus) .mock-session-area {
  display: none !important;
}

@media (max-width: 760px) {
  html body #mock.active-view {
    padding-top: 12px !important;
  }

  html body #mock.active-view .mock-history-row,
  html body #mock.active-view .mock-redesign-history-list article {
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 12px !important;
    min-height: 98px !important;
    padding: 16px !important;
  }

  html body #mock.active-view .mock-history-action {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }

  html body #mock.active-view .mock-history-more {
    margin: 12px 4px 0 0 !important;
  }

  html body #mock.active-view .mock-paper-workbench {
    padding: 0 16px 28px !important;
  }

  html body #mock.active-view .mock-paper-detail {
    margin: 0 -16px !important;
  }

  html body #mock.active-view .mock-exam-mode-switch {
    justify-self: stretch !important;
    width: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr) !important;
  }

  html body #mock.active-view .mock-paper-tabs {
    gap: 12px !important;
    margin-top: 22px !important;
  }

  html body #mock.active-view .mock-paper-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  html body #mock.active-view .mock-paper-filters {
    grid-column: 1 !important;
    grid-row: 1 !important;
    gap: 10px !important;
    overflow-x: auto !important;
  }

  html body #mock.active-view .mock-paper-toolbar .search-field {
    grid-row: 2 !important;
    justify-self: stretch !important;
    width: auto !important;
  }

  html body #mock.active-view .mock-paper-card {
    grid-template-columns: minmax(0, 1fr) 24px !important;
    min-height: 82px !important;
    padding: 14px 8px 14px 12px !important;
  }

  html body #mock.active-view .mock-paper-card::after {
    grid-column: 2 !important;
  }

  html body #mock.active-view .mock-paper-meta {
    display: none !important;
  }
}
/* Keep embedded plan text from clipping on narrower desktop widths. */
@media (min-width: 981px) {
  html body #practice:not(.practice-detail-mode) .practice-plan-card strong,
  html body #practice.active-view:not(.practice-detail-mode) .practice-plan-card strong {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  html body #practice:not(.practice-detail-mode) .practice-plan-card strong,
  html body #practice.active-view:not(.practice-detail-mode) .practice-plan-card strong {
    font-size: clamp(24px, 1.9vw, 30px) !important;
  }
}

/* Mobile home selected cards use the same light frosted surface as the rest. */
@media (max-width: 980px) {
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task.active,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task.home-mobile-mp3-task,
  html body #homeDashboard .home-mobile-task.active,
  html body #homeDashboard .home-mobile-task.home-mobile-mp3-task,
  html body .home-mobile-task.active,
  html body .home-mobile-task.home-mobile-mp3-task {
    overflow: hidden !important;
    border-radius: 24px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    clip-path: inset(0 round 24px) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task.active::before,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task.home-mobile-mp3-task::before,
  html body #homeDashboard .home-mobile-task.active::before,
  html body #homeDashboard .home-mobile-task.home-mobile-mp3-task::before,
  html body .home-mobile-task.active::before,
  html body .home-mobile-task.home-mobile-mp3-task::before {
    content: "" !important;
    border-radius: inherit !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.72), transparent 48%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(15, 23, 42, 0.04),
      0 14px 34px -30px rgba(15, 23, 42, 0.38) !important;
    backdrop-filter: blur(30px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.18) !important;
  }
}

/* Desktop nav selected state: clearer inset active segment. */
@media (min-width: 981px) {
  html body .sidebar .nav-list,
  html body.view-dashboard .sidebar .nav-list,
  html body.view-practice .sidebar .nav-list,
  html body.view-mp3 .sidebar .nav-list,
  html body.view-mock .sidebar .nav-list,
  html body.view-profile .sidebar .nav-list,
  html body.view-admin .sidebar .nav-list {
    border-color: rgba(255, 255, 255, 0.58) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.14)),
      rgba(255, 255, 255, 0.2) !important;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.72),
      inset 0 -1px 1px rgba(15, 23, 42, 0.06),
      0 12px 34px -30px rgba(15, 23, 42, 0.42) !important;
  }

  html body .sidebar .nav-link,
  html body.view-dashboard .sidebar .nav-link,
  html body.view-practice .sidebar .nav-link,
  html body.view-mp3 .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link,
  html body.view-profile .sidebar .nav-link,
  html body.view-admin .sidebar .nav-link {
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    color: rgba(43, 49, 59, 0.64) !important;
    font-weight: 700 !important;
  }

  html body .sidebar .nav-link:hover:not(.active),
  html body.view-dashboard .sidebar .nav-link:hover:not(.active),
  html body.view-practice .sidebar .nav-link:hover:not(.active),
  html body.view-mp3 .sidebar .nav-link:hover:not(.active),
  html body.view-mock .sidebar .nav-link:hover:not(.active),
  html body.view-profile .sidebar .nav-link:hover:not(.active),
  html body.view-admin .sidebar .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  }

  html body .sidebar .nav-link.active,
  html body.view-dashboard .sidebar .nav-link.active,
  html body.view-practice .sidebar .nav-link.active,
  html body.view-mp3 .sidebar .nav-link.active,
  html body.view-mock .sidebar .nav-link.active,
  html body.view-profile .sidebar .nav-link.active,
  html body.view-admin .sidebar .nav-link.active {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    color: rgba(6, 8, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.62) 56%, rgba(255, 255, 255, 0.38)),
      rgba(255, 255, 255, 0.62) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      inset 0 -14px 22px rgba(15, 23, 42, 0.065),
      0 1px 0 rgba(255, 255, 255, 0.64),
      0 16px 36px -26px rgba(15, 23, 42, 0.48) !important;
    font-weight: 840 !important;
    line-height: 1 !important;
  }

  html body .sidebar .nav-link.active::after,
  html body.view-dashboard .sidebar .nav-link.active::after,
  html body.view-practice .sidebar .nav-link.active::after,
  html body.view-mp3 .sidebar .nav-link.active::after,
  html body.view-mock .sidebar .nav-link.active::after,
  html body.view-profile .sidebar .nav-link.active::after,
  html body.view-admin .sidebar .nav-link.active::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 4px !important;
    width: 30px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(239, 180, 35, 0.18), rgba(246, 193, 59, 0.95), rgba(255, 220, 113, 0.2)) !important;
    box-shadow: 0 0 12px rgba(246, 193, 59, 0.42) !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
  }
}

/* Mobile home card typography: keep upper and lower shortcut cards consistent. */
@media (max-width: 980px) {
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task b,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button strong,
  html body #homeDashboard .home-mobile-task b,
  html body #homeDashboard .home-mobile-quick button strong,
  html body .home-mobile-task b,
  html body .home-mobile-quick button strong {
    color: rgba(16, 18, 24, 0.96) !important;
    font-size: 16px !important;
    font-weight: 820 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
}

/* Final desktop home hero fit: scale the CTA and prediction card with the wide banner. */
@media (min-width: 981px) {
  html body.view-dashboard #dashboard .home-web-hero {
    grid-template-columns: minmax(0, 1fr) clamp(500px, 28vw, 620px) !important;
    align-items: center !important;
    gap: clamp(48px, 5.6vw, 120px) !important;
    min-height: clamp(330px, 20.8vw, 420px) !important;
    padding: clamp(44px, 3vw, 64px) clamp(44px, 3.2vw, 72px) !important;
  }

  html body.view-dashboard #dashboard .home-web-hero-copy {
    align-content: center !important;
  }

  html body.view-dashboard #dashboard .home-web-hero-copy > div {
    margin-top: clamp(34px, 2.4vw, 48px) !important;
  }

  html body.view-dashboard #dashboard .home-web-primary {
    height: clamp(50px, 2.7vw, 58px) !important;
    min-width: clamp(178px, 9.8vw, 220px) !important;
    padding: 0 clamp(24px, 1.55vw, 32px) !important;
    gap: 12px !important;
    border-radius: 999px !important;
    font-size: clamp(16px, 0.9vw, 18px) !important;
    font-weight: 820 !important;
  }

  html body.view-dashboard #dashboard .home-web-primary svg {
    width: clamp(20px, 1.05vw, 23px) !important;
    height: clamp(20px, 1.05vw, 23px) !important;
  }

  html body.view-dashboard #dashboard .home-web-goal {
    align-self: center !important;
    width: 100% !important;
    min-height: clamp(178px, 10.9vw, 230px) !important;
    padding: clamp(28px, 1.85vw, 38px) clamp(30px, 2vw, 42px) !important;
    border-radius: 32px !important;
    align-content: center !important;
  }

  html body.view-dashboard #dashboard .home-web-goal > span {
    font-size: clamp(17px, 0.96vw, 20px) !important;
    font-weight: 820 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main {
    grid-template-columns: auto minmax(0, 1fr) clamp(92px, 5.3vw, 112px) !important;
    gap: clamp(16px, 1.15vw, 24px) !important;
    margin-top: clamp(22px, 1.45vw, 32px) !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main strong {
    font-size: clamp(56px, 3.35vw, 72px) !important;
    font-weight: 840 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main em,
  html body.view-dashboard #dashboard .home-web-goal p {
    font-size: clamp(14px, 0.82vw, 17px) !important;
    line-height: 1.28 !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main i {
    width: clamp(92px, 5.3vw, 112px) !important;
    height: clamp(92px, 5.3vw, 112px) !important;
  }

  html body.view-dashboard #dashboard .home-web-goal-main i b {
    font-size: clamp(22px, 1.2vw, 26px) !important;
    font-weight: 820 !important;
  }
}

/* Mobile home frosted typography: softer text that sits inside the glass. */
@media (max-width: 980px) {
  html body #dashboard.active-view .home-v2-mobile-trial,
  html body #homeDashboard .home-v2-mobile-trial,
  html body .home-v2-mobile-trial {
    color: rgba(24, 28, 36, 0.78) !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-hero h2,
  html body #homeDashboard .home-mobile-hero h2,
  html body .home-mobile-hero h2 {
    color: rgba(18, 21, 28, 0.82) !important;
    font-size: clamp(28px, 8.2vw, 34px) !important;
    font-weight: 680 !important;
    line-height: 1.14 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6),
      0 12px 28px rgba(15, 23, 42, 0.06) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-primary,
  html body #homeDashboard .home-mobile-primary,
  html body .home-mobile-primary {
    color: rgba(23, 27, 35, 0.78) !important;
    font-size: 14px !important;
    font-weight: 640 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-ring strong,
  html body #homeDashboard .home-mobile-ring strong,
  html body .home-mobile-ring strong {
    color: rgba(19, 23, 31, 0.78) !important;
    font-size: 20px !important;
    font-weight: 660 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric span,
  html body #homeDashboard .home-mobile-metric span,
  html body .home-mobile-metric span {
    color: rgba(75, 82, 96, 0.58) !important;
    font-size: 12px !important;
    font-weight: 610 !important;
    line-height: 1.18 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric strong,
  html body #homeDashboard .home-mobile-metric strong,
  html body .home-mobile-metric strong {
    color: rgba(20, 24, 32, 0.78) !important;
    font-size: clamp(23px, 6.1vw, 27px) !important;
    font-weight: 660 !important;
    line-height: 1 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.62),
      0 10px 22px rgba(15, 23, 42, 0.06) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric i,
  html body #homeDashboard .home-mobile-metric i,
  html body .home-mobile-metric i {
    width: 30px !important;
    height: 2px !important;
    opacity: 0.58 !important;
    box-shadow: none !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task > span,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button span,
  html body #homeDashboard .home-mobile-task > span,
  html body #homeDashboard .home-mobile-quick button span,
  html body .home-mobile-task > span,
  html body .home-mobile-quick button span {
    color: rgba(76, 84, 98, 0.56) !important;
    opacity: 1 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task > span svg,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button span svg,
  html body #homeDashboard .home-mobile-task > span svg,
  html body #homeDashboard .home-mobile-quick button span svg,
  html body .home-mobile-task > span svg,
  html body .home-mobile-quick button span svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task b,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button strong,
  html body #homeDashboard .home-mobile-task b,
  html body #homeDashboard .home-mobile-quick button strong,
  html body .home-mobile-task b,
  html body .home-mobile-quick button strong {
    color: rgba(20, 24, 32, 0.78) !important;
    font-size: clamp(17px, 4.7vw, 20px) !important;
    font-weight: 650 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.64),
      0 10px 22px rgba(15, 23, 42, 0.055) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task em,
  html body #homeDashboard .home-mobile-task em,
  html body .home-mobile-task em {
    color: rgba(0, 122, 255, 0.62) !important;
    opacity: 0.78 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task em svg,
  html body #homeDashboard .home-mobile-task em svg,
  html body .home-mobile-task em svg,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button > svg,
  html body #homeDashboard .home-mobile-quick button > svg,
  html body .home-mobile-quick button > svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2 !important;
  }

  html body .mobile-tab {
    color: rgba(58, 65, 78, 0.62) !important;
    font-size: 14px !important;
    font-weight: 620 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  html body .mobile-tab.active {
    color: rgba(24, 28, 36, 0.78) !important;
    font-weight: 660 !important;
  }
}

/* Final desktop hero vertical fit: move the CTA and goal card into the enlarged banner. */
@media (min-width: 981px) {
  html body.view-dashboard #dashboard .home-web-hero {
    align-items: center !important;
  }

  html body.view-dashboard #dashboard .home-web-hero-copy > div {
    margin-top: clamp(46px, 3vw, 64px) !important;
    transform: translateY(clamp(18px, 1.5vw, 34px)) !important;
  }

  html body.view-dashboard #dashboard .home-web-goal {
    align-self: center !important;
    min-height: clamp(210px, 12.4vw, 270px) !important;
    transform: translateY(clamp(34px, 2.5vw, 54px)) !important;
  }
}

/* Mobile home learning dashboard: subtle status, tint, and hierarchy. */
@media (max-width: 980px) {
  html body #dashboard.active-view .home-v2-mobile-trial,
  html body #homeDashboard .home-v2-mobile-trial,
  html body .home-v2-mobile-trial {
    gap: 14px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-hero,
  html body #homeDashboard .home-mobile-hero,
  html body .home-mobile-hero {
    position: relative !important;
    min-height: 278px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    background:
      linear-gradient(138deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.26) 58%, rgba(255, 255, 255, 0.18) 100%),
      linear-gradient(24deg, rgba(52, 199, 89, 0.09) 0%, rgba(0, 122, 255, 0.07) 52%, rgba(255, 255, 255, 0.08) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(15, 23, 42, 0.04),
      0 24px 62px -48px rgba(15, 23, 42, 0.38) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-hero::after,
  html body #homeDashboard .home-mobile-hero::after,
  html body .home-mobile-hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg, rgba(52, 199, 89, 0.08), transparent 45%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 64%) !important;
    opacity: 0.9 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-hero > *,
  html body #homeDashboard .home-mobile-hero > *,
  html body .home-mobile-hero > * {
    position: relative !important;
    z-index: 1 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-hero h2,
  html body #homeDashboard .home-mobile-hero h2,
  html body .home-mobile-hero h2 {
    max-width: min(100%, 330px) !important;
    color: rgba(25, 29, 38, 0.82) !important;
    font-size: clamp(29px, 8.4vw, 35px) !important;
    font-weight: 700 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-primary,
  html body #homeDashboard .home-mobile-primary,
  html body .home-mobile-primary {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    color: rgba(29, 34, 44, 0.76) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.24)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 14px 32px -28px rgba(15, 23, 42, 0.36) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-ring,
  html body #homeDashboard .home-mobile-ring,
  html body .home-mobile-ring {
    right: clamp(22px, 7vw, 34px) !important;
    bottom: 22px !important;
    display: grid !important;
    place-items: center !important;
    width: 78px !important;
    height: 78px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    background:
      conic-gradient(rgba(52, 199, 89, 0.66) var(--value), rgba(154, 160, 172, 0.16) 0),
      rgba(255, 255, 255, 0.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 16px 36px -28px rgba(15, 23, 42, 0.35) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-ring::before,
  html body #homeDashboard .home-mobile-ring::before,
  html body .home-mobile-ring::before {
    content: "" !important;
    position: absolute !important;
    inset: 12px !important;
    border-radius: 50% !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42)),
      rgba(255, 255, 255, 0.42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-ring strong,
  html body #homeDashboard .home-mobile-ring strong,
  html body .home-mobile-ring strong {
    position: relative !important;
    z-index: 1 !important;
    margin-top: -4px !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-ring small,
  html body #homeDashboard .home-mobile-ring small,
  html body .home-mobile-ring small {
    position: relative !important;
    z-index: 1 !important;
    margin-top: -18px !important;
    color: rgba(68, 76, 90, 0.54) !important;
    font-size: 7px !important;
    font-weight: 640 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metrics,
  html body #homeDashboard .home-mobile-metrics,
  html body .home-mobile-metrics {
    gap: 12px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric,
  html body #homeDashboard .home-mobile-metric,
  html body .home-mobile-metric {
    position: relative !important;
    height: 98px !important;
    min-height: 98px !important;
    padding: 13px 14px 12px !important;
    border-radius: 23px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.17)),
      linear-gradient(20deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric em,
  html body #homeDashboard .home-mobile-metric em,
  html body .home-mobile-metric em {
    position: absolute !important;
    top: 12px !important;
    right: 13px !important;
    display: grid !important;
    width: 24px !important;
    height: 24px !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: color-mix(in srgb, var(--accent) 74%, #5c6473) !important;
    background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.28)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric em svg,
  html body #homeDashboard .home-mobile-metric em svg,
  html body .home-mobile-metric em svg {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 2 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric span,
  html body #homeDashboard .home-mobile-metric span,
  html body .home-mobile-metric span {
    padding-right: 30px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric strong,
  html body #homeDashboard .home-mobile-metric strong,
  html body .home-mobile-metric strong {
    margin-top: 9px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric small,
  html body #homeDashboard .home-mobile-metric small,
  html body .home-mobile-metric small {
    display: block !important;
    margin-top: 5px !important;
    color: rgba(78, 86, 100, 0.5) !important;
    font-size: 10.5px !important;
    font-weight: 590 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric i,
  html body #homeDashboard .home-mobile-metric i,
  html body .home-mobile-metric i {
    position: absolute !important;
    left: 14px !important;
    bottom: 10px !important;
    width: 34px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task-list,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick > div,
  html body #homeDashboard .home-mobile-task-list,
  html body #homeDashboard .home-mobile-quick > div,
  html body .home-mobile-task-list,
  html body .home-mobile-quick > div {
    grid-template-rows: repeat(2, 96px) !important;
    grid-auto-rows: 96px !important;
    gap: 12px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button,
  html body #homeDashboard .home-mobile-task,
  html body #homeDashboard .home-mobile-quick button,
  html body .home-mobile-task,
  html body .home-mobile-quick button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 24px !important;
    grid-template-rows: 22px 1fr auto !important;
    height: 96px !important;
    min-height: 96px !important;
    padding: 14px 15px 12px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task::before,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button::before,
  html body #homeDashboard .home-mobile-task::before,
  html body #homeDashboard .home-mobile-quick button::before,
  html body .home-mobile-task::before,
  html body .home-mobile-quick button::before {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.15)),
      linear-gradient(24deg, rgba(0, 122, 255, 0.045), rgba(52, 199, 89, 0.035) 55%, transparent) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task.active::before,
  html body #homeDashboard .home-mobile-task.active::before,
  html body .home-mobile-task.active::before {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)),
      linear-gradient(24deg, rgba(52, 199, 89, 0.1), rgba(0, 122, 255, 0.055) 64%, transparent) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task > span,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button span,
  html body #homeDashboard .home-mobile-task > span,
  html body #homeDashboard .home-mobile-quick button span,
  html body .home-mobile-task > span,
  html body .home-mobile-quick button span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 22px !important;
    height: 22px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task em,
  html body #homeDashboard .home-mobile-task em,
  html body .home-mobile-task em {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 22px !important;
    height: 22px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task b,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button strong,
  html body #homeDashboard .home-mobile-task b,
  html body #homeDashboard .home-mobile-quick button strong,
  html body .home-mobile-task b,
  html body .home-mobile-quick button strong {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: end !important;
    font-size: clamp(18px, 4.9vw, 21px) !important;
    font-weight: 670 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task small,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button small,
  html body #homeDashboard .home-mobile-task small,
  html body #homeDashboard .home-mobile-quick button small,
  html body .home-mobile-task small,
  html body .home-mobile-quick button small {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: block !important;
    margin-top: 4px !important;
    color: rgba(76, 84, 98, 0.52) !important;
    font-size: 10.5px !important;
    font-weight: 590 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body .mobile-tabbar {
    min-height: 66px !important;
    padding: 8px !important;
    border-color: rgba(255, 255, 255, 0.62) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)),
      rgba(255, 255, 255, 0.24) !important;
  }

  html body .mobile-tab {
    min-height: 48px !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    background: rgba(255, 255, 255, 0.12) !important;
  }

  html body .mobile-tab.active {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.22)),
      rgba(255, 255, 255, 0.18) !important;
  }
}

/* Mobile home hero layout lock: title top, action left-bottom, progress right-bottom. */
@media (max-width: 980px) {
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-hero,
  html body #homeDashboard .home-mobile-hero,
  html body .home-mobile-hero {
    padding: 42px clamp(18px, 5vw, 24px) 108px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-primary,
  html body #homeDashboard .home-mobile-primary,
  html body .home-mobile-primary {
    position: absolute !important;
    left: clamp(18px, 5vw, 24px) !important;
    right: auto !important;
    top: auto !important;
    bottom: 26px !important;
    max-width: calc(100% - 132px) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-ring,
  html body #homeDashboard .home-mobile-ring,
  html body .home-mobile-ring {
    position: absolute !important;
    top: auto !important;
    right: clamp(22px, 7vw, 34px) !important;
    bottom: 22px !important;
    left: auto !important;
    margin: 0 !important;
  }
}

/* Final desktop quick center scale: make the four shortcut labels match the card size. */
@media (min-width: 981px) {
  html body.view-dashboard #dashboard .home-web-quick > div {
    gap: clamp(18px, 1.15vw, 24px) !important;
  }

  html body.view-dashboard #dashboard .home-web-quick button {
    grid-template-columns: clamp(54px, 3vw, 64px) minmax(0, 1fr) 22px !important;
    gap: clamp(18px, 1.15vw, 24px) !important;
    min-height: clamp(92px, 5.7vw, 116px) !important;
    padding: clamp(18px, 1.15vw, 24px) clamp(22px, 1.4vw, 30px) !important;
    border-radius: 26px !important;
  }

  html body.view-dashboard #dashboard .home-web-quick button span {
    width: clamp(54px, 3vw, 64px) !important;
    height: clamp(54px, 3vw, 64px) !important;
    border-radius: 18px !important;
  }

  html body.view-dashboard #dashboard .home-web-quick button span svg,
  html body.view-dashboard #dashboard .home-web-quick button > svg {
    width: clamp(27px, 1.45vw, 32px) !important;
    height: clamp(27px, 1.45vw, 32px) !important;
    stroke-width: 2.2 !important;
  }

  html body.view-dashboard #dashboard .home-web-quick button strong {
    font-size: clamp(22px, 1.28vw, 28px) !important;
    font-weight: 760 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  html body.view-dashboard #dashboard .home-web-quick button em {
    font-size: clamp(20px, 1.08vw, 24px) !important;
  }
}

/* Home metrics accent: use color on values, not underline bars. */
@media (min-width: 981px) {
  html body.view-dashboard #dashboard .home-web-metric strong {
    color: var(--accent) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  }

  html body.view-dashboard #dashboard .home-web-metric i {
    display: none !important;
  }
}

@media (max-width: 980px) {
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric strong,
  html body #homeDashboard .home-mobile-metric strong,
  html body .home-mobile-metric strong {
    color: var(--accent) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric i,
  html body #homeDashboard .home-mobile-metric i,
  html body .home-mobile-metric i {
    display: none !important;
  }
}

/* Final desktop practice bank cards: compact adaptive squares instead of wide rows. */
@media (min-width: 981px) {
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card-grid,
  html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: clamp(20px, 1.5vw, 28px) !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card,
  html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    align-items: start !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: clamp(17px, 1.15vw, 22px) !important;
    border-radius: 26px !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card .figma-type-dot,
  html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card .figma-type-dot {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 16px !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card .mobile-type-meta,
  html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card .mobile-type-meta {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    white-space: nowrap !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card strong,
  html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card strong {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: end !important;
    margin-top: 18px !important;
    color: rgba(24, 28, 36, 0.86) !important;
    font-size: clamp(19px, 1.12vw, 24px) !important;
    line-height: 1.08 !important;
    font-weight: 760 !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card small,
  html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card small {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin-top: 12px !important;
    color: rgba(83, 90, 104, 0.68) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card i,
  html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card i {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    margin-top: 14px !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card b,
  html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card b {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    margin-top: 10px !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card-grid,
  html body.view-practice #practice:not(.practice-detail-mode) .figma-type-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Final desktop home action type: keep subject cards and quick cards visually equal. */
@media (min-width: 981px) {
  html body.view-dashboard #dashboard .home-web-task b,
  html body.view-dashboard #dashboard .home-web-quick button strong {
    font-size: clamp(24px, 1.32vw, 28px) !important;
    font-weight: 760 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  html body.view-dashboard #dashboard .home-web-task em,
  html body.view-dashboard #dashboard .home-web-quick button em {
    font-size: clamp(20px, 1.08vw, 24px) !important;
  }
}

/* Final home metrics clean-up: keep values neutral and remove helper copy. */
@media (min-width: 981px) {
  html body.view-dashboard #dashboard .home-web-metric strong {
    color: rgba(22, 26, 34, 0.82) !important;
    font-size: clamp(34px, 2vw, 42px) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.64) !important;
  }

  html body.view-dashboard #dashboard .home-web-metric p {
    display: none !important;
  }
}

@media (max-width: 980px) {
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric strong,
  html body #homeDashboard .home-mobile-metric strong,
  html body .home-mobile-metric strong {
    color: rgba(22, 26, 34, 0.82) !important;
    font-size: clamp(34px, 9vw, 42px) !important;
    font-weight: 690 !important;
    line-height: 1 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.64) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric small,
  html body #homeDashboard .home-mobile-metric small,
  html body .home-mobile-metric small {
    display: none !important;
  }
}

/* Mock page final lock: match the compact competitor-style layout seen in QA. */
html body.view-mock {
  background: #f7f7f8 !important;
}

html body.view-mock #mock.active-view {
  padding-top: 58px !important;
  padding-inline: clamp(28px, 3.8vw, 80px) !important;
}

html body.view-mock #mock.active-view .mock-page-head {
  display: block !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.view-mock #mock.active-view .mock-page-head h2 {
  margin: 0 !important;
  color: #1f2933 !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
}

html body.view-mock #mock.active-view .mock-center-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 58px !important;
}

html body.view-mock #mock.active-view .mock-redesign-history {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.view-mock #mock.active-view .mock-redesign-history-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  border: 1px solid #edf0f2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.045) !important;
}

html body.view-mock #mock.active-view .mock-history-row,
html body.view-mock #mock.active-view .mock-redesign-history-list article {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px 124px !important;
  gap: 16px !important;
  align-items: center !important;
  min-height: 74px !important;
  height: 74px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-bottom: 1px solid #edf0f2 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body.view-mock #mock.active-view .mock-history-row:last-child,
html body.view-mock #mock.active-view .mock-redesign-history-list article:last-child {
  border-bottom: 0 !important;
}

html body.view-mock #mock.active-view .mock-history-main {
  display: grid !important;
  gap: 9px !important;
  min-width: 0 !important;
}

html body.view-mock #mock.active-view .mock-history-main strong {
  overflow: hidden !important;
  color: #1f2933 !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .mock-history-main span {
  color: #8b95a1 !important;
  font-size: 13px !important;
  font-weight: 520 !important;
  line-height: 1.2 !important;
}

html body.view-mock #mock.active-view .mock-history-delete {
  position: relative !important;
  justify-self: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #ff6470 !important;
  color: transparent !important;
  cursor: pointer !important;
}

html body.view-mock #mock.active-view .mock-history-delete-placeholder {
  visibility: hidden !important;
}

html body.view-mock #mock.active-view .mock-history-action {
  justify-self: end !important;
  min-width: 116px !important;
  min-height: 34px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #13c8b7 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html body.view-mock #mock.active-view .mock-history-more {
  display: block !important;
  justify-self: end !important;
  width: max-content !important;
  margin: 10px 22px 0 auto !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #8b9097 !important;
  font-size: 12px !important;
  font-weight: 520 !important;
  cursor: pointer !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  min-height: 0 !important;
  padding: 0 24px 36px !important;
  border: 1px solid #edf0f2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.045) !important;
  overflow: visible !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench::before {
  content: "PTE 模考" !important;
  position: absolute !important;
  left: 0 !important;
  top: -42px !important;
  color: #1f2933 !important;
  font-size: 18px !important;
  font-weight: 760 !important;
}

html body.view-mock #mock.active-view .mock-paper-detail {
  order: -3 !important;
  display: block !important;
  margin: 0 -24px !important;
  min-height: 38px !important;
}

html body.view-mock #mock.active-view .mock-exam-mode-switch {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 0.85fr) !important;
  width: min(456px, calc(100% - 32px)) !important;
  height: 38px !important;
  margin: 0 32px 0 auto !important;
  overflow: hidden !important;
  border-radius: 14px 14px 0 0 !important;
  background: #d9dedc !important;
}

html body.view-mock #mock.active-view .mock-exam-mode-switch button {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8a9096 !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

html body.view-mock #mock.active-view .mock-exam-mode-switch button.active {
  color: #fff !important;
  background: #13c8b7 !important;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 100%, 0 100%) !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs {
  order: -2 !important;
  display: flex !important;
  gap: 44px !important;
  margin: 26px 14px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #dfe4e8 !important;
  overflow-x: auto !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs button {
  position: relative !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8b9097 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs button.active {
  color: #13c8b7 !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs button.active::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 2px !important;
  background: #13c8b7 !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar {
  display: grid !important;
  grid-template-columns: auto minmax(240px, 1fr) !important;
  gap: 24px !important;
  align-items: center !important;
  margin: 28px 14px 22px !important;
  padding: 0 !important;
}

html body.view-mock #mock.active-view .mock-paper-filters {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  gap: 20px !important;
  min-width: 0 !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button {
  min-width: 112px !important;
  min-height: 36px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f7f7f7 !important;
  color: #8b9097 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button.active {
  background: #13c8b7 !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(19, 200, 183, 0.18) !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  width: min(300px, 100%) !important;
  min-height: 36px !important;
  border: 1px solid #edf0f2 !important;
  border-radius: 999px !important;
  background: #fafafa !important;
}

html body.view-mock #mock.active-view .mock-paper-list {
  display: grid !important;
  gap: 0 !important;
  margin: 0 14px !important;
  padding: 0 !important;
  border-top: 1px solid #edf0f2 !important;
}

html body.view-mock #mock.active-view .mock-paper-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 190px 34px !important;
  gap: 18px !important;
  align-items: center !important;
  min-height: 70px !important;
  height: 70px !important;
  padding: 0 12px 0 26px !important;
  border: 0 !important;
  border-bottom: 1px solid #edf0f2 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: left !important;
  overflow: hidden !important;
}

html body.view-mock #mock.active-view .mock-paper-card.active {
  background: #fbfffe !important;
}

html body.view-mock #mock.active-view .mock-paper-ribbon,
html body.view-mock #mock.active-view .mock-paper-index,
html body.view-mock #mock.active-view .mock-paper-copy em,
html body.view-mock #mock.active-view .mock-paper-card > i,
html body.view-mock #mock.active-view .mock-paper-card.active::before {
  display: none !important;
  content: none !important;
}

html body.view-mock #mock.active-view .mock-paper-card::after {
  content: ">" !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  color: #26313b !important;
  font-size: 26px !important;
  font-weight: 320 !important;
  line-height: 1 !important;
}

html body.view-mock #mock.active-view .mock-paper-copy {
  min-width: 0 !important;
}

html body.view-mock #mock.active-view .mock-paper-copy strong {
  display: block !important;
  overflow: hidden !important;
  color: #313942 !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .mock-paper-copy p {
  display: none !important;
}

html body.view-mock #mock.active-view .mock-paper-copy small {
  display: block !important;
  margin-top: 4px !important;
  color: #8b95a1 !important;
  font-size: 12px !important;
  font-weight: 520 !important;
}

html body.view-mock #mock.active-view .mock-paper-meta {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 9px !important;
  color: #8b95a1 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  html body.view-mock #mock.active-view {
    padding-top: 24px !important;
    padding-inline: 16px !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    gap: 48px !important;
  }

  html body.view-mock #mock.active-view .mock-history-row,
  html body.view-mock #mock.active-view .mock-redesign-history-list article {
    grid-template-columns: minmax(0, 1fr) 36px !important;
    height: auto !important;
    min-height: 92px !important;
    padding: 14px 16px !important;
  }

  html body.view-mock #mock.active-view .mock-history-action {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    padding: 0 16px 28px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-detail {
    margin: 0 -16px !important;
  }

  html body.view-mock #mock.active-view .mock-exam-mode-switch {
    width: auto !important;
    margin: 0 12px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs {
    gap: 16px !important;
    margin-inline: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-inline: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-filters {
    overflow-x: auto !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
    width: auto !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list {
    margin-inline: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-card {
    grid-template-columns: minmax(0, 1fr) 24px !important;
    height: auto !important;
    min-height: 78px !important;
    padding: 14px 8px 14px 12px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-card::after {
    grid-column: 2 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-meta {
    display: none !important;
  }
}

/* Product Design reset for the mock page: clean components detached from legacy mock cards. */
html body.view-mock #mock.active-view {
  padding-top: 56px !important;
  padding-inline: clamp(32px, 5vw, 88px) !important;
  background: transparent !important;
}

html body.view-mock #mock.active-view .mock-page-head {
  margin: 0 0 18px !important;
  padding: 0 !important;
}

html body.view-mock #mock.active-view .mock-page-head h2 {
  font-size: 18px !important;
  font-weight: 760 !important;
}

html body.view-mock #mock.active-view .mock-center-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 58px !important;
}

html body.view-mock #mock.active-view .mock-command-center {
  order: -1 !important;
  display: block !important;
}

html body.view-mock #mock.active-view .mock-redesign-history {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.view-mock #mock.active-view .mock-redesign-history-list {
  display: block !important;
  overflow: hidden !important;
  border: 1px solid rgba(224, 229, 235, 0.9) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.045) !important;
}

html body.view-mock #mock.active-view .pte-history-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px 132px !important;
  gap: 18px !important;
  align-items: center !important;
  height: 76px !important;
  padding: 0 24px !important;
  border-bottom: 1px solid rgba(236, 239, 243, 0.96) !important;
  background: #fff !important;
}

html body.view-mock #mock.active-view .pte-history-main {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body.view-mock #mock.active-view .pte-history-main strong {
  overflow: hidden !important;
  color: #202a34 !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .pte-history-main span {
  color: #95a0ac !important;
  font-size: 13px !important;
  font-weight: 560 !important;
}

html body.view-mock #mock.active-view .pte-history-delete {
  justify-self: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #ff6470 !important;
  color: transparent !important;
}

html body.view-mock #mock.active-view .pte-history-delete-placeholder {
  visibility: hidden !important;
}

html body.view-mock #mock.active-view .pte-history-action {
  justify-self: end !important;
  min-width: 124px !important;
  height: 34px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #13c8b7 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 740 !important;
  box-shadow: 0 12px 26px rgba(19, 200, 183, 0.2) !important;
}

html body.view-mock #mock.active-view .mock-history-more {
  display: block !important;
  margin: 10px 22px 0 auto !important;
  width: max-content !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #8f969f !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench {
  position: relative !important;
  display: grid !important;
  gap: 0 !important;
  padding: 0 36px 34px !important;
  border: 1px solid rgba(224, 229, 235, 0.9) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.045) !important;
  overflow: visible !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench::before {
  content: "PTE 模考" !important;
  position: absolute !important;
  left: 0 !important;
  top: -42px !important;
  color: #202a34 !important;
  font-size: 18px !important;
  font-weight: 760 !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench::after {
  content: none !important;
  display: none !important;
}

html body.view-mock #mock.active-view .mock-paper-detail {
  order: -3 !important;
  display: block !important;
  min-height: 38px !important;
  margin: 0 -36px !important;
}

html body.view-mock #mock.active-view .pte-mode-switch {
  display: grid !important;
  grid-template-columns: minmax(240px, 1.2fr) minmax(170px, 0.85fr) !important;
  width: min(520px, calc(100% - 60px)) !important;
  height: 38px !important;
  margin: 0 40px 0 auto !important;
  overflow: hidden !important;
  border-radius: 14px 14px 0 0 !important;
  background: #d9dedc !important;
}

html body.view-mock #mock.active-view .pte-mode-switch button {
  min-height: 38px !important;
  border: 0 !important;
  background: transparent !important;
  color: #8f969f !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .pte-mode-switch button.active {
  color: #fff !important;
  background: #13c8b7 !important;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 100%, 0 100%) !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs {
  order: -2 !important;
  display: flex !important;
  gap: 48px !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #dfe4e8 !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs button {
  position: relative !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8f969f !important;
  font-size: 14px !important;
  font-weight: 740 !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs button.active::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: -1px !important;
  left: 0 !important;
  height: 2px !important;
  background: #13c8b7 !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px) !important;
  gap: 24px !important;
  align-items: center !important;
  margin: 26px 0 20px !important;
  padding: 0 !important;
}

html body.view-mock #mock.active-view .mock-paper-filters {
  display: flex !important;
  gap: 20px !important;
  min-width: 0 !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button {
  min-width: 112px !important;
  min-height: 36px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f7f7f7 !important;
  color: #8f969f !important;
  font-size: 14px !important;
  font-weight: 740 !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button.active {
  background: #13c8b7 !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(19, 200, 183, 0.16) !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
  justify-self: end !important;
  width: 100% !important;
  min-height: 36px !important;
  border: 1px solid #edf0f2 !important;
  border-radius: 999px !important;
  background: #fafafa !important;
}

html body.view-mock #mock.active-view .mock-paper-list {
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid #edf0f2 !important;
}

html body.view-mock #mock.active-view .pte-paper-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 28px !important;
  gap: 20px !important;
  align-items: center !important;
  min-height: 74px !important;
  padding: 0 10px 0 28px !important;
  border: 0 !important;
  border-bottom: 1px solid #edf0f2 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: left !important;
}

html body.view-mock #mock.active-view .pte-paper-row.active {
  background: #fbfffe !important;
}

html body.view-mock #mock.active-view .pte-paper-copy {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

html body.view-mock #mock.active-view .pte-paper-copy strong {
  overflow: hidden !important;
  color: #202a34 !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .pte-paper-copy span {
  overflow: hidden !important;
  color: #9aa3ad !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .pte-paper-meta {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  color: #7f8994 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .pte-paper-meta span:first-child {
  min-height: 24px !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  background: #fff3cf !important;
  color: #8b7a4b !important;
}

html body.view-mock #mock.active-view .pte-paper-row i {
  justify-self: center !important;
  color: #202a34 !important;
  font-size: 24px !important;
  font-style: normal !important;
  font-weight: 360 !important;
}

@media (max-width: 760px) {
  html body.view-mock #mock.active-view {
    padding-top: 24px !important;
    padding-inline: 16px !important;
  }

  html body.view-mock #mock.active-view .pte-history-row {
    grid-template-columns: minmax(0, 1fr) 36px !important;
    height: auto !important;
    min-height: 96px !important;
    padding: 14px 16px !important;
  }

  html body.view-mock #mock.active-view .pte-history-action {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    padding: 0 16px 28px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-detail {
    margin: 0 -16px !important;
  }

  html body.view-mock #mock.active-view .pte-mode-switch {
    width: auto !important;
    margin: 0 12px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs {
    gap: 18px !important;
    overflow-x: auto !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-filters {
    overflow-x: auto !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
    justify-self: stretch !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row {
    grid-template-columns: minmax(0, 1fr) 24px !important;
    padding: 14px 8px 14px 12px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row i {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }
}

/* Mobile home calm typography pass: remove helper copy and reduce oversized text. */
@media (max-width: 980px) {
  html body #dashboard.active-view .home-v2-mobile-trial small,
  html body #homeDashboard .home-v2-mobile-trial small,
  html body .home-v2-mobile-trial small {
    display: none !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial,
  html body #homeDashboard .home-v2-mobile-trial,
  html body .home-v2-mobile-trial {
    gap: 12px !important;
    color: rgba(28, 32, 40, 0.72) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-hero,
  html body #homeDashboard .home-mobile-hero,
  html body .home-mobile-hero {
    min-height: 250px !important;
    padding: 34px clamp(18px, 5vw, 24px) 92px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-hero h2,
  html body #homeDashboard .home-mobile-hero h2,
  html body .home-mobile-hero h2 {
    max-width: min(100%, 300px) !important;
    color: rgba(28, 32, 40, 0.78) !important;
    font-size: clamp(25px, 7.1vw, 30px) !important;
    font-weight: 650 !important;
    line-height: 1.16 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-primary,
  html body #homeDashboard .home-mobile-primary,
  html body .home-mobile-primary {
    bottom: 22px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    color: rgba(36, 42, 52, 0.72) !important;
    font-size: 13px !important;
    font-weight: 610 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-ring,
  html body #homeDashboard .home-mobile-ring,
  html body .home-mobile-ring {
    bottom: 18px !important;
    width: 68px !important;
    height: 68px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-ring::before,
  html body #homeDashboard .home-mobile-ring::before,
  html body .home-mobile-ring::before {
    inset: 10px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-ring strong,
  html body #homeDashboard .home-mobile-ring strong,
  html body .home-mobile-ring strong {
    margin: 0 !important;
    color: rgba(30, 34, 42, 0.76) !important;
    font-size: 18px !important;
    font-weight: 620 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metrics,
  html body #homeDashboard .home-mobile-metrics,
  html body .home-mobile-metrics {
    gap: 10px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric,
  html body #homeDashboard .home-mobile-metric,
  html body .home-mobile-metric {
    height: 86px !important;
    min-height: 86px !important;
    padding: 12px 14px 11px !important;
    border-radius: 22px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric em,
  html body #homeDashboard .home-mobile-metric em,
  html body .home-mobile-metric em {
    top: 11px !important;
    right: 12px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 9px !important;
    opacity: 0.82 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric em svg,
  html body #homeDashboard .home-mobile-metric em svg,
  html body .home-mobile-metric em svg {
    width: 13px !important;
    height: 13px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric span,
  html body #homeDashboard .home-mobile-metric span,
  html body .home-mobile-metric span {
    color: rgba(74, 82, 96, 0.56) !important;
    font-size: 11.5px !important;
    font-weight: 570 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric strong,
  html body #homeDashboard .home-mobile-metric strong,
  html body .home-mobile-metric strong {
    margin-top: 9px !important;
    color: rgba(28, 32, 40, 0.76) !important;
    font-size: clamp(22px, 5.7vw, 25px) !important;
    font-weight: 620 !important;
    line-height: 1 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-metric i,
  html body #homeDashboard .home-mobile-metric i,
  html body .home-mobile-metric i {
    bottom: 10px !important;
    width: 28px !important;
    opacity: 0.48 !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task-list,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick > div,
  html body #homeDashboard .home-mobile-task-list,
  html body #homeDashboard .home-mobile-quick > div,
  html body .home-mobile-task-list,
  html body .home-mobile-quick > div {
    grid-template-rows: repeat(2, 82px) !important;
    grid-auto-rows: 82px !important;
    gap: 10px 12px !important;
    padding: 1px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button,
  html body #homeDashboard .home-mobile-task,
  html body #homeDashboard .home-mobile-quick button,
  html body .home-mobile-task,
  html body .home-mobile-quick button {
    grid-template-columns: minmax(0, 1fr) 22px !important;
    grid-template-rows: 22px 1fr !important;
    height: 82px !important;
    min-height: 82px !important;
    padding: 13px 14px 12px !important;
    border-radius: 22px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task > span,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button span,
  html body #homeDashboard .home-mobile-task > span,
  html body #homeDashboard .home-mobile-quick button span,
  html body .home-mobile-task > span,
  html body .home-mobile-quick button span {
    width: 20px !important;
    height: 20px !important;
    color: rgba(82, 90, 104, 0.5) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task > span svg,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button span svg,
  html body #homeDashboard .home-mobile-task > span svg,
  html body #homeDashboard .home-mobile-quick button span svg,
  html body .home-mobile-task > span svg,
  html body .home-mobile-quick button span svg {
    width: 16px !important;
    height: 16px !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task b,
  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-quick button strong,
  html body #homeDashboard .home-mobile-task b,
  html body #homeDashboard .home-mobile-quick button strong,
  html body .home-mobile-task b,
  html body .home-mobile-quick button strong {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: end !important;
    color: rgba(28, 32, 40, 0.78) !important;
    font-size: clamp(16px, 4.35vw, 18px) !important;
    font-weight: 620 !important;
    line-height: 1.08 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  html body #dashboard.active-view .home-v2-mobile-trial .home-mobile-task em,
  html body #homeDashboard .home-mobile-task em,
  html body .home-mobile-task em {
    width: 20px !important;
    height: 20px !important;
    color: rgba(0, 122, 255, 0.54) !important;
    opacity: 0.72 !important;
  }

  html body .mobile-tabbar {
    min-height: 62px !important;
    padding: 7px !important;
  }

  html body .mobile-tab {
    min-height: 44px !important;
    font-size: 13px !important;
    font-weight: 580 !important;
  }

  html body .mobile-tab.active {
    font-weight: 620 !important;
  }
}

/* Mock glass polish pass: reduce dead space, keep cards in the product's frosted style. */
@media (min-width: 981px) {
  html body.view-mock .app-shell {
    padding-top: 104px !important;
  }

  html body.view-mock .main {
    padding-top: 0 !important;
  }
}

html body.view-mock {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.82), transparent 34%),
    linear-gradient(180deg, #f6f7f9 0%, #eef2f5 100%) !important;
}

html body.view-mock #mock.active-view {
  padding-top: 18px !important;
  padding-inline: clamp(32px, 5vw, 88px) !important;
}

html body.view-mock #mock.active-view .mock-page-head {
  margin: 0 0 14px !important;
}

html body.view-mock #mock.active-view .mock-page-head h2,
html body.view-mock #mock.active-view .mock-paper-workbench::before {
  color: rgba(24, 30, 40, 0.9) !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

html body.view-mock #mock.active-view .mock-center-layout {
  gap: 46px !important;
}

html body.view-mock #mock.active-view .mock-redesign-history {
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.78), transparent 50%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.18)),
    rgba(255, 255, 255, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 24px 56px -44px rgba(15, 23, 42, 0.38) !important;
  backdrop-filter: blur(30px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.16) !important;
  padding: 22px 28px 18px !important;
  overflow: visible !important;
}

html body.view-mock #mock.active-view .mock-redesign-history-list {
  display: block !important;
  overflow: visible !important;
  border: 1px solid rgba(223, 229, 236, 0.66) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 18px 42px -38px rgba(15, 23, 42, 0.34) !important;
  backdrop-filter: blur(20px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
}

html body.view-mock #mock.active-view .pte-history-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px 138px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  height: 82px !important;
  min-height: 82px !important;
  padding: 0 24px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

html body.view-mock #mock.active-view .pte-history-main {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

html body.view-mock #mock.active-view .pte-history-delete,
html body.view-mock #mock.active-view .pte-history-delete-placeholder {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

html body.view-mock #mock.active-view .pte-history-action {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  display: grid !important;
  place-items: center !important;
  min-width: 126px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #13c8b7 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 740 !important;
  line-height: 1 !important;
  box-shadow: 0 14px 28px -18px rgba(19, 200, 183, 0.76) !important;
  transform: none !important;
}

html body.view-mock #mock.active-view .mock-history-more {
  margin: 10px 18px 0 auto !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench {
  padding: 0 36px 26px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.8), transparent 52%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.18)),
    rgba(255, 255, 255, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 24px 56px -44px rgba(15, 23, 42, 0.38) !important;
  backdrop-filter: blur(30px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.16) !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench::before {
  top: -38px !important;
}

html body.view-mock #mock.active-view .mock-paper-detail {
  margin: 0 -36px !important;
  min-height: 52px !important;
}

html body.view-mock #mock.active-view .pte-mode-switch {
  width: min(520px, calc(100% - 60px)) !important;
  height: 38px !important;
  margin: 0 42px 0 auto !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs {
  margin: 14px 0 0 !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar {
  margin: 20px 0 16px !important;
}

html body.view-mock #mock.active-view .mock-paper-list {
  max-height: none !important;
  overflow: visible !important;
  border-top-color: rgba(224, 231, 238, 0.66) !important;
}

html body.view-mock #mock.active-view .pte-paper-row {
  min-height: 70px !important;
  padding: 0 10px 0 26px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border-bottom: 1px solid rgba(224, 231, 238, 0.64) !important;
}

html body.view-mock #mock.active-view .pte-paper-row.active,
html body.view-mock #mock.active-view .pte-paper-row:hover {
  background: rgba(255, 255, 255, 0.34) !important;
}

html body.view-mock #mock.active-view .pte-paper-copy strong {
  color: rgba(24, 30, 40, 0.9) !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button,
html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
  background: rgba(255, 255, 255, 0.34) !important;
  border: 1px solid rgba(255, 255, 255, 0.54) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button.active {
  border-color: rgba(19, 200, 183, 0.48) !important;
  background: #13c8b7 !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  html body.view-mock #mock.active-view {
    padding-top: 14px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  html body.view-mock #mock.active-view .pte-history-row {
    grid-template-columns: minmax(0, 1fr) 36px !important;
    height: auto !important;
    min-height: 100px !important;
    padding: 14px !important;
  }

  html body.view-mock #mock.active-view .pte-history-action {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    padding: 0 16px 22px !important;
    border-radius: 18px !important;
  }
}

/* Final desktop home calm card typography: keep dashboard cards useful, not shouty. */
@media (min-width: 981px) {
  html body.view-dashboard #dashboard .home-v2-desktop-trial {
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
  }

  html body.view-dashboard #dashboard .home-web-card {
    padding: clamp(22px, 1.45vw, 28px) !important;
  }

  html body.view-dashboard #dashboard .home-web-metric {
    min-height: clamp(104px, 6vw, 124px) !important;
    padding: clamp(18px, 1.1vw, 22px) !important;
    align-content: start !important;
  }

  html body.view-dashboard #dashboard .home-web-metric span,
  html body.view-dashboard #dashboard .home-web-head > span {
    color: rgba(68, 75, 88, 0.62) !important;
    font-size: clamp(12px, 0.68vw, 13px) !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
  }

  html body.view-dashboard #dashboard .home-web-metric strong {
    margin-top: 9px !important;
    color: var(--accent) !important;
    font-size: clamp(28px, 1.55vw, 32px) !important;
    font-weight: 720 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  }

  html body.view-dashboard #dashboard .home-web-metric p {
    display: block !important;
    margin: 8px 0 0 !important;
    color: rgba(78, 86, 100, 0.58) !important;
    font-size: 12.5px !important;
    font-weight: 590 !important;
    line-height: 1.34 !important;
  }

  html body.view-dashboard #dashboard .home-web-metric i {
    display: none !important;
  }

  html body.view-dashboard #dashboard .home-web-head h3,
  html body.view-dashboard #dashboard .home-web-card h3 {
    color: rgba(22, 26, 34, 0.86) !important;
    font-size: clamp(18px, 1vw, 21px) !important;
    font-weight: 720 !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  html body.view-dashboard #dashboard .home-web-head p {
    color: rgba(78, 86, 100, 0.58) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  html body.view-dashboard #dashboard .home-web-head > span {
    min-width: 72px !important;
    height: 30px !important;
    background: rgba(255, 255, 255, 0.34) !important;
  }

  html body.view-dashboard #dashboard .home-web-task,
  html body.view-dashboard #dashboard .home-web-other button,
  html body.view-dashboard #dashboard .home-web-quick button {
    min-height: clamp(58px, 3.7vw, 72px) !important;
    padding: clamp(12px, 0.8vw, 16px) !important;
    gap: clamp(12px, 0.75vw, 16px) !important;
    border-radius: 20px !important;
  }

  html body.view-dashboard #dashboard .home-web-task > span,
  html body.view-dashboard #dashboard .home-web-other button span,
  html body.view-dashboard #dashboard .home-web-quick button span {
    width: clamp(42px, 2.55vw, 50px) !important;
    height: clamp(42px, 2.55vw, 50px) !important;
    border-radius: 16px !important;
  }

  html body.view-dashboard #dashboard .home-web-task > span svg,
  html body.view-dashboard #dashboard .home-web-other button span svg,
  html body.view-dashboard #dashboard .home-web-quick button span svg {
    width: clamp(21px, 1.16vw, 24px) !important;
    height: clamp(21px, 1.16vw, 24px) !important;
    stroke-width: 2.15 !important;
  }

  html body.view-dashboard #dashboard .home-web-task b,
  html body.view-dashboard #dashboard .home-web-other button strong,
  html body.view-dashboard #dashboard .home-web-quick button strong {
    color: rgba(22, 26, 34, 0.88) !important;
    font-size: clamp(16px, 0.92vw, 18px) !important;
    font-weight: 720 !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.56) !important;
  }

  html body.view-dashboard #dashboard .home-web-task em,
  html body.view-dashboard #dashboard .home-web-other button em,
  html body.view-dashboard #dashboard .home-web-quick button em {
    font-size: clamp(17px, 0.94vw, 20px) !important;
  }

  html body.view-dashboard #dashboard .home-web-weak-list strong {
    color: rgba(28, 32, 40, 0.82) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }

  html body.view-dashboard #dashboard .home-web-weak-list small,
  html body.view-dashboard #dashboard .home-web-weak-list b {
    color: rgba(78, 86, 100, 0.62) !important;
    font-size: 12px !important;
    font-weight: 620 !important;
  }
}

/* TRUE FINAL mobile dashboard lock: keep this after every home override. */
@media (max-width: 760px) {
  html body.view-dashboard #dashboard.active-view {
    padding: 14px 12px calc(108px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  html body.view-dashboard #dashboard .home-v2,
  html body.view-dashboard #dashboard .home-v2-mobile-trial,
  html body #homeDashboard .home-v2-mobile-trial,
  html body .home-v2-mobile-trial {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  html body.view-dashboard #dashboard .home-v2-mobile-trial {
    display: grid !important;
    gap: 12px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 8px 10px !important;
    border-radius: 18px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar img {
    width: 44px !important;
    height: 44px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar strong {
    overflow: hidden !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar small {
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard #dashboard .home-mobile-topbar button {
    min-width: 66px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 34px !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard #dashboard .home-v2-mobile-trial .home-mobile-hero,
  html body #homeDashboard .home-mobile-hero,
  html body .home-mobile-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 64px !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
    min-height: 0 !important;
    height: 142px !important;
    max-height: 142px !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  html body.view-dashboard #dashboard .home-v2-mobile-trial .home-mobile-hero::before,
  html body.view-dashboard #dashboard .home-v2-mobile-trial .home-mobile-hero::after,
  html body #homeDashboard .home-mobile-hero::before,
  html body #homeDashboard .home-mobile-hero::after,
  html body .home-mobile-hero::before,
  html body .home-mobile-hero::after {
    display: none !important;
  }

  html body.view-dashboard #dashboard .home-mobile-hero > div:first-child,
  html body #homeDashboard .home-mobile-hero > div:first-child,
  html body .home-mobile-hero > div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body.view-dashboard #dashboard .home-mobile-hero h2,
  html body #homeDashboard .home-mobile-hero h2,
  html body .home-mobile-hero h2 {
    max-width: 9em !important;
    margin: 0 !important;
    font-size: 21px !important;
    line-height: 1.1 !important;
  }

  html body.view-dashboard #dashboard .home-mobile-primary {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: start !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    line-height: 34px !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard #dashboard .home-mobile-ring {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: end !important;
    width: 58px !important;
    height: 58px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-metrics,
  html body #homeDashboard .home-mobile-metrics,
  html body .home-mobile-metrics,
  html body.view-dashboard #dashboard .home-mobile-task-list,
  html body.view-dashboard #dashboard .home-mobile-quick > div,
  html body #homeDashboard .home-mobile-task-list,
  html body .home-mobile-task-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  html body.view-dashboard #dashboard .home-mobile-metric {
    min-height: 78px !important;
    height: auto !important;
    padding: 11px !important;
    border-radius: 18px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-task,
  html body.view-dashboard #dashboard .home-mobile-quick button,
  html body #homeDashboard .home-mobile-task,
  html body .home-mobile-task {
    min-height: 74px !important;
    height: auto !important;
    padding: 11px !important;
    border-radius: 18px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-section {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-dashboard #dashboard .home-mobile-section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    margin: 4px 2px -2px !important;
  }

  html body.view-dashboard #dashboard .home-mobile-task,
  html body.view-dashboard #dashboard .home-mobile-quick button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html body.view-dashboard .mobile-tabbar {
    left: 12px !important;
    right: 12px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 66px !important;
    padding: 8px !important;
    border-radius: 24px !important;
  }
}