/* Zi de zi — визуальная система.
   Спокойно, практично: один акцент, тонкие линии, крупная типографика на слове. */

:root {
  --bg:      var(--tg-theme-bg-color, #ffffff);
  --surface: var(--tg-theme-secondary-bg-color, #f6f7f9);
  --fg:      var(--tg-theme-text-color, #15181d);
  --dim:     var(--tg-theme-hint-color, #78808d);
  --line:    rgba(120,128,141,.20);
  --line-2:  rgba(120,128,141,.34);

  --accent:     #2F6BE8;
  --accent-ink: #1E52C4;
  --accent-bg:  rgba(47,107,232,.09);

  --ok:     #15A34A;
  --ok-bg:  rgba(21,163,74,.10);
  --err:    #D92D20;
  --err-bg: rgba(217,45,32,.09);
  --warm:   #E0901A;

  --r:   14px;
  --r-s: 10px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--fg);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(28px + var(--safe-b)); }

.ic { display: block; flex-shrink: 0; }

/* ───────── Загрузка ───────── */
.boot { align-items: center; justify-content: center; gap: 18px; }
.boot-mark {
  width: 56px; height: 56px; border-radius: 15px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: 23px; font-weight: 800; letter-spacing: -.5px;
  animation: pop .45s cubic-bezier(.2,.9,.3,1.2);
}
.boot-text { color: var(--dim); font-size: 14px; }

/* ───────── Верхняя панель ───────── */
.top {
  display: flex; align-items: center; gap: 16px;
  padding: calc(12px + var(--safe-t)) 16px 12px;
  border-bottom: 1px solid var(--line);
}
.top.simple { justify-content: center; }
.top-title { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }

.metric { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; }
.metric .ic { width: 19px; height: 19px; }
.metric.streak { color: var(--warm); }
.metric.xp     { color: var(--accent); }
.metric b { color: var(--fg); font-variant-numeric: tabular-nums; }

/* Слабые места вместо жизней: ограничений на учёбу нет */
.metric.weak { margin-left: auto; color: var(--err); cursor: pointer; }
.metric.weak.none { color: var(--ok); }

/* ───────── Главный экран ───────── */
.hello { margin-bottom: 20px; }
.hello-ro { font-size: 25px; font-weight: 800; letter-spacing: -.5px; }
.hello-ru { font-size: 13.5px; color: var(--dim); margin-top: 3px; }

/* Карточка «что делать сейчас» */
.cta {
  background: var(--accent); color: #fff;
  border-radius: var(--r); padding: 18px;
  margin-bottom: 14px; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 8px 22px -10px rgba(47,107,232,.75);
  transition: transform .12s;
}
.cta:active { transform: scale(.99); }
.cta-body { flex: 1; min-width: 0; }
.cta-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; opacity: .78;
}
.cta-title { font-size: 18px; font-weight: 750; margin-top: 3px; letter-spacing: -.2px; }
.cta-sub { font-size: 13px; opacity: .82; margin-top: 2px; }
.cta-go {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: grid; place-items: center;
}
.cta.ghost {
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line-2); box-shadow: none;
}
.cta.ghost .cta-kicker { color: var(--accent); opacity: 1; }
.cta.ghost .cta-go { background: var(--accent-bg); color: var(--accent); }

/* Программа */
.section-head {
  display: flex; align-items: baseline; gap: 8px;
  margin: 26px 2px 12px;
}
.section-head h2 { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); margin: 0; }

.unit { margin-bottom: 20px; }
.unit-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.unit-ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-bg); color: var(--accent);
  display: grid; place-items: center;
}
.unit-ic .ic { width: 20px; height: 20px; }
.unit-title { font-weight: 750; font-size: 15.5px; letter-spacing: -.1px; }
.unit-sub { font-size: 11.5px; color: var(--dim); margin-top: 1px; }

.lesson {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; margin-bottom: 7px;
  border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; transition: border-color .15s, transform .1s, background .15s;
}
.lesson:active { transform: scale(.99); }
.lesson.locked { opacity: .42; cursor: default; }
.lesson.current { border-color: var(--accent); background: var(--accent-bg); }
.lesson.done .num { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.lesson.current .num { background: var(--accent); color: #fff; border-color: transparent; }

.num {
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--line-2); color: var(--dim);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.num .ic { width: 16px; height: 16px; }
.lesson-body { flex: 1; min-width: 0; }
.lesson-name { font-size: 15px; font-weight: 650; letter-spacing: -.1px; }
.lesson-meta { font-size: 12px; color: var(--dim); margin-top: 1px; }
.lesson-score { font-size: 12px; font-weight: 700; color: var(--ok); }

/* Сводка внизу */
.summary { display: flex; gap: 8px; margin-top: 22px; }
.sum {
  flex: 1; border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px; text-align: center;
}
.sum b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.5px; }
.sum span { font-size: 11.5px; color: var(--dim); }

/* ───────── Таббар ───────── */
.tabbar {
  display: flex; border-top: 1px solid var(--line);
  background: var(--bg); padding-bottom: var(--safe-b);
}
.tab {
  flex: 1; border: 0; background: none; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 7px; font-size: 10.5px; font-weight: 650;
  color: var(--dim); cursor: pointer;
}
.tab .ic { width: 22px; height: 22px; }
.tab.active { color: var(--accent); }

/* ───────── Экран урока ───────── */
.lesson-top {
  display: flex; align-items: center; gap: 13px;
  padding: calc(12px + var(--safe-t)) 16px 12px;
}
.icon-btn {
  border: 0; background: none; color: var(--dim);
  cursor: pointer; padding: 0; display: grid; place-items: center;
  font-family: inherit;
}
.icon-btn .ic { width: 22px; height: 22px; }
.bar { flex: 1; height: 7px; background: var(--surface); border-radius: 99px; overflow: hidden; }
.bar-fill {
  height: 100%; width: 0%; background: var(--accent);
  border-radius: 99px; transition: width .4s cubic-bezier(.4,0,.2,1);
}
/* Серия верных ответов подряд */
.combo {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 14px; font-weight: 800; color: var(--dim);
  opacity: .35; transition: opacity .25s, color .25s, transform .25s;
}
.combo.on { opacity: 1; color: var(--warm); }
.combo.bump { transform: scale(1.35); }

/* Вступление */
.intro { flex: 1; overflow-y: auto; padding: 8px 20px calc(20px + var(--safe-b)); }
.kicker {
  display: inline-block; font-size: 10.5px; font-weight: 750;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--accent); background: var(--accent-bg);
  padding: 5px 9px; border-radius: 6px; margin-bottom: 15px;
}
.intro-body { font-size: 15.5px; line-height: 1.62; margin-bottom: 26px; }
.intro-body b { color: var(--accent-ink); font-weight: 700; }

/* Шаг */
.step { flex: 1; overflow-y: auto; padding: 6px 20px 18px; display: flex; flex-direction: column; }
.q { font-size: 12.5px; font-weight: 650; color: var(--dim); margin-bottom: 16px; letter-spacing: .2px; }

.word-card {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 20px; text-align: center; margin-bottom: 14px;
  animation: pop .3s cubic-bezier(.2,.9,.3,1.1);
}
.word-ro { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.word-tr { font-size: 14.5px; color: var(--dim); margin-top: 7px; font-variant: none; }
.word-ru { font-size: 17px; font-weight: 600; margin-top: 14px; }
.word-note {
  font-size: 13px; line-height: 1.55; color: var(--dim); text-align: left;
  margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line);
}
.word-note b { color: var(--fg); }

.prompt { font-size: 27px; font-weight: 800; letter-spacing: -.7px; line-height: 1.2; }
.prompt.sm { font-size: 21px; letter-spacing: -.3px; }
.prompt-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }

.sound-btn {
  width: 66px; height: 66px; border-radius: 50%; border: 0;
  background: var(--accent); color: #fff; cursor: pointer;
  display: grid; place-items: center; margin: 2px auto 22px;
  box-shadow: 0 7px 18px -8px rgba(47,107,232,.9);
  font-family: inherit;
}
.sound-btn .ic { width: 27px; height: 27px; }
.sound-btn:active { transform: scale(.94); }
.sound-btn.mini {
  width: 38px; height: 38px; margin: 0; box-shadow: none;
  background: var(--accent-bg); color: var(--accent);
}
.sound-btn.mini .ic { width: 19px; height: 19px; }

.opts { display: flex; flex-direction: column; gap: 8px; }
.opt {
  border: 1px solid var(--line-2); background: var(--bg); color: var(--fg);
  border-radius: var(--r); padding: 14px 15px;
  font: 600 15.5px/1.35 inherit; text-align: left; cursor: pointer;
  transition: border-color .14s, background .14s, transform .1s;
}
.opt:active { transform: scale(.99); }
.opt.sel   { border-color: var(--accent); background: var(--accent-bg); }
.opt.right { border-color: var(--ok); background: var(--ok-bg); }
.opt.wrong { border-color: var(--err); background: var(--err-bg); }

.build-line {
  min-height: 56px; border-bottom: 1.5px solid var(--line-2);
  display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start;
  padding-bottom: 9px; margin-bottom: 22px;
}
.bank { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  border: 1px solid var(--line-2); background: var(--bg); color: var(--fg);
  border-radius: 9px; padding: 9px 13px;
  font: 650 15px/1 inherit; cursor: pointer; transition: opacity .15s, transform .1s;
}
.chip:active { transform: scale(.96); }
.chip.used { opacity: .22; pointer-events: none; }

.type-in {
  width: 100%; border: 1px solid var(--line-2); background: var(--bg); color: var(--fg);
  border-radius: var(--r); padding: 14px 15px; font: 400 17px inherit;
}
.type-in:focus { outline: 0; border-color: var(--accent); }
.kbd-row { display: flex; gap: 6px; margin-top: 10px; }
.kbd {
  flex: 1; border: 1px solid var(--line); background: var(--surface); color: var(--fg);
  border-radius: 8px; height: 42px; font: 700 18px inherit; cursor: pointer;
}
.kbd:active { background: var(--accent); color: #fff; border-color: transparent; }

/* Низ урока */
.bottom { padding: 14px 20px calc(14px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--bg); }
.feedback {
  border-radius: var(--r-s); padding: 12px 14px; margin-bottom: 11px;
  font-size: 14px; line-height: 1.5; animation: rise .2s ease;
}
.feedback.ok { background: var(--ok-bg); }
.feedback.no { background: var(--err-bg); }
.fb-head { display: flex; align-items: center; gap: 7px; font-weight: 750; margin-bottom: 3px; }
.fb-head .ic { width: 17px; height: 17px; }
.feedback.ok .fb-head { color: var(--ok); }
.feedback.no .fb-head { color: var(--err); }
.fb-body { color: var(--fg); opacity: .9; }
.fb-body b { font-weight: 700; }

.btn {
  width: 100%; border: 0; border-radius: var(--r);
  background: var(--accent); color: #fff;
  padding: 15px; font: 750 16px inherit; cursor: pointer;
  transition: transform .1s, opacity .15s, background .15s;
}
.btn:active { transform: scale(.99); }
.btn:disabled { opacity: .3; cursor: default; }
.btn.ok { background: var(--ok); }
.btn.no { background: var(--err); }
.btn.quiet { background: var(--surface); color: var(--fg); }

/* ───────── Итог ───────── */
.done-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 28px 24px calc(24px + var(--safe-b));
}
.done-mark {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--accent-bg); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 18px;
  animation: pop .45s cubic-bezier(.2,.9,.3,1.2);
}
.done-mark .ic { width: 34px; height: 34px; }
.done-mark.warn { background: var(--err-bg); color: var(--err); }
.done-title { font-size: 24px; font-weight: 800; letter-spacing: -.6px; margin-bottom: 24px; }
.done-stats { display: flex; gap: 8px; width: 100%; max-width: 360px; margin-bottom: 18px; }
.done-stat { flex: 1; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 6px; }
.done-stat b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.done-stat span { font-size: 11px; color: var(--dim); }
.done-note { font-size: 13.5px; color: var(--dim); line-height: 1.55; max-width: 330px; margin-bottom: 24px; }
.done-actions { width: 100%; max-width: 360px; }

/* ───────── Диалог ───────── */
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.note-box {
  border: 1px solid var(--line); border-radius: var(--r); padding: 15px;
  font-size: 13.5px; color: var(--dim); line-height: 1.55;
}
.note-box b { color: var(--fg); }
.msg { max-width: 84%; padding: 11px 14px; font-size: 15px; line-height: 1.42; animation: rise .2s ease; }
.msg.me  { align-self: flex-end; background: var(--accent); color: #fff; border-radius: 16px 16px 5px 16px; }
.msg.bot { align-self: flex-start; background: var(--surface); border-radius: 16px 16px 16px 5px; cursor: pointer; }
.msg-fix {
  align-self: flex-start; max-width: 92%;
  background: var(--err-bg); border-radius: var(--r-s);
  padding: 10px 13px; font-size: 13px; line-height: 1.5;
}
.msg-fix b { color: var(--err); }
.typing { align-self: flex-start; color: var(--dim); font-size: 13.5px; padding: 6px 4px; }

.chat-input { display: flex; gap: 9px; padding: 11px 14px; border-top: 1px solid var(--line); }
.chat-input input {
  flex: 1; border: 1px solid var(--line-2); background: var(--bg); color: var(--fg);
  border-radius: 99px; padding: 12px 16px; font: 400 16px inherit;
}
.chat-input input:focus { outline: 0; border-color: var(--accent); }
.chat-input button {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--accent); color: #fff; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
}
.chat-input button:disabled { opacity: .35; }

/* ───────── Ошибки ───────── */
.mistake {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 14px; margin-bottom: 7px; cursor: pointer;
}
.mistake-body { flex: 1; min-width: 0; }
.mistake-ro { font-size: 15.5px; font-weight: 700; }
.mistake-ru { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.mistake-n {
  background: var(--err-bg); color: var(--err);
  border-radius: 7px; padding: 4px 9px;
  font-size: 12px; font-weight: 750; flex-shrink: 0;
}
.empty { text-align: center; color: var(--dim); padding: 56px 24px; font-size: 14px; line-height: 1.6; }
.empty .ic { width: 30px; height: 30px; margin: 0 auto 14px; opacity: .45; }

@keyframes pop  { 0% { transform: scale(.82); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
@keyframes rise { from { transform: translateY(7px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes shake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }
.shake { animation: shake .28s ease; }

/* ───────── Блок экзамена ───────── */
.exam-box { border: 1px solid var(--line); border-radius: var(--r); padding: 15px; }
.exam-top { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.exam-ic {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--accent-bg); color: var(--accent);
  display: grid; place-items: center;
}
.exam-title { font-size: 15.5px; font-weight: 750; }
.exam-sub { font-size: 12px; color: var(--dim); margin-top: 2px; }
.exam-actions { display: flex; gap: 8px; }
.exam-actions .btn { font-size: 14px; padding: 12px 10px; }

/* Длинный вопрос Конституции */
.const-q { font-size: 17.5px; font-weight: 700; line-height: 1.35; margin-bottom: 18px; letter-spacing: -.2px; }
.opt.const { font-size: 14.5px; font-weight: 550; line-height: 1.4; }

/* ───────── Готовность к экзамену ───────── */
.ready-box { border: 1px solid var(--line); border-radius: var(--r); padding: 15px; }
.ready-row { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.ready-label { font-size: 13px; font-weight: 650; width: 86px; flex-shrink: 0; }
.ready-track { flex: 1; height: 8px; background: var(--surface); border-radius: 99px; overflow: hidden; }
.ready-fill {
  height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #6D9BFF);
  transition: width .9s cubic-bezier(.2,.8,.2,1);
}
.ready-fill.lang { background: linear-gradient(90deg, var(--ok), #4CD47F); }
.ready-num {
  font-size: 13px; font-weight: 800; width: 42px; text-align: right;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.ready-note { font-size: 12.5px; color: var(--dim); line-height: 1.5; margin-top: 4px; }

/* ───────── Анимации ───────── */
/* Вспышка по экрану при верном ответе */
.flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: radial-gradient(circle at 50% 62%, var(--ok-bg), transparent 62%);
  animation: flash .5s ease-out forwards;
}
@keyframes flash { from { opacity: .95 } to { opacity: 0 } }

/* Конфетти на финише */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.conf {
  position: absolute; width: 8px; height: 13px; border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall {
  from { transform: translateY(-12vh) rotate(0deg); opacity: 1 }
  to   { transform: translateY(104vh) rotate(760deg); opacity: .9 }
}

/* Варианты появляются каскадом */
.opt { animation: rise .26s ease both; }
.opt:nth-child(1) { animation-delay: .02s }
.opt:nth-child(2) { animation-delay: .07s }
.opt:nth-child(3) { animation-delay: .12s }
.opt:nth-child(4) { animation-delay: .17s }

/* Правильный вариант подпрыгивает, неверный дрожит */
.opt.right { animation: pop-right .4s cubic-bezier(.2,.9,.3,1.3) }
@keyframes pop-right { 0% { transform: scale(1) } 45% { transform: scale(1.035) } 100% { transform: scale(1) } }
.opt.wrong { animation: shake .3s ease }

/* Награда за серию */
.combo-toast {
  position: fixed; left: 50%; top: 22%; transform: translateX(-50%);
  background: var(--warm); color: #fff; font-weight: 800; font-size: 15px;
  padding: 10px 18px; border-radius: 99px; z-index: 55; pointer-events: none;
  box-shadow: 0 10px 26px -10px rgba(224,144,26,.9);
  animation: toast 1.5s ease forwards;
}
@keyframes toast {
  0%   { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.85) }
  16%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) }
  78%  { opacity: 1 }
  100% { opacity: 0; transform: translateX(-50%) translateY(-16px) }
}

/* Пометка слабого места в списке ошибок */
.mistake.hot { border-color: rgba(217,45,32,.45); background: var(--err-bg); }
.mistake-tag {
  display: inline-block; margin-top: 5px;
  font-size: 10.5px; font-weight: 750; letter-spacing: .4px; text-transform: uppercase;
  color: var(--err); background: rgba(217,45,32,.13);
  padding: 3px 7px; border-radius: 5px;
}

/* ───────── Недельный трекер ───────── */
.week { display: flex; gap: 6px; margin-bottom: 18px; }
.day {
  flex: 1; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 2px 7px; text-align: center;
  transition: background .3s, border-color .3s;
}
.day-dow { font-size: 10.5px; color: var(--dim); font-weight: 650; }
.day-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-2); margin: 6px auto 0;
  transition: background .3s, transform .3s;
}
.day.on { border-color: transparent; background: var(--accent-bg); }
.day.on .day-dot { background: var(--accent); transform: scale(1.3); }
.day.on .day-dow { color: var(--accent); }
.day.today { border-color: var(--accent); }
.day.today.on { border-color: var(--accent); }

/* ───────── Видеоуроки ───────── */
.vid {
  display: flex; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px; margin-bottom: 9px; cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.vid:active { transform: scale(.99); }
.vid-thumb {
  width: 104px; height: 60px; border-radius: 9px; flex-shrink: 0;
  background: var(--surface) center/cover no-repeat;
  position: relative;
}
.vid-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; filter: drop-shadow(0 1px 4px rgba(0,0,0,.65));
}
.vid-body { flex: 1; min-width: 0; }
.vid-title { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.vid-sub { font-size: 12px; color: var(--dim); margin-top: 3px; line-height: 1.35; }
.vid-meta { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.vid-tag {
  font-size: 10px; font-weight: 750; letter-spacing: .3px;
  padding: 3px 6px; border-radius: 5px;
  background: var(--surface); color: var(--dim);
}
.vid-tag.ru { background: var(--accent-bg); color: var(--accent); }
.vid-group { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--dim); margin: 18px 2px 10px; }
.vid-group:first-child { margin-top: 2px; }

/* ───────── Заголовок уровня ───────── */
.level-head {
  display: flex; align-items: center; gap: 10px;
  margin: 26px 2px 14px; padding-top: 4px;
}
.level-head:first-child { margin-top: 4px; }
.level-badge {
  font-size: 12px; font-weight: 800; letter-spacing: .5px;
  padding: 5px 10px; border-radius: 7px; flex-shrink: 0;
  background: var(--accent-bg); color: var(--accent);
}
.level-badge.lv-A2 { background: rgba(21,163,74,.12); color: var(--ok); }
.level-badge.lv-B1 { background: rgba(124,58,237,.13); color: #7C3AED; }
.level-badge.lv-ex { background: rgba(224,144,26,.14); color: var(--warm); }
.level-note { font-size: 11.5px; color: var(--dim); line-height: 1.35; }

/* Румынский блок экзамена */
.exam-box.ro { border-color: rgba(217,45,32,.35); }
.exam-ic.ro { background: var(--err-bg); color: var(--err); }
.btn.red { background: var(--err); }
.level-badge.lv-Румыния { background: var(--err-bg); color: var(--err); }