/* Consolidated from practice-type-abbrev-final.css during frontend cleanup 2026-07-08. */
/* Practice type cards: restore the visible RA/RS/DI abbreviations inside the glass badge. */
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="RA"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="RA"] { --type-color: #7b45d9; --type-bg: #efe4ff; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="RS"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="RS"] { --type-color: #15955b; --type-bg: #dff8eb; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="DI"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="DI"] { --type-color: #246fca; --type-bg: #e2f0ff; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="RL"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="RL"] { --type-color: #0c947f; --type-bg: #dcf8f1; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="ASQ"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="ASQ"] { --type-color: #31a344; --type-bg: #e4f9dc; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="SGD"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="SGD"] { --type-color: #8a55d7; --type-bg: #f0e5ff; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="RTS"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="RTS"] { --type-color: #d64a42; --type-bg: #ffe4df; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="SWT"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="SWT"] { --type-color: #2f73d8; --type-bg: #e4edff; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="WE"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="WE"] { --type-color: #b67200; --type-bg: #fff1c9; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="FIB-RW"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="FIB-RW"] { --type-color: #c05621; --type-bg: #ffe6d6; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="R-MCM"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-MCM"] { --type-color: #6d8f00; --type-bg: #eef8cf; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="ROP"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="ROP"] { --type-color: #a85b00; --type-bg: #ffedd6; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="R-FIB"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-FIB"] { --type-color: #4f8b2f; --type-bg: #e6f6dc; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="R-MCS"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-MCS"] { --type-color: #7a7f12; --type-bg: #f3f4d6; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="SST"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="SST"] { --type-color: #df5c21; --type-bg: #ffe3d4; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="L-MCM"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-MCM"] { --type-color: #008cba; --type-bg: #dcf4fb; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="L-FIB"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-FIB"] { --type-color: #006fa8; --type-bg: #dff1ff; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="HCS"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="HCS"] { --type-color: #005aa8; --type-bg: #dcecff; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="L-MCS"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-MCS"] { --type-color: #3b66c4; --type-bg: #e3eaff; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="SMW"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="SMW"] { --type-color: #5961c8; --type-bg: #e8e9ff; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="HIW"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="HIW"] { --type-color: #9b4ab8; --type-bg: #f5e1ff; }
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="WFD"],
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="WFD"] { --type-color: #0f6cb8; --type-bg: #e1f0ff; }

html body #practice:not(.practice-detail-mode) .figma-type-card .figma-type-dot,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card .figma-type-dot {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  color: var(--type-color, rgba(32, 38, 48, 0.82)) !important;
  font-size: 0 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

html body #practice:not(.practice-detail-mode) .figma-type-card .figma-type-dot .practice-ui-icon,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card .figma-type-dot .practice-ui-icon {
  display: none !important;
}

html body #practice:not(.practice-detail-mode) .figma-type-card .figma-type-dot::after,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card .figma-type-dot::after {
  content: attr(data-type) !important;
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--type-color, rgba(32, 38, 48, 0.82)) !important;
  font-size: clamp(13px, 0.85vw, 16px) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.76),
    0 -1px 0 rgba(24, 32, 42, 0.08) !important;
}

html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="FIB-RW"] .figma-type-dot::after,
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="R-MCM"] .figma-type-dot::after,
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="R-FIB"] .figma-type-dot::after,
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="R-MCS"] .figma-type-dot::after,
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="L-MCM"] .figma-type-dot::after,
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="L-FIB"] .figma-type-dot::after,
html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="L-MCS"] .figma-type-dot::after,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="FIB-RW"] .figma-type-dot::after,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-MCM"] .figma-type-dot::after,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-FIB"] .figma-type-dot::after,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-MCS"] .figma-type-dot::after,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-MCM"] .figma-type-dot::after,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-FIB"] .figma-type-dot::after,
html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-MCS"] .figma-type-dot::after {
  font-size: clamp(10px, 0.68vw, 12px) !important;
}

@media (max-width: 760px) {
  html body #practice:not(.practice-detail-mode) .figma-type-card .figma-type-dot::after,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card .figma-type-dot::after {
    font-size: 14px !important;
  }

  html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="FIB-RW"] .figma-type-dot::after,
  html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="R-MCM"] .figma-type-dot::after,
  html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="R-FIB"] .figma-type-dot::after,
  html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="R-MCS"] .figma-type-dot::after,
  html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="L-MCM"] .figma-type-dot::after,
  html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="L-FIB"] .figma-type-dot::after,
  html body #practice:not(.practice-detail-mode) .figma-type-card[data-type="L-MCS"] .figma-type-dot::after,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="FIB-RW"] .figma-type-dot::after,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-MCM"] .figma-type-dot::after,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-FIB"] .figma-type-dot::after,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-MCS"] .figma-type-dot::after,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-MCM"] .figma-type-dot::after,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-FIB"] .figma-type-dot::after,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-MCS"] .figma-type-dot::after {
    font-size: 10px !important;
  }
}

/* Mobile type badges should show the colored abbreviation only. */
@media (max-width: 760px) {
  html body #practice:not(.practice-detail-mode) .figma-type-card .figma-type-dot::before,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card .figma-type-dot::before {
    content: none !important;
    display: none !important;
  }

  html body #practice:not(.practice-detail-mode) .figma-type-card .figma-type-dot::after,
  html body #practice.active-view:not(.practice-detail-mode) .figma-type-card .figma-type-dot::after {
    display: block !important;
    width: 100% !important;
    color: var(--type-color, rgba(32, 38, 48, 0.82)) !important;
  }
}

/* Override the more specific mobile subject-selected rule that created a duplicate gray code. */
@media (max-width: 760px) {
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-card .figma-type-dot::before,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-card .figma-type-dot::before,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-dot::before,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-dot::before {
    content: none !important;
    display: none !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-card .figma-type-dot::after,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-selected .figma-type-card .figma-type-dot::after {
    content: attr(data-type) !important;
    display: block !important;
    color: var(--type-color, rgba(32, 38, 48, 0.82)) !important;
  }
}

html body #practice:not(.practice-detail-mode) .feedback-panel,
html body #practice:not(.practice-detail-mode) .feedback-resizer,
html body #practice.active-view:not(.practice-detail-mode) .feedback-panel,
html body #practice.active-view:not(.practice-detail-mode) .feedback-resizer {
  display: none !important;
}

/* Practice detail and scoring polish: glass surface, stable loading motion. */
@media (min-width: 761px) {
  html body #practice.practice-detail-mode {
    background:
      radial-gradient(circle at 11% 10%, rgba(178, 222, 255, 0.2), transparent 32%),
      radial-gradient(circle at 86% 16%, rgba(255, 232, 177, 0.18), transparent 30%),
      linear-gradient(135deg, rgba(247, 252, 252, 0.92), rgba(250, 250, 246, 0.78)) !important;
  }

  html body #practice.practice-detail-mode .practice-dashboard-layout {
    grid-template-columns: minmax(0, 1fr) minmax(348px, clamp(360px, 28vw, 440px)) !important;
    gap: clamp(18px, 1.7vw, 28px) !important;
    align-items: start !important;
    overflow: visible !important;
  }

  html body #practice.practice-detail-mode .feedback-resizer {
    display: none !important;
  }

  html body #practice.practice-detail-mode .stage-practice .practice-workbench {
    grid-template-columns: minmax(156px, 204px) minmax(0, 1fr) !important;
    gap: clamp(14px, 1.2vw, 20px) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body #practice.practice-detail-mode .stage-practice .workbench-resizer {
    display: none !important;
  }

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

  html body #practice.practice-detail-mode .question-browser,
  html body #practice.practice-detail-mode .answer-stage,
  html body #practice.practice-detail-mode .question-card,
  html body #practice.practice-detail-mode .recorder,
  html body #practice.practice-detail-mode .practice-discussion,
  html body #practice.practice-detail-mode .feedback-panel {
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
      rgba(255, 255, 255, 0.46) !important;
    box-shadow:
      0 28px 72px -56px rgba(25, 39, 52, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(170, 210, 205, 0.16) !important;
    backdrop-filter: blur(28px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.18) !important;
  }

  html body #practice.practice-detail-mode .question-card {
    border-radius: 34px !important;
    padding: clamp(24px, 2.2vw, 36px) !important;
  }

  html body #practice.practice-detail-mode .question-title-line h3,
  html body #practice.practice-detail-mode #questionText {
    color: rgba(20, 25, 34, 0.92) !important;
    letter-spacing: 0 !important;
  }

  html body #practice.practice-detail-mode #questionText {
    font-size: clamp(21px, 1.55vw, 28px) !important;
    font-weight: 780 !important;
    line-height: 1.45 !important;
  }

  html body #practice.practice-detail-mode .recorder {
    border-radius: 30px !important;
    padding: 22px 26px !important;
  }

  html body #practice.practice-detail-mode .recorder .wave {
    height: 54px !important;
    border-radius: 999px !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(80, 214, 154, 0.16), transparent 48%),
      rgba(255, 255, 255, 0.52) !important;
  }

  html body #practice.practice-detail-mode .recorder-actions {
    min-height: 66px !important;
  }

  html body #practice.practice-detail-mode .recorder-actions button {
    min-width: 134px !important;
    min-height: 50px !important;
    border-radius: 999px !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring {
    position: sticky !important;
    top: clamp(18px, 3vh, 34px) !important;
    min-height: min(680px, calc(100dvh - 210px)) !important;
    height: min(780px, calc(100dvh - 190px)) !important;
    max-height: calc(100dvh - 190px) !important;
    padding: 28px !important;
    overflow-y: auto !important;
    border-radius: 36px !important;
    animation: scoringPanelBreath 3.4s ease-in-out infinite !important;
  }

  html body #practice.practice-detail-mode .feedback-panel:not(.scoring):not(.has-report) {
    min-height: auto !important;
    height: auto !important;
    max-height: calc(100dvh - 170px) !important;
    padding: 26px !important;
    overflow-y: auto !important;
    border-radius: 36px !important;
  }

  html body #practice.practice-detail-mode .feedback-panel:not(.scoring):not(.has-report) > h2 {
    margin: 12px 0 18px !important;
    color: rgba(18, 23, 32, 0.9) !important;
    font-size: clamp(22px, 1.55vw, 30px) !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
  }

  html body #practice.practice-detail-mode .speech-idle-stack {
    display: grid !important;
    gap: 16px !important;
  }

  html body #practice.practice-detail-mode .feedback-idle-card {
    display: grid !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.36)),
      rgba(255, 255, 255, 0.42) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 18px 44px -36px rgba(25, 39, 52, 0.36) !important;
    backdrop-filter: blur(22px) saturate(1.14) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.14) !important;
  }

  html body #practice.practice-detail-mode .feedback-idle-card .ai-report-illustration {
    width: 100% !important;
    height: clamp(126px, 12vw, 164px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 24px !important;
  }

  html body #practice.practice-detail-mode .feedback-idle-card .ai-report-illustration svg {
    width: 100% !important;
    height: 100% !important;
    transform: scale(0.9) !important;
    transform-origin: center !important;
  }

  html body #practice.practice-detail-mode .feedback-idle-card h3 {
    margin: 0 !important;
    color: rgba(18, 23, 32, 0.9) !important;
    font-size: clamp(20px, 1.3vw, 25px) !important;
    font-weight: 820 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  html body #practice.practice-detail-mode .feedback-idle-card p {
    margin: 0 !important;
    color: rgba(94, 106, 121, 0.72) !important;
    font-size: 14px !important;
    font-weight: 620 !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring > .eyebrow {
    color: rgba(91, 101, 115, 0.72) !important;
    font-size: 12px !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring > h2 {
    margin: 12px 0 8px !important;
    color: rgba(18, 23, 32, 0.92) !important;
    font-size: clamp(24px, 1.55vw, 32px) !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .score-ring {
    display: none !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .ai-breakdown {
    margin: 0 0 18px !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .scoring-subtitle {
    margin: 0 !important;
    color: rgba(97, 107, 121, 0.74) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .feedback-list {
    display: block !important;
    padding: 0 0 10px !important;
    overflow: visible !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading {
    gap: 18px !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-ai-visual-card,
  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-progress-card {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.38)),
      rgba(255, 255, 255, 0.46) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -1px 0 rgba(165, 214, 202, 0.16),
      0 22px 58px -46px rgba(30, 45, 58, 0.48) !important;
    backdrop-filter: blur(24px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.16) !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-card {
    padding: 24px 22px 22px !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-status-line {
    width: min(310px, 100%) !important;
    margin-bottom: 8px !important;
    color: #13a879 !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-status-line strong {
    color: #13a879 !important;
    font-size: 20px !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-status-line strong::before {
    content: "" !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    box-shadow: 0 0 0 8px rgba(19, 168, 121, 0.1) !important;
    animation: scoringDotBreath 1.5s ease-in-out infinite !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-analysis-copy {
    max-width: 360px !important;
    margin-bottom: 18px !important;
    color: rgba(77, 88, 103, 0.76) !important;
    font-size: 14px !important;
    font-weight: 620 !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-panel {
    height: clamp(168px, 18vw, 220px) !important;
    border-color: rgba(52, 221, 196, 0.26) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 18% 45%, rgba(45, 222, 195, 0.16), transparent 38%),
      linear-gradient(135deg, rgba(235, 255, 251, 0.78), rgba(255, 255, 255, 0.5)),
      rgba(255, 255, 255, 0.5) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 20px 50px -42px rgba(14, 17, 23, 0.46) !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-grid {
    inset: 18px !important;
    opacity: 0.28 !important;
    background-image: radial-gradient(circle, rgba(70, 130, 126, 0.22) 1px, transparent 1.3px) !important;
    background-size: 12px 14px !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars {
    inset: 25px 20px !important;
    gap: clamp(3px, 0.65vw, 6px) !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b {
    width: clamp(3px, 0.4vw, 5px) !important;
    background: rgba(193, 202, 211, 0.68) !important;
    animation-name: scoringBarLivePulse !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b:nth-child(-n + 24) {
    background: rgba(34, 211, 193, 0.82) !important;
    box-shadow: 0 0 13px rgba(34, 211, 193, 0.22) !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-scan-beam {
    display: none !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-metric-chips {
    margin-top: 16px !important;
    gap: 9px !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-metric-chips span {
    min-height: 34px !important;
    border-color: rgba(19, 168, 121, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.54) !important;
    color: rgba(22, 31, 42, 0.84) !important;
    font-size: 12px !important;
    font-weight: 760 !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-step-card {
    padding: 22px 20px 18px !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-step-timeline {
    gap: 20px !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-step strong {
    color: rgba(20, 25, 34, 0.9) !important;
    font-size: 15px !important;
    font-weight: 790 !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-step small,
  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-privacy-note {
    color: rgba(94, 106, 121, 0.68) !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .report-actions,
  html body #practice.practice-detail-mode .feedback-panel.scoring .solution-panel,
  html body #practice.practice-detail-mode .feedback-panel.scoring .action-plan-list {
    display: none !important;
  }
}

@media (max-width: 760px) {
  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-panel {
    height: 172px !important;
    border-radius: 22px !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-metric-chips span {
    border-radius: 999px !important;
  }
}

@media (min-width: 761px) and (max-width: 1280px) {
  html body #practice.practice-detail-mode .practice-dashboard-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  html body #practice.practice-detail-mode .feedback-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@keyframes scoringPanelBreath {
  0%,
  100% {
    box-shadow:
      0 28px 72px -56px rgba(25, 39, 52, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(170, 210, 205, 0.16);
  }
  50% {
    box-shadow:
      0 34px 82px -56px rgba(25, 39, 52, 0.5),
      0 0 0 5px rgba(52, 211, 153, 0.035),
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -1px 0 rgba(170, 210, 205, 0.2);
  }
}

@keyframes scoringDotBreath {
  0%,
  100% {
    opacity: 0.68;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes scoringBeamContained {
  0% {
    left: 8%;
    opacity: 0;
  }
  12%,
  80% {
    opacity: 1;
  }
  100% {
    left: 92%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #practice.practice-detail-mode .feedback-panel.scoring {
    animation: none !important;
  }
}

/* Final desktop contract: answer area, draggable handle, feedback panel. */
@media (min-width: 1181px) {
  html body #practice.practice-detail-mode {
    --practice-report-dock-top: clamp(18px, 3vh, 34px);
    overflow-x: hidden !important;
  }

  html body #practice.practice-detail-mode .practice-dashboard-layout {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      14px
      minmax(340px, clamp(340px, var(--practice-feedback-width, 420px), 480px)) !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    width: min(1760px, calc(100vw - 72px)) !important;
    max-width: calc(100vw - 72px) !important;
    margin-inline: auto !important;
    padding-right: 0 !important;
    align-items: start !important;
    overflow: visible !important;
  }

  html body #practice.practice-detail-mode .practice-panel {
    grid-column: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body #practice.practice-detail-mode .feedback-resizer {
    display: block !important;
    grid-column: 2 !important;
    align-self: stretch !important;
    width: 14px !important;
    min-width: 14px !important;
    min-height: 240px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    cursor: col-resize !important;
    position: relative !important;
    z-index: 120 !important;
    touch-action: none !important;
  }

  html body #practice.practice-detail-mode .feedback-resizer::after {
    content: "" !important;
    position: absolute !important;
    top: 54px !important;
    bottom: 54px !important;
    left: 50% !important;
    width: 2px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05),
      rgba(20, 184, 166, 0.24),
      rgba(255, 255, 255, 0.05)
    ) !important;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.62),
      0 14px 28px rgba(20, 184, 166, 0.09) !important;
    opacity: 0.48 !important;
    transition: width 0.16s ease, opacity 0.16s ease, background 0.16s ease !important;
  }

  html body #practice.practice-detail-mode .feedback-resizer:hover::after,
  html body #practice.practice-detail-mode .feedback-resizer.is-dragging::after,
  html body.is-resizing-practice #practice.practice-detail-mode .feedback-resizer::after {
    width: 5px !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(20, 184, 166, 0.72),
      rgba(255, 255, 255, 0.08)
    ) !important;
    opacity: 0.95 !important;
  }

  html body #practice.practice-detail-mode .feedback-panel,
  html body #practice.practice-detail-mode .feedback-panel.scoring,
  html body #practice.practice-detail-mode .feedback-panel.has-report,
  html body #practice.practice-detail-mode .feedback-panel.speech-result-ready,
  html body #practice.practice-detail-mode .feedback-panel:not(.scoring):not(.has-report) {
    grid-column: 3 !important;
    position: sticky !important;
    top: var(--practice-report-dock-top) !important;
    inset-inline: auto !important;
    bottom: auto !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - var(--practice-report-dock-top) - 24px) !important;
    margin: 0 !important;
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring {
    min-height: min(720px, calc(100dvh - var(--practice-report-dock-top) - 24px)) !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.has-report,
  html body #practice.practice-detail-mode .feedback-panel.speech-result-ready {
    min-height: min(720px, calc(100dvh - var(--practice-report-dock-top) - 24px)) !important;
  }

  html body #practice.practice-detail-mode .stage-practice .practice-workbench {
    grid-template-columns:
      minmax(176px, clamp(176px, var(--practice-list-width, 220px), 320px))
      18px
      minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body #practice.practice-detail-mode .stage-practice .workbench-resizer {
    display: block !important;
    width: 18px !important;
    min-width: 18px !important;
    cursor: col-resize !important;
    position: relative !important;
    z-index: 80 !important;
    touch-action: none !important;
  }

  html body #practice.practice-detail-mode .stage-practice .workbench-resizer::after {
    content: "" !important;
    position: absolute !important;
    top: 28px !important;
    bottom: 28px !important;
    left: 50% !important;
    width: 3px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    background: rgba(171, 184, 197, 0.36) !important;
    transition: width 0.16s ease, background 0.16s ease !important;
  }

  html body #practice.practice-detail-mode .stage-practice .workbench-resizer:hover::after,
  html body #practice.practice-detail-mode .stage-practice .workbench-resizer.is-dragging::after {
    width: 7px !important;
    background: rgba(20, 184, 166, 0.56) !important;
  }

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

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode,
  html body.view-practice #practice.practice-detail-mode {
    --practice-detail-sticky-top: clamp(20px, 3vh, 34px) !important;
    --practice-report-dock-top: clamp(20px, 3vh, 34px) !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-panel,
  html body.view-practice #practice.practice-detail-mode .feedback-panel {
    position: sticky !important;
    top: var(--practice-report-dock-top) !important;
    align-self: start !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - var(--practice-report-dock-top) - 24px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

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

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .feedback-resizer,
  html body.view-practice #practice.practice-detail-mode .feedback-resizer {
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    margin: 0 !important;
  }

  html body.view-practice:has(#practice.practice-detail-mode) #practice.practice-detail-mode .stage-practice .workbench-resizer,
  html body.view-practice #practice.practice-detail-mode .stage-practice .workbench-resizer {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    margin: 0 !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  html body #practice.practice-detail-mode {
    overflow-x: hidden !important;
  }

  html body #practice.practice-detail-mode .practice-dashboard-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
  }

  html body #practice.practice-detail-mode .feedback-resizer {
    display: none !important;
  }

  html body #practice.practice-detail-mode .feedback-panel,
  html body #practice.practice-detail-mode .feedback-panel.scoring,
  html body #practice.practice-detail-mode .feedback-panel.has-report,
  html body #practice.practice-detail-mode .feedback-panel.speech-result-ready {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
  }
}

/* Make the scoring motion visibly present instead of a pale decoration. */
html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-panel {
  height: clamp(230px, 22vw, 300px) !important;
  border-color: rgba(45, 212, 191, 0.42) !important;
  background:
    radial-gradient(circle at 22% 44%, rgba(45, 212, 191, 0.22), transparent 38%),
    linear-gradient(135deg, rgba(227, 255, 250, 0.9), rgba(255, 255, 255, 0.72)),
    rgba(255, 255, 255, 0.68) !important;
}

html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-grid {
  opacity: 0.42 !important;
}

html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b {
  width: clamp(4px, 0.46vw, 6px) !important;
  min-height: 14px !important;
  opacity: 0.86 !important;
  background: rgba(151, 164, 178, 0.74) !important;
}

html body #practice.practice-detail-mode .feedback-panel.scoring .figma-scoring-loading .scoring-waveform-bars b:nth-child(-n + 24) {
  background: rgba(20, 184, 166, 0.95) !important;
  box-shadow: 0 0 18px rgba(20, 184, 166, 0.34) !important;
}

/* Consolidated from feedback-report-scroll-final.css during frontend cleanup 2026-07-08. */
@media (min-width: 761px) {
  html body #practice.practice-detail-mode .practice-dashboard-layout {
    align-items: start !important;
  }

  html body #practice.practice-detail-mode .feedback-panel,
  html body #practice .feedback-panel {
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: min(520px, calc(100dvh - 340px)) !important;
    height: min(720px, calc(100dvh - 320px)) !important;
    max-height: calc(100dvh - 320px) !important;
    padding: 28px 30px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable both-edges !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring,
  html body #practice.practice-detail-mode .feedback-panel.has-report,
  html body #practice.practice-detail-mode .feedback-panel.speech-result-ready {
    min-height: min(560px, calc(100dvh - 320px)) !important;
    height: min(760px, calc(100dvh - 300px)) !important;
    max-height: calc(100dvh - 300px) !important;
  }

  html body #practice.practice-detail-mode .feedback-panel > .eyebrow,
  html body #practice.practice-detail-mode .feedback-panel > h2 {
    flex: 0 0 auto !important;
  }

  html body #practice.practice-detail-mode .feedback-panel .score-ring,
  html body #practice.practice-detail-mode .feedback-panel .ai-breakdown,
  html body #practice.practice-detail-mode .feedback-panel .feedback-list,
  html body #practice.practice-detail-mode .feedback-panel .solution-panel,
  html body #practice.practice-detail-mode .feedback-panel .action-plan-list {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

  html body #practice.practice-detail-mode .feedback-panel .feedback-list {
    padding-bottom: 14px !important;
  }

  html body #practice.practice-detail-mode .feedback-panel .report-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
    flex: 0 0 auto !important;
    margin: 16px -30px 0 !important;
    padding: 14px 30px 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.62) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.86)),
      rgba(255, 255, 255, 0.54) !important;
    box-shadow: 0 -18px 32px -28px rgba(15, 23, 42, 0.28) !important;
    backdrop-filter: blur(18px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
  }

  html body #practice.practice-detail-mode .feedback-panel::-webkit-scrollbar {
    width: 8px !important;
  }

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

  html body #practice.practice-detail-mode .feedback-panel::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(108, 117, 130, 0.34) !important;
    background-clip: padding-box !important;
  }
}

@media (min-width: 761px) and (max-height: 820px) {
  html body #practice.practice-detail-mode .feedback-panel,
  html body #practice .feedback-panel {
    min-height: 420px !important;
    height: calc(100dvh - 300px) !important;
    max-height: calc(100dvh - 300px) !important;
    padding-top: 22px !important;
  }

  html body #practice.practice-detail-mode .feedback-panel.scoring,
  html body #practice.practice-detail-mode .feedback-panel.has-report,
  html body #practice.practice-detail-mode .feedback-panel.speech-result-ready {
    height: calc(100dvh - 280px) !important;
    max-height: calc(100dvh - 280px) !important;
  }
}

@media (max-width: 760px) {
  html body #practice.practice-detail-mode .feedback-panel.has-report.mobile-report-open,
  html body.practice-mobile-report-page #practice.practice-detail-mode .feedback-panel.mobile-report-open {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
}