/* Палитра и базовые переменные. Меняешь тут — меняется весь сайт. */
:root{
  --bg:#f4f5f7;
  --card:#ffffff;
  --text:#16181d;
  --muted:#6b7280;
  --line:#e4e6eb;
  --accent:#1f7a5a;        /* акцентный зелёный */
  --accent-soft:#e7f3ee;
  --warn:#b45309;
  --warn-soft:#fef4e6;
  --err:#c02626;
  --err-soft:#fdeaea;
  --radius:14px;
  --sidebar-w:290px;
}

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

body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Верхняя панель ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:16px;
  height:60px; padding:0 20px;
  background:var(--card); border-bottom:1px solid var(--line);
}
.logo{font-weight:650; font-size:15px; letter-spacing:-.01em}
.burger{
  display:none; background:none; border:0; font-size:20px;
  cursor:pointer; color:var(--text); padding:4px 6px;
}
.topbar-progress{margin-left:auto; display:flex; align-items:center; gap:10px}
.bar{width:160px; height:6px; background:var(--line); border-radius:99px; overflow:hidden}
.bar-fill{height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .3s}
.bar-label{font-size:13px; color:var(--muted); white-space:nowrap}

/* ---------- Раскладка ---------- */
.layout{display:flex; align-items:flex-start}

.sidebar{
  position:sticky; top:60px;
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  height:calc(100vh - 60px); overflow-y:auto;
  padding:20px 14px 60px;
  background:var(--card); border-right:1px solid var(--line);
}
/* flex:1 растягивает колонку на всё свободное место, max-width ограничивает
   ширину текста, а margin:0 auto центрирует эту колонку в оставшемся месте */
.content{flex:1; min-width:0; padding:32px 40px 100px; max-width:820px; margin:0 auto}

/* ---------- Сайдбар ---------- */
.track-title{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted);
  padding:18px 10px 8px;
}
.nav-item{
  display:flex; align-items:flex-start; gap:9px;
  padding:8px 10px; border-radius:9px;
  cursor:pointer; font-size:14px; line-height:1.35;
  color:var(--text); transition:background .15s;
}
.nav-item:hover{background:var(--bg)}
.nav-item.active{background:var(--accent-soft); color:var(--accent); font-weight:600}
.nav-num{
  flex:0 0 22px; height:22px; border-radius:50%;
  background:var(--bg); border:1px solid var(--line);
  font-size:11px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); margin-top:1px;
}
.nav-item.active .nav-num{background:var(--accent); border-color:var(--accent); color:#fff}
.nav-item.done .nav-num{background:var(--accent); border-color:var(--accent); color:#fff}
.nav-item.done .nav-num::after{content:"✓"}
.nav-item.done .nav-num span{display:none}

/* ---------- Контент спринта ---------- */
.kicker{font-size:13px; color:var(--accent); font-weight:600; margin-bottom:6px}
h1{font-size:30px; line-height:1.2; letter-spacing:-.02em; margin-bottom:10px}
h2{font-size:20px; margin:34px 0 12px; letter-spacing:-.01em}
h3{font-size:16px; margin:22px 0 8px}
p{margin-bottom:12px}
ul,ol{margin:0 0 14px 22px}
li{margin-bottom:6px}
.meta{color:var(--muted); font-size:14px; margin-bottom:22px}
code{
  background:#eceef1; padding:2px 6px; border-radius:5px;
  font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
pre{
  background:#1c1f26; color:#e6e6e6; padding:16px 18px;
  border-radius:var(--radius); overflow-x:auto; margin-bottom:14px;
}
pre code{background:none; color:inherit; padding:0; font-size:13px}

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; margin-bottom:18px;
}
.callout{
  border-left:3px solid var(--warn); background:var(--warn-soft);
  padding:14px 18px; border-radius:0 10px 10px 0; margin:16px 0;
  font-size:15px;
}
.callout.note{border-left-color:var(--accent); background:var(--accent-soft)}
.callout b{display:block; margin-bottom:3px}

/* ---------- Видео ---------- */
.video{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border:1px solid var(--line);
  border-radius:10px; margin-bottom:8px;
  text-decoration:none; color:var(--text); background:var(--card);
  transition:border-color .15s, transform .15s;
}
.video:hover{border-color:var(--accent); transform:translateX(2px)}
.video-play{
  flex:0 0 30px; height:30px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:11px;
}
.video-title{flex:1; font-size:14px; line-height:1.35}
.video-src{font-size:12px; color:var(--muted)}
.video-dur{font-size:12px; color:var(--muted); white-space:nowrap}

/* ---------- Квиз ---------- */
.q{margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.q:last-of-type{border-bottom:0; padding-bottom:0}
.q-text{font-weight:600; margin-bottom:10px}
.opt{
  display:flex; gap:10px; align-items:flex-start;
  padding:9px 12px; border:1px solid var(--line);
  border-radius:9px; margin-bottom:7px; cursor:pointer;
  font-size:15px; transition:border-color .15s, background .15s;
}
.opt:hover{border-color:var(--accent)}
.opt input{margin-top:4px; accent-color:var(--accent)}
.opt.ok{border-color:var(--accent); background:var(--accent-soft)}
.opt.bad{border-color:var(--err); background:var(--err-soft)}
.explain{
  display:none; margin-top:9px; padding:11px 14px;
  background:var(--bg); border-radius:9px; font-size:14px; color:var(--muted);
}
.explain.show{display:block}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff; border:0;
  padding:11px 20px; border-radius:10px;
  font-size:15px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:opacity .15s;
}
.btn:hover{opacity:.88}
.btn.ghost{background:none; color:var(--accent); border:1px solid var(--accent)}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px}
.score{font-size:14px; color:var(--muted)}

/* ---------- Отметка «пройдено» ---------- */
.done-box{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 22px; margin-top:26px;
}
.done-box input{width:20px; height:20px; accent-color:var(--accent); cursor:pointer}
.done-box label{cursor:pointer; font-weight:600}

/* ---------- Главная ---------- */
.hero{padding:10px 0 20px}
.hero h1{font-size:36px}
.hero p{color:var(--muted); font-size:17px; max-width:640px}
.stats{display:flex; gap:12px; flex-wrap:wrap; margin:26px 0}
.stat{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 20px; flex:1; min-width:140px;
}
.stat b{display:block; font-size:24px; letter-spacing:-.02em}
.stat span{font-size:13px; color:var(--muted)}

.track-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; margin-bottom:14px;
}
.track-card h3{margin:0 0 4px; font-size:17px}
.track-card p{color:var(--muted); font-size:14px; margin-bottom:14px}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  background:var(--bg); border:1px solid var(--line);
  border-radius:99px; padding:5px 12px; font-size:13px;
  cursor:pointer; transition:border-color .15s;
}
.chip:hover{border-color:var(--accent); color:var(--accent)}
.chip.done{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}

.overlay{display:none}

/* ---------- Телефон ---------- */
@media (max-width:900px){
  .burger{display:block}
  .content{padding:24px 18px 80px}
  h1{font-size:24px}
  .hero h1{font-size:28px}
  .topbar-progress .bar{width:90px}
  .sidebar{
    position:fixed; top:60px; left:0; z-index:25;
    transform:translateX(-100%); transition:transform .25s;
    box-shadow:0 8px 30px rgba(0,0,0,.12);
  }
  .sidebar.open{transform:translateX(0)}
  .overlay.show{
    display:block; position:fixed; inset:60px 0 0 0;
    background:rgba(0,0,0,.35); z-index:20;
  }
  .card{padding:18px}
}