:root {
  --bg: var(--tg-theme-bg-color, #f4f7fb);
  --surface: var(--tg-theme-secondary-bg-color, #ffffff);
  --surface-strong: #ffffff;
  --text: var(--tg-theme-text-color, #172033);
  --muted: var(--tg-theme-hint-color, #6e7a90);
  --primary: var(--tg-theme-button-color, #1677ff);
  --primary-text: var(--tg-theme-button-text-color, #ffffff);
  --link: var(--tg-theme-link-color, #1677ff);
  --separator: var(--tg-theme-section-separator-color, rgba(23, 32, 51, .10));
  --success: #1f9d63;
  --danger: #df3c4e;
  --warning: #e79b18;
  --shadow: 0 10px 30px rgba(29, 48, 82, .10);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-height: 100vh; overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  width: min(100%, 760px);
  min-height: 100vh;
  margin: 0 auto;
  padding: calc(14px + var(--safe-top)) 16px calc(26px + var(--safe-bottom));
}

.splash {
  min-height: 84vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  text-align: center;
  color: var(--muted);
}
.brand-mark {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 25px;
  background: linear-gradient(145deg, #1d85ff, #075bd7);
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  box-shadow: 0 16px 38px rgba(22, 119, 255, .28);
}
.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(22, 119, 255, .18);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.brand-row { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mini {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #1d85ff, #075bd7);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(22, 119, 255, .24);
  flex: 0 0 auto;
}
.brand-copy { min-width: 0; }
.brand-copy strong { display: block; font-size: 16px; line-height: 1.15; }
.brand-copy span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.icon-button {
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--separator);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(29, 48, 82, .05);
}

.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 24px;
  background: linear-gradient(135deg, #0d6efd 0%, #0757c9 55%, #0346a7 100%);
  color: #fff;
  box-shadow: 0 18px 42px rgba(6, 86, 199, .28);
  margin-bottom: 18px;
}
.hero::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  right: -65px;
  top: -70px;
  background: rgba(255,255,255,.14);
}
.hero::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  right: 58px;
  bottom: -44px;
  background: rgba(255,255,255,.10);
}
.hero-kicker { opacity: .83; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.hero h1 { margin: 8px 0 9px; font-size: clamp(25px, 7vw, 34px); line-height: 1.08; }
.hero p { margin: 0; max-width: 540px; opacity: .88; line-height: 1.5; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.badge {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.18);
}

.resume-card {
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(231,155,24,.14), rgba(231,155,24,.04));
  border: 1px solid rgba(231,155,24,.30);
  padding: 16px;
  margin-bottom: 16px;
}
.resume-card h3 { margin: 0 0 6px; font-size: 16px; }
.resume-card p { margin: 0 0 13px; color: var(--muted); line-height: 1.4; }
.resume-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 22px 2px 12px;
}
.section-title h2 { margin: 0; font-size: 19px; }
.section-title span { color: var(--muted); font-size: 12px; }

.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.action-card {
  text-align: left;
  border: 1px solid var(--separator);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 17px;
  min-height: 148px;
  cursor: pointer;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, border-color .16s ease;
}
.action-card:active { transform: scale(.985); }
.action-card .emoji {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 23px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  margin-bottom: 14px;
}
.action-card strong { font-size: 16px; margin-bottom: 6px; }
.action-card small { color: var(--muted); line-height: 1.4; }
.action-card .arrow { margin-top: auto; align-self: flex-end; color: var(--link); font-weight: 900; }

.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.stat {
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--separator);
  padding: 13px 10px;
  text-align: center;
}
.stat strong { display: block; font-size: 20px; }
.stat span { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }

.notice {
  border: 1px solid rgba(22,119,255,.22);
  background: rgba(22,119,255,.07);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 16px;
}

.screen-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.screen-header .icon-button { flex: 0 0 auto; }
.screen-header-copy h1 { margin: 0; font-size: 22px; }
.screen-header-copy p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.list-grid { display: grid; gap: 11px; }
.list-card {
  width: 100%;
  border: 1px solid var(--separator);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 7px 22px rgba(29, 48, 82, .06);
}
.list-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  font-size: 23px;
  flex: 0 0 auto;
}
.list-copy { min-width: 0; flex: 1; }
.list-copy strong { display: block; font-size: 16px; }
.list-copy span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.list-arrow { color: var(--link); font-weight: 900; }

.variant-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.variant-button {
  aspect-ratio: 1;
  border: 1px solid var(--separator);
  background: var(--surface);
  color: var(--text);
  border-radius: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(29, 48, 82, .06);
}
.variant-button:active { transform: scale(.96); }

.question-shell { padding-bottom: 92px; }
.question-top { position: sticky; top: calc(8px + var(--safe-top)); z-index: 5; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); padding: 4px 0 12px; }
.progress-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.progress-track { height: 8px; background: rgba(110,122,144,.18); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); border-radius: inherit; transition: width .25s ease; }

.question-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--separator);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-top: 14px;
}
.question-meta { color: var(--link); font-weight: 750; font-size: 13px; margin-bottom: 12px; }
.question-context { padding: 13px; background: rgba(110,122,144,.08); border-radius: 12px; line-height: 1.55; white-space: pre-wrap; margin-bottom: 14px; }
.question-text { font-size: clamp(18px, 5vw, 22px); line-height: 1.48; font-weight: 750; white-space: pre-wrap; }
.options { display: grid; gap: 11px; margin-top: 20px; }
.option-button {
  width: 100%;
  border: 1.5px solid var(--separator);
  background: var(--surface-strong);
  color: var(--text);
  border-radius: 15px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  text-align: left;
  line-height: 1.4;
  cursor: pointer;
}
.option-letter {
  min-width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(110,122,144,.12);
  font-weight: 850;
}
.option-button.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface-strong)); }
.option-button.selected .option-letter { background: var(--primary); color: var(--primary-text); }
.option-button.correct { border-color: var(--success); background: rgba(31,157,99,.08); }
.option-button.correct .option-letter { background: var(--success); color: #fff; }
.option-button.wrong { border-color: var(--danger); background: rgba(223,60,78,.08); }
.option-button.wrong .option-letter { background: var(--danger); color: #fff; }
.option-button:disabled { cursor: default; opacity: 1; }

.text-answer {
  width: 100%;
  min-height: 108px;
  margin-top: 20px;
  border: 1.5px solid var(--separator);
  border-radius: 15px;
  padding: 14px;
  background: var(--surface-strong);
  color: var(--text);
  resize: vertical;
  outline: none;
}
.text-answer:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,119,255,.10); }

.feedback {
  margin-top: 16px;
  border-radius: 15px;
  padding: 15px;
  line-height: 1.52;
}
.feedback.success { background: rgba(31,157,99,.10); border: 1px solid rgba(31,157,99,.25); }
.feedback.error { background: rgba(223,60,78,.09); border: 1px solid rgba(223,60,78,.23); }
.feedback strong { display: block; margin-bottom: 6px; }
.feedback p { margin: 8px 0 0; }

.question-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}
.nav-dot {
  width: 35px;
  height: 35px;
  border-radius: 11px;
  border: 1px solid var(--separator);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.nav-dot.current { border-color: var(--primary); color: var(--primary); }
.nav-dot.answered { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }

.bottom-actions {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 760px);
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(15px);
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--separator);
}
.primary-button, .secondary-button, .danger-button {
  border: none;
  border-radius: 14px;
  min-height: 48px;
  padding: 0 17px;
  font-weight: 800;
  cursor: pointer;
}
.primary-button { background: var(--primary); color: var(--primary-text); flex: 1; }
.secondary-button { background: var(--surface); color: var(--text); border: 1px solid var(--separator); }
.danger-button { background: rgba(223,60,78,.10); color: var(--danger); border: 1px solid rgba(223,60,78,.20); }
.primary-button:disabled { opacity: .5; cursor: not-allowed; }
.small-button { min-height: 38px; padding: 0 12px; font-size: 13px; }

.result-hero {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--radius-xl);
  padding: 25px 18px;
  box-shadow: var(--shadow);
}
.result-ring {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  background: conic-gradient(var(--primary) calc(var(--score) * 1%), rgba(110,122,144,.16) 0);
  position: relative;
}
.result-ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface); }
.result-value { position: relative; z-index: 1; }
.result-value strong { display: block; font-size: 30px; }
.result-value span { color: var(--muted); font-size: 12px; }
.result-hero h1 { margin: 0 0 7px; font-size: 24px; }
.result-hero p { margin: 0; color: var(--muted); }
.breakdown-list { display: grid; gap: 9px; margin-top: 16px; }
.breakdown-row {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: 14px;
  padding: 13px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.breakdown-row span { color: var(--muted); }
.breakdown-row strong { white-space: nowrap; }

.attempt-card, .mistake-card {
  border: 1px solid var(--separator);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 15px;
  box-shadow: 0 7px 20px rgba(29,48,82,.05);
}
.attempt-card + .attempt-card, .mistake-card + .mistake-card { margin-top: 10px; }
.attempt-head { display: flex; justify-content: space-between; gap: 10px; }
.attempt-card h3, .mistake-card h3 { margin: 0; font-size: 15px; }
.attempt-score { font-weight: 850; color: var(--primary); white-space: nowrap; }
.attempt-meta { color: var(--muted); font-size: 12px; margin-top: 7px; }
.mistake-card p { margin: 8px 0; line-height: 1.45; }
.answer-line { font-size: 13px; color: var(--muted); }
.answer-line strong { color: var(--text); }

.language-grid { display: grid; gap: 10px; }
.language-button {
  border: 1px solid var(--separator);
  background: var(--surface);
  color: var(--text);
  border-radius: 15px;
  padding: 15px;
  text-align: left;
  font-weight: 750;
  cursor: pointer;
}
.language-button.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,119,255,.09); }

.empty-state { text-align: center; padding: 56px 20px; color: var(--muted); }
.empty-state .emoji { font-size: 42px; margin-bottom: 12px; }
.empty-state h2 { color: var(--text); margin: 0 0 8px; }
.empty-state p { margin: 0; line-height: 1.5; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(3,12,28,.48);
  display: grid;
  align-items: end;
  padding: 16px 16px calc(16px + var(--safe-bottom));
}
.modal {
  width: min(100%, 560px);
  margin: 0 auto;
  background: var(--surface);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 25px 70px rgba(0,0,0,.28);
}
.modal h2 { margin: 0 0 8px; font-size: 20px; }
.modal p { margin: 0 0 17px; color: var(--muted); line-height: 1.5; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions > * { flex: 1; }

.toast {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: calc(84px + var(--safe-bottom));
  transform: translate(-50%, 20px);
  background: #172033;
  color: #fff;
  padding: 11px 14px;
  border-radius: 13px;
  box-shadow: 0 12px 35px rgba(0,0,0,.25);
  max-width: min(90vw, 520px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  font-size: 13px;
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.error-page { min-height: 80vh; display: grid; place-items: center; text-align: center; padding: 28px; }
.error-page .emoji { font-size: 50px; }
.error-page h1 { margin: 12px 0 8px; }
.error-page p { color: var(--muted); line-height: 1.55; max-width: 480px; }

@media (max-width: 420px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .action-grid { grid-template-columns: 1fr; }
  .action-card { min-height: 116px; }
  .stats-strip { gap: 7px; }
  .variant-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .question-card { padding: 17px; }
  .bottom-actions { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-forced-theme="light"]) {
    --bg: var(--tg-theme-bg-color, #111722);
    --surface: var(--tg-theme-secondary-bg-color, #1a2230);
    --surface-strong: #202a39;
    --text: var(--tg-theme-text-color, #f2f5f9);
    --muted: var(--tg-theme-hint-color, #9aa7bb);
    --separator: rgba(255,255,255,.10);
    --shadow: 0 12px 32px rgba(0,0,0,.22);
  }
}

/* =========================================================
   Помощь мигранту — фирменная тема v2.0
   Фиолетово-синий градиент по утверждённому референсу
   ========================================================= */
:root {
  --brand-violet: #7b59e8;
  --brand-purple: #6d4bd8;
  --brand-indigo: #5746d7;
  --brand-blue: #4f79ed;
  --brand-cyan: #22c4d6;
  --brand-green: #77c92e;
  --primary: #7156e5;
  --link: #7156e5;
  --accent-gradient: linear-gradient(135deg, #825ee9 0%, #6d4edc 48%, #526ee6 100%);
  --hero-shadow: 0 22px 55px rgba(99, 76, 218, .30);
  --shadow: 0 12px 34px rgba(75, 61, 155, .12);
  --radius-xl: 28px;
  --radius-lg: 21px;
}

html, body {
  background:
    radial-gradient(circle at 92% -5%, rgba(123, 89, 232, .15), transparent 32%),
    radial-gradient(circle at -10% 25%, rgba(79, 121, 237, .10), transparent 30%),
    var(--bg);
}

.app-shell { padding-top: calc(12px + var(--safe-top)); }

.brand-mark, .brand-mini {
  background: var(--accent-gradient);
  box-shadow: 0 13px 30px rgba(105, 78, 220, .31);
}
.brand-mini { border-radius: 15px; }

.icon-button {
  border-color: rgba(113, 86, 229, .16);
  box-shadow: 0 7px 20px rgba(74, 57, 149, .08);
}
.icon-button:active { transform: scale(.95); }

.hero {
  background: var(--accent-gradient);
  box-shadow: var(--hero-shadow);
  padding: 27px 24px;
  isolation: isolate;
}
.hero::after {
  width: 210px;
  height: 210px;
  right: -88px;
  top: -100px;
  background: rgba(255,255,255,.13);
  z-index: -1;
}
.hero::before {
  width: 115px;
  height: 115px;
  right: 72px;
  bottom: -72px;
  background: rgba(255,255,255,.11);
  z-index: -1;
}
.hero-kicker { font-size: 14px; opacity: .88; }
.hero h1 { font-weight: 900; letter-spacing: -.035em; }
.hero p { font-size: 16px; }
.badge {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.24);
  backdrop-filter: blur(8px);
}

.resume-card {
  background: linear-gradient(135deg, rgba(123,89,232,.13), rgba(79,121,237,.07));
  border-color: rgba(113,86,229,.26);
  box-shadow: 0 10px 28px rgba(90,72,174,.10);
}

.section-title h2 { font-size: 21px; letter-spacing: -.02em; }

.action-card {
  position: relative;
  overflow: hidden;
  border: 0;
  min-height: 166px;
  color: #fff;
  box-shadow: 0 15px 32px rgba(61, 48, 132, .17);
  transform: translateZ(0);
}
.action-card::after {
  content: "";
  position: absolute;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  right: -48px;
  top: -52px;
  background: rgba(255,255,255,.12);
}
.action-card.card-learning { background: linear-gradient(135deg, #20c6d5, #18adca); }
.action-card.card-variants { background: linear-gradient(135deg, #7acb30, #61b925); }
.action-card.card-random { background: linear-gradient(135deg, #7655e5, #4e3bd0); }
.action-card.card-results { background: linear-gradient(135deg, #5683f2, #3f66dc); }
.action-card.card-tasks { background: linear-gradient(135deg, #10b99c, #078b77); }
.action-card .emoji {
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.11);
  margin-bottom: 16px;
}
.action-card strong { font-size: 18px; position: relative; z-index: 1; }
.action-card small { color: rgba(255,255,255,.82); position: relative; z-index: 1; }
.action-card .arrow {
  color: #fff;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #5e4bd8;
  display: grid;
  place-items: center;
  font-size: 20px;
  position: relative;
  z-index: 1;
}
.action-card:active { transform: scale(.972); }

.stats-strip { gap: 11px; }
.stat {
  border: 0;
  box-shadow: 0 8px 23px rgba(75,61,155,.09);
  padding: 15px 9px;
}
.stat strong { color: var(--primary); }

.notice {
  border-color: rgba(113,86,229,.18);
  background: linear-gradient(135deg, rgba(123,89,232,.08), rgba(79,121,237,.06));
}

.list-card, .question-card, .result-hero, .attempt-card, .mistake-card {
  border-color: rgba(113,86,229,.12);
  box-shadow: 0 11px 30px rgba(75,61,155,.09);
}
.list-card:active { transform: scale(.985); }
.list-icon {
  background: linear-gradient(135deg, rgba(123,89,232,.16), rgba(79,121,237,.13));
}
.list-arrow { color: var(--primary); }

.variant-button {
  border-color: rgba(113,86,229,.15);
  box-shadow: 0 8px 22px rgba(75,61,155,.09);
}
.variant-button:active,
.variant-button:hover { border-color: var(--primary); color: var(--primary); }

.progress-track { height: 9px; }
.progress-fill { background: var(--accent-gradient); }
.question-meta { color: var(--primary); }
.option-button.selected {
  border-color: var(--primary);
  background: rgba(113,86,229,.08);
}
.option-button.selected .option-letter { background: var(--accent-gradient); }
.text-answer:focus { box-shadow: 0 0 0 4px rgba(113,86,229,.11); }
.nav-dot.current { border-color: var(--primary); color: var(--primary); }
.nav-dot.answered { background: var(--accent-gradient); border-color: transparent; }

.primary-button {
  background: var(--accent-gradient);
  box-shadow: 0 10px 24px rgba(100,75,218,.25);
}
.primary-button:active { transform: translateY(1px) scale(.99); }
.secondary-button { border-color: rgba(113,86,229,.17); }

.result-ring { background: conic-gradient(#7156e5 calc(var(--score) * 1%), rgba(110,122,144,.16) 0); }
.attempt-score { color: var(--primary); }
.language-button.active { box-shadow: 0 0 0 4px rgba(113,86,229,.10); }

.spinner {
  border-color: rgba(113,86,229,.18);
  border-top-color: var(--primary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-forced-theme="light"]) {
    --primary: #9a82ff;
    --link: #9a82ff;
    --bg: var(--tg-theme-bg-color, #0c0b12);
    --surface: var(--tg-theme-secondary-bg-color, #191820);
    --surface-strong: #22212b;
    --separator: rgba(255,255,255,.10);
    --shadow: 0 13px 34px rgba(0,0,0,.28);
  }
  html, body {
    background:
      radial-gradient(circle at 90% -5%, rgba(123,89,232,.18), transparent 30%),
      #0c0b12;
  }
  .action-card { box-shadow: 0 15px 34px rgba(0,0,0,.28); }
}

@media (max-width: 420px) {
  .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-card { min-height: 154px; padding: 15px; }
  .action-card strong { font-size: 16px; }
  .action-card small { font-size: 12px; }
}

/* ===== v3.0 refined color system ===== */
.stats-strip {
  padding: 10px;
  border: 1px solid rgba(126, 91, 239, .22);
  background: linear-gradient(145deg, rgba(124, 92, 246, .10), rgba(84, 107, 244, .04));
  border-radius: 24px;
}
.stat {
  position: relative;
  overflow: hidden;
  min-height: 88px;
  padding: 14px 8px 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.stat::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  right: -20px;
  top: -22px;
  border-radius: 50%;
  background: currentColor;
  opacity: .10;
}
.stat-icon { display:block; font-size: 17px; margin-bottom: 4px; filter: saturate(.9); }
.stat strong { font-size: 23px; line-height: 1; }
.stat-attempts strong { color: #8d6cf6; }
.stat-best strong { color: #f2b84b; }
.stat-average strong { color: #45c7bc; }

.list-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.list-card::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  z-index: -1;
  opacity: .12;
  background: linear-gradient(110deg, var(--section-color), transparent 58%);
}
.list-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 110px;
  height: 110px;
  right: -55px;
  top: -55px;
  border-radius: 50%;
  background: var(--section-color);
  opacity: .08;
  z-index: -1;
}
.list-card:active { transform: scale(.985); }
.list-card .list-icon {
  background: color-mix(in srgb, var(--section-color) 18%, rgba(255,255,255,.06));
  border: 1px solid color-mix(in srgb, var(--section-color) 34%, transparent);
}
.list-card .list-arrow { color: var(--section-color); }
.section-reading { --section-color: #36b7f2; }
.section-writing { --section-color: #f4a340; }
.section-lex_grammar { --section-color: #22c7b7; }
.section-history { --section-color: #8b68f5; }
.section-law { --section-color: #65c85f; }

.variant-button {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 22px rgba(25,20,55,.15);
}
.variant-button span { font-size: 21px; font-weight: 800; }
.variant-button small { font-size: 10px; font-weight: 650; opacity: .72; }
.variant-tone-1 { background: linear-gradient(145deg, #7b5cf5, #5d56df); }
.variant-tone-2 { background: linear-gradient(145deg, #506fe9, #455fd0); }
.variant-tone-3 { background: linear-gradient(145deg, #25b8c8, #2396bb); }
.variant-tone-4 { background: linear-gradient(145deg, #7156dd, #4f63dc); }
.variant-button:hover, .variant-button:active { color:#fff; border-color:rgba(255,255,255,.36); filter:brightness(1.06); }

@media (prefers-color-scheme: light) {
  .stats-strip { background: linear-gradient(145deg, rgba(124,92,246,.10), rgba(84,107,244,.035)); }
  .stat { background: rgba(255,255,255,.72); border-color: rgba(105,91,170,.10); }
  .list-card::before { opacity: .10; }
}

/* =========================================================
   Основная нижняя навигация v4.4
   ========================================================= */
.app-shell { padding-bottom: calc(104px + var(--safe-bottom)); }
.bottom-nav {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 760px);
  min-height: 72px;
  padding: 7px 8px calc(7px + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-top: 1px solid var(--separator);
  box-shadow: 0 -10px 30px rgba(31, 39, 74, .10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.bottom-nav-item {
  border: 0;
  background: transparent;
  color: var(--muted);
  min-width: 0;
  min-height: 56px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 2px;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}
.bottom-nav-item.active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.bottom-nav-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  font-size: 21px;
  line-height: 1;
  font-weight: 900;
}
.bottom-nav-item:active { transform: scale(.96); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.service-tile {
  min-height: 126px;
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  padding: 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 8px 24px rgba(29, 48, 82, .06);
  cursor: pointer;
}
.service-tile > span { font-size: 29px; }
.service-tile strong { font-size: 15px; }
.service-tile small { color: var(--muted); line-height: 1.3; }

.profile-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 19px;
  border: 1px solid var(--separator);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.profile-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 21px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  background: var(--accent-gradient);
}
.profile-card h2 { margin: 0 0 5px; font-size: 20px; }
.profile-card p { margin: 0; color: var(--muted); font-size: 13px; }
.profile-list { display: grid; gap: 10px; margin-top: 15px; }
.profile-list button {
  min-height: 56px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 750;
  cursor: pointer;
}
.profile-list button b { color: var(--primary); }

@media (max-width: 380px) {
  .bottom-nav-item { font-size: 9px; }
  .bottom-nav-icon { font-size: 19px; }
  .service-grid { grid-template-columns: 1fr; }
}
.question-context, .question-text { white-space: pre-line; }

/* AI coach: isolated from existing exam screens */
.ai-promo{display:flex;align-items:center;gap:15px;width:100%;margin:20px 0;border:1px solid #8faaf9;background:linear-gradient(115deg,#2345b8,#7c4df0);color:white;border-radius:20px;padding:17px;text-align:left;cursor:pointer}
.ai-promo-robot{font-size:44px}.ai-promo span:nth-child(2){display:grid;gap:6px;flex:1}.ai-promo strong{font-size:19px}.ai-promo small{opacity:.85;font-size:13px}
.coach-hero{background:linear-gradient(160deg,#17469e,#3797f5);border-radius:24px;padding:20px;color:white;text-align:center;margin:16px 0}
.coach-avatar{font-size:90px;line-height:1.2;filter:drop-shadow(0 10px 12px #092b6270)}.coach-hero h2{margin:6px 0}.coach-hero p{opacity:.9}.coach-status{display:inline-block;background:#0c7c5a;border-radius:20px;padding:7px 13px;font-size:12px}
.coach-label{display:block;margin:12px 0 8px;font-weight:700}.coach-select{width:100%;border-radius:13px;padding:14px;font-size:16px;border:1px solid #cbd5e1;background:var(--card,#fff);color:var(--text,#1a2340)}
.coach-messages{height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:16px 4px}.coach-bubble{padding:12px 15px;border-radius:17px;max-width:90%;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.5}.coach-bubble.assistant{align-self:flex-start;background:#e9f1ff;color:#152d58}.coach-bubble.user{align-self:flex-end;background:#c6f3df;color:#143f31}
.coach-controls{display:flex;gap:8px;align-items:center;margin:8px 0}.coach-controls input{min-width:0;flex:1;padding:13px 10px;border:1px solid #b9c9df;border-radius:13px;font-size:16px;background:#fff;color:#17233a}.coach-mic,.coach-send{border:0;border-radius:13px;background:#216cf1;color:#fff;min-width:46px;height:47px;font-size:22px}.coach-mic.listening{background:#e04444;animation:pulse 1s infinite}.coach-footnote{font-size:12px;color:#718096;line-height:1.5;margin-bottom:100px}
@keyframes pulse{50%{opacity:.55}}

/* v4.6: Emma visual design, scoped to coach so exam sections remain untouched */
.ai-promo-image{width:68px;height:76px;object-fit:cover;object-position:50% 12%;border-radius:15px;border:2px solid #9ccfff;flex:none}
.emma-hero{position:relative;isolation:isolate;overflow:hidden;min-height:370px;margin:14px 0 18px;border-radius:25px;background:radial-gradient(circle at 72% 30%,#5ab5ff 0%,#165cba 47%,#0c2459 100%);color:white;box-shadow:0 12px 28px #1254ad2c}
.emma-portrait{position:absolute;right:0;top:0;width:68%;height:310px;overflow:hidden;z-index:-1}
.emma-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;mask-image:linear-gradient(to bottom,#000 65%,transparent 100%)}
.emma-online{position:absolute;right:12px;top:14px;background:#dcfff0;color:#057d52;padding:7px 10px;border-radius:20px;font-weight:800;font-size:12px}
.emma-intro{position:absolute;bottom:0;left:0;right:0;padding:19px 18px 21px;background:linear-gradient(transparent,#0a2458 20%,#0a2458 100%)}
.emma-intro h2{font-size:25px;margin:0 0 6px}.emma-intro p{margin:0;line-height:1.45;font-size:14px;max-width:340px}
.coach-language-panel{background:var(--surface,#fff);padding:16px;border:1px solid var(--separator,#e1e6ef);border-radius:20px}
.coach-language-panel h3{font-size:16px;margin:0 0 12px}.coach-language-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.coach-language-pill{padding:11px 7px;background:#eef5ff;border:2px solid transparent;border-radius:12px;color:#173a70;font-size:12px;font-weight:750;cursor:pointer}
.coach-language-pill.selected{border-color:#1976f3;background:#d9eaff}
.coach-shortcuts{display:flex;gap:8px;overflow-x:auto;padding:13px 0}.coach-shortcuts button{white-space:nowrap;border:1px solid #cbdcf5;border-radius:20px;padding:10px 13px;background:#f0f6ff;color:#174d93;font-weight:700}
.coach-chat-title{font-size:17px;margin:10px 0 0}.coach-messages{min-height:220px;height:260px}.coach-controls{position:relative}
@media(min-width:620px){.emma-hero{min-height:430px}.emma-portrait{height:390px;width:55%}}
/* v4.7 reference-inspired UI. Scoped to new screens; legacy exam styles untouched. */
:root{--ref-blue:#0878f9;--ref-navy:#072a59}
body{background:#f3f7fc}
.app-shell{padding-bottom:80px}
.ref-home,.ref-page{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;color:#111c33;max-width:600px;margin:auto}
.ref-home{background:#f6faff;min-height:calc(100vh - 92px)}
.ref-top{background:linear-gradient(130deg,#03224e,#0756a5);color:#fff;display:flex;align-items:center;padding:20px 16px 16px;gap:10px}
.ref-logo{display:grid;place-items:center;background:white;border-radius:50%;width:42px;height:42px;font-size:25px}
.ref-top>div{flex:1}.ref-top strong{display:block;font-size:20px}.ref-top small{display:block;font-size:11px;opacity:.86;margin-top:3px}.ref-bell{color:#fff;background:transparent;border:0;font-size:24px}
.ref-city{position:relative;height:195px;overflow:hidden;background:#103c70}.ref-city img{width:100%;height:100%;object-fit:cover}.ref-city:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 28%,rgba(0,19,50,.88))}.ref-city>div{position:absolute;z-index:1;bottom:12px;left:17px;color:#fff}.ref-city h2{font-size:23px;margin:0 0 5px}.ref-city p{font-size:13px;line-height:1.35;margin:0}
.ref-tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px}.ref-tile{border:0;border-radius:13px;min-height:126px;color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;box-shadow:0 3px 9px #001d3b17}.ref-tile span{font-size:34px}.ref-tile strong{font-size:14px;text-align:center}.ref-tile small{font-size:11px}.ref-tile.blue{background:linear-gradient(135deg,#009af7,#0756ed)}.ref-tile.green{background:linear-gradient(135deg,#00bfa3,#00945d)}.ref-tile.purple{background:linear-gradient(135deg,#9c4afa,#5c22dc)}.ref-tile.orange{background:linear-gradient(135deg,#ffad12,#ff6b00)}
.ref-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:3px 12px 18px}.ref-quick button{border:0;background:transparent;font-size:25px;display:flex;align-items:center;flex-direction:column;color:#092b60}.ref-quick small{font-size:11px;margin-top:5px;color:#1c2942}.ref-resume{margin:0 12px 12px;width:calc(100% - 24px);padding:12px;border:0;border-radius:12px;background:#dcecff;color:#0757b8;font-weight:700}
.ref-page{min-height:calc(100vh - 92px);background:linear-gradient(#fff,#f3f8ff);padding:0 14px 28px}.ref-head{display:flex;align-items:center;gap:12px;padding:23px 2px 20px}.ref-head h1{font-size:23px;line-height:1.15;margin:0}.ref-head p{font-size:12px;color:#60718a;margin:4px 0 0}.ref-back{border:0;background:transparent;color:#006dff;font-size:36px;width:30px;line-height:1;flex-shrink:0}
.ref-list{display:flex;flex-direction:column;gap:8px}.ref-list-row{border:1px solid #e9edf5;background:#fff;border-radius:13px;min-height:66px;display:flex;align-items:center;text-align:left;gap:12px;padding:10px 12px;box-shadow:0 2px 8px #203d6610;width:100%}.ref-list-icon{height:42px;width:42px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:22px;flex-shrink:0}.ref-list-row>span:nth-child(2){flex:1;min-width:0}.ref-list-row strong{display:block;font-size:14px;color:#17233a}.ref-list-row small{display:block;font-size:11px;color:#62738b;margin-top:4px}.ref-list-row b{font-size:23px;color:#a0aaba;font-weight:400}
.ref-coach{background:linear-gradient(180deg,#0758b6 0%,#d5e9ff 70%,#f8fbff 100%);padding:0 14px 26px}.ref-coach-title{display:flex;align-items:center;gap:9px;color:white;padding:12px 0 6px}.ref-coach-title h1{font-size:21px;margin:0}.ref-coach-title p{font-size:11px;margin:2px 0}.ref-coach-title .ref-back{color:#fff}.ref-emma-hero{position:relative;margin:0 auto;max-width:330px;height:300px;overflow:hidden;border-radius:22px;background:linear-gradient(#367cce,#c2e0ff)}.ref-emma-hero img{height:100%;width:100%;object-fit:cover;object-position:center top}.ref-online{position:absolute;right:10px;top:10px;background:#d9fff1;color:#058967;border-radius:12px;padding:6px 9px;font-size:12px;font-weight:700}.ref-emma-intro{position:relative;margin:-20px auto 10px;max-width:350px;background:#fff;border-radius:15px;padding:13px 15px;box-shadow:0 4px 20px #06356825}.ref-emma-intro strong{font-size:16px}.ref-emma-intro p{font-size:13px;line-height:1.45;margin:5px 0 0}.ref-language-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ref-language-chips button{border:1px solid #d8e6f9;border-radius:9px;background:#f9fcff;color:#233b5d;font-size:12px;padding:10px 3px}.ref-language-chips button.selected{border:2px solid #0079ff;background:#e2f0ff;font-weight:700}.ref-language-more{border:0;background:#e3f1ff;border-radius:10px;color:#0065df;padding:12px;width:100%;margin:12px 0}.ref-primary{background:linear-gradient(90deg,#0096ff,#0753ef);color:white;border:0;border-radius:12px;font-size:15px;font-weight:700;padding:15px;width:100%}.ref-demo-note{text-align:center;color:#6e7c90;font-size:11px;line-height:1.4;margin:12px 4px}
.ref-chat-page{display:flex;flex-direction:column;height:calc(100dvh - 92px);padding-bottom:10px}.ref-chat-messages{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:15px 4px}.ref-chat-bubble{max-width:84%;padding:12px 14px;border-radius:16px;font-size:14px;line-height:1.5;white-space:pre-wrap}.ref-chat-bubble.assistant{background:#e4f1ff;align-self:flex-start}.ref-chat-bubble.user{background:#dcf8e8;align-self:flex-end}.ref-chat-example{background:#e6f6ed;border-radius:14px;padding:11px;margin-bottom:12px}.ref-chat-example button{background:none;border:0;font-size:15px;font-weight:700;color:#15683d}.ref-chat-example small{display:block;color:#5b7770;padding-left:10px;margin-top:4px}.ref-chat-controls{display:flex;gap:8px}.ref-chat-controls input{min-width:0;flex:1;border:1px solid #dce7f3;border-radius:12px;padding:12px;background:#fff}.ref-chat-controls button{border:0;border-radius:50%;width:46px;height:46px;background:#087bff;color:#fff;font-size:22px}.ref-practice{text-align:center;background:linear-gradient(#d5e9ff,#f9fcff);border-radius:18px;padding:18px 12px 24px}.ref-practice img{height:280px;width:100%;max-width:310px;object-fit:cover;object-position:top;border-radius:16px}.ref-practice-word{background:white;padding:14px;border-radius:14px;margin:-30px auto 20px;position:relative;max-width:290px}.ref-practice-word small{display:block;color:#617089}.ref-practice-word strong{font-size:22px}.ref-mic{background:#ff523b;color:white;border:0;border-radius:50%;width:80px;height:80px;font-size:35px;box-shadow:0 4px 20px #ff523b60}.ref-practice-result{font-size:12px;color:#62718a;min-height:30px}
/* The fixed footer keeps the reference-like five-tab navigation. */
.bottom-nav{position:fixed!important;bottom:0!important;left:0!important;right:0!important;max-width:600px;margin:auto!important;background:#fff!important;border-top:1px solid #e2e8f1!important;z-index:30!important;padding-bottom:max(7px,env(safe-area-inset-bottom))!important}
.bottom-nav-item.active{color:#086fff!important}
@media(max-width:360px){.ref-top strong{font-size:17px}.ref-tile{min-height:111px}.ref-city{height:170px}.ref-emma-hero{height:255px}}

.app-shell:has(.ref-home),.app-shell:has(.ref-page){padding:0 0 85px!important;max-width:600px!important}
.ref-user-card{background:#fff;border:1px solid #e9edf5;border-radius:14px;padding:15px;display:flex;align-items:center;gap:14px;margin-bottom:15px}.ref-user-card>span{background:#e4f0ff;border-radius:50%;height:58px;width:58px;display:grid;place-items:center;font-size:30px}.ref-user-card strong{display:block;font-size:16px}.ref-user-card small{display:block;color:#60718a;margin-top:4px}

/* v4.8: iPhone Telegram WebView navigation and compact Emma screen */
html,body{width:100%;max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
.app-shell{width:100%;min-width:0;overflow-x:clip}
.app-shell:has(.ref-home),.app-shell:has(.ref-page){padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))!important}
.bottom-nav{box-sizing:border-box!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;transform:none!important;width:100%!important;max-width:none!important;margin:0!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;padding:6px max(4px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-right,0px))!important;min-height:65px!important;z-index:1000!important;overflow:hidden!important}
.bottom-nav-item{min-width:0!important;width:100%!important;min-height:48px!important;padding:3px 0!important;font-size:clamp(9px,2.4vw,11px)!important;white-space:nowrap;gap:3px!important}
.bottom-nav-icon{font-size:0!important;width:25px;height:25px;display:grid;place-items:center}
.bottom-nav-icon svg{display:block;width:23px;height:23px}
.ref-top .ref-logo svg{color:#086fff;width:25px;height:25px}
.ref-tile span svg{height:35px;width:35px;stroke-width:2.3}
.ref-coach{padding:0 12px calc(24px + env(safe-area-inset-bottom,0px))}
.ref-coach-title{padding:10px 0 6px}
.ref-emma-hero{height:clamp(220px,58vw,285px);max-width:360px;border-radius:19px}
.ref-emma-hero img{width:100%;height:100%;object-fit:cover;object-position:center 10%;transform:scale(1.16);transform-origin:center top}
.ref-emma-intro{margin:-12px auto 9px;max-width:380px;padding:11px 13px}
.ref-emma-intro strong{font-size:15px}.ref-emma-intro p{font-size:12px;line-height:1.35}
.ref-language-chips{gap:6px}.ref-language-chips button{padding:8px 3px;font-size:12px}
.ref-language-more{padding:10px;margin:9px 0}.ref-start{padding:12px}
.ref-demo-note{margin:8px 4px;font-size:10px}
@media(max-width:380px){.ref-emma-hero{height:230px}.ref-coach-title h1{font-size:19px}}

/* v4.9: Consistent readable surfaces across Telegram light/dark themes */
:root{color-scheme:light;--bg:#f3f6fc;--surface:#fff;--text:#172033;--muted:#62718a;--separator:#dce3ed}
html,body,.app-shell{background:#f3f6fc;color:#172033}
.topbar,.screen-header,.section-title,.screen-header-copy,.ref-page{color:#172033}
.screen-header h1,.section-title h2,.ref-head h1,.ref-head p{color:#172033!important;opacity:1!important}
.screen-header-copy p,.section-title span{color:#53647d!important}
.language-grid .language-button{background:#fff!important;color:#172033!important;border:1px solid #d9e1ec!important}
.language-grid .language-button.active{border:2px solid #087bff!important;background:#eaf3ff!important}
.icon-button[data-action="settings"]{width:auto;min-width:60px;padding:9px 11px;color:#0755b4;background:#e5f0ff}
.ref-bell{min-width:72px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:15px;font-weight:700}
.ref-bell span{font-size:12px}
.feedback-source{margin-top:12px;border:1px solid #b7c9e5;border-radius:10px;padding:10px;background:#fff;color:#172033}
.feedback-source summary{font-weight:700;cursor:pointer;line-height:1.4}
.feedback-source ol{padding-left:24px}
.question-context,.question-text,.feedback{color:#172033;opacity:1}
@media(prefers-color-scheme:dark){html,body,.app-shell{background:#f3f6fc;color:#172033}}

/* v4.9.2: Exam/practice questions use a dark card, so do not inherit
   the light-page text color from the v4.9 global readability patch. */
.question-card {
  background: #1c1c1f;
  color: #f8fafc;
}
.question-card .question-context,
.question-card .question-text,
.question-card .question-context *,
.question-card .question-text * {
  color: #f8fafc !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #f8fafc;
}
.question-card .question-context {
  background: #2a2b31;
  border: 1px solid #3b3e48;
}
.question-card .question-meta { color: #b49aff; }
.question-card .option-button { color: #f8fafc; }
.question-card .option-button * { color: inherit; }
.question-card input,
.question-card textarea { color: #f8fafc; caret-color: #f8fafc; }
.question-card input::placeholder,
.question-card textarea::placeholder { color: #b4b7c4; opacity: 1; }

/* v4.9.3: Consistent, accessible text contrast across the learning flow.
   Scoped rules deliberately override Telegram theme variables on dark cards. */
.list-grid .list-card {
  background: #1e2025;
  color: #ffffff;
  border-color: #363b46;
}
.list-grid .list-card .list-copy strong {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff;
}
.list-grid .list-card .list-copy span {
  color: #d5d9e2 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #d5d9e2;
  font-weight: 550;
}
.question-shell .question-top {
  background: #1e2025;
  border-radius: 12px;
  padding: 10px 12px 12px;
}
.question-shell .progress-row { color: #e2e5ed !important; opacity: 1; }
.question-shell .question-card { background: #1e2025; color: #ffffff; border-color: #393c46; }
.question-shell .question-card .question-meta { color: #bca5ff !important; }
.question-shell .question-card .question-context,
.question-shell .question-card .question-text,
.question-shell .question-card .question-context *,
.question-shell .question-card .question-text * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
.question-shell .question-card .question-context { background: #2c3038; border-color: #505663; }
.question-shell .question-card .option-button { background: #292a33; color: #ffffff !important; border-color: #484b57; }
.question-shell .question-card .option-button:not(.selected):not(.correct) * { color: #ffffff; }
.question-shell .question-card textarea,
.question-shell .question-card input { background: #292a33; color: #ffffff !important; -webkit-text-fill-color: #ffffff; border-color: #505663; }
.question-shell .question-card textarea::placeholder,
.question-shell .question-card input::placeholder { color: #d2d5de !important; opacity: 1; }
/* Readability on light-background explanation and settings panels. */
.feedback-source, .feedback-source *, .language-grid .language-button { opacity: 1; }
.feedback-source { background: #ffffff; color: #172033; }

/* v4.9.4: Answer feedback lives inside the dark question card.
   Never inherit the light-page #172033 text color there. */
.question-shell .question-card .feedback,
.question-shell .question-card .feedback strong,
.question-shell .question-card .feedback p,
.question-shell .question-card .feedback b,
.question-shell .question-card .feedback > div {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
.question-shell .question-card .feedback.success {
  background: #173e33;
  border: 1px solid #55c99b;
}
.question-shell .question-card .feedback.error {
  background: #49262d;
  border: 1px solid #ef8d9b;
}
/* The expandable original question is intentionally a light inset. */
.question-shell .question-card .feedback .feedback-source,
.question-shell .question-card .feedback .feedback-source * {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
  opacity: 1 !important;
}
.question-shell .question-card .feedback .feedback-source {
  background: #ffffff;
  border: 1px solid #aabbd0;
}

/* v4.9.8: show Emma robotic shoulders and torso in hero */
.ref-emma-hero{height:clamp(270px,72vw,350px);max-width:390px}
.ref-emma-hero img{transform:none;object-fit:cover;object-position:center center}