/* ========= LIGHT THEME + BRAND COLORS ========= */
:root{
  --bg:#ffffff;
  --card:#f8f9fa;
  --ink:#0b1220;
  --muted:#5b667a;
  --accent:#0d6efd;
  --inactive:#0b62e6;
  --active:#0a7be6;
  --success:#22c55e;
  --danger:#ef4f6c;
  --gold:#f5c518;
  --blueStar:#3b82f6;
  --shadow:0 6px 20px rgba(0,0,0,.12);
  --radius:18px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Noto Sans',sans-serif;
  background:var(--bg);
  color:var(--ink)
}
.container{max-width:1100px;margin:0 auto;padding:20px}

/* ---------- Header + toolbar: responsive ---------- */
header{
  display:flex;align-items: center;gap:14px;margin:10px 0 20px 0;flex-wrap:wrap
}
.logo{font-size:22px;font-weight:700;letter-spacing:.2px;flex:1 1 auto;min-width:220px}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent);color:#fff;
  padding:6px 10px;border-radius:999px;font-weight:600
}
.toolbar{
  margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap
}
.select{
  appearance:none;background:#fff;border:1px solid #d0d7de;color:var(--ink);
  padding:8px 12px;border-radius:12px;min-width:240px
}
button{
  appearance:none;border:0;background:var(--inactive);color:#fff;font-weight:700;
  padding:10px 14px;border-radius:12px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition:.2s background-color
}
button:hover, button:focus{background:var(--active)}
button.secondary{
  background:#fff;color:var(--ink);border:1px solid #d0d7de;box-shadow:none
}
@media (max-width:640px){
  .toolbar{width:100%;order:3;justify-content:flex-start}
  .select{flex:1 1 60%;min-width:0}
  #btn-reset{flex:0 0 auto}
  .badge{order:1}
  .logo{order:2}
}

/* ---------- Cards & layout ---------- */
.card{
  background:var(--card);
  border:1px solid #e5e7eb;
  box-shadow:var(--shadow);
  border-radius:var(--radius)
}
.hero{padding:22px}
.hero h1{margin:0 0 6px 0;font-size:26px}
.hero p{margin:0;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
@media (max-width:860px){.grid{grid-template-columns:1fr}}

/* ---------- Chapters: dropdown (вместо чипов) ---------- */
.chapters{
  grid-column:1/-1;
  display:block;
  padding:12px;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.select-chapters{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  display:inline-block;
  max-width:100%;
  padding:10px 40px 10px 14px;
  border-radius:999px;
  border:1px solid #e6e8ee;
  background:#fff;
  color:var(--ink);
  font-weight:700;
  font-size:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  cursor:pointer;
  line-height:1.2;
  background-image:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b667a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
}
.select-chapters:focus{ outline:2px solid rgba(13,110,253,.2) }
@media (max-width:640px){ .select-chapters{ width:100% } }

/* ---------- Progress ---------- */
.progress{grid-column:1/-1;padding:18px 16px;display:flex;flex-wrap:wrap;place-content: center;gap:12px}
.progress-bar{flex:1;height:8px;background:#e9ecef;border-radius:999px;overflow:hidden}
.progress-bar>span{display:block;height:100%;background:var(--accent);width:0%}
.stars{display:flex;gap:6px;align-items:center;min-height:24px}
.star{font-size:22px;line-height:1;color:var(--gold);filter:drop-shadow(0 1px 1px rgba(0,0,0,.1))}
.star.small{font-size:18px;color:var(--blueStar)}

/* ---------- Topic navigation (пилюли) ---------- */
.nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;padding:12px}
.chip{
  border:1px solid #d0d7de;background:#fff;padding:8px 12px;border-radius:999px;color:var(--ink);
  cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:8px
}
.chip.active,.chip:hover{
  background:var(--active);border-color:var(--active);color:#fff
}

/* ---------- Sections ---------- */

#manualLinks{display:flex;flex-wrap:wrap;gap:8px}
#manualLinks a{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:999px;
  border:1px solid #e6e8ee;
  background:#fff;color:var(--ink);
  font-weight:600;font-size:14px;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  transition:.2s;
}
#manualLinks a:hover{
  background:var(--active);color:#fff;border-color:var(--active)
}


/* ---------- Sections ---------- */
.section{grid-column:1/-1;display:none}
.section.active{display:block}
.section .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
@media (max-width:860px){.section .wrap{grid-template-columns:1fr}}

.content{padding:18px}
.content h2{margin:0 0 8px 0;font-size:22px}
.content p{margin:0 0 10px 0;color:#111}

.tips{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.tip{
  display:flex;gap:10px;align-items:flex-start;
  background:#e8f7ee;border:1px dashed #6ee7b7;padding:10px;border-radius:12px;color:#065f46
}

/* ---------- Quiz ---------- */
.quiz{padding:18px}
.q-title{font-weight:700;margin-bottom:10px}
.answers{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.answer{
  display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #e5e7eb;padding:10px;border-radius:12px;
  cursor:pointer;transition:.2s
}
.answer:hover{background:#f3f4f6}
.answer.correct{outline:2px solid var(--success)}
.answer.wrong{outline:2px solid var(--danger)}

.actions{display:flex;gap:10px;flex-wrap:wrap}
footer{grid-column:1/-1;text-align:center;color:#5b667a;padding:10px}

/* ===== Certificate panel ===== */
#certificate[hidden]{ display:none; }
.certificate{ padding:16px; }
.certificate .cert-box{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.certificate h3{ margin:0 0 8px 0; }
.input{
  padding:10px 12px; border:1px solid #d0d7de; border-radius:12px;
  font-size:14px; width:min(340px, 100%); background:#fff; color:var(--ink);
}
.certificate .muted{ color:var(--muted); }

button.secondary:hover,
button.secondary:focus,
button.secondary:active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  outline: none;
}


/* ===== Improved answer highlight ===== */
.answer:hover {
  background: rgba(13,110,253,0.1); /* легкий голубой фон при наведении */
  border-color: var(--accent);
}

.answer.selected {
  background: rgba(13,110,253,0.15); /* чуть насыщеннее при выборе */
  border-color: var(--accent);
  outline: 2px solid var(--accent);
}

.answer.correct {
  background: rgba(34,197,94,0.15); /* зеленый фон при правильном ответе */
  border-color: var(--success);
}

.answer.wrong {
  background: rgba(239,79,108,0.15); /* красный фон при неправильном ответе */
  border-color: var(--danger);
}