/* Premium6 hotfix: correct store badges and remove clipped step shadows. */
.app-download-panel,
.home-app-offer {
  overflow: hidden !important;
}

.app-download-panel {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  grid-template-areas:
    "visual title"
    "text text"
    "badges badges" !important;
  align-items: start !important;
  gap: 12px 14px !important;
}

.home-app-offer {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  grid-template-areas: "visual badges" !important;
  align-items: center !important;
  gap: 10px 14px !important;
}

.app-download-panel .app-promo-visual,
.home-app-offer .app-promo-visual {
  grid-area: visual !important;
  align-self: center !important;
  margin: 0 !important;
}

.app-download-panel .app-promo-copy-mark,
.home-app-offer .app-promo-copy-mark {
  display: none !important;
}

.app-download-panel .store-badges,
.home-app-offer .store-badges {
  grid-area: badges !important;
  display: grid !important;
  grid-template-columns: repeat(2, 108px) !important;
  gap: 8px !important;
  justify-items: start !important;
  align-self: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  min-width: 0 !important;
  line-height: 0 !important;
}

.app-download-panel h3 {
  grid-area: title !important;
  margin-top: 4px !important;
}

.app-download-panel p {
  grid-area: text !important;
}

.app-promo-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
}

.store-badge-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  place-items: center !important;
  width: 108px !important;
  max-width: 108px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  clip-path: inset(0 round 9px) !important;
  line-height: 0 !important;
  cursor: pointer !important;
  transform: translateZ(0) !important;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 160ms ease !important;
}

.store-badge-button:active {
  transform: translateY(1px) scale(0.975) !important;
  filter: brightness(0.96) !important;
}

.store-badge {
  display: block !important;
  width: 108px !important;
  max-width: 108px !important;
  height: auto !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 9px) !important;
  pointer-events: none !important;
}

body[data-theme="dark"] .store-badge-dark,
body[data-theme="light"] .store-badge-light {
  display: none !important;
}

body[data-theme="dark"] .store-badge-light,
body[data-theme="light"] .store-badge-dark {
  display: block !important;
}

body[data-theme="dark"] .store-badge-button {
  background: #ffffff !important;
}

body[data-theme="light"] .store-badge-button {
  background: #111216 !important;
}

body[data-theme="dark"] .store-badge-light {
  background: #ffffff !important;
}

body[data-theme="light"] .store-badge-dark {
  background: #111216 !important;
}

.app-download-modal {
  overflow: hidden !important;
}

.app-download-modal .app-promo-copy-mark {
  display: grid !important;
}

.app-download-modal .store-badges {
  grid-template-columns: repeat(2, 128px) !important;
  justify-content: start !important;
  width: auto !important;
  gap: 10px !important;
}

.quiz-screen,
.question-stage {
  overflow: visible !important;
}

.quiz-screen .stepper-shell {
  --stepper-active-x: 0px;
  --stepper-active-y: 0px;
  --stepper-active-w: 38px;
  --stepper-active-h: 38px;
  --stepper-active-opacity: 0;
  position: relative !important;
  top: auto !important;
  z-index: 4 !important;
  margin: -12px -12px 10px !important;
  padding: 18px 38px 24px !important;
  overflow: visible !important;
  background: transparent !important;
}

.quiz-screen .stepper-shell::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 4 !important;
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(100% - 70px),
      color-mix(in srgb, var(--bg) 94%, transparent) calc(100% - 28px),
      color-mix(in srgb, var(--bg) 98%, transparent) 100%) !important;
}

.quiz-screen .stepper-shell::after {
  content: none !important;
  position: absolute !important;
  left: var(--stepper-active-x) !important;
  top: var(--stepper-active-y) !important;
  width: var(--stepper-active-w) !important;
  height: var(--stepper-active-h) !important;
  border-radius: 14px !important;
  pointer-events: none !important;
  opacity: var(--stepper-active-opacity) !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, #ffffff 34%, var(--primary-strong)), transparent 39%),
    linear-gradient(135deg, var(--primary-strong), var(--primary)) !important;
  box-shadow:
    0 14px 28px color-mix(in srgb, var(--primary) 28%, transparent),
    0 0 0 1px color-mix(in srgb, #ffffff 20%, var(--primary)) !important;
  transition:
    left 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    top 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 120ms ease !important;
}

.quiz-screen .question-card {
  overflow: hidden !important;
  border-radius: 34px !important;
}

.quiz-screen .question-image-frame {
  overflow: hidden !important;
  border-radius: 34px 34px 0 0 !important;
  cursor: zoom-in !important;
  -webkit-tap-highlight-color: transparent !important;
}

.quiz-screen .question-image-frame .question-image {
  border-radius: 0 !important;
}

.image-zoom-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 140 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(3, 5, 14, 0.92) !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.image-zoom-stage {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  touch-action: none !important;
}

.image-zoom-picture {
  max-width: 100vw !important;
  max-height: 100vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transform-origin: center center !important;
  transition: transform 80ms linear !important;
  will-change: transform !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.image-zoom-close {
  position: fixed !important;
  top: max(16px, env(safe-area-inset-top)) !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  z-index: 2 !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 18px !important;
  background: rgba(15, 22, 34, 0.78) !important;
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  backdrop-filter: blur(16px) !important;
}

.quiz-screen .stepper {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  scroll-anchor: none !important;
  scrollbar-width: none !important;
  touch-action: pan-x !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background: transparent !important;
  scroll-padding-inline: 0 !important;
}

.quiz-screen .stepper::-webkit-scrollbar {
  display: none !important;
}

.quiz-screen .stepper::before,
.quiz-screen .stepper::after {
  content: "" !important;
  flex: 0 0 14px !important;
}

.quiz-screen .step-dot {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 14px !important;
  outline: 0 !important;
  z-index: 2 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -9px 18px rgba(0, 0, 0, 0.1) !important;
  filter: none !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
}

.quiz-screen .step-dot.current {
  color: #07110c !important;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, #ffffff 34%, var(--primary-strong)), transparent 38%),
    linear-gradient(135deg, var(--primary-strong), var(--primary)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 0 18px color-mix(in srgb, var(--primary-strong) 28%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #ffffff 26%, var(--primary)) !important;
}

body[data-theme="light"] .quiz-screen .stepper-shell {
  background: transparent !important;
}

body[data-theme="light"] .quiz-screen .step-dot.current {
  color: #061311 !important;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.54), transparent 38%),
    linear-gradient(135deg, #22d6d0, #00aeb8) !important;
}

@media (max-width: 900px) {
  .quiz-screen .stepper-shell {
    margin-right: -10px !important;
    margin-left: -10px !important;
    padding-right: 34px !important;
    padding-left: 34px !important;
  }
}

@media (max-width: 560px) {
  .app-download-panel,
  .home-app-offer {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 8px 11px !important;
  }

  .app-promo-icon,
  .home-app-offer .app-promo-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 15px !important;
  }

  .app-download-panel .store-badges,
  .home-app-offer .store-badges {
    grid-template-columns: repeat(2, 106px) !important;
    width: auto !important;
  }

  .store-badge-button,
  .store-badge,
  .home-app-offer .store-badge {
    width: 106px !important;
    max-width: 106px !important;
  }

  .quiz-screen .stepper-shell {
    margin-right: -6px !important;
    margin-left: -6px !important;
    padding-right: 32px !important;
    padding-left: 32px !important;
  }

  .quiz-screen .stepper-shell::before,
  body[data-theme="light"] .quiz-screen .stepper-shell::before {
    content: "" !important;
    background:
      linear-gradient(90deg,
        transparent 0,
        transparent calc(100% - 70px),
        color-mix(in srgb, var(--bg) 94%, transparent) calc(100% - 28px),
        color-mix(in srgb, var(--bg) 98%, transparent) 100%) !important;
  }
}

/* Progress, topics and mistakes reuse the site's existing color tokens. */
.progress-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}

.progress-overview h3,
.section-heading h3,
.mistake-group-head h3 {
  margin: 3px 0 0;
}

.section-kicker {
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.progress-ring {
  display: grid;
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--surface) 57%, transparent 59%),
    conic-gradient(var(--primary) calc(var(--progress) * 1%), color-mix(in srgb, var(--line) 56%, transparent) 0);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 58%, transparent);
}

.progress-ring strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

.study-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.ui-icon {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

.study-shortcut {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 78px;
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 19px;
  background: color-mix(in srgb, var(--surface-alt) 76%, transparent);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.study-shortcut:hover,
.topic-card:hover,
.mistake-card:hover {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  transform: translateY(-1px);
}

.study-shortcut .study-shortcut-label {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.study-shortcut-icon {
  display: grid;
  width: 38px;
  height: 38px;
  grid-row: 1 / 3;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
  font-size: 20px;
}

.study-shortcut strong {
  grid-column: 2;
  align-self: end;
  color: var(--primary);
  font-size: 16px;
  font-weight: 950;
}

.study-shortcut.has-errors strong {
  color: var(--rose);
}

.study-shortcut.has-errors .study-shortcut-icon {
  border-color: color-mix(in srgb, var(--rose) 32%, var(--line));
  background: color-mix(in srgb, var(--rose) 10%, var(--surface));
  color: var(--rose);
}

.home-actions .ghost-button:last-child {
  grid-column: auto;
}

.home-action-button,
.no-repeat-exam-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.exam-action-group,
.no-repeat-action-group {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 8px;
  align-items: stretch;
}

.exam-action-group .home-action-button,
.no-repeat-exam-button {
  grid-column: auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  justify-content: space-between;
  padding-right: 12px;
}

.exam-info-button,
.no-repeat-info-button {
  display: grid;
  width: 48px;
  min-width: 48px;
  min-height: 54px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-alt));
  color: var(--primary);
  cursor: pointer;
  font-size: 21px;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.exam-info-button:hover,
.no-repeat-info-button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 68%, var(--line));
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-alt));
}

.exam-info-button:active,
.no-repeat-info-button:active {
  transform: translateY(1px) scale(0.98);
}

.home-action-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.home-action-label .ui-icon {
  font-size: 20px;
}

.no-repeat-exam-button small {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-alt));
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

/* Keep labels inside their cards at every supported viewport width. */
:where(
  .brand,
  .screen-title,
  .progress-overview > div,
  .study-shortcut,
  .home-action-label,
  .topic-card-copy,
  .mistake-card,
  .question-body,
  .answer-content,
  .review-body,
  .rules-card,
  .side-panel,
  .mini-stat
) {
  min-width: 0;
}

:where(
  .brand h1,
  .brand .subtitle,
  .screen-title h1,
  .screen-title .subtitle,
  .progress-overview h3,
  .panel-copy,
  .study-shortcut-label,
  .study-shortcut strong,
  .home-action-label > span,
  .topic-card-copy strong,
  .topic-card-copy small,
  .mistake-card strong,
  .mistake-card small,
  .question-text,
  .answer-text,
  .review-body h3,
  .rules-card h3,
  .rules-paragraphs p,
  .side-panel p,
  .mini-stat span
) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.study-shortcut strong {
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.15;
  white-space: normal;
}

.home-actions > button,
.home-actions > .exam-action-group,
.home-actions > .no-repeat-action-group {
  width: 100%;
  min-width: 0;
}

.home-actions > button {
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.home-action-label {
  flex: 1 1 auto;
}

.home-action-label > span {
  min-width: 0;
  line-height: 1.18;
}

.no-repeat-exam-button small,
.study-shortcut-icon,
.topic-icon,
.topic-arrow {
  flex-shrink: 0;
}

.rule-paragraph-highlight {
  position: relative;
  margin: 2px -6px !important;
  padding: 12px 14px !important;
  scroll-margin-block: 120px;
  border: 1px solid color-mix(in srgb, var(--primary) 58%, var(--line));
  border-left: 4px solid var(--primary);
  border-radius: 15px;
  background: color-mix(in srgb, var(--primary-soft) 60%, var(--surface)) !important;
  color: var(--text) !important;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 13%, transparent);
  font-weight: 800 !important;
}

.rule-match-label {
  display: block;
  margin-bottom: 7px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.no-repeat-info-modal {
  width: min(520px, 100%);
  max-height: min(760px, calc(100dvh - 28px));
  overflow: auto;
}

.no-repeat-info-heading {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.no-repeat-info-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-alt));
  color: var(--primary);
  font-size: 24px;
}

.no-repeat-info-heading h3 {
  overflow-wrap: anywhere;
}

.no-repeat-info-list {
  display: grid;
  gap: 9px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.no-repeat-info-list li {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 54%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-alt) 76%, transparent);
}

.no-repeat-info-list strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.no-repeat-info-list span {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.home-progress-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.section-heading {
  display: flex;
  gap: 12px;
  align-items: end;
  justify-content: space-between;
  padding-top: 19px;
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

.section-note {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 750;
  text-align: right;
}

.study-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 18px;
  align-items: start;
}

.compact-screen-head {
  margin-bottom: 14px;
}

.topic-list,
.mistake-list,
.mistake-groups {
  display: grid;
  gap: 10px;
}

.topic-card,
.mistake-card {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 21px;
  background: color-mix(in srgb, var(--surface-alt) 72%, transparent);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease;
}

.topic-card.has-errors {
  border-color: color-mix(in srgb, var(--rose) 42%, var(--line));
  background: color-mix(in srgb, var(--rose-soft) 45%, var(--surface));
}

.topic-number,
.topic-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
}

.topic-icon {
  font-size: 21px;
}

.topic-card.has-errors .topic-number,
.topic-card.has-errors .topic-icon {
  background: var(--rose-soft);
  color: var(--rose);
}

.topic-card-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.topic-card-copy strong,
.mistake-card strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.24;
}

.topic-card-copy small,
.mistake-card small {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.topic-progress-track {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: color-mix(in srgb, var(--line) 48%, transparent);
}

.topic-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.topic-card.has-errors .topic-progress-track > span {
  background: var(--rose);
}

.topic-arrow {
  color: var(--primary);
  font-size: 28px;
  font-weight: 500;
}

.mistake-group {
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  border-radius: 23px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.mistake-group + .mistake-group {
  margin-top: 4px;
}

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

.mistake-count {
  display: grid;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  place-items: center;
  border-radius: 14px;
  background: var(--rose-soft);
  color: var(--rose);
  font-weight: 950;
}

.mistake-card {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
}

.mistake-card .mistake-ticket {
  grid-column: 1;
  color: var(--rose);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.mistake-card strong,
.mistake-card small {
  grid-column: 1;
}

.mistake-card .topic-arrow {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
}

.mistake-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 16px;
}

.mistake-summary > div {
  padding: 13px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--rose-soft) 58%, var(--surface));
}

.mistake-summary strong,
.mistake-summary span {
  display: block;
}

.mistake-summary strong {
  color: var(--rose);
  font-size: 21px;
  font-weight: 950;
}

.mistake-summary span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 750;
}

.mistakes-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.mistakes-empty strong {
  color: var(--text);
  font-size: 20px;
}

.mistakes-empty span {
  color: var(--text-soft);
  line-height: 1.45;
}

/* Keep answer copy readable while preserving the established status colors. */
.answer-button.correct .answer-text,
.answer-button.wrong .answer-text {
  color: var(--text) !important;
}

.answer-button.correct .answer-letter {
  color: var(--green) !important;
}

.answer-button.wrong .answer-letter {
  color: var(--rose) !important;
}

.explain {
  color: var(--text) !important;
}

.explain strong {
  color: var(--text) !important;
}

.explain.explain-correct {
  border-color: color-mix(in srgb, var(--green) 48%, var(--line)) !important;
  background: color-mix(in srgb, var(--green-soft) 72%, var(--surface)) !important;
}

.explain.explain-wrong {
  border-color: color-mix(in srgb, var(--rose) 48%, var(--line)) !important;
  background: color-mix(in srgb, var(--rose-soft) 72%, var(--surface)) !important;
}

@media (max-width: 900px) {
  .study-layout {
    grid-template-columns: 1fr;
  }

  .study-side {
    display: none;
  }
}

@media (max-width: 680px) {
  .study-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-progress-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .mistake-summary .primary-button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  .progress-ring {
    width: 72px;
    height: 72px;
  }

  .home-progress-stats {
    gap: 7px;
  }

  .home-progress-stats .mini-stat {
    padding: 10px 8px;
  }

  .home-progress-stats .mini-stat strong {
    font-size: 18px;
  }

  .section-note {
    display: none;
  }

  .topic-card,
  .mistake-card {
    padding: 13px;
    border-radius: 19px;
  }

  .topic-number,
  .topic-icon {
    width: 36px;
    height: 36px;
  }
}

/* Keep rule lookup available while reading long sections. */
html,
body {
  overflow-x: clip;
}

.rules-layout > .side-panel {
  position: sticky;
  top: 14px;
  z-index: 12;
  align-self: start;
}

@media (max-width: 900px) {
  .rules-layout {
    display: block;
  }

  .rules-layout > .side-panel {
    top: max(8px, env(safe-area-inset-top));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 19px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 12px 28px var(--shadow);
    backdrop-filter: blur(16px);
  }

  .rules-layout > .rules-list {
    margin-top: 12px;
  }

  .rules-layout > .side-panel h3 {
    margin: 0;
    font-size: 13px;
  }

  .rules-layout > .side-panel .rules-search {
    min-width: 0;
    min-height: 44px;
  }

  .rules-layout > .side-panel > p,
  .rules-layout > .side-panel > .rules-meta,
  .rules-layout > .side-panel > .source-link,
  .rules-layout > .side-panel > .rules-warning {
    display: none;
  }
}