/* ============================================================
   Кабинет слушателя и практикум по коду
   ============================================================ */

/* --------- страница курса --------- */
.crs { display: grid; grid-template-columns: minmax(0,1fr) 316px; gap: var(--gap); align-items: start; }
.crs__hero {
  border-radius: var(--r-lg); padding: 20px 22px; color: #fff; position: relative; overflow: hidden;
  margin-bottom: var(--gap); box-shadow: var(--shadow-2);
}
.crs__hero::after { content:''; position:absolute; inset:0;
  background: radial-gradient(120% 120% at 88% -10%, rgba(255,255,255,.26), transparent 62%); }
.crs__hero > * { position: relative; z-index: 1; }
.crs__hero h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bk); max-width: 44ch; line-height: 1.25; }
.crs__meta { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 8px; font-size: var(--fs-sm); opacity: .93; }
.crs__meta b { font-family: var(--mono); font-weight: var(--fw-sb); }
.crs__hero .pill { background: rgba(255,255,255,.2); color: #fff; }

/* прогресс обучения */
.prog { display: flex; align-items: center; gap: 10px; }
.prog__bar { flex: 1; height: 10px; border-radius: 20px; background: var(--sunken); overflow: hidden; }
.prog__bar i { display: block; height: 100%; border-radius: 20px;
  background: linear-gradient(90deg, var(--blue), var(--sky)); }
.prog__n { font-family: var(--display); font-size: var(--fs-xl); font-weight: var(--fw-bk); font-variant-numeric: tabular-nums; }

.teacher { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.teacher .avatar { width: 34px; height: 34px; font-size: var(--fs-md); }
.teacher b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-sb); }
.teacher span { font-size: var(--fs-xs); color: var(--muted); }

/* --------- прохождение занятия --------- */
.les-el { border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-bottom: 12px; box-shadow: var(--shadow-1); }
.les-el__h { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); }
.les-el__h h3 { font-size: var(--fs-lg); font-weight: var(--fw-bd); }
.les-el__h .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.les-el__ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; color: #fff; flex: none; }
.les-el__ic svg { width: 17px; height: 17px; }
.les-el__b { padding: 15px; }

.player {
  aspect-ratio: 16/9; background: linear-gradient(140deg, #0b1f3a, #16305a); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); position: relative;
}
.player__play { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; }
.player__play svg { width: 24px; height: 24px; margin-left: 3px; }
.player__bar { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: var(--fs-xs); }
.player__track { flex: 1; height: 3px; background: rgba(255,255,255,.25); border-radius: 3px; }
.player__track i { display: block; height: 100%; width: 22%; background: var(--sky); border-radius: 3px; }

.dl { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--r-sm); margin-bottom: 7px; }
.dl__ic { width: 32px; height: 32px; border-radius: 6px; background: var(--bad-bg); color: var(--bad);
  display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--fs-2xs); font-weight: var(--fw-bd); }
.dl__ic.doc { background: var(--info-bg); color: var(--info); }
.dl__ic.xls { background: var(--ok-bg); color: var(--ok); }
.dl b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-sb); }
.dl span { font-size: var(--fs-xs); color: var(--muted); }
.dl .btn { margin-left: auto; }

.drop { border: 1.5px dashed var(--line); border-radius: var(--r); padding: 24px; text-align: center; background: var(--field); }
.drop svg { width: 34px; height: 34px; color: var(--sky); }
.drop p { margin: 6px 0 10px; font-size: var(--fs-sm); color: var(--muted); }

/* таймер теста */
.timer { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 9px 12px; box-shadow: var(--shadow-1); }
.timer__ic { width: 32px; height: 32px; border-radius: 50%; background: var(--warn-bg); color: var(--warn);
  display: flex; align-items: center; justify-content: center; }
.timer__ic svg { width: 17px; height: 17px; }
.timer b { display: block; font-family: var(--mono); font-size: var(--fs-xl); font-weight: var(--fw-bd); letter-spacing: -.02em; }
.timer span { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.timer.low b { color: var(--bad); }

.qcard { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 15px; margin-bottom: 11px; }
.qcard__n { font-size: var(--fs-sm); font-weight: var(--fw-bd); color: var(--blue); margin-bottom: 5px; }
.qcard__t { font-size: var(--fs-md); line-height: 1.5; margin-bottom: 11px; }
.qcard__t em { color: var(--muted); font-size: var(--fs-sm); }
.opt { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--r-sm); margin-bottom: 6px; cursor: pointer; font-size: var(--fs-sm); line-height: 1.45; }
.opt:hover { border-color: var(--blue); background: var(--blue-in); }
.opt input { margin-top: 2px; accent-color: var(--blue); width: 15px; height: 15px; flex: none; }
.opt.picked { border-color: var(--blue); background: var(--blue-in); }
.opt.right { border-color: #b6e0c5; background: var(--ok-bg); }
.opt.wrong { border-color: #f0cdca; background: var(--bad-bg); }

.result { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--line); }
.result__dot { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.result__dot.ok { background: linear-gradient(140deg,#16a34a,#4ade80); }
.result__dot.no { background: linear-gradient(140deg,#dc2626,#f87171); }
.result b { font-size: var(--fs-lg); font-family: var(--display); font-weight: var(--fw-bk); display: block; }
.result span { font-size: var(--fs-sm); color: var(--muted); }
.result .right { margin-left: auto; text-align: right; }

/* --------- практикум по коду --------- */
.ide { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 12px; align-items: start; }
.editor { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #0d1b2c; box-shadow: var(--shadow-2); }
.editor__h { display: flex; align-items: center; gap: 9px; padding: 8px 11px; background: #0a1626;
  border-bottom: 1px solid rgba(255,255,255,.08); }
.editor__h b { color: #cfe0f5; font-size: var(--fs-sm); font-family: var(--mono); font-weight: var(--fw-sb); }
.editor__dots { display: flex; gap: 5px; }
.editor__dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.editor__h .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.editor__lang { background: rgba(255,255,255,.09); color: #cfe0f5; border: 1px solid rgba(255,255,255,.14);
  border-radius: 5px; font: inherit; font-size: var(--fs-xs); padding: 3px 7px; font-family: var(--mono); }

.editor__body { position: relative; display: flex; font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.65; }
.editor__ln { padding: 12px 0 12px 12px; color: #3f5878; text-align: right; user-select: none;
  background: #0b1728; min-width: 40px; white-space: pre; }
.editor__area { position: relative; flex: 1; min-width: 0; }
.editor__hl { padding: 12px 14px; margin: 0; white-space: pre; overflow-x: auto; color: #d6e4f5;
  min-height: 300px; pointer-events: none; font: inherit; }
.editor textarea {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 12px 14px; border: 0; resize: none;
  background: transparent; color: transparent; caret-color: #6fd3ff; font: inherit; white-space: pre;
  overflow-x: auto; outline: none; -webkit-text-fill-color: transparent;
}
.editor textarea::selection { background: rgba(111,211,255,.28); }

/* подсветка синтаксиса */
.tk-kw { color: #ff9ecd; } .tk-str { color: #9ae6a0; } .tk-num { color: #ffcc80; }
.tk-com { color: #5c7799; font-style: italic; }
.tk-fn { color: #79c0ff; } .tk-op { color: #b8c9de; } .tk-blt { color: #d2a8ff; }

.editor__f { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: #0a1626;
  border-top: 1px solid rgba(255,255,255,.08); color: #7d94b3; font-size: var(--fs-xs); font-family: var(--mono); }
.editor__f .right { margin-left: auto; display: flex; gap: 7px; }

.tests { display: grid; gap: 7px; }
.tcase { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.tcase__h { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: var(--fs-sm); cursor: pointer; background: #fff; }
.tcase__h b { font-weight: var(--fw-sb); }
.tcase__st { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; flex: none; background: var(--sunken); color: var(--soft); }
.tcase__st svg { width: 11px; height: 11px; }
.tcase.ok .tcase__st { background: var(--ok-bg); color: var(--ok); }
.tcase.no .tcase__st { background: var(--bad-bg); color: var(--bad); }
.tcase__sc { margin-left: auto; font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.tcase__b { padding: 0 10px 10px; display: none; }
.tcase.open .tcase__b { display: block; }
.tcase pre { margin: 4px 0 0; background: var(--sunken); border-radius: 5px; padding: 7px 9px;
  font-family: var(--mono); font-size: var(--fs-xs); white-space: pre-wrap; word-break: break-word; color: var(--ink-2); }
.tcase .lbl2 { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--soft);
  font-weight: var(--fw-bd); margin-top: 7px; display: block; }
.tcase.no pre.got { background: var(--bad-bg); color: #7f1d1d; }

.runbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r);
  border: 1px solid var(--line); background: #fff; margin-bottom: 10px; }
.runbar__score { font-family: var(--display); font-size: var(--fs-xl); font-weight: var(--fw-bk); font-variant-numeric: tabular-nums; }
.runbar.pass { border-color: #b6e0c5; background: var(--ok-bg); }
.runbar.fail { border-color: #f0cdca; background: var(--bad-bg); }

@media (max-width: 1180px) { .ide { grid-template-columns: 1fr; } .crs { grid-template-columns: 1fr; } }

/* ---- решение слушателя в карточке проверки: читаем, не редактируем ---- */
.codeblock { background: #0d1b2e; border-radius: 0 0 var(--r) var(--r); overflow: auto; max-height: 560px; }
.codeblock pre {
  margin: 0; padding: 14px 16px; color: #dbe7f7; font-family: var(--mono);
  font-size: var(--fs-sm); line-height: 1.65; tab-size: 4;
}
.codeblock__n { display: inline-block; width: 32px; margin-right: 12px; color: #4d658a;
  user-select: none; text-align: right; }