/* ============================================================
   Переменные и базовые стили
   ============================================================ */
:root{
  --bg:#1b2838;
  --bg2:#16202d;
  --panel:#2a475e;
  --panel2:#1e3a52;
  --accent:#66c0f4;
  --accent2:#4c9ed9;
  --text:#c7d5e0;
  --text-bright:#ffffff;
  --green:#a4d007;
  --def:#3a6ea5;
  --thm:#8b5cf6;
  --ex:#e0a458;
  --border:#2f5878;
  --header-bg:linear-gradient(90deg,#171a21,#1b2838);

  /* Фоны блоков */
  --def-bg:rgba(58,110,165,.15);
  --def-border:#3a6ea5;
  --thm-bg:rgba(139,92,246,.13);
  --thm-border:#8b5cf6;
  --ex-bg:rgba(224,164,88,.12);
  --ex-border:#e0a458;
  --proof-text:#b8c9d8;

  /* Hero и секции */
  --hero-bg:linear-gradient(135deg,#1a3a52,#0e2538 70%);
  --hero-glow:rgba(102,192,244,.22);
  --hero-text:#a9bdd0;
}

/* Светлая тема */
body.light-theme{
  --bg:#f4f7fa;
  --bg2:#e8eef4;
  --panel:#ffffff;
  --panel2:#f0f5fa;
  --accent:#1f7fc4;
  --accent2:#1568a5;
  --text:#2a3f4f;
  --text-bright:#0e1a26;
  --green:#5f9900;
  --def:#2560a0;
  --thm:#6d3fc8;
  --ex:#a86a13;
  --border:#cfdae5;
  --header-bg:linear-gradient(90deg,#d8e5ef,#eef4f9);

  /* Фоны блоков — светлые, пастельные */
  --def-bg:#e6f0fa;
  --def-border:#2560a0;
  --thm-bg:#efe7fb;
  --thm-border:#6d3fc8;
  --ex-bg:#fbf0dd;
  --ex-border:#a86a13;
  --proof-text:#4a5f70;

  /* Hero и секции */
  --hero-bg:linear-gradient(135deg,#d8e8f5,#eaf2fa 70%);
  --hero-glow:rgba(31,127,196,.18);
  --hero-text:#3a5065;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  background:linear-gradient(160deg,var(--bg),var(--bg2));
  color:var(--text);
  min-height:100vh;
  line-height:1.7;
}

/* ============================================================
   Шапка
   ============================================================ */
header{
  background:linear-gradient(90deg,#171a21,#1b2838);
  padding:18px 30px;
  display:flex;
  align-items:center;
  gap:20px;
  box-shadow:0 4px 18px rgba(0,0,0,.5);
  position:sticky;
  top:0;
  z-index:100;
  flex-wrap:wrap;
}

header h1{
  font-size:1.3rem;
  letter-spacing:.5px;
  background:linear-gradient(90deg,var(--accent),#a4d007);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

nav{
  display:flex;
  gap:10px;
  margin-left:auto;
  flex-wrap:wrap;
}

nav button{
  background:var(--panel);
  color:var(--text);
  border:none;
  padding:10px 20px;
  border-radius:6px;
  cursor:pointer;
  font-size:.95rem;
  font-weight:600;
  transition:.2s;
}

nav button:hover{
  background:var(--accent2);
  color:#fff;
}

nav button.active{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0b1a26;
  box-shadow:0 4px 14px rgba(102,192,244,.4);
}

/* ============================================================
   Контейнер и страницы
   ============================================================ */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:30px 20px 60px;
}

.page{
  display:none;
}

.page.active{
  display:block;
  animation:fade .35s ease;
}

@keyframes fade{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

/* ============================================================
   Оглавление билетов
   ============================================================ */
.toc-title{
  font-size:1.8rem;
  color:var(--text-bright);
  margin-bottom:8px;
  background:linear-gradient(90deg,var(--text-bright),var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline-block;
}

.toc-sub{
  color:#8ba3b8;
  margin-bottom:28px;
}

.toc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
}

.toc-card{
  background:linear-gradient(145deg,var(--panel),var(--panel2));
  border:1px solid #2f5878;
  border-radius:10px;
  padding:16px 18px;
  cursor:pointer;
  transition:.25s;
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.toc-card:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 8px 24px rgba(102,192,244,.25);
}

.toc-num{
  background:var(--accent);
  color:#0b1a26;
  font-weight:700;
  min-width:34px;
  height:34px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem;
}

.toc-text{
  font-size:.92rem;
  color:var(--text);
}

.theme-group{
  margin-bottom:38px;
}

.theme-title{
  color:var(--text-bright);
  font-size:1.25rem;
  margin-bottom:16px;
  padding-bottom:8px;
  border-bottom:2px solid var(--panel);
  letter-spacing:.5px;
}

/* ============================================================
   Страница билета
   ============================================================ */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--panel);
  color:var(--accent);
  padding:8px 16px;
  border-radius:6px;
  cursor:pointer;
  border:none;
  font-size:.9rem;
  margin-bottom:22px;
  font-weight:600;
  transition:.2s;
}

.back-link:hover{
  background:var(--accent2);
  color:#fff;
}

.ticket h2{
  color:var(--text-bright);
  font-size:1.6rem;
  margin-bottom:24px;
  border-bottom:2px solid var(--panel);
  padding-bottom:12px;
}

/* ============================================================
   Стилевые блоки: определение / теорема / пример
   ============================================================ */
.block{
  border-radius:10px;
  padding:18px 22px;
  margin:18px 0;
  position:relative;
}

.block .label{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:20px;
  margin-bottom:10px;
}

/* Определение */
.definition{
  background:var(--def-bg);
  border-left:4px solid var(--def-border);
}
.definition .label{background:var(--def);color:#fff;}

/* Теорема */
.theorem{
  background:var(--thm-bg);
  border-left:4px solid var(--thm-border);
}
.theorem .label{background:var(--thm);color:#fff;}

/* Пример */
.example{
  background:var(--ex-bg);
  border-left:4px solid var(--ex-border);
}
.example .label{background:var(--ex);color:#fff;}

/* Доказательство */
.proof{
  margin-top:12px;
  padding-left:14px;
  border-left:2px dashed var(--proof-text);
  font-size:.95rem;
  color:var(--proof-text);
}
.proof::before{
  content:"Доказательство. ";
  font-weight:700;
  color:var(--text-bright);
}

/* ============================================================
   SVG-рисунки
   ============================================================ */
.fig{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:22px 0;
  padding:16px;
  background:rgba(0,0,0,.18);
  border-radius:10px;
}

.fig svg{
  max-width:100%;
  height:auto;
}

.fig figcaption{
  font-size:.85rem;
  color:#8ba3b8;
  margin-top:10px;
  text-align:center;
}

/* ============================================================
   Викторина — стартовый экран
   ============================================================ */
.quiz-start{
  text-align:center;
  padding:50px 20px;
  background:linear-gradient(145deg,var(--panel),var(--panel2));
  border-radius:14px;
  border:1px solid #2f5878;
}

.quiz-start h2{
  color:var(--text-bright);
  font-size:1.8rem;
  margin-bottom:12px;
}

.quiz-start p{
  color:#a9bdd0;
  max-width:560px;
  margin:0 auto 26px;
}

.btn-main{
  background:linear-gradient(90deg,var(--accent),#4c9ed9);
  color:#0b1a26;
  border:none;
  padding:15px 46px;
  font-size:1.1rem;
  font-weight:700;
  border-radius:8px;
  cursor:pointer;
  transition:.25s;
}

.btn-main:hover{
  transform:scale(1.05);
  box-shadow:0 8px 26px rgba(102,192,244,.4);
}

/* ============================================================
   Викторина — игровой экран
   ============================================================ */
.quiz-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  flex-wrap:wrap;
  gap:10px;
}

.q-counter{
  font-weight:700;
  color:var(--text-bright);
}

.timer{
  background:var(--panel);
  padding:6px 16px;
  border-radius:20px;
  font-weight:700;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}

.timer.warn{
  color:#ff6b6b;
  animation:pulse 1s infinite;
}

@keyframes pulse{
  50%{opacity:.5;}
}

.progress-wrap{
  height:10px;
  background:rgba(0,0,0,.25);
  border-radius:20px;
  overflow:hidden;
  margin-bottom:26px;
  border:1px solid var(--border);
}
.progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--accent),var(--green));
  border-radius:20px;
  transition:width .4s ease;
  box-shadow:0 0 12px rgba(102,192,244,.5);
}

.question{
  background:linear-gradient(145deg,var(--panel),var(--panel2));
  border-radius:14px;
  padding:28px;
  border:1px solid #2f5878;
}

.question h3{
  color:var(--text-bright);
  font-size:1.25rem;
  margin-bottom:22px;
}

.answers{
  display:grid;
  gap:12px;
}

.answer{
  background:#1e3a52;
  border:2px solid #2f5878;
  color:var(--text);
  padding:15px 20px;
  border-radius:9px;
  cursor:pointer;
  text-align:left;
  font-size:1rem;
  transition:.2s;
  font-family:inherit;
}

.answer:hover:not(.locked){
  border-color:var(--accent);
  background:#25496b;
}

.answer.correct{
  background:rgba(164,208,7,.2);
  border-color:var(--green);
  color:#fff;
}

.answer.wrong{
  background:rgba(255,80,80,.18);
  border-color:#ff5050;
  color:#fff;
}

.answer.locked{
  cursor:default;
}

/* ============================================================
   Викторина — экран итогов
   ============================================================ */
.result{
  text-align:center;
  padding:50px 24px;
  background:linear-gradient(145deg,var(--panel),var(--panel2));
  border-radius:16px;
  border:1px solid #2f5878;
}

.result .rank{
  font-size:2rem;
  font-weight:800;
  margin:16px 0;
  background:linear-gradient(90deg,var(--accent),var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.result .score{
  font-size:1.2rem;
  color:var(--text-bright);
  margin-bottom:8px;
}

.result .emoji{
  font-size:4rem;
}

.result .desc{
  color:#a9bdd0;
  max-width:520px;
  margin:0 auto 26px;
}

.win{
  color:var(--green);
}

.lose{
  color:#ff6b6b;
}

/* ============================================================
   Футер
   ============================================================ */
footer{
  text-align:center;
  color:#5f7a90;
  font-size:.85rem;
  padding:30px;
}

/* ============================================================
   Витрина курсов (Steam-style)
   ============================================================ */
.store-hero{
  background:var(--hero-bg);
  border:1px solid var(--border);
  border-radius:14px;
  padding:34px 36px;
  margin-bottom:30px;
  position:relative;
  overflow:hidden;
  transition:background .3s ease;
}
.store-hero::after{
  content:"";
  position:absolute;
  right:-80px;
  top:-80px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,var(--hero-glow),transparent 70%);
}
.store-hero h2{
  color:var(--text-bright);
  font-size:1.7rem;
  margin-bottom:8px;
}
.store-hero p{
  color:var(--hero-text);
  max-width:640px;
}

.store-section-title{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text-bright);
  font-size:1.2rem;
  margin:26px 0 16px;
  letter-spacing:.5px;
}

.store-section-title::before{
  content:"";
  width:5px;
  height:22px;
  border-radius:3px;
  background:linear-gradient(180deg,var(--accent),var(--green));
}

.course-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}

.course-card{
  background:linear-gradient(160deg,var(--panel),var(--panel2));
  border:1px solid #2f5878;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  transition:.25s;
  display:flex;
  flex-direction:column;
}

.course-card:hover{
  transform:translateY(-6px);
  border-color:var(--accent);
  box-shadow:0 14px 34px rgba(102,192,244,.28);
}

.course-cover{
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#0e2538,#1a3a52);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid #2f5878;
}

.course-cover svg{
  width:100%;
  height:100%;
  display:block;
}

.course-badge{
  position:absolute;
  top:10px;
  left:10px;
  background:rgba(164,208,7,.9);
  color:#14210a;
  font-size:.7rem;
  font-weight:800;
  padding:3px 9px;
  border-radius:5px;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.course-body{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.course-title{
  color:var(--text-bright);
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:6px;
}

.course-desc{
  color:#9db2c4;
  font-size:.88rem;
  line-height:1.5;
  margin-bottom:14px;
  flex:1;
}

.course-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.course-tag{
  background:rgba(102,192,244,.12);
  color:var(--accent);
  font-size:.72rem;
  padding:3px 9px;
  border-radius:20px;
  border:1px solid rgba(102,192,244,.25);
}

.course-btn{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0b1a26;
  border:none;
  padding:10px 16px;
  border-radius:7px;
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  transition:.2s;
  font-family:inherit;
  align-self:flex-start;
}

.course-card:hover .course-btn{
  background:linear-gradient(90deg,var(--green),var(--accent));
}
/* ============ Все курсы с сворачиванием ============ */
.course-block{
  background:linear-gradient(145deg,var(--panel),var(--panel2));
  border:1px solid #2f5878;
  border-radius:12px;
  margin-bottom:20px;
  overflow:hidden;
  transition:.25s;
}
.course-block:hover{
  border-color:var(--accent);
}
.course-block-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
  cursor:pointer;
  user-select:none;
  transition:.2s;
}
.course-block-header:hover{
  background:rgba(102,192,244,.06);
}
.course-block-title{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:1.15rem;
  font-weight:700;
  color:var(--text-bright);
}
.course-block-arrow{
  display:inline-block;
  transition:transform .25s ease;
  color:var(--accent);
  font-size:.85rem;
}
.course-block.collapsed .course-block-arrow{
  transform:rotate(-90deg);
}
.course-block-meta{
  color:#8ba3b8;
  font-size:.9rem;
}
.course-block-body{
  padding:0 24px 20px 24px;
  transition:max-height .3s ease, opacity .25s ease;
  overflow:hidden;
}
.course-block.collapsed .course-block-body{
  max-height:0;
  opacity:0;
  padding-top:0;
  padding-bottom:0;
}
.course-block-body .theme-group:last-child{
  margin-bottom:0;
}
/* ============ Выбор курса в викторине ============ */
.course-picker{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:520px;
  margin:0 auto;
  text-align:left;
}
.course-pick{
  display:flex;
  align-items:center;
  gap:12px;
  background:#1e3a52;
  border:2px solid #2f5878;
  border-radius:9px;
  padding:12px 16px;
  cursor:pointer;
  transition:.2s;
}
.course-pick:hover{
  border-color:var(--accent);
  background:#25496b;
}
.course-pick input{
  width:18px;
  height:18px;
  accent-color:var(--accent);
  cursor:pointer;
}
.course-pick-title{
  flex:1;
  color:var(--text-bright);
  font-weight:600;
  font-size:.95rem;
}
.course-pick-count{
  color:#8ba3b8;
  font-size:.85rem;
}
/* ============ Мелкие улучшения викторины ============ */
.quiz-top-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.abort-btn{
  background:transparent;
  border:2px solid #2f5878;
  color:#8ba3b8;
  width:34px;
  height:34px;
  border-radius:8px;
  cursor:pointer;
  font-size:1rem;
  font-weight:700;
  transition:.2s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.abort-btn:hover{
  border-color:#ff6b6b;
  color:#ff6b6b;
  background:rgba(255,80,80,.08);
}
.result-sub{
  color:#8ba3b8;
  font-size:.9rem;
  margin-bottom:8px;
}
/* ============ Поиск по билетам ============ */
.toc-search-wrap{
  margin:0 0 24px 0;
}
.toc-search{
  width:100%;
  max-width:420px;
  background:#1e3a52;
  border:2px solid #2f5878;
  color:var(--text);
  padding:11px 16px;
  border-radius:9px;
  font-size:.95rem;
  font-family:inherit;
  transition:.2s;
  outline:none;
}
.toc-search:focus{
  border-color:var(--accent);
  background:#25496b;
}
.toc-search::placeholder{
  color:#5f7a90;
}

/* ============ Прочитанные билеты ============ */
.toc-card.read .toc-num{
  background:var(--green);
  color:#14210a;
}
.toc-card.read .toc-text{
  color:#9db2c4;
}

/* ============ Действия на странице курса ============ */
.toc-course-actions{
  margin:0 0 24px 0;
}
.btn-quiz-course{
  background:linear-gradient(90deg,var(--green),var(--accent));
  color:#0b1a26;
  border:none;
  padding:12px 24px;
  border-radius:8px;
  font-weight:700;
  font-size:.95rem;
  cursor:pointer;
  transition:.25s;
  font-family:inherit;
}
.btn-quiz-course:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(164,208,7,.3);
}

/* ============ Тег с числом вопросов ============ */
.course-tag.tag-quiz{
  background:rgba(164,208,7,.15);
  color:var(--green);
  border-color:rgba(164,208,7,.35);
}

/* ============ Светлая тема: уточнения ============ */
body.light-theme header{
  background:var(--header-bg);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
body.light-theme header h1{
  background:linear-gradient(90deg,var(--accent),var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
body.light-theme nav button{
  background:rgba(255,255,255,.7);
  color:var(--text);
  border:1px solid var(--border);
}
body.light-theme nav button:hover{
  background:var(--accent);
  color:#fff;
}
body.light-theme nav button.active{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#fff;
  border-color:transparent;
}
body.light-theme .theme-toggle{
  background:rgba(255,255,255,.7);
  border:1px solid var(--border);
}

body.light-theme .toc-card,
body.light-theme .course-card,
body.light-theme .course-block,
body.light-theme .question,
body.light-theme .quiz-start,
body.light-theme .result{
  border-color:var(--border);
  box-shadow:0 2px 8px rgba(15,40,60,.05);
}

body.light-theme .toc-search,
body.light-theme .answer,
body.light-theme .course-pick{
  background:#ffffff;
  border-color:var(--border);
  color:var(--text);
}
body.light-theme .toc-search::placeholder{
  color:#8fa5b8;
}
body.light-theme .answer:hover:not(.locked){
  background:#e6eff8;
  border-color:var(--accent);
}
body.light-theme .answer.correct{
  background:#e8f5d0;
  border-color:var(--green);
  color:#1a2a05;
}
body.light-theme .answer.wrong{
  background:#fde0e0;
  border-color:#e04a4a;
  color:#5a1010;
}

body.light-theme .fig{
  background:#eaf1f8;
}
body.light-theme .store-hero::after{
  background:radial-gradient(circle,var(--hero-glow),transparent 70%);
}
body.light-theme .toc-num{
  background:var(--accent);
  color:#fff;
}
body.light-theme .toc-card.read .toc-num{
  background:var(--green);
  color:#fff;
}
body.light-theme footer{
  color:#7d92a6;
}
body.light-theme .btn-main{
  color:#fff;
}
body.light-theme .back-link{
  background:rgba(31,127,196,.1);
  color:var(--accent);
  border:1px solid rgba(31,127,196,.25);
}
body.light-theme .back-link:hover{
  background:var(--accent);
  color:#fff;
}

/* Кнопка переключения темы */
.theme-toggle{
  background:var(--panel);
  color:var(--text);
  border:none;
  width:42px;
  height:42px;
  border-radius:8px;
  cursor:pointer;
  font-size:1.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
}
.theme-toggle:hover{
  background:var(--accent2);
  color:#fff;
}

.clear-progress-btn{
  background:transparent;
  border:2px solid var(--border);
  color:#8ba3b8;
  padding:8px 14px;
  border-radius:8px;
  font-size:.85rem;
  cursor:pointer;
  transition:.2s;
  margin-bottom:24px;
  font-family:inherit;
}
.clear-progress-btn:hover{
  border-color:#ff6b6b;
  color:#ff6b6b;
  background:rgba(255,80,80,.08);
}

.report-wrap{
  margin-top:16px;
  text-align:right;
}
.report-btn{
  background:transparent;
  border:none;
  color:#5f7a90;
  font-size:.82rem;
  cursor:pointer;
  transition:.2s;
  font-family:inherit;
}
.report-btn:hover{
  color:#e0a458;
  text-decoration:underline;
}

/* ============ Плавная смена темы ============ */
body,
header,
nav button,
.toc-card,
.course-card,
.course-block,
.question,
.quiz-start,
.result,
.answer,
.toc-search,
.course-pick,
.store-hero,
.fig,
.theme-toggle{
  transition:background .3s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* ============ Кнопки курса в светлой теме ============ */
body.light-theme .course-btn{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#ffffff;
  box-shadow:0 2px 8px rgba(31,127,196,.25);
}
body.light-theme .course-card:hover .course-btn{
  background:linear-gradient(90deg,var(--green),var(--accent));
  box-shadow:0 4px 14px rgba(95,153,0,.3);
}

body.light-theme .btn-quiz-course{
  background:linear-gradient(90deg,var(--green),var(--accent));
  color:#ffffff;
  box-shadow:0 2px 10px rgba(95,153,0,.28);
}
body.light-theme .btn-quiz-course:hover{
  box-shadow:0 8px 22px rgba(95,153,0,.35);
}

/* ============ Кнопка "Начать игру" в светлой теме ============ */
body.light-theme .btn-main{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#ffffff;
  box-shadow:0 4px 14px rgba(31,127,196,.3);
}
body.light-theme .btn-main:hover{
  box-shadow:0 8px 26px rgba(31,127,196,.4);
}

/* ============ Журнал изменений ============ */
#changelogList{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.changelog-item{
  background:linear-gradient(145deg,var(--panel),var(--panel2));
  border:1px solid var(--border);
  border-radius:12px;
  padding:22px 26px;
  position:relative;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.changelog-item:hover{
  border-color:var(--accent);
  box-shadow:0 6px 20px rgba(102,192,244,.15);
}

.changelog-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.changelog-date{
  color:var(--accent);
  font-weight:700;
  font-size:.88rem;
  letter-spacing:.3px;
}

.changelog-version{
  background:rgba(102,192,244,.15);
  color:var(--accent);
  padding:3px 9px;
  border-radius:6px;
  font-size:.75rem;
  font-weight:700;
  border:1px solid rgba(102,192,244,.3);
}

.changelog-tag{
  padding:3px 10px;
  border-radius:20px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.tag-new{
  background:rgba(164,208,7,.18);
  color:var(--green);
  border:1px solid rgba(164,208,7,.4);
}
.tag-fix{
  background:rgba(255,120,120,.15);
  color:#ff8080;
  border:1px solid rgba(255,120,120,.35);
}
.tag-ui{
  background:rgba(139,92,246,.15);
  color:var(--thm);
  border:1px solid rgba(139,92,246,.35);
}
.tag-content{
  background:rgba(224,164,88,.15);
  color:var(--ex);
  border:1px solid rgba(224,164,88,.35);
}

.changelog-title{
  color:var(--text-bright);
  font-size:1.15rem;
  font-weight:700;
  margin-bottom:12px;
}

.changelog-list{
  list-style:none;
  padding:0;
  margin:0;
}
.changelog-list li{
  position:relative;
  padding-left:22px;
  margin-bottom:7px;
  color:var(--text);
  font-size:.94rem;
  line-height:1.55;
}
.changelog-list li::before{
  content:"▸";
  position:absolute;
  left:6px;
  color:var(--accent);
  font-weight:700;
}
.changelog-list li:last-child{
  margin-bottom:0;
}

/* Светлая тема */
body.light-theme .changelog-item{
  box-shadow:0 2px 8px rgba(15,40,60,.05);
}
body.light-theme .changelog-item:hover{
  box-shadow:0 6px 20px rgba(31,127,196,.15);
}

/* ============ Фильтр курсов по классу ============ */
.grade-filter{
  display:flex;
  gap:8px;
  margin-bottom:24px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:thin;
}
.grade-filter::-webkit-scrollbar{
  height:6px;
}
.grade-filter::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:3px;
}

.grade-btn{
  flex-shrink:0;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  padding:8px 16px;
  border-radius:20px;
  font-size:.88rem;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
  font-family:inherit;
  white-space:nowrap;
}
.grade-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.grade-btn.active{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0b1a26;
  border-color:transparent;
  box-shadow:0 2px 10px rgba(102,192,244,.35);
}

/* Тег класса на карточке курса */
.course-tag.tag-grade{
  background:rgba(139,92,246,.15);
  color:var(--thm);
  border-color:rgba(139,92,246,.35);
  font-weight:700;
}

/* Светлая тема */
body.light-theme .grade-btn{
  background:#ffffff;
}
body.light-theme .grade-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}
body.light-theme .grade-btn.active{
  color:#ffffff;
}

/* ============ Группы курсов в викторине ============ */
.course-group{
  margin-bottom:16px;
}
.course-group:last-child{
  margin-bottom:0;
}

.course-group-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  padding:0 4px;
}

.course-group-title{
  color:var(--accent);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.course-group-toggle{
  background:transparent;
  border:none;
  color:#8ba3b8;
  font-size:.8rem;
  cursor:pointer;
  padding:4px 8px;
  border-radius:6px;
  transition:.2s;
  font-family:inherit;
  font-weight:600;
}
.course-group-toggle:hover{
  color:var(--accent);
  background:rgba(102,192,244,.1);
}

/* Светлая тема */
body.light-theme .course-group-toggle:hover{
  background:rgba(31,127,196,.1);
}

/* ============ Выбор числа вопросов ============ */
.quiz-count-picker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:16px 0;
  flex-wrap:wrap;
}
.quiz-count-label{
  color:var(--text);
  font-size:.92rem;
  font-weight:600;
}
.quiz-count-options{
  display:flex;
  gap:6px;
}
.quiz-count-btn{
  background:var(--panel);
  color:var(--text);
  border:2px solid var(--border);
  padding:8px 18px;
  border-radius:8px;
  font-size:.92rem;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
  font-family:inherit;
}
.quiz-count-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.quiz-count-btn.active{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0b1a26;
  border-color:transparent;
  box-shadow:0 2px 10px rgba(102,192,244,.35);
}

/* Светлая тема */
body.light-theme .quiz-count-btn{
  background:#ffffff;
}
body.light-theme .quiz-count-btn.active{
  color:#ffffff;
}

/* ============ Подсказка про клавиши ============ */
.quiz-hint{
  margin-top:18px;
  text-align:center;
  color:#5f7a90;
  font-size:.82rem;
}
.quiz-hint kbd{
  display:inline-block;
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  padding:2px 7px;
  border-radius:5px;
  font-family:monospace;
  font-size:.78rem;
  font-weight:700;
  margin:0 1px;
}
body.light-theme .quiz-hint{
  color:#7d92a6;
}