/* Mobile practice subject picker, matched to the Figma glass direction. */
@media (max-width: 760px) {
  html body.view-practice:not(.practice-answer-detail-active) {
    min-height: 100%;
    background:
      radial-gradient(circle at 16% 4%, rgba(110, 231, 183, 0.22), transparent 30%),
      radial-gradient(circle at 88% 18%, rgba(147, 197, 253, 0.2), transparent 28%),
      linear-gradient(180deg, #f7f8f9 0%, #f2f3f5 100%) !important;
  }

  html body.view-practice:not(.practice-answer-detail-active) .main {
    width: 100% !important;
    min-height: 100svh !important;
    padding: 18px 14px calc(102px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    background: transparent !important;
  }

  html body.view-practice:not(.practice-answer-detail-active) .topbar,
  #practice.active-view:not(.practice-detail-mode) .practice-top-grid,
  #practice.active-view:not(.practice-detail-mode) .practice-left-rail,
  #practice.active-view:not(.practice-detail-mode) .practice-panel > .panel-heading,
  #practice.active-view:not(.practice-detail-mode) .training-mode-strip,
  #practice.active-view:not(.practice-detail-mode) .practice-flow-summary,
  #practice.active-view:not(.practice-detail-mode) .practice-stats,
  #practice.active-view:not(.practice-detail-mode) .skill-filter,
  #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .figma-type-card-grid {
    display: none !important;
  }

  #practice.active-view:not(.practice-detail-mode) {
    --subject-ink: #141820;
    --subject-text: #4b5563;
    --subject-muted: #8b93a1;
    --subject-line: rgba(255, 255, 255, 0.72);
    --subject-shadow: 0 24px 58px rgba(31, 41, 55, 0.1);
    position: relative !important;
    width: min(390px, calc(100vw - 28px)) !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    isolation: isolate;
  }

  #practice.active-view:not(.practice-detail-mode)::before,
  #practice.active-view:not(.practice-detail-mode)::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: -1;
    border-radius: 999px;
    filter: blur(12px);
  }

  #practice.active-view:not(.practice-detail-mode)::before {
    width: 220px;
    height: 220px;
    left: -88px;
    top: 36px;
    background: rgba(125, 211, 252, 0.16);
  }

  #practice.active-view:not(.practice-detail-mode)::after {
    width: 260px;
    height: 260px;
    right: -112px;
    bottom: 80px;
    background: rgba(167, 243, 208, 0.16);
  }

  #practice.active-view:not(.practice-detail-mode) .practice-dashboard-layout,
  #practice.active-view:not(.practice-detail-mode) .practice-panel,
  #practice.active-view:not(.practice-detail-mode) .question-type-shell,
  #practice.active-view:not(.practice-detail-mode) .question-type-grid {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-question-flow {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 0 0 18px !important;
    background: transparent !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-grid-head,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-guide,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-grid {
    border: 1px solid var(--subject-line) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.22) !important;
    backdrop-filter: blur(24px) saturate(1.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      inset 0 -18px 38px rgba(255, 255, 255, 0.2),
      var(--subject-shadow) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-grid-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 116px !important;
    padding: 24px 24px !important;
    border-radius: 36px !important;
    animation: subjectRise 460ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-grid-head::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background:
      radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.74), transparent 42%),
      radial-gradient(circle at 90% 16%, rgba(255, 242, 196, 0.38), transparent 30%);
  }

  #practice.active-view:not(.practice-detail-mode) .practice-mobile-kicker,
  #practice.active-view:not(.practice-detail-mode) .figma-type-grid-head p {
    display: none !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-grid-head h2 {
    margin: 0 !important;
    color: var(--subject-ink) !important;
    font-size: clamp(30px, 8vw, 32px) !important;
    font-weight: 950 !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-grid-head > span,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-reset-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(217, 183, 116, 0.42) !important;
    border-radius: 999px !important;
    background: rgba(255, 247, 231, 0.68) !important;
    color: #60420f !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-guide {
    min-height: 90px !important;
    padding: 19px 22px !important;
    border-radius: 30px !important;
    animation: subjectRise 500ms cubic-bezier(0.2, 0.85, 0.25, 1) 50ms both;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-guide strong {
    display: block !important;
    margin: 0 0 6px !important;
    color: #227c68 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-guide span {
    display: block !important;
    max-width: 245px !important;
    color: var(--subject-text) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 22px !important;
    border-radius: 32px !important;
    animation: subjectRise 540ms cubic-bezier(0.2, 0.85, 0.25, 1) 90ms both;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card {
    --subject-accent: #8aa4c8;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto 26px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 4px !important;
    min-height: 74px !important;
    padding: 14px 17px 14px 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42)) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
    backdrop-filter: blur(18px) saturate(1.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 12px 28px rgba(31, 41, 55, 0.07) !important;
    color: var(--subject-ink) !important;
    text-align: left !important;
    cursor: pointer !important;
    opacity: 0;
    transform: translateY(12px);
    animation: subjectCardIn 460ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
    animation-delay: calc(140ms + var(--subject-index, 0) * 58ms);
    transition:
      transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
      border-color 240ms ease,
      box-shadow 240ms ease,
      background 240ms ease !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card[data-tone="speaking"] { --subject-accent: #4fb68b; }
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card[data-tone="writing"] { --subject-accent: #d7a74b; }
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card[data-tone="reading"] { --subject-accent: #8b98a8; }
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card[data-tone="listening"] { --subject-accent: #4f8be8; }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card::before {
    content: "";
    position: absolute;
    left: 82px;
    right: 78px;
    bottom: 14px;
    height: 3px;
    border-radius: 999px;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--subject-accent) 42%, #ffffff) 0 54%, rgba(148, 163, 184, 0.14) 54% 100%);
    opacity: 0.72;
    transition: opacity 220ms ease, transform 220ms ease !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card::after {
    content: "→";
    grid-column: 4;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
    width: 24px;
    height: 24px;
    color: #9abfff;
    font-size: 28px;
    font-weight: 300;
    line-height: 22px;
    transition: transform 220ms ease, color 220ms ease !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card:hover,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card:focus-visible {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--subject-accent) 32%, rgba(255, 255, 255, 0.88)) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.5)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 18px 34px rgba(31, 41, 55, 0.1),
      0 0 0 6px color-mix(in srgb, var(--subject-accent) 9%, transparent) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card:hover::after,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card:focus-visible::after {
    color: var(--subject-accent);
    transform: translateX(3px);
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card:active {
    transform: translateY(0) scale(0.992) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card i {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(150deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.36)) !important;
    color: var(--subject-ink) !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 10px 20px rgba(31, 41, 55, 0.07) !important;
    transition: transform 220ms ease, box-shadow 220ms ease !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card:hover i,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card:focus-visible i {
    transform: scale(1.05);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      0 14px 26px rgba(31, 41, 55, 0.1) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    color: var(--subject-ink) !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card small {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    align-self: start !important;
    padding-bottom: 8px !important;
    color: #7a8492 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card strong {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    justify-self: end !important;
    align-self: center !important;
    min-width: 56px !important;
    height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(246, 248, 251, 0.78) !important;
    color: #4b5563 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 30px !important;
    text-align: center !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  html body.view-practice:not(.practice-answer-detail-active) .mobile-tabbar {
    left: 50% !important;
    right: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: min(366px, calc(100vw - 24px)) !important;
    height: 72px !important;
    padding: 8px !important;
    transform: translateX(-50%) !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
    backdrop-filter: blur(24px) saturate(1.2) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 20px 48px rgba(31, 41, 55, 0.14) !important;
  }

  html body.view-practice:not(.practice-answer-detail-active) .mobile-tab {
    min-width: 0 !important;
    min-height: 54px !important;
    border-radius: 22px !important;
    color: #8b93a1 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    transition: transform 220ms ease, background 220ms ease, color 220ms ease !important;
  }

  html body.view-practice:not(.practice-answer-detail-active) .mobile-tab.active {
    background: rgba(255, 255, 255, 0.56) !important;
    color: var(--subject-ink) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 12px 26px rgba(31, 41, 55, 0.07) !important;
  }

  html body.view-practice:not(.practice-answer-detail-active) .mobile-tab:active {
    transform: scale(0.985) !important;
  }

  @keyframes subjectRise {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes subjectCardIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #practice.active-view:not(.practice-detail-mode) .figma-type-grid-head,
    #practice.active-view:not(.practice-detail-mode) .mobile-subject-guide,
    #practice.active-view:not(.practice-detail-mode) .mobile-subject-grid,
    #practice.active-view:not(.practice-detail-mode) .mobile-subject-card {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-grid-head {
    min-height: 116px !important;
    padding: 24px !important;
    border-radius: 36px !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-grid-head h2 {
    font-size: clamp(30px, 8vw, 32px) !important;
    line-height: 1.04 !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-guide {
    display: block !important;
    min-height: 90px !important;
    padding: 19px 22px !important;
    border-radius: 30px !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 22px !important;
    border-radius: 32px !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto 26px !important;
    grid-template-rows: auto auto !important;
    min-height: 74px !important;
    padding: 14px 17px 14px 14px !important;
    border-radius: 24px !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card i {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    font-size: 18px !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card span {
    font-size: 24px !important;
    line-height: 1.08 !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card small {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card strong {
    height: 30px !important;
    min-width: 56px !important;
    font-size: 15px !important;
    line-height: 30px !important;
  }
}

/* Consolidated from practice-card-motion-glass.css during frontend cleanup 2026-07-08. */
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 {
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  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;
  }
}

/* Final mobile subject card type/spacing fix: keep label and count visually separated. */
@media (max-width: 760px) {
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card {
    grid-template-columns: 48px minmax(62px, 1fr) minmax(56px, auto) 22px !important;
    column-gap: 12px !important;
    row-gap: 3px !important;
    min-height: 70px !important;
    padding: 12px 14px 12px 12px !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card i,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card i,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card i {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 16px !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card span,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card span,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card span {
    max-width: 100% !important;
    font-size: 21px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card strong,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card strong,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card strong {
    min-width: 56px !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    line-height: 28px !important;
    justify-self: end !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card small,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card small,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card small {
    grid-column: 2 / 4 !important;
    font-size: 11px !important;
    line-height: 1.18 !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card::before,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card::before,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card::before {
    left: 72px !important;
    right: 74px !important;
    bottom: 12px !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card::after,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card::after,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card::after {
    width: 22px !important;
    height: 22px !important;
    font-size: 24px !important;
    line-height: 20px !important;
  }
}

/* Final override appended last: real icons only, no letter pseudo-elements. */
@media (max-width: 760px) {
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon::before,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon::after,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon::before,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon .practice-ui-icon,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon .practice-ui-icon,
  html body.view-practice #practice.active-view: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: block !important;
    width: 26px !important;
    height: 26px !important;
    stroke-width: 2.05 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
}

/* Final mobile type badge decision: abbreviations only, no SVG icons. */
@media (max-width: 760px) {
  html body.view-practice #practice.active-view: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 {
    position: relative !important;
    overflow: hidden !important;
    font-size: 0 !important;
    color: transparent !important;
  }

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

  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: attr(data-type) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: rgba(43, 54, 70, 0.76) !important;
    font-size: clamp(10px, 3.1vw, 15px) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.78),
      0 -1px 0 rgba(20, 28, 38, 0.08) !important;
  }
}

/* Mobile type list: keep concise abbreviations instead of UI icons. */
@media (max-width: 760px) {
  html body.view-practice #practice.active-view: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 {
    position: relative !important;
    overflow: hidden !important;
    font-size: 0 !important;
    color: transparent !important;
  }

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

  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: attr(data-type) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: rgba(43, 54, 70, 0.76) !important;
    font-size: clamp(10px, 3.1vw, 15px) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.78),
      0 -1px 0 rgba(20, 28, 38, 0.08) !important;
  }
}

/* Final icon-only guard: never show letter badges over the SVG UI icons. */
@media (max-width: 760px) {
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon::before,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon::after,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon::before,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon {
    font-size: 0 !important;
    color: transparent !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon .practice-ui-icon,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon .practice-ui-icon {
    display: block !important;
    color: transparent !important;
  }
}

/* Use real UI icons instead of letter codes on subject and type glass cards. */
@media (max-width: 760px) {
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-icon::before,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-icon::after,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-icon::before,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-icon::after {
    display: none !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-icon .practice-ui-icon,
  #practice.active-view:not(.practice-detail-mode) .figma-type-dot .practice-ui-icon,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-icon .practice-ui-icon,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-dot .practice-ui-icon {
    width: 26px !important;
    height: 26px !important;
    stroke: rgba(37, 48, 64, 0.72) !important;
    stroke-width: 2.05 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72)) drop-shadow(0 -0.5px 0 rgba(20, 28, 38, 0.1)) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-dot,
  html body.view-practice #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 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 18px !important;
    font-size: 0 !important;
    color: transparent !important;
    background:
      radial-gradient(circle at 25% 16%, rgba(255, 255, 255, 0.82), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(232, 238, 244, 0.2)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(20, 28, 38, 0.045),
      0 10px 22px rgba(31, 41, 55, 0.055) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-tone="speaking"] .practice-ui-icon,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card[data-tone="speaking"] .practice-ui-icon {
    stroke: rgba(44, 119, 96, 0.72) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-tone="writing"] .practice-ui-icon,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card[data-tone="writing"] .practice-ui-icon {
    stroke: rgba(141, 104, 38, 0.72) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-tone="reading"] .practice-ui-icon,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card[data-tone="reading"] .practice-ui-icon {
    stroke: rgba(78, 90, 106, 0.72) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-tone="listening"] .practice-ui-icon,
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card[data-tone="listening"] .practice-ui-icon {
    stroke: rgba(53, 99, 157, 0.72) !important;
  }
}

/* Mobile subject cards: engraved text, no helper copy, SWRL as glass UI icon marks. */
@media (max-width: 760px) {
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card {
    grid-template-columns: 64px minmax(0, 1fr) auto 32px !important;
    grid-template-rows: 1fr !important;
    min-height: 96px !important;
    padding: 16px 18px 16px 16px !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.78), transparent 38%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.64), rgba(244, 248, 249, 0.28)),
      rgba(255, 255, 255, 0.26) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(20, 28, 38, 0.045),
      0 18px 36px rgba(31, 41, 55, 0.08) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card::before,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card::before {
    display: none !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card::after,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card::after {
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: 30px !important;
    height: 30px !important;
    color: rgba(118, 137, 164, 0.82) !important;
    font-size: 32px !important;
    line-height: 28px !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.84),
      0 -1px 0 rgba(24, 32, 42, 0.14) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card i,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card i {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    border-radius: 22px !important;
    font-size: 0 !important;
    color: transparent !important;
    position: relative !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.95), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(229, 235, 242, 0.36)),
      rgba(255, 255, 255, 0.36) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -1px 0 rgba(19, 28, 39, 0.075),
      0 14px 28px rgba(31, 41, 55, 0.08) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card i::before,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card i::before {
    content: "S";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(20, 24, 32, 0.82);
    font-size: 24px;
    font-weight: 940;
    line-height: 1;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.88),
      0 -1px 0 rgba(20, 28, 38, 0.16),
      0 0 1px rgba(20, 28, 38, 0.16);
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card i::after,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card i::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--subject-accent) 28%, rgba(255, 255, 255, 0.72));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.66),
      0 0 0 5px color-mix(in srgb, var(--subject-accent) 8%, transparent);
    pointer-events: none;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card[data-tone="writing"] i::before,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card[data-tone="writing"] i::before {
    content: "W";
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card[data-tone="reading"] i::before,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card[data-tone="reading"] i::before {
    content: "R";
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card[data-tone="listening"] i::before,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card[data-tone="listening"] i::before {
    content: "L";
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card span,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    color: rgba(20, 24, 32, 0.9) !important;
    font-size: 28px !important;
    font-weight: 940 !important;
    line-height: 1 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.88),
      0 -1px 0 rgba(20, 28, 38, 0.16),
      0 0 1px rgba(20, 28, 38, 0.12) !important;
  }

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

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card strong,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card strong {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    height: 36px !important;
    min-width: 68px !important;
    padding: 0 14px !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(238, 243, 247, 0.26)),
      rgba(255, 255, 255, 0.24) !important;
    color: rgba(52, 61, 73, 0.9) !important;
    font-size: 18px !important;
    font-weight: 880 !important;
    line-height: 36px !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.82),
      0 -1px 0 rgba(24, 32, 42, 0.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.84),
      inset 0 -1px 0 rgba(20, 28, 38, 0.045) !important;
  }
}

/* Clear glass correction: lighter cards and crisp embedded type. */
@media (max-width: 760px) {
  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card {
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.58), transparent 38%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(245, 249, 250, 0.16)),
      rgba(255, 255, 255, 0.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(20, 28, 38, 0.032),
      0 16px 34px rgba(31, 41, 55, 0.06) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card i,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card i {
    background:
      radial-gradient(circle at 25% 16%, rgba(255, 255, 255, 0.86), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(232, 238, 244, 0.22)),
      rgba(255, 255, 255, 0.2) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(19, 28, 39, 0.05),
      0 12px 24px rgba(31, 41, 55, 0.055) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card i::before,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card i::before {
    color: rgba(35, 42, 53, 0.74) !important;
    font-weight: 860 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.72),
      0 -1px 0 rgba(20, 28, 38, 0.1) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card span,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card span {
    color: rgba(28, 34, 44, 0.82) !important;
    font-weight: 880 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.74),
      0 -1px 0 rgba(20, 28, 38, 0.08) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card strong,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card strong {
    color: rgba(62, 72, 87, 0.78) !important;
    font-weight: 800 !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(235, 241, 246, 0.18)),
      rgba(255, 255, 255, 0.16) !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.7),
      0 -1px 0 rgba(24, 32, 42, 0.08) !important;
  }

  #practice.active-view:not(.practice-detail-mode) .mobile-subject-card::after,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow.subject-picker .mobile-subject-card::after {
    color: rgba(132, 153, 185, 0.68) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  }
}

/* Final override appended last: real icons only, no letter pseudo-elements. */
@media (max-width: 760px) {
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon::before,
  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon::after,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon::before,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon::after {
    content: none !important;
    display: none !important;
  }

  html body.view-practice #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon .practice-ui-icon,
  html body #practice.active-view:not(.practice-detail-mode) .mobile-question-flow .mobile-subject-card .mobile-subject-icon .practice-ui-icon {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    stroke-width: 2.05 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
}