/* Каркас приложения AIUniverse поверх дизайн-системы MCS DL Universe.
   Раскладка ровно как в ui_kits/learn/AppShell: боковая колонка 248px +
   липкая полупрозрачная шапка 64px. Ничего, кроме них, не фиксируется. */

html,body{min-height:100%}

.app{display:flex;min-height:100vh;background:var(--surface-page)}

/* ---------- Боковая колонка -------------------------------------------- */

.app__sidebar{
  width:var(--sidebar-w);flex:0 0 auto;
  background:var(--surface-card);border-right:1px solid var(--border-subtle);
  display:flex;flex-direction:column;gap:var(--space-8);
  padding:var(--space-7) 14px;
  position:sticky;top:0;height:100vh;
}
.brand{
  display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-3);
  font:var(--fw-bold) 19px/1 var(--font-display);letter-spacing:-.02em;color:var(--ink-900);
}
.brand:hover{text-decoration:none;color:var(--ink-900)}
.brand__accent{color:var(--brand)}

.nav{display:flex;flex-direction:column;gap:2px}
.nav__item{
  display:flex;align-items:center;gap:var(--space-4);
  height:40px;padding:0 var(--space-4);border-radius:var(--radius-control);
  font:var(--fw-medium) var(--fs-body)/1 var(--font-text);color:var(--text-body);
  transition:var(--transition-control);
}
.nav__item:hover{background:var(--ink-50);color:var(--text-strong);text-decoration:none}
.nav__item.is-active{background:var(--surface-selected);color:var(--azure-700);font-weight:var(--fw-semibold)}
.nav__item.is-active:hover{background:var(--surface-selected);color:var(--azure-700)}

.sidebar__note{
  margin-top:auto;padding:var(--space-6);border-radius:var(--radius-card);
  background:var(--wash-sky);border:1px solid var(--azure-100);
}
.sidebar__note-title{font:var(--fw-semibold) var(--fs-sm)/1.4 var(--font-text);color:var(--ink-900)}
.sidebar__note-body{margin-top:var(--space-1);font-size:var(--fs-sm);line-height:1.5;color:var(--text-muted)}

/* ---------- Основная колонка ------------------------------------------- */

.app__main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  height:var(--topbar-h);flex:0 0 auto;position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:var(--space-6);padding:0 28px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-subtle);
}
.topbar__titles{display:flex;flex-direction:column;min-width:0}
.topbar__crumb{
  font:var(--fw-bold) var(--fs-xs)/1 var(--font-text);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--text-faint);
}
.topbar__title{
  font:var(--fw-semibold) var(--fs-h3)/1.3 var(--font-display);color:var(--text-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.topbar__actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-4)}
.topbar__user{display:flex;align-items:center;gap:var(--space-3);color:var(--text-body)}
.topbar__user:hover{text-decoration:none;color:var(--text-strong)}
.topbar__user-name{font-size:var(--fs-sm);font-weight:var(--fw-medium)}

.page{padding:28px;flex:1}
.page--narrow{max-width:760px}
.page__header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-6);margin-bottom:var(--space-8);flex-wrap:wrap;
}
.page__lead{margin-top:var(--space-3);color:var(--text-muted);max-width:var(--reading-max)}
.page__actions{display:flex;align-items:center;gap:var(--space-4)}

.section{margin-top:var(--space-9)}
.section:first-child{margin-top:0}
.section__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-6);margin-bottom:var(--space-6);
}
.section__title{font:var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--font-display);color:var(--text-strong)}

/* ---------- Раскладочные утилиты --------------------------------------- */

.stack{display:flex;flex-direction:column;gap:var(--space-6)}
.stack--tight{gap:var(--space-3)}
.stack--loose{gap:var(--space-8)}
.row{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.row--between{justify-content:space-between}
.row--tight{gap:var(--space-2)}
.spacer{margin-left:auto}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-6)}
.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-6)}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:var(--space-8);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.stat{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--space-6)}
.stat__value{font:var(--fw-semibold) var(--fs-display-2)/1.1 var(--font-display);color:var(--text-strong);font-variant-numeric:tabular-nums}
.stat__label{margin-top:var(--space-2);font-size:var(--fs-sm);color:var(--text-muted)}

/* ---------- Подраздел курса -------------------------------------------- */

.subnav{display:flex;gap:var(--space-8);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-8)}
.subnav__item{
  height:40px;padding:0 0 12px;margin-bottom:-1px;display:inline-flex;align-items:center;gap:var(--space-2);
  border-bottom:2px solid transparent;color:var(--text-muted);
  font:var(--fw-semibold) var(--fs-body)/1 var(--font-text);
}
.subnav__item:hover{color:var(--text-strong);text-decoration:none}
.subnav__item.is-active{color:var(--text-strong);border-bottom-color:var(--brand)}
.subnav__item.is-soon{color:var(--text-faint);cursor:not-allowed}
.subnav__item.is-soon:hover{color:var(--text-faint)}

/* ---------- Карточка курса --------------------------------------------- */

.course-card{display:flex;flex-direction:column;gap:var(--space-3);min-height:140px}
.course-card__slug{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-muted)}
.course-card__foot{margin-top:auto;padding-top:var(--space-5);display:flex;align-items:center;gap:var(--space-5)}

/* ---------- Список «ключ — значение» ----------------------------------- */

.kv{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--space-4) var(--space-6)}
.kv__key{font-size:var(--fs-sm);color:var(--text-muted)}
.kv__value{font-size:var(--fs-body);color:var(--text-strong)}
@media (max-width:600px){.kv{grid-template-columns:1fr;gap:var(--space-1)}}

/* ---------- Вход -------------------------------------------------------- */

.auth{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:var(--space-8);background:var(--wash-sky);
}
.auth__panel{width:100%;max-width:400px}
.auth__brand{
  display:block;text-align:center;margin-bottom:var(--space-8);
  font:var(--fw-bold) 23px/1 var(--font-display);letter-spacing:-.02em;color:var(--ink-900);
}
.auth__brand:hover{text-decoration:none;color:var(--ink-900)}
.auth__card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-panel);padding:var(--space-8)}
.auth__title{font:var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--font-display);color:var(--text-strong)}
.auth__hint{margin-top:var(--space-3);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-muted)}
.auth__foot{margin-top:var(--space-7);text-align:center;font-size:var(--fs-sm);color:var(--text-muted)}

/* ---------- Выдача учётных данных -------------------------------------- */

.creds{font-family:var(--font-mono);font-size:var(--fs-code);color:var(--text-strong)}
.creds-warning{
  padding:var(--space-6);border-radius:var(--radius-card);
  background:var(--amber-100);border:1px solid var(--amber-400);
  color:var(--amber-600);font-size:var(--fs-sm);line-height:var(--lh-sm);
}

/* ---------- Рендер markdown -------------------------------------------- */

.md{color:var(--text-body);font-size:var(--fs-body);line-height:var(--lh-body);max-width:var(--reading-max)}
.md > *:first-child{margin-top:0}
.md h1,.md h2,.md h3,.md h4{margin:var(--space-8) 0 var(--space-4)}
.md h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
.md h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
.md h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.md p{margin:var(--space-5) 0}
.md ul,.md ol{margin:var(--space-5) 0;padding-left:var(--space-8)}
.md li{margin:var(--space-2) 0}
.md hr{border:none;border-top:1px solid var(--border-subtle);margin:var(--space-8) 0}
.md blockquote{
  margin:var(--space-6) 0;padding:var(--space-5) var(--space-6);
  background:var(--azure-50);border:1px solid var(--azure-100);border-radius:var(--radius-card);
}
.md code{
  background:var(--ink-100);border-radius:var(--radius-sm);padding:1px 5px;
  color:var(--ink-800);font-size:var(--fs-code);
}
.md pre{
  margin:var(--space-6) 0;padding:var(--space-6);overflow-x:auto;
  background:var(--ink-950);border-radius:var(--radius-panel);color:var(--ink-200);
}
.md pre code{background:transparent;padding:0;color:inherit}
.md table{width:100%;border-collapse:collapse;margin:var(--space-6) 0;font-size:var(--fs-sm)}
.md th,.md td{padding:8px 12px;border:1px solid var(--border-subtle);text-align:left}
.md th{background:var(--ink-50);color:var(--text-strong);font-weight:var(--fw-semibold)}
.md img{max-width:100%;height:auto;border-radius:var(--radius-media)}

/* ---------- Список лекций ----------------------------------------------- */

.lecture-row{
  display:flex;align-items:flex-start;gap:var(--space-6);
  padding:var(--space-6) var(--gutter-card);
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);transition:var(--transition-card);
}
.lecture-row:hover{border-color:var(--border-strong)}
.lecture-row__number{
  flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);background:var(--azure-50);color:var(--azure-700);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
}
.lecture-row__main{flex:1;min-width:0}
.lecture-row__title{font:var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-display);color:var(--text-strong)}
.lecture-row__title:hover{color:var(--text-link);text-decoration:none}
.lecture-row__desc{margin-top:var(--space-2);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-muted)}
.lecture-row__actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end}

/* ---------- Выбор формата лекции ---------------------------------------- */

.format-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-5)}
.format-choice__option{
  display:flex;align-items:flex-start;gap:var(--space-4);cursor:pointer;
  padding:var(--space-6);border:1px solid var(--border-default);border-radius:var(--radius-card);
  background:var(--surface-card);transition:var(--transition-card);
}
.format-choice__option:hover{border-color:var(--border-strong)}
.format-choice__option:has(input:checked){border-color:var(--brand);background:var(--azure-50)}
.format-choice__body{display:flex;flex-direction:column;gap:var(--space-2)}
.format-choice__title{font:var(--fw-semibold) var(--fs-body)/1.2 var(--font-text);color:var(--text-strong)}
.format-choice__hint{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-muted)}

/* ---------- Страница лекции --------------------------------------------- */

.lecture-head{
  padding:var(--space-8);margin-bottom:var(--space-8);
  background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  position:relative;
}
.lecture-head::before{
  content:'';position:absolute;inset-inline-start:0;inset-block-start:0;
  width:100%;height:2px;background:var(--status-theory);
}
.lecture-head__title{margin-top:var(--space-2);font:var(--fw-semibold) var(--fs-display-2)/var(--lh-display-2) var(--font-display);color:var(--text-strong)}
.lecture-head__desc{margin-top:var(--space-4);font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--text-body);max-width:var(--reading-max)}

.materials{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border-subtle)}
.materials__list{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.material{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-control);
  color:var(--text-body);transition:var(--transition-control);
}
.material:hover{background:var(--ink-50);color:var(--text-strong);text-decoration:none}
.material__title{font-weight:var(--fw-medium)}
.material__kind{margin-left:auto}

.lecture-body{
  padding:var(--space-8);background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-card);
}
.lecture-body.md{max-width:none}
.lecture-body.md > *{max-width:var(--reading-max)}
.lecture-body--html img{max-width:100%;height:auto}

.material-row{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);border:1px solid var(--border-subtle);
  border-radius:var(--radius-control);background:var(--surface-card);
}
.material-row__title{font-weight:var(--fw-medium);color:var(--text-strong)}

/* ---------- Редактор лекции ---------------------------------------------- */

.page--editor{padding:0;display:flex;flex-direction:column;min-height:0}
/* Тост не должен накрывать кнопку «Сохранить» в панели редактора. */
.page--editor .ds-toasts{top:calc(var(--topbar-h) + 68px)}

.editor{display:flex;flex-direction:column;height:calc(100vh - var(--topbar-h));min-height:0}
.editor__bar{
  flex:0 0 auto;display:flex;align-items:center;gap:var(--space-5);
  padding:var(--space-4) var(--space-7);
  background:var(--surface-card);border-bottom:1px solid var(--border-subtle);
}
.editor__status{font-size:var(--fs-sm);color:var(--text-faint)}
.editor__status.is-dirty{color:var(--amber-600)}

.editor__body{
  flex:1;min-height:0;display:grid;
  grid-template-columns:260px minmax(0,1fr) minmax(0,1fr);
}
.editor.is-drawer-hidden .editor__body{grid-template-columns:0 minmax(0,1fr) minmax(0,1fr)}
.editor.is-drawer-hidden .drawer{display:none}

.editor__code{display:flex;min-width:0;border-right:1px solid var(--ink-800)}
.editor__code textarea{
  flex:1;width:100%;border:none;outline:none;resize:none;
  padding:var(--space-6);background:var(--ink-950);color:var(--ink-100);
  font:var(--type-code);tab-size:2;
}
.editor__code textarea::placeholder{color:var(--ink-600)}

.editor__preview{display:flex;flex-direction:column;min-width:0;background:var(--surface-card)}
.editor__preview-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-6);border-bottom:1px solid var(--border-subtle);
  background:var(--ink-50);
}
.editor__preview iframe{flex:1;width:100%;border:none;background:var(--surface-card)}

/* ---------- Панель файлов ------------------------------------------------- */

.drawer{
  display:flex;flex-direction:column;min-width:0;overflow-y:auto;
  padding:var(--space-6);gap:var(--space-5);
  background:var(--surface-card);border-right:1px solid var(--border-subtle);
}
.drawer.is-dropping{background:var(--azure-50)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.drawer__hint{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-muted)}
.drawer__empty{font-size:var(--fs-sm);color:var(--text-faint)}

.file-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.file-list.is-busy{opacity:.5;pointer-events:none}
.file-item{
  padding:var(--space-4);border:1px solid var(--border-subtle);
  border-radius:var(--radius-control);background:var(--surface-card);
}
.file-item__head{display:flex;flex-direction:column;gap:2px}
.file-item__name{
  font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.file-item__size{font-size:var(--fs-xs);color:var(--text-muted)}
.file-item__actions{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-3)}
.file-item__actions .ds-btn{padding:0 8px;font-size:var(--fs-xs)}

/* ---------- Домашние задания --------------------------------------------- */

.hw-row{
  display:flex;align-items:flex-start;gap:var(--space-6);
  padding:var(--space-6) var(--gutter-card);
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);transition:var(--transition-card);
}
.hw-row:hover{border-color:var(--border-strong)}
.hw-row__main{flex:1;min-width:0}
.hw-row__title{font:var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-display);color:var(--text-strong)}
.hw-row__title:hover{color:var(--text-link);text-decoration:none}
.hw-row__meta{margin-top:var(--space-2)}
.hw-row__deadlines{
  flex:0 0 auto;display:flex;flex-direction:column;gap:var(--space-1);
  min-width:210px;
}
.hw-row__status{flex:0 0 auto;display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;justify-content:flex-end}

.deadlines{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--space-5);margin-top:var(--space-7);
  padding-top:var(--space-6);border-top:1px solid var(--border-subtle);
}
.deadline{display:flex;flex-direction:column;gap:var(--space-1)}
.deadline__label{
  font:var(--type-eyebrow);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--text-faint);
}
.deadline__value{font-size:var(--fs-body);color:var(--text-strong)}

/* ---------- Таблица баллов ------------------------------------------------ */

.scoreboard th,.scoreboard td{white-space:nowrap}
.scoreboard__name{position:sticky;left:0;background:var(--surface-card);z-index:1;min-width:220px}
.scoreboard thead .scoreboard__name{background:var(--ink-50)}
.scoreboard__hw{max-width:180px}
.scoreboard__hw a{display:block;color:var(--text-faint)}
.scoreboard__max{display:block;font-size:var(--fs-xs);color:var(--text-faint);text-transform:none}
.scoreboard__total{text-align:right}
.scoreboard__group td{
  background:var(--ink-50);font-weight:var(--fw-semibold);color:var(--text-strong);
  font-size:var(--fs-sm);
}
.scoreboard__group td{position:relative;z-index:2}

/* ---------- База знаний --------------------------------------------------- */

.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-6)}
.kb-card{
  display:flex;flex-direction:column;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);transition:var(--transition-card);
}
.kb-card:hover{border-color:var(--border-strong)}
.kb-card__body{
  display:flex;flex-direction:column;gap:var(--space-3);flex:1;
  padding:var(--gutter-card);color:var(--text-body);
}
.kb-card__body:hover{text-decoration:none;color:var(--text-body)}
.kb-card__kind{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font:var(--type-eyebrow);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--text-faint);
}
.kb-card__title{font:var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-display);color:var(--text-strong)}
.kb-card__desc{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-muted)}
.kb-card__url{margin-top:auto;padding-top:var(--space-3);font-size:var(--fs-xs);color:var(--text-faint)}
.kb-card__actions{
  display:flex;gap:var(--space-2);padding:var(--space-3) var(--gutter-card);
  border-top:1px solid var(--border-subtle);
}

/* ---------- Прочее ------------------------------------------------------ */

.muted{color:var(--text-muted)}
.nowrap{white-space:nowrap}
.text-right{text-align:right}
.inline-form{display:inline}