:root {
  /* нежная пастельная палитра */
  --bg-1: #fff5f7;
  --bg-2: #f5f0ff;
  --bg-3: #f0f9ff;
  --bg-4: #fff8f0;
  --card: #ffffff;
  --text: #3b2e4e;
  --muted: #8b7d9b;
  --muted-2: #b0a5c0;
  --accent: #c084d4;        /* мягкая лаванда */
  --accent-2: #f4a8c6;      /* нежно-розовый */
  --accent-soft: #f7eeff;
  --accent-soft-2: #fff0f6;
  --ok: #6cab8c;
  --ok-soft: #effaf3;
  --ok-border: #cce6d6;
  --err: #d98a8a;
  --err-soft: #fdf2f2;
  --err-border: #f3d5d5;
  --border: #ece4f0;
  --border-soft: #f5eef8;
  --radius-lg: 24px;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 12px 40px rgba(160, 120, 200, 0.10), 0 2px 8px rgba(160, 120, 200, 0.05);
  --shadow-sm: 0 2px 10px rgba(160, 120, 200, 0.07);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font: 16px/1.6 "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 600px at 8% -8%, var(--bg-1), transparent 60%),
    radial-gradient(1000px 500px at 105% 5%, var(--bg-2), transparent 55%),
    radial-gradient(900px 600px at 95% 100%, var(--bg-3), transparent 55%),
    radial-gradient(900px 600px at 5% 105%, var(--bg-4), transparent 55%),
    #fcfaff;
  min-height: 100vh;
}

#app {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px 80px;
  position: relative;
  z-index: 1;
}

/* ===== Биологический фон ===== */
.bio-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.bio-bg .bio {
  position: absolute;
  display: block;
  will-change: transform;
  filter: drop-shadow(0 6px 14px rgba(160, 120, 200, 0.10));
}

/* плавные дрейфующие траектории */
@keyframes bio-drift-a {
  0%   { transform: translate(0, 0)       rotate(0deg)   scale(1); }
  50%  { transform: translate(28px,-22px) rotate(180deg) scale(1.06); }
  100% { transform: translate(0, 0)       rotate(360deg) scale(1); }
}
@keyframes bio-drift-b {
  0%   { transform: translate(0, 0)        rotate(0deg)    scale(1); }
  50%  { transform: translate(-32px, 26px) rotate(-160deg) scale(.94); }
  100% { transform: translate(0, 0)        rotate(-360deg) scale(1); }
}
@keyframes bio-drift-c {
  0%   { transform: translate(0,   0)  rotate(-12deg); }
  33%  { transform: translate(40px, 16px) rotate(12deg); }
  66%  { transform: translate(-20px, 30px) rotate(-6deg); }
  100% { transform: translate(0,   0)  rotate(-12deg); }
}
@keyframes bio-fall {
  0%   { transform: translate(0,-12vh) rotate(0deg); }
  100% { transform: translate(40px, 110vh) rotate(540deg); }
}
@keyframes bio-pulse {
  0%, 100% { transform: scale(1);   opacity: var(--bio-op, .35); }
  50%      { transform: scale(1.12); opacity: calc(var(--bio-op, .35) + .12); }
}
@keyframes bio-flutter {
  0%, 100% { transform: translate(0, 0)      rotate(-4deg) scaleX(1); }
  25%      { transform: translate(18px,-14px) rotate(6deg)  scaleX(.86); }
  50%      { transform: translate(36px, 4px)  rotate(-2deg) scaleX(1); }
  75%      { transform: translate(18px,18px)  rotate(8deg)  scaleX(.86); }
}
@keyframes bio-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ----- Листья ----- */
.bio-leaf-1 { width:88px;  height:88px;  top:8%;   left:4%;
  color:#b8d8b0; opacity:.42; --bio-op:.42;
  animation: bio-drift-a 22s ease-in-out infinite; }
.bio-leaf-2 { width:64px;  height:64px;  top:62%;  left:8%;
  color:#a8d0c0; opacity:.36; --bio-op:.36;
  animation: bio-drift-b 28s ease-in-out infinite -6s; }
.bio-leaf-3 { width:104px; height:104px; top:18%;  right:6%;
  color:#c4dfb6; opacity:.32; --bio-op:.32;
  animation: bio-drift-c 30s ease-in-out infinite -12s; }
.bio-leaf-4 { width:52px;  height:52px;  bottom:10%; right:14%;
  color:#b0d6c0; opacity:.4; --bio-op:.4;
  animation: bio-drift-a 24s ease-in-out infinite -8s; }

/* ----- Лепестки (падающие) ----- */
.bio-petal-1 { width:34px; height:34px; top:0; left:18%;
  color:#f4a8c6; opacity:.55;
  animation: bio-fall 18s linear infinite; }
.bio-petal-2 { width:26px; height:26px; top:0; left:48%;
  color:#f6b9d2; opacity:.45;
  animation: bio-fall 22s linear infinite -7s; }
.bio-petal-3 { width:30px; height:30px; top:0; left:78%;
  color:#e8b3df; opacity:.5;
  animation: bio-fall 26s linear infinite -14s; }

/* ----- Цветы ----- */
.bio-flower-1 { width:72px; height:72px; top:30%; left:2%;
  color:#f7c8df; opacity:.45; --bio-op:.45;
  animation: bio-spin-slow 60s linear infinite, bio-pulse 8s ease-in-out infinite; }
.bio-flower-2 { width:58px; height:58px; bottom:18%; left:42%;
  color:#e9c5f0; opacity:.4; --bio-op:.4;
  animation: bio-spin-slow 80s linear infinite reverse, bio-pulse 10s ease-in-out infinite -3s; }

/* ----- Клетки (под микроскопом) ----- */
.bio-cell-1 { width:120px; height:120px; top:48%; right:3%;
  color:#d6b8e8; opacity:.32; --bio-op:.32;
  animation: bio-pulse 9s ease-in-out infinite; }
.bio-cell-2 { width:80px;  height:80px;  top:78%; left:30%;
  color:#cba8df; opacity:.3; --bio-op:.3;
  animation: bio-pulse 7s ease-in-out infinite -2s; }
.bio-cell-3 { width:54px;  height:54px;  top:6%;  left:54%;
  color:#bfa0d8; opacity:.32; --bio-op:.32;
  animation: bio-pulse 11s ease-in-out infinite -5s; }

/* ----- Бабочки ----- */
.bio-butterfly-1 { width:60px; height:60px; top:14%; left:62%;
  color:#c084d4; opacity:.45;
  animation: bio-flutter 9s ease-in-out infinite; }
.bio-butterfly-2 { width:46px; height:46px; bottom:24%; right:34%;
  color:#e8a3d5; opacity:.4;
  animation: bio-flutter 11s ease-in-out infinite -4s; }

/* ----- ДНК (декор по углам) ----- */
.bio-dna-1 { width:64px;  height:140px; top:4%;     right:24%;
  color:#c084d4; opacity:.28;
  animation: bio-pulse 12s ease-in-out infinite; }
.bio-dna-2 { width:52px;  height:120px; bottom:6%;  left:24%;
  color:#a78ad4; opacity:.25;
  animation: bio-pulse 14s ease-in-out infinite -6s; }

/* убрать на узких экранах (меньше отвлекает + меньше лагов) */
@media (max-width: 760px) {
  .bio-leaf-3, .bio-leaf-4,
  .bio-flower-2, .bio-cell-1, .bio-cell-3,
  .bio-butterfly-2, .bio-dna-1, .bio-petal-3 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bio-bg .bio { animation: none !important; }
}

.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 1080px;
  padding: 44px 56px;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.card.home { max-width: 720px; padding: 48px 56px; text-align: center; }
.card.home .modes,
.card.home .topic-list,
.card.home .demo-block { text-align: left; }

.home-logo {
  display: block;
  width: 220px;
  height: auto;
  margin: -8px auto 14px;
  filter: drop-shadow(0 10px 24px rgba(120, 170, 90, 0.18));
  animation: logo-float 6s ease-in-out infinite;
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0)    rotate(-1deg); }
  50%      { transform: translateY(-6px) rotate(1deg);  }
}
@media (prefers-reduced-motion: reduce) {
  .home-logo { animation: none; }
}
@media (max-width: 700px) {
  .home-logo { width: 160px; margin-top: 0; }
}
.card.quiz { max-width: 1080px; }

h1 {
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.teacher {
  font-family: "Caveat", "Manrope", sans-serif;
  font-size: 22px;
  color: var(--accent);
  margin: 0 0 36px;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.teacher::before { content: "✦"; opacity: 0.6; font-size: 14px; }
h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 14px;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.lead {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 16px;
}

.modes {
  display: grid;
  gap: 14px;
}

.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--card);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px 24px;
  cursor: pointer;
  transition: border-color .2s, transform .12s, box-shadow .2s, background .2s;
  font: inherit;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.mode-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2));
  opacity: 0;
  transition: opacity .25s;
}
.mode-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 28px rgba(192, 132, 212, 0.18);
  transform: translateY(-1px);
}
.mode-btn:hover::before { opacity: .55; }
.mode-btn:active { transform: translateY(0); }
.mode-title { font-weight: 600; font-size: 17px; position: relative; }
.mode-desc { color: var(--muted); font-size: 14px; margin-top: 4px; position: relative; }

.mode-btn-mistakes {
  border-color: #f3d5d5;
  background: linear-gradient(135deg, #fff6f7, #fff0f3);
}
.mode-btn-mistakes::before {
  background: linear-gradient(135deg, #ffe2e6, #ffeef2);
}
.mode-btn-mistakes:hover {
  border-color: var(--err);
  box-shadow: 0 8px 28px rgba(217, 138, 138, 0.22);
}
.mode-btn-mistakes .mode-title::before {
  content: "↻ ";
  color: var(--err);
  font-weight: 700;
}

.topic-list { margin-top: 28px; }
.topic-list.hidden { display: none; }
#topics, #archive {
  display: grid;
  gap: 14px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: #fdfaff;
}
#archive { gap: 6px; }
#topics::-webkit-scrollbar, #archive::-webkit-scrollbar { width: 10px; }
#topics::-webkit-scrollbar-track, #archive::-webkit-scrollbar-track { background: transparent; }
#topics::-webkit-scrollbar-thumb, #archive::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid #fdfaff; }

.task-group {
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--border-soft);
}
.task-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, color .15s;
  border-bottom: 1px dashed var(--border-soft);
  margin-bottom: 4px;
}
.task-header:hover { background: var(--accent-soft); }
.task-header:hover .task-title { color: var(--accent); }
.task-num {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  min-width: 38px;
}
.task-title {
  flex: 1;
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}
.task-header .count {
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid #e8d6f0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.topic-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px 9px 50px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, transform .12s;
  font-size: 14.5px;
  color: var(--text);
  position: relative;
}
.topic-row::before {
  content: "•";
  position: absolute;
  left: 30px;
  color: var(--muted-2);
}
.topic-row:hover { background: var(--accent-soft); transform: translateX(2px); }
a.topic-row { text-decoration: none; color: inherit; }
a.archive-row .count { color: var(--accent); background: var(--accent-soft); border-color: #e8d6f0; }
.topic-row .count {
  color: var(--muted-2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  background: #fdfaff;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
}

.btn-back {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  padding: 8px 0;
  margin-top: 18px;
  transition: color .15s;
}
.btn-back:hover { color: var(--accent); }

/* ===== Демо версия ===== */
.demo-block { margin-top: 28px; }
.demo-block.hidden { display: none; }
.card.home:has(#demo-block:not(.hidden)) { max-width: 920px; }

.demo-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 18px 24px;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(192, 132, 212, 0.32);
  margin-bottom: 18px;
  transition: filter .15s, transform .12s, box-shadow .2s;
}
.demo-link:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(192, 132, 212, 0.42);
}
.demo-link-title { font-weight: 600; font-size: 17px; }
.demo-link-arrow { font-size: 20px; opacity: 0.9; }

.demo-lead {
  color: var(--muted);
  font-size: 15px;
  margin: 0 4px 22px;
}

.demo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.demo-step {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 22px;
  align-items: start;
  background: linear-gradient(180deg, #fdfaff, #fbf5fe);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 22px;
  transition: border-color .2s, box-shadow .2s;
}
.demo-step:hover {
  border-color: #e8d6f0;
  box-shadow: 0 6px 22px rgba(192, 132, 212, 0.10);
}
.demo-step-text h3 {
  margin: 8px 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.demo-step-text p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.6;
}
.demo-step-text b { color: var(--accent); font-weight: 600; }
.demo-step-num {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid #e8d6f0;
}
.demo-step-img {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .2s;
}
.demo-step-img:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 28px rgba(192, 132, 212, 0.20);
}
.demo-step-img img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  .demo-step {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .demo-step-img { order: 2; }
  .demo-link { padding: 14px 18px; }
  .demo-link-title { font-size: 15px; }
}

/* ===== Quiz ===== */
.quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 14px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--muted);
}
.quiz-header .btn-back { margin: 0; }
.progress {
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 14px;
}
.progress .score {
  color: var(--ok);
  font-weight: 600;
  background: var(--ok-soft);
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid var(--ok-border);
}
.progress .streak {
  color: #d97742;
  font-weight: 600;
  background: #fff4ec;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid #fbd9bc;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.progress .streak.hidden { display: none; }

/* визуальный прогресс-бар */
.progress-bar {
  height: 6px;
  background: var(--border-soft);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 22px;
  position: relative;
}
.progress-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: 999px;
  transition: width .55s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 0 12px rgba(192, 132, 212, 0.5);
}


.best-streak {
  text-align: center;
  color: #d97742;
  margin: -6px 0 14px;
  font-size: 15px;
}

.topic-tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.intro, .question, .feedback .explain {
  font-size: 16.5px;
  line-height: 1.7;
}
.intro { color: var(--text); margin-bottom: 16px; }
.intro:empty { display: none; }
.question {
  font-weight: 500;
  margin-bottom: 24px;
}
.question b, .feedback b { font-weight: 600; }

/* картинки */
.intro img, .question img, .feedback img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 14px auto;
  background: #fff;
  border: 1px solid var(--border-soft);
  padding: 6px;
  box-shadow: var(--shadow-sm);
}
/* главное изображение задания (одиночное, до сетки опций) */
.question > p > img:first-child,
.intro > p > img:first-child {
  max-width: 420px;
}

/* сетка вариантов с картинками (для заданий типа "опишите по плану") */
.opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin: 14px 0 22px;
  align-items: stretch;
}
.opt-card {
  position: relative;
  display: grid;
  grid-template-rows: 110px 1fr;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: 14px 10px 12px;
  background: linear-gradient(180deg, #fdfaff, #fbf5fe);
  border: 1.5px solid var(--border-soft);
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  transition: border-color .15s, box-shadow .2s, transform .12s, background .2s;
  min-height: 175px;
  height: 100%;
}
.opt-card img {
  display: block;
  width: auto;
  height: 100px;
  max-width: 100%;
  max-height: 100px;
  margin: 0 auto;
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 6px;
  object-fit: contain;
  align-self: center;
}
.opt-card nobr {
  white-space: normal;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}
.opt-card.opt-clickable { cursor: pointer; user-select: none; }
.opt-card.opt-clickable:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(192, 132, 212, 0.18);
  transform: translateY(-1px);
  background: #fff;
}
.opt-card.is-selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, #fff, #f7eafe);
  box-shadow: 0 10px 26px rgba(192, 132, 212, 0.25);
}
.opt-card.is-selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(192, 132, 212, 0.35);
}

/* таблицы */
.intro table, .question table, .feedback table {
  border-collapse: separate;
  border-spacing: 0;
  width: auto;
  min-width: 50%;
  margin: 16px auto;
  font-size: 15px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.intro th, .intro td,
.question th, .question td,
.feedback th, .feedback td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
}
.intro th, .question th, .feedback th {
  background: linear-gradient(180deg, #fbf5fe, #f5ecfa);
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0.01em;
}
.intro td:last-child, .intro th:last-child,
.question td:last-child, .question th:last-child,
.feedback td:last-child, .feedback th:last-child { border-right: none; }
.intro tr:last-child td, .question tr:last-child td, .feedback tr:last-child td { border-bottom: none; }

.intro p, .question p, .feedback p { margin: 0 0 8px; }

/* ===== Таблица-ответ (А/Б/В …) ===== */
table.answer-table {
  margin: 22px auto 8px;
  background: #fff;
  border: 1.5px solid var(--border);
  box-shadow: 0 6px 22px rgba(160, 120, 200, 0.10);
  width: auto;
  min-width: 0;
}
table.answer-table th,
table.answer-table td {
  text-align: center !important;
  padding: 10px 12px !important;
  min-width: 64px;
  border-right: 1px solid var(--border-soft);
}
table.answer-table tr:first-child td,
table.answer-table tr:first-child th {
  background: linear-gradient(180deg, #fbf5fe, #f5ecfa);
  font-weight: 700;
  color: var(--accent);
  font-size: 16px;
  letter-spacing: 0.02em;
}
table.answer-table tr + tr td { background: #fff; }
.answer-cell {
  width: 56px;
  height: 50px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  text-align: center;
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  background: #fdfaff;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  font-variant-numeric: tabular-nums;
  padding: 0;
}
.answer-cell:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(192, 132, 212, 0.18);
}
.answer-cell:disabled {
  opacity: 0.85;
  background: #fff;
  color: var(--text);
}

/* форма ответа */
.answer-form {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.answer-form.via-table > input { display: none; }
.answer-form.via-table { justify-content: flex-end; }
.answer-form.via-table > button[type="submit"] {
  padding: 13px 28px;
  font-size: 16px;
  min-height: 48px;
}
.sub-form.via-table > button[type="submit"] {
  padding: 11px 24px;
  font-size: 15px;
  min-height: 44px;
}
#answer-input {
  flex: 1;
  font: inherit;
  font-size: 16px;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fdfaff;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
#answer-input:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(192, 132, 212, 0.15);
}
#answer-input:disabled { opacity: 0.7; }

button.btn-primary, #submit-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 26px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: filter .15s, transform .05s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(192, 132, 212, 0.30);
}
button.btn-primary:hover, #submit-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 22px rgba(192, 132, 212, 0.38);
}
button.btn-primary:active, #submit-btn:active { transform: translateY(1px); }
button.btn-primary:disabled, #submit-btn:disabled {
  opacity: 0.5; cursor: not-allowed; box-shadow: none;
}

button.btn-secondary {
  background: white;
  color: var(--muted);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
button.btn-secondary:hover {
  color: var(--ok);
  border-color: var(--ok);
  background: var(--ok-soft);
}

/* фидбэк */
.feedback {
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.feedback.hidden { display: none; }
.feedback.ok { background: var(--ok-soft); border: 1px solid var(--ok-border); }
.feedback.err { background: var(--err-soft); border: 1px solid var(--err-border); }
.feedback .verdict {
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.feedback.ok .verdict { color: var(--ok); }
.feedback.ok .verdict::before { content: "✓"; font-size: 20px; }
.feedback.err .verdict { color: var(--err); }
.feedback.err .verdict::before { content: "✗"; font-size: 20px; }
.feedback .right-answer {
  background: #fff;
  border: 1px dashed var(--border);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin: 10px 0 12px;
  font-size: 15px;
}
.feedback .right-answer b { color: var(--text); }
.feedback .explain {
  color: #4a3f57;
  font-size: 15px;
  line-height: 1.65;
}

.quiz-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.quiz-footer .hidden { display: none; }
.quiz-footer .btn-primary { margin-left: auto; padding: 10px 24px; }

.pct { color: var(--muted); margin-top: 0; }

.footer-stats {
  margin-top: 28px;
  font-size: 13px;
  color: var(--muted-2);
  text-align: center;
}

#final-score, #final-total { font-size: 24px; }
#final-score { color: var(--accent); font-weight: 700; }

.grade-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: var(--shadow-sm);
}
.grade-5 { background: linear-gradient(135deg, #6cab8c, #8fc9a8); }
.grade-4 { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.grade-3 { background: linear-gradient(135deg, #d9a36a, #e8c089); }
.grade-2 { background: linear-gradient(135deg, var(--err), #e8a8a8); }

.feedback .verdict .pts {
  margin-left: 8px;
  font-weight: 700;
  font-size: 14px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
}
.feedback.ok .verdict .pts { color: var(--ok); border-color: var(--ok-border); }
.feedback.err .verdict .pts { color: var(--err); border-color: var(--err-border); }

.variant-breakdown {
  margin-top: 22px;
  text-align: left;
  background: #fdfaff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 18px 6px;
}
.variant-breakdown h3 {
  margin: 0 0 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.variant-breakdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
}
.variant-breakdown li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--border-soft);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.variant-breakdown li.ok { border-color: var(--ok-border); background: var(--ok-soft); }
.variant-breakdown li.partial { border-color: #f6d8a8; background: #fff6e8; }
.variant-breakdown li.miss { border-color: var(--err-border); background: var(--err-soft); }
.variant-breakdown .bd-num { font-weight: 600; color: var(--text); }
.variant-breakdown .bd-num small { color: var(--muted-2); font-weight: 500; margin-left: 3px; }
.variant-breakdown .bd-pts { color: var(--muted); }
.variant-breakdown li.ok .bd-pts { color: var(--ok); font-weight: 600; }
.variant-breakdown li.partial .bd-pts { color: #c97f2a; font-weight: 600; }
.variant-breakdown li.miss .bd-pts { color: var(--err); }

/* ===== Группа подзаданий (вариант ВПР) ===== */
.group-questions { display: grid; gap: 18px; margin-bottom: 22px; }
.sub-question {
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  background: linear-gradient(180deg, #fdfaff, #fbf6fe);
  transition: border-color .2s, background .2s;
}
.sub-question.is-ok      { border-color: var(--ok-border);  background: linear-gradient(180deg, var(--ok-soft), #f6fbf8); }
.sub-question.is-partial { border-color: #f6d8a8;           background: linear-gradient(180deg, #fff6e8, #fffaf0); }
.sub-question.is-err     { border-color: var(--err-border); background: linear-gradient(180deg, var(--err-soft), #fdf6f6); }
.sub-question.is-pending { border-color: var(--accent);     background: #fff; }
.sub-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-soft);
}
.sub-num {
  display: inline-block;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border: 1px solid #e8d6f0;
}
.sub-max {
  color: var(--muted);
  font-size: 13px;
}
.sub-body { font-size: 16px; line-height: 1.7; margin-bottom: 12px; }
.sub-body p { margin: 0 0 8px; }
.sub-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 10px auto;
  background: #fff;
  border: 1px solid var(--border-soft);
  padding: 6px;
  box-shadow: var(--shadow-sm);
}
.sub-form {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.sub-form input {
  flex: 1;
  min-width: 200px;
  font: inherit;
  font-size: 15px;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.sub-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(192, 132, 212, 0.15);
}
.sub-form input:disabled { opacity: .7; }
.sub-form button[type="submit"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 20px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: filter .15s, box-shadow .15s;
  box-shadow: 0 3px 12px rgba(192, 132, 212, 0.25);
}
.sub-form button[type="submit"]:hover { filter: brightness(1.05); }
.sub-form button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.sub-form .hidden,
.sub-accept.hidden { display: none; }
.sub-feedback { margin-top: 12px; padding: 14px 16px; }
.sub-feedback .verdict { font-size: 15px; }

@media (max-width: 700px) {
  .card { padding: 26px 20px; border-radius: 18px; }
  .card.home { padding: 32px 22px; }
  h1 { font-size: 24px; }
  .answer-form { flex-direction: column; }
  #submit-btn { padding: 13px; }
  .opt-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .intro table, .question table, .feedback table {
    width: 100%;
    font-size: 14px;
  }
  .intro th, .intro td, .question th, .question td, .feedback th, .feedback td {
    padding: 8px 10px;
  }
}

.crash-overlay {
  position: fixed;
  inset: 0;
  background: rgba(40, 30, 60, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.crash-card {
  max-width: 520px;
  width: 100%;
  text-align: center;
}
.crash-card h2 { margin: 0 0 10px; }
.crash-card p { margin: 0 0 14px; color: var(--ink-2, #5a4a78); }
.crash-msg {
  text-align: left;
  background: rgba(0, 0, 0, 0.04);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 140px;
  overflow: auto;
  margin: 0 0 16px;
}
.crash-msg:empty { display: none; }