/* Final override for the current release. Keep this file linked after styles.css. */
:root {
  --app-lime: #c7f04f;
  --app-cyan: #22d6d0;
  --app-teal: #00aeb8;
  --app-indigo: #6672e9;
}

body[data-theme="light"] {
  --bg: #edf7f1;
  --bg-alt: #ccefe6;
  --text: #071210;
  --text-soft: #344843;
  --text-faint: #637570;
  --surface: #fffaf0;
  --surface-alt: #eef3e9;
  --surface-high: #ffffff;
  --glass: rgba(255, 250, 240, 0.82);
  --line: #cfc8b8;
  --primary: #00aeb8;
  --primary-strong: #22d6d0;
  --primary-soft: #d2fbf2;
  --violet: #6672e9;
  background:
    linear-gradient(135deg, #ccefe6 0%, #f8f3e3 42%, #fff9ed 58%, #e4ecff 100%),
    var(--bg) !important;
}

body[data-theme="light"]::before {
  opacity: 0.76;
  background:
    linear-gradient(90deg, rgba(0, 174, 184, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(102, 114, 233, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(34, 214, 208, 0.16), transparent 43%);
  background-size: 58px 58px, 58px 58px, 100% 100%;
}

body[data-theme="light"] .panel,
body[data-theme="light"] .question-card,
body[data-theme="light"] .result-card,
body[data-theme="light"] .rules-card,
body[data-theme="light"] .review-card,
body[data-theme="light"] .side-panel,
body[data-theme="light"] .modal {
  border-color: color-mix(in srgb, var(--line) 82%, var(--primary) 18%) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 240, 0.94) 48%, rgba(240, 243, 232, 0.92)),
    var(--surface) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 34px 90px rgba(30, 45, 40, 0.14),
    0 12px 30px rgba(0, 174, 184, 0.07) !important;
}

body[data-theme="light"] .promo-panel {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line)) !important;
  background:
    linear-gradient(135deg, rgba(212, 251, 242, 0.98) 0%, rgba(255, 250, 240, 0.96) 47%, rgba(231, 234, 255, 0.94) 100%),
    var(--surface) !important;
}

body[data-theme="light"] .ticket-cell,
body[data-theme="light"] .answer-button,
body[data-theme="light"] .mini-stat,
body[data-theme="light"] .ghost-button,
body[data-theme="light"] .pill-button {
  border-color: color-mix(in srgb, var(--line) 78%, var(--primary) 22%) !important;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(248, 246, 236, 0.96) 62%, rgba(239, 245, 235, 0.94)),
    var(--surface-alt) !important;
}

body[data-theme="light"] .primary-button {
  color: #ffffff !important;
  background:
    linear-gradient(135deg, #08b6c2 0%, #2c8fd3 48%, #6672e9 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 18px 38px rgba(0, 174, 184, 0.25),
    0 10px 26px rgba(102, 114, 233, 0.18) !important;
}

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

.quiz-screen .stepper {
  margin: -12px 0 10px !important;
  padding: 18px 24px 24px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  contain: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  scroll-padding-inline: 24px;
}

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

.quiz-screen .step-dot {
  position: relative;
  z-index: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 24px rgba(0, 0, 0, 0.16) !important;
}

.quiz-screen .step-dot.current {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 14px 32px color-mix(in srgb, var(--primary) 36%, transparent) !important;
}

.app-download-panel {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px 14px !important;
}

.app-download-panel .app-promo-visual,
.home-app-offer .app-promo-visual {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  align-self: center !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-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  justify-items: start !important;
  align-self: center !important;
  margin: 0 !important;
}

.app-download-panel h3,
.app-download-panel p {
  grid-column: 1 / -1 !important;
}

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

.store-badge-button {
  width: auto !important;
  max-width: 100% !important;
  padding: 2px !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(7, 18, 16, 0.08) !important;
  overflow: visible !important;
}

.store-badge {
  width: 136px !important;
  max-width: 100% !important;
  border-radius: 10px !important;
  display: block !important;
}

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

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

.home-app-offer {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px 13px !important;
}

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

.app-download-modal .store-badges {
  grid-template-columns: repeat(2, minmax(0, 150px)) !important;
  justify-content: start !important;
}

.rule-highlight {
  border-color: color-mix(in srgb, var(--primary) 78%, var(--line)) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--primary-soft) 45%, var(--surface-high)), color-mix(in srgb, var(--surface) 86%, var(--primary-soft))) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 24px 60px color-mix(in srgb, var(--primary) 20%, transparent) !important;
}

.rule-highlight .rule-point {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--primary-strong), var(--primary)) !important;
  color: #071210 !important;
  font-size: 15px !important;
}

.rule-highlight h3 {
  color: var(--primary) !important;
  font-size: clamp(24px, 3.2vw, 32px) !important;
}

.rule-highlight .rules-paragraphs p:first-child {
  color: var(--text) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.rule-paragraph-highlight {
  margin: 2px -2px !important;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 62%, var(--line)) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface)) !important;
  color: var(--text) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
}

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

@media (max-width: 560px) {
  .app-shell {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .quiz-screen .stepper {
    padding-top: 18px !important;
    padding-right: 20px !important;
    padding-bottom: 24px !important;
    padding-left: 20px !important;
  }

  .app-download-panel,
  .home-app-offer {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 9px 12px !important;
  }

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

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