#voicePopup .learner-speaking-indicator { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-block: 8px; border-radius: 10px; background: #edf8ed; color: #27652d; font-size: .85rem; font-weight: 700; }
#voicePopup .learner-speaking-indicator[hidden] { display: none !important; }
#metricPanel .metric-card-icon {
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; flex: 0 0 28px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 22px rgba(0, 0, 0, .12);
  backdrop-filter: blur(10px);
}
#metricPanel .metric-card-icon i {
  font-size: .8rem;
  background: linear-gradient(135deg, #145dff 0%, #19c2ff 36%, #0bb8a8 68%, #ffbe45 100%) !important;
  background-clip: text !important; -webkit-background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 2px rgba(10, 23, 48, .16));
}
#metricPanel .metric-card { min-width: 0; }
#metricPanel .metric-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
#metricPanel .metric-card-head > span:not(.metric-card-icon) {
  flex: 1 1 0; min-width: 0; white-space: normal;
  overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
  line-height: 1.3; max-height: none; -webkit-line-clamp: unset;
}
#metricPanel .metric-info-btn { flex-shrink: 0; }
#voicePopup .learner-voice-bars { display: flex; align-items: center; gap: 3px; height: 24px; }
#voicePopup .learner-voice-bars i { width: 4px; height: 18px; background: #4b9d45; border-radius: 3px; animation: learner-voice-pulse .65s ease-in-out infinite alternate; }
#voicePopup .learner-voice-bars i:nth-child(2n) { animation-delay: -.3s; }
#voicePopup .learner-voice-bars i:nth-child(3n) { animation-delay: -.5s; }
@keyframes learner-voice-pulse { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { #voicePopup .learner-voice-bars i { animation: none; } }
#voicePopup .voice-popup-card {
  border: 1px solid #c7a451;
  background: linear-gradient(120deg, #fff9e9, #fff 65%);
  box-shadow: 0 16px 48px rgba(94, 69, 13, .18);
}
#voicePopup :is(.voice-popup-learner, .voice-popup-exam-type, .voice-popup-mode-badge, .voice-popup-progress > span, .voice-popup-pass-progress) {
  border-color: #ddc991; background: #fffaf0; color: #725515;
}
#voicePopup .voice-popup-actions .btn:where(:not(#popupExitBtn)) { border-color: #c6a34e; color: #785911; background: #f7edcd; }
#voicePopup #popupResizeBtn { background: #e9edf5; color: #36445d; border-color: #b7c2d5; }
#voicePopup #popupMicRetryBtn { background: #e0f2eb; color: #23654d; border-color: #93c6b1; }
#voicePopup #voiceCheckBtn { background: #e2eefb; color: #315c88; border-color: #9fbede; }
#voicePopup .popup-settings-btn { background: #ece6f8; color: #644793; border-color: #baa6db; }
#voicePopup #popupPauseBtn { background: #ffedc3; color: #815600; border-color: #d8ad4e; }
#voicePopup #popupPauseBtn[aria-pressed="true"] { background: #23834d; color: #fff; border-color: #1b6d3e; }
#voicePopup .voice-popup-actions button svg { display: inline-block !important; width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; flex-shrink: 0; }
#voicePopup .voice-popup-actions #popupStartBtn { background: #23834d; color: #fff; border-color: #1b6d3e; }
#voicePopup .popup-corner-tools { display: flex; justify-content: flex-end; margin-top: 8px; }
#voicePopup #popupCornerResizeBtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 8px; border: 1px solid #c6a34e; border-radius: 10px; background: #f7edcd; color: #785911; cursor: pointer; }
#voicePopup #popupCornerResizeBtn:hover { background: #eedda9; }
#voicePopup #popupCornerResizeBtn:focus-visible { outline: 3px solid #88630c; outline-offset: 3px; }
#voicePopup #popupCornerResizeBtn svg { display: block !important; width: 22px; height: 22px; }
#voicePopup .voice-popup-actions .btn:not(#popupExitBtn):hover:not(:disabled) { filter: brightness(.95); box-shadow: 0 3px 9px #715b1722; }
#voicePopup .voice-popup-actions .btn:focus-visible { outline: 3px solid #88630c; outline-offset: 3px; }
#voicePopup .voice-popup-actions .btn:disabled { opacity: .5; box-shadow: none; }
#voicePopup :is(.voice-popup-info summary, .voice-popup-citizenship-brand, #voicePopupPassPercent, #voicePopupTimer) { color: #88630c; }
#voicePopup .voice-popup-pass-track { background: #eee2c2; }
#voicePopup #voicePopupPassBar { background: linear-gradient(90deg, #b68b21, #e9c65d); }
#voicePopup .voice-popup-spoken { color: #252b3a; }
#voicePopup .voice-popup-user-answer.is-correct { background: #edf8ef; border-color: #248348; color: #196b38; --answer-hand-bg: #248348; }
#voicePopup .voice-popup-user-answer.is-incorrect { background: #fff0f1; border-color: #c73646; color: #a52434; --answer-hand-bg: #c73646; }
#voicePopup .voice-popup-user-answer.is-partial { --answer-hand-bg: #b77b08; }
#voicePopup .answer-hand { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--answer-hand-bg); font-size: 20px; line-height: 1; }
#voicePopup .voice-popup-user-answer.is-partial { background: #fff8df; border-color: #d6ad41; color: #755600; }
#voicePopup .voice-popup-user-answer.is-partial > span,
#voicePopup .voice-popup-user-answer.is-partial > small { color: #755600; }
#voicePopup .ready-prompt-button { cursor: pointer; }
#voicePopup .ready-prompt-button:hover { border-color: #23834d; background: #edf8ef; }
#voicePopup .ready-prompt-button:focus-visible { outline: 3px solid #23834d; outline-offset: 3px; }
body #voicePopup :is(.voice-popup-learner, .voice-popup-exam-type),
body.theme-dark #voicePopup :is(.voice-popup-learner, .voice-popup-exam-type) {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  padding: 4px 0;
}
body.theme-dark #voicePopup .voice-popup-card { background: linear-gradient(120deg, #292619, #171d2d 65%); }
body.theme-dark #voicePopup :is(.voice-popup-learner, .voice-popup-exam-type, .voice-popup-mode-badge, .voice-popup-progress > span, .voice-popup-pass-progress) { background: #302b20; color: #f3d885; border-color: #8d7847; }
body.theme-dark #voicePopup .voice-popup-spoken { color: #f5f2e8; }