/* ============================================================
   Переменные и базовые стили
   ============================================================ */
: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;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--text-bright);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  margin: 0 2px;
}
body.light-theme .quiz-hint{
  color:#7d92a6;
}

/* ============ Подсказка об обновлении ============ */
.refresh-hint{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:linear-gradient(90deg,rgba(224,164,88,.12),rgba(224,164,88,.05));
  border-bottom:1px solid rgba(224,164,88,.3);
  padding:11px 20px;
  font-size:.85rem;
  line-height:1.5;
  color:var(--text);
}
.refresh-hint-content{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex:1;
  flex-wrap:wrap;
}
.refresh-hint-icon{
  font-size:1rem;
  flex-shrink:0;
}
.refresh-hint-text{
  flex:1;
}
.refresh-hint kbd{
  display:inline-block;
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  padding:1px 6px;
  border-radius:4px;
  font-family:monospace;
  font-size:.78rem;
  margin:0 1px;
}
.refresh-hint-warn{
  display:inline-block;
  margin-top:4px;
  color:#e0a458;
  font-weight:600;
}
.refresh-hint-close{
  background:transparent;
  border:none;
  color:#8ba3b8;
  cursor:pointer;
  font-size:.95rem;
  padding:0 4px;
  flex-shrink:0;
  transition:.2s;
}
.refresh-hint-close:hover{
  color:#e0a458;
}

/* Светлая тема */
body.light-theme .refresh-hint{
  background:linear-gradient(90deg,#fdf3e3,#fefaf3);
  border-bottom-color:#e8d0a0;
}
body.light-theme .refresh-hint kbd{
  background:#ffffff;
}
body.light-theme .refresh-hint-warn{
  color:#a86a13;
}

/* ============ Билеты без теории ============ */
.toc-card.empty{
  opacity:.65;
}
.toc-card.empty:hover{
  opacity:1;
  border-color:#e0a458;
}
.toc-card.empty .toc-num{
  background:rgba(224,164,88,.25);
  color:#e0a458;
}
.toc-empty-mark{
  display:inline-block;
  margin-left:6px;
  font-size:.85rem;
  opacity:.8;
}
body.light-theme .toc-card.empty:hover{
  border-color:#c0841f;
}
body.light-theme .toc-card.empty .toc-num{
  background:rgba(192,132,31,.2);
  color:#a86a13;
}

/* ============ Метка сложности ============ */
.diff-badge{
  display:inline-block;
  margin-left:8px;
  padding:2px 10px;
  border-radius:20px;
  font-size:.75rem;
  font-weight:700;
  vertical-align:middle;
}
.diff-1{
  background:rgba(164,208,7,.18);
  color:var(--green);
  border:1px solid rgba(164,208,7,.4);
}
.diff-2{
  background:rgba(224,164,88,.18);
  color:var(--ex);
  border:1px solid rgba(224,164,88,.4);
}
.diff-3{
  background:rgba(255,80,80,.15);
  color:#ff8080;
  border:1px solid rgba(255,80,80,.35);
}
body.light-theme .diff-3{
  color:#c93a3a;
}

/* ============ Блок «Стоит повторить» ============ */
.review-block{
  background:rgba(224,164,88,.08);
  border:1px solid rgba(224,164,88,.3);
  border-radius:10px;
  padding:18px 22px;
  margin:20px 0;
  text-align:left;
}
.review-title{
  color:var(--ex);
  font-size:1.05rem;
  margin-bottom:8px;
}
.review-desc{
  color:var(--text);
  font-size:.9rem;
  margin-bottom:12px;
}
.review-list{
  list-style:none;
  padding:0;
  margin:0;
}
.review-list li{
  margin-bottom:6px;
}
.review-list a{
  color:var(--accent);
  text-decoration:none;
  font-size:.92rem;
  transition:.2s;
}
.review-list a:hover{
  color:var(--text-bright);
  text-decoration:underline;
}
.review-course{
  color:#8ba3b8;
  font-size:.85rem;
}

/* ============ Выбор режима викторины ============ */
.quiz-mode-picker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:16px 0 4px;
  flex-wrap:wrap;
}
.quiz-mode-label{
  color:var(--text);
  font-size:.92rem;
  font-weight:600;
}
.quiz-mode-options{
  display:flex;
  gap:6px;
}
.quiz-mode-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-mode-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.quiz-mode-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);
}

/* ============ Пояснение к ответу (режим «Разбор») ============ */
.explanation-block{
  background:rgba(102,192,244,.1);
  border-left:4px solid var(--accent);
  border-radius:8px;
  padding:14px 18px;
  margin-top:16px;
  color:var(--text);
  font-size:.95rem;
  line-height:1.55;
}
.explanation-block strong{
  color:var(--text-bright);
}
.explanation-label{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}

/* ============ Кнопка «Дальше» в режиме «Разбор» ============ */
.next-btn-wrap{
  margin-top:18px;
  text-align:right;
}
.next-btn{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0b1a26;
  border:none;
  padding:12px 32px;
  border-radius:8px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition:.25s;
  font-family:inherit;
  animation:fadeIn .3s ease;
}
.next-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(102,192,244,.4);
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:none;}
}

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

/* ============ Активные кнопки в светлой теме ============ */
body.light-theme .quiz-count-btn.active,
body.light-theme .quiz-mode-btn.active{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#ffffff;
  border-color:transparent;
  box-shadow:0 2px 10px rgba(31,127,196,.35);
}

/* ============ Активная кнопка фильтра классов в светлой теме ============ */
body.light-theme .grade-btn.active{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#ffffff;
  border-color:transparent;
  box-shadow:0 2px 10px rgba(31,127,196,.35);
}

/* ============ Таблица ФСУ ============ */
.fsu-table-wrap{
  overflow-x:auto;
  margin-top:8px;
}
.fsu-table{
  width:100%;
  border-collapse:collapse;
  background:var(--panel2);
  border-radius:8px;
  overflow:hidden;
  font-size:.95rem;
}
.fsu-table th{
  background:rgba(102,192,244,.15);
  color:var(--accent);
  padding:10px 14px;
  text-align:left;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.fsu-table td{
  padding:10px 14px;
  border-top:1px solid var(--border);
  color:var(--text);
  font-family:'Consolas','Monaco',monospace;
}
.fsu-table td:first-child{
  color:var(--accent);
  font-weight:700;
  width:40px;
  text-align:center;
}
.fsu-table td:nth-child(2){
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--text-bright);
  font-weight:600;
  white-space:nowrap;
}
.fsu-table tr:hover td{
  background:rgba(102,192,244,.06);
}
body.light-theme .fsu-table{
  background:#f4f8fc;
}
body.light-theme .fsu-table th{
  background:rgba(31,127,196,.1);
}
body.light-theme .fsu-table tr:hover td{
  background:rgba(31,127,196,.06);
}

/* ============ Авторизация в шапке ============ */
.auth-box{
  display:flex;
  align-items:center;
  gap:10px;
}

.auth-login-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(90deg,#fc3f1d,#e63418);
  color:#fff;
  padding:10px 18px;
  border-radius:8px;
  text-decoration:none;
  font-size:.9rem;
  font-weight:600;
  transition:.2s;
}
.auth-login-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(252,63,29,.4);
}
.auth-login-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  background:#fff;
  color:#fc3f1d;
  border-radius:50%;
  font-weight:900;
  font-size:.8rem;
}

.auth-profile{
  position:relative;
}
.auth-profile-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--panel);
  border:1px solid var(--border);
  padding:6px 14px 6px 6px;
  border-radius:20px;
  cursor:pointer;
  color:var(--text);
  font-size:.9rem;
  font-family:inherit;
  transition:.2s;
}
.auth-profile-btn:hover{
  border-color:var(--accent);
}
.auth-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.auth-avatar-initial{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#0b1a26;
  font-weight:700;
  font-size:1rem;
}
.auth-nickname{
  font-weight:600;
}

.auth-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px;
  min-width:140px;
  display:none;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  z-index:200;
}
.auth-menu.open{
  display:block;
}
.auth-menu-item{
  display:block;
  width:100%;
  text-align:left;
  background:transparent;
  border:none;
  color:var(--text);
  padding:10px 14px;
  border-radius:6px;
  cursor:pointer;
  font-size:.9rem;
  font-family:inherit;
  transition:.2s;
}
.auth-menu-item:hover{
  background:rgba(102,192,244,.1);
  color:var(--accent);
}

/* Светлая тема */
body.light-theme .auth-profile-btn{
  background:#fff;
}
body.light-theme .auth-menu{
  background:#fff;
}

/* ============ Мобильная адаптация ============ */
@media (max-width: 700px){

  /* Шапка — компактная */
  header{
    padding:8px 10px;
    gap:8px;
    flex-wrap:wrap;
    overflow-x:hidden;
  }
  header h1{
    font-size:.95rem;
    white-space:nowrap;
  }

  /* Навигация — только иконки, одного размера */
  nav{
    gap:4px;
    margin-left:auto;
    flex-wrap:wrap;
  }
  nav button{
    width:40px;
    height:40px;
    padding:0;
    font-size:1.1rem;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Скрываем текст кнопок */
  .nav-text{
    display:none;
  }

  /* Тема — того же размера */
  .theme-toggle{
    width:40px;
    height:40px;
    font-size:1.1rem;
  }

  /* Профиль — компактный */
  .auth-profile-btn{
    padding:2px;
    gap:0;
    width:40px;
    height:40px;
    justify-content:center;
  }
  .auth-nickname{
    display:none;
  }
  .auth-avatar{
    width:34px;
    height:34px;
  }

  /* Кнопка войти — только иконка «Я» */
  .auth-login-btn{
    padding:0;
    width:40px;
    height:40px;
    justify-content:center;
    font-size:0;
  }
  .auth-login-btn .auth-login-icon{
    font-size:1rem;
    width:24px;
    height:24px;
  }
  /* Текст «Войти с Яндексом» скрыт, потому что font-size:0 */

  /* Меню профиля — по центру экрана */
  .auth-menu{
    position:fixed;
    top:50%;
    left:50%;
    right:auto;
    transform:translate(-50%, -50%);
    min-width:240px;
    z-index:99999;
    box-shadow:0 20px 60px rgba(0,0,0,.8);
    border:2px solid var(--accent);
  }
  .auth-menu.open{
    display:block;
  }
  .auth-menu-item{
    padding:16px 20px;
    font-size:1.1rem;
    text-align:center;
  }

  /* Затемнение фона, когда меню открыто */
  .auth-menu::before{
    content:"";
    position:fixed;
    top:-50vh;
    left:-50vw;
    width:200vw;
    height:200vh;
    background:rgba(0,0,0,.6);
    z-index:-1;
  }
  .auth-menu-item{
    padding:14px 18px;
    font-size:1rem;
  }

  /* Плашка обновления — скрываем */
  .refresh-hint{
    display:none !important;
  }

  /* Плашка витрины — убираем описание */
  .store-hero{
    padding:18px 18px;
  }
  .store-hero h2{
    font-size:1.2rem;
    margin-bottom:0;
  }
  .store-hero p{
    display:none;
  }

  /* Секция "Доступные курсы" — компактнее */
  .store-section-title{
    font-size:1rem;
    margin:16px 0 10px;
  }

  /* Контейнер */
  .container{
    padding:14px 12px 40px;
  }

  /* Витрина — одна карточка в ряд */
  .course-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  /* Оглавление */
  .toc-grid{
    grid-template-columns:1fr;
  }

  /* Фильтр классов */
  .grade-filter{
    margin-bottom:16px;
    padding-bottom:6px;
  }
  .grade-btn{
    padding:6px 14px;
    font-size:.85rem;
  }
  
  
  /* ============ Викторина на телефоне ============ */
  
  /* Верхняя строка — компактнее */
  .quiz-top{
    margin-bottom:10px;
    gap:6px;
  }
  .q-counter{
    font-size:.85rem;
  }
  .timer{
    padding:4px 10px;
    font-size:.85rem;
  }
  .abort-btn{
    width:30px;
    height:30px;
    font-size:.85rem;
  }

  /* Прогресс-бар — тоньше */
  .progress-wrap{
    height:8px;
    margin-bottom:16px;
  }

  /* Вопрос — компактнее */
  .question{
    padding:18px 16px;
    border-radius:10px;
  }
  .question h3{
    font-size:1.05rem;
    margin-bottom:16px;
    line-height:1.5;
  }

  /* Кнопки ответов — на всю ширину, крупнее */
  .answers{
    gap:10px;
  }
  .answer{
    padding:14px 16px;
    font-size:.95rem;
    line-height:1.4;
    min-height:52px;
    display:flex;
    align-items:center;
  }

  /* Кнопка «Дальше» — на всю ширину */
  .next-btn-wrap{
    margin-top:14px;
    text-align:stretch;
  }
  .next-btn{
    width:100%;
    padding:14px 20px;
    font-size:1rem;
  }

  /* Подсказка про клавиши — скрываем */
  .quiz-hint{
    display:none;
  }

  /* Кнопка «Пожаловаться» — компактнее */
  .report-wrap{
    margin-top:10px;
    text-align:center;
  }
  .report-btn{
    font-size:.8rem;
  }

  /* Блок пояснения (режим «Разбор») — компактнее */
  .explanation-block{
    padding:12px 14px;
    font-size:.9rem;
    margin-top:12px;
  }
  .explanation-label{
    font-size:.65rem;
  }

  /* Выбор курсов — компактнее */
  .quiz-start{
    padding:26px 16px;
  }
  .quiz-start h2{
    font-size:1.4rem;
  }
  .quiz-start p{
    font-size:.9rem;
    margin-bottom:18px;
  }
  .course-pick{
    padding:10px 12px;
  }
  .course-pick-title{
    font-size:.9rem;
  }
  .course-pick-count{
    font-size:.8rem;
  }

  /* Режимы (Спринт/Разбор) и число вопросов — на всю ширину */
  .quiz-mode-picker,
  .quiz-count-picker{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .quiz-mode-options,
  .quiz-count-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  .quiz-mode-btn,
  .quiz-count-btn{
    width:100%;
    padding:10px 12px;
    font-size:.9rem;
  }
  .quiz-count-options{
    grid-template-columns:repeat(4, 1fr);
  }

  /* Экран итогов — компактнее */
  .result{
    padding:30px 18px;
  }
  .result .emoji{
    font-size:3rem;
  }
  .result .rank{
    font-size:1.5rem;
  }
  .result .score{
    font-size:1rem;
  }
  .result .desc{
    font-size:.9rem;
  }
  .btn-main{
    padding:14px 30px;
    font-size:1rem;
    width:100%;
  }
  .result .back-link{
    display:block;
    width:100%;
    margin:10px 0 0 0 !important;
    text-align:center;
    justify-content:center;
  }
}

/* ============ Шапка "Что нового" ============ */
.store-hero-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  position:relative;
  z-index:1;
}
.store-hero-header > div{
  flex:1;
}

.tg-subscribe-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(135deg,#229ED9,#1a7fb0);
  color:#fff;
  padding:10px 18px;
  border-radius:24px;
  text-decoration:none;
  font-size:.9rem;
  font-weight:600;
  transition:.25s;
  white-space:nowrap;
  flex-shrink:0;
  box-shadow:0 4px 14px rgba(34,158,217,.3);
}
.tg-subscribe-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(34,158,217,.5);
  text-decoration:none;
}
.tg-icon{
  font-size:1rem;
}

@media (max-width: 700px){
  .store-hero-header{
    flex-direction:column;
  }
  .tg-subscribe-btn{
    width:100%;
    justify-content:center;
  }
  .tg-text{
    display:inline;
  }
}

/* ============ Режим «Размышление»: кнопка «Показать варианты» ============ */
.show-options-wrap{
  margin-top:20px;
  text-align:center;
}

.show-options-btn{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0b1a26;
  border:none;
  padding:14px 34px;
  border-radius:10px;
  font-size:1.05rem;
  font-weight:700;
  cursor:pointer;
  transition:.25s;
  font-family:inherit;
}

.show-options-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(102,192,244,.4);
}

body.light-theme .show-options-btn{
  color:#fff;
}

/* Плавное появление вариантов */
.answers.revealed{
  animation:fadeIn .35s ease;
}

/* Ссылка в футере */
footer .footer-link{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px dashed rgba(102,192,244,.5);
  transition:.2s;
}
footer .footer-link:hover{
  color:var(--accent2);
  border-bottom-color:var(--accent2);
}


/* ============================================================
   v0.23 — Билет: навигация, дата обновления, тема, ссылки
   ============================================================ */

/* ============ Верх билета: «К оглавлению» + «Обновлено» ============ */
.ticket-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
  flex-wrap:wrap;
}

.ticket-updated{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.82rem;
  color:#8ba3b8;
  background:rgba(102,192,244,.08);
  border:1px solid rgba(102,192,244,.2);
  padding:5px 12px;
  border-radius:16px;
  white-space:nowrap;
}

.ticket-updated-new{
  color:var(--green);
  background:rgba(164,208,7,.12);
  border-color:rgba(164,208,7,.4);
  font-weight:700;
  box-shadow:0 0 0 3px rgba(164,208,7,.08);
}

/* ============ Тема над заголовком билета ============ */
.ticket-course-theme{
  color:#8ba3b8;
  font-size:.85rem;
  letter-spacing:.4px;
  margin-bottom:8px;
  text-transform:uppercase;
  font-weight:600;
}

body.light-theme .ticket-course-theme{
  color:#7d92a6;
}

/* ============ Низ билета: навигация ============ */
.ticket-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:36px;
  padding-top:22px;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}

.ticket-nav-center{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:auto;
  flex-wrap:wrap;
}

.ticket-nav-info{
  color:#8ba3b8;
  font-size:.85rem;
  font-weight:600;
  white-space:nowrap;
  text-align:center;
  min-width:140px;
}

.ticket-nav-btn{
  background:var(--panel);
  color:var(--text);
  border:2px solid var(--border);
  padding:9px 18px;
  border-radius:8px;
  font-size:.92rem;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
  font-family:inherit;
  white-space:nowrap;
}

.ticket-nav-btn:hover:not(:disabled){
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(102,192,244,.08);
}

.ticket-nav-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

body.light-theme .ticket-nav-btn{
  background:#ffffff;
}
body.light-theme .ticket-nav-btn:hover:not(:disabled){
  background:rgba(31,127,196,.08);
}

/* ============ Перекрёстные ссылки внутри билета ============ */
.ticket a[href^="#ticket-"]{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px dashed rgba(102,192,244,.5);
  transition:.2s;
}

.ticket a[href^="#ticket-"]:hover{
  color:var(--accent2);
  border-bottom-color:var(--accent2);
  background:rgba(102,192,244,.08);
  padding:1px 3px;
  border-radius:3px;
}

body.light-theme .ticket a[href^="#ticket-"]{
  border-bottom-color:rgba(31,127,196,.5);
}

/* ============ Мобильная адаптация ============ */
@media (max-width: 700px){
  .ticket-top{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .ticket-updated{
    align-self:flex-start;
    font-size:.78rem;
  }
  .ticket-nav{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .ticket-nav .back-link{
    align-self:stretch;
    justify-content:center;
  }
  .ticket-nav-center{
    margin-left:0;
    flex-direction:column;
    gap:10px;
  }
  .ticket-nav-btn{
    width:100%;
    text-align:center;
  }
  .ticket-nav-info{
    order:-1;
    min-width:0;
  }
}


/* ============================================================
   v0.23 — Билет: навигация, дата обновления, тема, ссылки
   (финальные правки выравнивания)
   ============================================================ */

/* ============ Верх билета: «К оглавлению» + «Обновлено» ============ */
.ticket-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
  flex-wrap:nowrap;
}

.ticket-top .back-link{
  margin-bottom:0;
  flex-shrink:0;
}

.ticket-updated{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.82rem;
  color:#8ba3b8;
  background:rgba(102,192,244,.08);
  border:1px solid rgba(102,192,244,.2);
  padding:5px 12px;
  border-radius:16px;
  white-space:nowrap;
  flex-shrink:0;
}

.ticket-updated-new{
  color:var(--green);
  background:rgba(164,208,7,.12);
  border-color:rgba(164,208,7,.4);
  font-weight:700;
  box-shadow:0 0 0 3px rgba(164,208,7,.08);
}

/* ============ Тема над заголовком билета ============ */
.ticket-course-theme{
  color:#8ba3b8;
  font-size:.85rem;
  letter-spacing:.4px;
  margin-bottom:8px;
  text-transform:uppercase;
  font-weight:600;
}

body.light-theme .ticket-course-theme{
  color:#7d92a6;
}

/* ============ Низ билета: навигация ============ */
.ticket-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:36px;
  padding-top:22px;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}

.ticket-nav .ticket-nav-back{
  margin-bottom:0;
  padding:9px 18px;
  border:2px solid transparent;
  box-sizing:border-box;
}

.ticket-nav-center{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:auto;
  flex-wrap:wrap;
}

.ticket-nav-info{
  color:#8ba3b8;
  font-size:.85rem;
  font-weight:600;
  white-space:nowrap;
  text-align:center;
  min-width:140px;
}

.ticket-nav-btn{
  background:var(--panel);
  color:var(--text);
  border:2px solid var(--border);
  padding:9px 18px;
  border-radius:8px;
  font-size:.92rem;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
  font-family:inherit;
  white-space:nowrap;
  box-sizing:border-box;
}

.ticket-nav-btn:hover:not(:disabled){
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(102,192,244,.08);
}

.ticket-nav-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

body.light-theme .ticket-nav-btn{
  background:#ffffff;
}
body.light-theme .ticket-nav-btn:hover:not(:disabled){
  background:rgba(31,127,196,.08);
}

/* ============ Перекрёстные ссылки внутри билета ============ */
.ticket a[href^="#ticket-"]{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px dashed rgba(102,192,244,.5);
  transition:.2s;
}

.ticket a[href^="#ticket-"]:hover{
  color:var(--accent2);
  border-bottom-color:var(--accent2);
  background:rgba(102,192,244,.08);
  padding:1px 3px;
  border-radius:3px;
}

body.light-theme .ticket a[href^="#ticket-"]{
  border-bottom-color:rgba(31,127,196,.5);
}

/* ============ Мобильная адаптация ============ */
@media (max-width: 700px){
  .ticket-top{
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:14px;
  }
  .ticket-updated{
    font-size:.78rem;
  }
  .ticket-nav{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .ticket-nav .ticket-nav-back{
    width:100%;
    justify-content:center;
  }
  .ticket-nav-center{
    margin-left:0;
    flex-direction:column;
    gap:10px;
  }
  .ticket-nav-btn{
    width:100%;
    text-align:center;
  }
  .ticket-nav-info{
    order:-1;
    min-width:0;
  }
}


/* ============================================================
   v0.23 — Подкраска «прочитано + обновлено» в оглавлении
   ============================================================ */

.toc-card.updated .toc-num{
  background:linear-gradient(135deg, #ffe082 0%, #ffb300 100%);
  color:#3a2200;
  box-shadow:0 0 0 3px rgba(255,179,0,.35), 0 0 12px rgba(255,179,0,.45);
  font-size:1.05rem;
}

.toc-card.updated .toc-text{
  color:var(--text-bright);
}

.toc-card.updated:hover{
  border-color:#ffb300;
  box-shadow:0 8px 24px rgba(255,179,0,.32);
}

/* Светлая тема */
body.light-theme .toc-card.updated .toc-num{
  background:linear-gradient(135deg, #ffe082 0%, #ffb300 100%);
  color:#3a2200;
}
body.light-theme .toc-card.updated:hover{
  border-color:#ff8f00;
  box-shadow:0 8px 24px rgba(255,143,0,.22);
}

/* ============================================================
   ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ (v0.24)
   ============================================================ */

.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}
.profile-name {
  color: var(--text-bright);
  font-size: 1.3rem;
  margin: 0 0 4px;
}
.profile-email {
  color: #8ba3b8;
  font-size: .85rem;
}
.profile-role {
  color: var(--accent);
  font-size: .85rem;
  margin-top: 4px;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  text-align: center;
}
.profile-stat-value {
  color: var(--text-bright);
  font-size: 1.5rem;
  font-weight: 800;
}
.profile-stat-label {
  color: #8ba3b8;
  font-size: .8rem;
  margin-top: 2px;
}

.profile-chart {
  margin: 20px 0;
  padding: 16px;
  background: rgba(102, 192, 244, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.profile-chart .chart-bars {
  height: 120px;
}
.profile-chart .chart-bar-label {
  font-size: .7rem;
}
.profile-chart .chart-bar-date {
  font-size: .65rem;
}

.profile-subtitle {
  color: var(--text-bright);
  font-size: 1rem;
  margin-bottom: 10px;
}

.profile-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.profile-table th {
  text-align: left;
  padding: 8px 12px;
  color: var(--accent);
  font-size: .75rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.profile-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.profile-table tr:last-child td {
  border-bottom: none;
}

.profile-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 700;
}
.profile-status.finished {
  background: rgba(164, 208, 7, .15);
  color: var(--green);
}
.profile-status.interrupted {
  background: rgba(255, 120, 120, .15);
  color: #ff8080;
}

.profile-empty {
  text-align: center;
  padding: 20px;
  color: #8ba3b8;
}
.profile-error {
  text-align: center;
  padding: 20px;
  color: #ff8080;
}

/* Кнопка «Профиль» в меню */
.profile-menu-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  font-size: .9rem;
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s;
}
.profile-menu-item:hover {
  background: rgba(102,192,244,.1);
  color: var(--accent);
}

/* ============================================================
   МОДАЛКИ (v0.24)
   ============================================================ */

.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.modal.modal-wide {
  max-width: 800px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 {
  color: var(--text-bright);
  font-size: 1.15rem;
  margin: 0;
}

.modal-close {
  background: transparent;
  border: none;
  color: #8ba3b8;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
}
.modal-close:hover {
  color: #ff8080;
  background: rgba(255,120,120,.1);
}

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--border);
  padding: 9px 22px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
  font-family: inherit;
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   ГРАФИКИ (v0.24 — для профиля)
   ============================================================ */

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
  padding: 0 8px;
}

.chart-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.chart-bar-value {
  color: var(--text-bright);
  font-size: .75rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.chart-bar-stack {
  width: 100%;
  max-width: 40px;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  transition: height .4s ease;
}

.chart-bar-segment {
  width: 100%;
}
.chart-bar-segment.finished {
  background: linear-gradient(180deg, #66c0f4, #2a475e);
}
.chart-bar-segment.interrupted {
  background: #e0a458;
}

.chart-bar.empty {
  width: 100%;
  max-width: 40px;
  background: var(--border);
  opacity: .4;
  border-radius: 4px 4px 0 0;
}

.chart-bar-label {
  color: #8ba3b8;
  font-size: .7rem;
  margin-top: 6px;
}
.chart-bar-date {
  color: #5f7a90;
  font-size: .65rem;
  margin-top: 2px;
}

/* ============================================================
   КАСТОМНЫЙ СКРОЛЛБАР (v0.24)
   ============================================================ */

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb {
  background: rgba(102, 192, 244, 0.35);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(102, 192, 244, 0.6);
  background-clip: content-box;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(102, 192, 244, 0.4) rgba(0, 0, 0, 0.15);
}

/* ============================================================
   ФИЛЬТР ПО ТЕГАМ (v0.24)
   ============================================================ */

.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* Общий стиль для фильтров */
.grade-btn,
.tag-btn {
  white-space: nowrap;
  background: transparent;
  color: var(--text);
  border: 2px solid var(--border);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
  font-family: inherit;
}

.grade-btn:hover,
.tag-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.grade-btn.active,
.tag-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0b1a26;
}

.grade-filter,
.tag-filter {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  padding-bottom: 6px;
  scrollbar-width: none;
  max-width: 100%;
}
.grade-filter::-webkit-scrollbar,
.tag-filter::-webkit-scrollbar {
  display: none;
}

.tag-btn,
.grade-btn {
  white-space: nowrap; /* не переносить слова */
}

@media (max-width: 600px){
  .tag-btn,
  .grade-btn {
    font-size: .8rem;
    padding: 5px 12px;
  }
}

/* ============================================================
   Факт дня (страница поиска теории)
   ============================================================ */

.fact-card {
  padding: 30px;
  border-radius: 16px;
  text-align: center;
  /* Цвет взяли из store-hero (как у каталога), 
     но если нужен свой оттенок, можно переопределить */
}

.fact-title {
  color: var(--hero-text);
  font-size: 1.5em;
  margin-bottom: 15px;
}

.fact-text {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.1em;
  color: var(--text-main);
  line-height: 1.6;
}

/* Пагинация */
.pagination {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.page-btn {
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  cursor: pointer;
  border-radius: 4px;
  font-weight: 600;
}
.page-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.page-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.page-dots {
  padding: 8px 4px;
  color: var(--text);
}

/* Античит: прогресс-бар чтения */
.read-progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
  animation: fadeIn 0.3s ease;
}

.read-progress-text {
  font-size: 0.8em;
  color: var(--text-muted, #8ba3b8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.read-progress-track {
  width: 100%;
  max-width: 300px;
  height: 6px;
  background: var(--border-color, #3d4f61);
  border-radius: 3px;
  overflow: hidden;
}

.read-progress-bar {
  height: 100%;
  background: var(--accent, #66c0f4);
  transition: width 1s linear, background 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.clear-progress-btn {
  white-space: nowrap;
  flex-shrink: 0; /* Чтобы кнопка не сжималась */
}

/* ============================================================
   Тулбар оглавления: Поиск + Викторина + Очистка
   ============================================================ */

.toc-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Выравниваем по центру по вертикали */
  margin-bottom: 20px;
  gap: 15px;
  flex-wrap: wrap;
}

.toc-toolbar-left {
  display: flex;
  align-items: center; /* Выравниваем по центру по вертикали */
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* Фиксируем высоту у всех элементов тулбара */
.toc-toolbar-left .toc-search-wrap,
.toc-toolbar-left .toc-search,
.toc-toolbar-left .btn-quiz-course,
.toc-toolbar .clear-progress-btn {
  height: 44px; /* Единая высота для всех */
  box-sizing: border-box; /* Чтобы padding не увеличивал высоту */
  margin: 0; /* Убираем возможные внешние отступы */
  display: flex;
  align-items: center; /* Для кнопок, чтобы текст был по центру */
}

.toc-toolbar-left .toc-search-wrap {
  flex: 1;
  max-width: 400px;
}

.toc-toolbar-left .toc-search {
  width: 100%;
  padding: 0 15px; /* Внутренний отступ */
  border-radius: 8px; /* Если нужно скругление */
  border: 1px solid var(--border-color, #3d4f61); /* Чтобы поиск не выбивался */
  background: var(--card-bg, rgba(255,255,255,0.05));
  color: var(--text-main, #c6d4df);
}

.toc-toolbar-left .btn-quiz-course {
  padding: 0 20px;
  flex-shrink: 0;
  justify-content: center;
}

.toc-toolbar .clear-progress-btn {
  padding: 0 15px;
  flex-shrink: 0;
  justify-content: center;
  border: 1px solid var(--border-color, #3d4f61);
  background: transparent;
  color: var(--text-main, #c6d4df);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.toc-toolbar .clear-progress-btn:hover {
  background: var(--card-bg, rgba(255,255,255,0.05));
}

@media (max-width: 768px) {
  .toc-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .toc-toolbar-left {
    flex-direction: column;
    align-items: stretch;
  }
  .toc-toolbar-left .toc-search-wrap {
    max-width: none;
    margin-bottom: 10px;
  }
  .toc-toolbar-left .btn-quiz-course {
    width: 100%;
  }
  .toc-toolbar .clear-progress-btn {
    width: 100%;
    margin-top: 10px;
  }
}

/* ============================================================
   Профиль: статистика по курсам (v0.26)
   ============================================================ */

.read-stats-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(102, 192, 244, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}

.read-stats-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(102, 192, 244, 0.1);
}

.read-stats-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.read-stats-list li b {
  color: var(--accent);
  font-size: 1rem;
}

/* Статусы вопросов */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 8px;
  vertical-align: middle;
}
.status-new {
  background: rgba(102, 192, 244, 0.15);
  color: #66c0f4;
  border: 1px solid rgba(102, 192, 244, 0.4);
}
.status-quality {
  background: rgba(224, 164, 88, 0.15);
  color: #e0a458;
  border: 1px solid rgba(224, 164, 88, 0.4);
}

/* Кнопки лайков */
.question-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.vote-buttons {
  display: flex;
  gap: 10px;
}

.vote-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vote-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(102, 192, 244, 0.08);
}

.vote-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vote-btn.voted {
  background: rgba(102, 192, 244, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

/* Галочка "Включая новые" */
.quiz-include-new {
  margin: 16px 0;
  text-align: center;
}

.quiz-include-new {
  margin: 16px 0;
  text-align: center;
}

.quiz-include-new .checkbox-label {
  cursor: pointer;
  font-size: 0.95rem;
  color: #a9bdd0;
}

.quiz-include-new {
  margin: 16px 0;
  display: flex;
  justify-content: center;
}

.quiz-include-new .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #a9bdd0;
}

.quiz-include-new input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
} 

/* ============================================================
   Новый блок: Интересный факт (v0.27)
   ============================================================ */

.block.fact {
  background: rgba(26, 188, 156, 0.08);
  border-left: 4px solid #1abc9c;
}

.block.fact .label {
  background: #1abc9c;
  color: #fff;
}

/* Светлая тема */
body.light-theme .block.fact {
  background: #e0f8f3;
  border-left-color: #128f76;
}

body.light-theme .block.fact .label {
  background: #128f76;
  color: #fff;
}

/* ============================================================
   Статистика вопроса и футер (v0.27)
   ============================================================ */
.question-footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%; /* Растягиваем на всю ширину */
}

.question-stats {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
  color: #8ba3b8;
  flex: 1; /* Занимает свободное место, толкая кнопки вправо */
}

.question-stats b {
  color: var(--text-bright);
}

/* Золотая подсветка для свежих обновлений */
.stats-date-new {
  color: #ffb300;
}
.stats-date-new b {
  color: #ffb300;
  text-shadow: 0 0 8px rgba(255, 179, 0, 0.4);
}

.footer-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.report-wrap {
  margin-top: 0;
}

/* Мобильная адаптация (скрываем текст, прижимаем кнопки) */
@media (max-width: 700px) {
  .stats-label, .report-text {
    display: none;
  }
  .question-stats {
    gap: 12px;
    flex: none; /* Сбрасываем flex, чтобы не растягивалось */
  }
  .footer-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 8px;
  }
}

/* ============================================================
   Таблицы в блоках контента (v0.28)
   Применяются к таблицам внутри билетов (.block, .ticket).
   При CSS-рефакторинге — перенести @media в конец файла.
   ============================================================ */

.block table,
.ticket table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.95rem;
  border: 1px solid var(--border);
}

.block table th,
.block table td,
.ticket table th,
.ticket table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

/* Заголовки столбцов */
.block table th,
.ticket table th {
  background: rgba(102, 192, 244, 0.12);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}

/* Зебра: чётные строки (в tbody, чтобы не задевать шапку) */
.block table tbody tr:nth-child(even) td,
.ticket table tbody tr:nth-child(even) td {
  background: rgba(102, 192, 244, 0.04);
}

/* Убираем нижнюю границу у последней строки — не дублировать рамку блока */
.block table tbody tr:last-child td,
.ticket table tbody tr:last-child td {
  border-bottom: none;
}

/* Первый столбец — выделяем (как правило, это ключ/термин) */
.block table tbody td:first-child,
.ticket table tbody td:first-child {
  font-weight: 600;
  color: var(--text-bright);
}

/* Светлая тема */
body.light-theme .block table th,
body.light-theme .ticket table th {
  background: rgba(31, 127, 196, 0.1);
}

body.light-theme .block table tbody tr:nth-child(even) td,
body.light-theme .ticket table tbody tr:nth-child(even) td {
  background: rgba(31, 127, 196, 0.04);
}

/* Мобилка: таблица скроллится вбок, если шире экрана.
   display:block на table — рабочий приём; семантика страдает,
   но UX для школьников важнее. */
@media (max-width: 700px) {
  .block table,
  .ticket table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ============================================================
   Бейдж «Генератор» в викторине (v0.28)
   ============================================================ */
.status-badge.status-generator {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.4);
}