/* КАРКАС LMS — в стиле karkaskurs.ru и КАРКАС CRM: чернила, бумага, красный и их прозрачности,
   острые углы, жёсткие тени, прописные подписи. Цвет курса (--c) — обложки и шапка курса. */
:root {
  --ink: #141414;
  --red: #D62718;
  --paper: #E9E1D0;
  --sheet: #F3EEE4;
  --ok: #1E7B3A;
  --info: #2F5F9E;

  --ink-70: rgba(20, 20, 20, .7);
  --ink-50: rgba(20, 20, 20, .55);
  --ink-15: rgba(20, 20, 20, .15);
  --ink-10: rgba(20, 20, 20, .1);
  --ink-06: rgba(20, 20, 20, .06);
  --paper-70: rgba(233, 225, 208, .72);
  --paper-15: rgba(233, 225, 208, .15);

  --f-head: 'Russo One', 'Oswald', 'Arial Narrow', sans-serif;
  --f-cond: 'Oswald', 'Arial Narrow', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --side: 248px;
  --gap: 24px;
  --mbar: 60px;

  --tg-top: env(safe-area-inset-top, 0px);
  --tg-bottom: env(safe-area-inset-bottom, 0px);
  --tg-left: env(safe-area-inset-left, 0px);
  --tg-right: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-mono); font-size: 14px; line-height: 1.5; min-height: 100dvh; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.muted { color: var(--ink-50); }
.small { font-size: 12px; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.grow { flex: 1; }
span.is-bad { color: var(--red); }
[hidden] { display: none !important; }
body::before { content: ''; position: fixed; z-index: 95; top: 0; left: 0; right: 0; height: var(--tg-top); background: var(--ink); pointer-events: none; }
.boot, .loading { font-family: var(--f-cond); letter-spacing: .14em; text-transform: uppercase; padding: 40px; text-align: center; color: var(--ink-50); }
.boot { font-family: var(--f-head); color: var(--ink); }
.has-modal, .has-modal body, .has-player, .has-player body { overflow: hidden; }

/* --- знак ---------------------------------------------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.brand-mark { flex: none; position: relative; display: inline-block; width: 18px; height: 18px; overflow: hidden; border: 2px solid currentColor; }
.brand-mark::after { content: ''; position: absolute; left: -4px; top: 5px; width: 22px; height: 3px; background: var(--red); transform: rotate(-45deg); }
.brand-name { font-family: var(--f-head); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.brand-big .brand-mark { width: 40px; height: 40px; border-width: 4px; }
.brand-big .brand-mark::after { left: -8px; top: 12px; width: 52px; height: 6px; }
.brand-big .brand-name { font-size: 28px; }

/* --- оболочка: меню слева (компьютер), шапка и нижние вкладки (телефон) ---------------------------------------- */
.shell { min-height: 100dvh; }
.side {
  position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: var(--side); overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  padding: calc(18px + var(--tg-top)) 0 14px var(--tg-left); background: var(--ink); color: var(--paper);
}
.side-brand { padding: 0 18px; color: var(--paper); text-decoration: none; }
.org-switch { display: grid; gap: 1px; margin: 0 12px; padding: 10px 12px; border: 2px solid var(--paper-15); background: none; color: var(--paper); text-align: left; cursor: pointer; position: relative; }
.org-switch:hover { border-color: var(--paper-70); }
.org-switch-k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-70); }
.org-switch-n { font-family: var(--f-cond); font-size: 15px; font-weight: 700; letter-spacing: .04em; line-height: 1.25; padding-right: 18px; overflow-wrap: anywhere; }
.org-switch-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--paper-70); }
.side-nav { flex: 1; display: grid; align-content: start; gap: 14px; }
.side-group { display: grid; }
.side-group-t { margin: 0 0 4px; padding: 0 18px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-70); }
.side-group-ink { padding: 0; color: var(--ink-50); }
.side-link { display: block; padding: 7px 18px 7px 15px; border-left: 3px solid transparent; color: var(--paper-70); text-decoration: none; font-family: var(--f-cond); font-size: 14px; font-weight: 500; letter-spacing: .06em; }
.side-link:hover { color: var(--paper); background: var(--paper-15); }
.side-link.is-active { color: var(--paper); border-left-color: var(--red); background: rgba(233, 225, 208, .08); }
.side-me { display: flex; align-items: center; gap: 10px; margin: 0 12px; padding: 8px; color: var(--paper); text-decoration: none; border: 2px solid transparent; }
.side-me:hover, .side-me.is-active { border-color: var(--paper-15); }
.side-me-n { display: grid; min-width: 0; }
.side-me-n b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-me-n small { font-size: 11px; color: var(--paper-70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; background: var(--red); color: var(--paper); font-family: var(--f-head); font-size: 15px; }
.main { margin-left: calc(var(--side) + var(--tg-left)); min-width: 0; }
.page { max-width: 1240px; padding: calc(24px + var(--tg-top)) calc(var(--gap) + var(--tg-right)) calc(48px + var(--tg-bottom)) var(--gap); }
.mtop, .mbar { display: none; }
.bare .page { max-width: 860px; margin: 0 auto; padding-top: calc(12px + var(--tg-top)); }

/* --- заголовки страниц и блоки ---------------------------------------------------------------------------------- */
.page-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 20px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 3px solid var(--ink); }
.page-titles { flex: 1 1 320px; min-width: 0; }
.page-title { margin: 0; font-family: var(--f-head); font-size: clamp(22px, 3vw, 30px); font-weight: 400; line-height: 1.15; text-transform: uppercase; overflow-wrap: anywhere; }
.page-sub { margin: 4px 0 0; color: var(--ink-70); }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumb { display: inline-block; margin: 0 0 10px; color: var(--ink-70); text-decoration: none; font-size: 13px; }
.crumb:hover { color: var(--red); }
.kicker { margin: 0 0 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-70); }
.kicker-ink { color: var(--ink-50); }
.block { margin: 26px 0 0; }
.block-t { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-family: var(--f-cond); font-size: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.block-t small { font-family: var(--f-mono); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-50); }
.block-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.block-head .block-t { margin: 0; }
.panel-box { margin: 0 0 16px; padding: 16px; background: var(--sheet); border: 2px solid var(--ink); }
.panel-box > .block-t:first-child { margin-top: 0; }
.danger-zone { border-color: var(--red); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.grid-2 > .panel-box { margin: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.panel-box .row { margin-top: 12px; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.toolbar .muted { margin: 0; }
.summary { margin: 0 0 8px; font-size: 12px; color: var(--ink-70); }
.hint { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-50); }
.foot-note { margin-top: 24px; text-align: center; font-size: 12px; }
.empty { padding: 22px; border: 2px dashed var(--ink-50); color: var(--ink-70); display: grid; justify-items: start; gap: 12px; }
.empty p { margin: 0; }

/* --- кнопки и поля -------------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 40px; padding: 8px 16px;
  border: 2px solid var(--ink); background: var(--red); color: var(--paper); box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--f-cond); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .1s steps(2), box-shadow .1s steps(2);
}
.btn:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: var(--sheet); color: var(--ink); box-shadow: none; }
.btn-ghost:hover:not(:disabled) { transform: none; box-shadow: none; background: var(--paper); }
.btn-danger { background: var(--ink); }
.btn-light { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 4px 4px 0 var(--red); }
.btn-light:hover:not(:disabled) { box-shadow: 2px 2px 0 var(--red); }
.btn-ghost-light { background: none; color: var(--paper); border-color: var(--paper-70); box-shadow: none; }
.btn-ghost-light:hover:not(:disabled) { transform: none; box-shadow: none; background: var(--paper-15); }
.btn-sm { min-height: 34px; padding: 5px 12px; font-size: 13px; }
.btn-wide { width: 100%; }
.btn-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; background: var(--ink-06); cursor: pointer; font-size: 15px; }
.btn-icon:hover:not(:disabled) { background: var(--ink-15); }
.btn-icon:disabled { opacity: .3; cursor: default; }
.btn-icon-danger:hover:not(:disabled) { background: var(--red); color: var(--paper); }
.link-danger { border: 0; background: none; color: var(--red); cursor: pointer; text-decoration: underline; padding: 0; font-size: 12px; }
.linkish { border: 0; background: none; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; justify-self: start; }

.input {
  width: 100%; min-height: 40px; padding: 7px 10px; border: 2px solid var(--ink); background: var(--sheet);
  font-family: var(--f-mono); font-size: 14px;
}
.input:focus { outline: none; border-color: var(--red); }
textarea.input { resize: vertical; min-height: 64px; line-height: 1.45; }
select.input { padding-right: 28px; }
.input-sm { min-height: 34px; padding: 4px 8px; font-size: 13px; }
.input-lg { min-height: 48px; font-size: 17px; }
.input-auto { width: auto; }
.input-search { width: clamp(180px, 26vw, 320px); }
.input-code { font-size: 13px; }
.label { display: block; margin: 0 0 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
.check-field { flex-wrap: wrap; align-self: end; min-height: 40px; }
.check-field .hint { flex-basis: 100%; margin: 0 0 0 26px; }
.fld { display: grid; align-content: start; min-width: 0; }
.fld-wide { grid-column: 1 / -1; }
.form { display: grid; gap: 14px; }
.form-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.form-2 > .modal-text { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.form-error { margin: 12px 0 0; padding: 8px 12px; border-left: 5px solid var(--red); background: rgba(214, 39, 24, .08); }
.segmented { display: inline-flex; border: 2px solid var(--ink); }
.segmented-wide { display: flex; }
.segmented-wide .seg { flex: 1; }
.seg { min-height: 36px; padding: 4px 14px; border: 0; background: var(--sheet); cursor: pointer; font-family: var(--f-cond); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.seg + .seg { border-left: 2px solid var(--ink); }
.seg.is-active { background: var(--ink); color: var(--paper); }
.multi { border: 2px solid var(--ink); background: var(--sheet); }
.multi > .input { border-width: 0 0 2px; }
.multi-list { max-height: 220px; overflow-y: auto; padding: 4px 0; }
.multi-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; cursor: pointer; }
.multi-item:hover { background: var(--ink-06); }
.multi-item input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.multi-empty { margin: 8px 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 32px; height: 32px; border: 2px solid var(--ink); background: var(--c); cursor: pointer; }
.swatch.is-active { box-shadow: inset 0 0 0 3px var(--paper); outline: 2px solid var(--ink); }

/* --- метки, прогресс, вкладки, показатели --------------------------------------------------------------------- */
.chip { display: inline-block; padding: 2px 7px; background: var(--ink-10); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.chip-ok { background: var(--ok); color: var(--paper); }
.chip-bad { background: var(--red); color: var(--paper); }
.chip-info { background: var(--info); color: var(--paper); }
.pbar { flex: 1; display: block; min-width: 60px; height: 8px; background: var(--ink-10); }
.pbar-fill { display: block; height: 100%; background: var(--ink); }
.pbar-ok .pbar-fill { background: var(--ok); }
.subtabs { display: flex; gap: 2px; margin: 0 0 16px; overflow-x: auto; border-bottom: 2px solid var(--ink); scrollbar-width: none; }
.subtab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 0; background: none; cursor: pointer; font-family: var(--f-cond); font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-70); border-bottom: 4px solid transparent; margin-bottom: -2px; }
.subtab:hover { color: var(--ink); }
.subtab.is-active { color: var(--ink); border-bottom-color: var(--red); font-weight: 700; }
.subtab-n { padding: 0 5px; background: var(--ink-10); font-size: 11px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.stats-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stat { display: grid; align-content: start; gap: 2px; padding: 12px 14px; background: var(--sheet); border: 2px solid var(--ink); border-top-width: 6px; color: var(--ink); text-decoration: none; }
a.stat:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.stat-v { font-family: var(--f-head); font-size: 26px; line-height: 1.1; }
.stat-l { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-70); }
.stat-s { font-size: 11px; color: var(--ink-50); }
.stat-ok { border-top-color: var(--ok); }
.stat-bad { border-top-color: var(--red); }
.stat-bad .stat-v { color: var(--red); }
.stat-info { border-top-color: var(--info); }

/* --- таблицы ------------------------------------------------------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; border: 2px solid var(--ink); background: var(--sheet); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { padding: 9px 12px; text-align: left; white-space: nowrap; font-family: var(--f-cond); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--paper); }
.tbl td { padding: 9px 12px; border-top: 1px solid var(--ink-15); vertical-align: middle; overflow-wrap: anywhere; }
.tbl-click tbody tr { cursor: pointer; }
.tbl-click tbody tr:hover { background: var(--ink-06); }
.tbl .ccard-row { min-width: 140px; }
.td-actions { width: 1%; white-space: nowrap; text-align: right; }
.tbl-matrix th.mx-head { min-width: 110px; white-space: normal; font-size: 11px; letter-spacing: .04em; vertical-align: bottom; }
.mx-td { text-align: center; }
.mx { display: inline-block; min-width: 46px; padding: 3px 6px; font-size: 12px; font-weight: 700; background: var(--ink-10); }
.mx-ok { background: var(--ok); color: var(--paper); }
.mx-bad { background: var(--red); color: var(--paper); }
.mx-info { background: var(--info); color: var(--paper); }
.mx-none { color: var(--ink-50); }
.legend { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--ink-70); }
.legend .mx { min-width: 24px; margin-left: 6px; }

/* --- карточки курсов и обложки ------------------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cards > a { text-decoration: none; display: flex; }
.ccard { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--sheet); border: 2px solid var(--ink); text-decoration: none; transition: transform .1s steps(2), box-shadow .1s steps(2); }
a > .ccard:hover, a.ccard:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.ccard.is-overdue { border-color: var(--red); }
.cover, .course-hero, .scorm-screen {
  background-color: var(--c, var(--ink)); color: var(--paper);
  background-image: linear-gradient(var(--paper-15) 1px, transparent 1px), linear-gradient(90deg, var(--paper-15) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
}
.cover { position: relative; overflow: hidden; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 12px 44px 12px 14px; }
.cover::after { content: ''; position: absolute; right: -26px; top: 22px; width: 96px; height: 6px; background: var(--red); transform: rotate(-45deg); }
.cover[style*="#D62718"]::after { background: var(--ink); }
.cover-k { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-70); }
.cover-t { margin: 0; font-family: var(--f-head); font-size: 18px; font-weight: 400; line-height: 1.2; text-transform: uppercase; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cover-f { margin: 0; font-size: 12px; color: var(--paper-70); min-height: 1em; }
.ccard-body { flex: 1; display: grid; align-content: start; gap: 6px; padding: 10px 14px; }
.ccard-body p { margin: 0; }
.ccard-row { display: flex; align-items: center; gap: 10px; }
.ccard-row b, .ccard-row span:last-child { flex: none; font-size: 13px; }
.ccard-due { font-size: 12px; color: var(--ink-70); }
.ccard-due.is-bad { color: var(--red); font-weight: 700; }
.ccard-desc { font-size: 13px; color: var(--ink-70); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ccard-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 14px 10px; border-top: 1px solid var(--ink-15); }
.ccard-go { margin-left: auto; font-family: var(--f-cond); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.resume { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin: 0 0 8px; padding: 16px 18px; background: var(--sheet); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.resume > div { flex: 1 1 280px; display: grid; gap: 6px; }
.resume-t { margin: 0; font-family: var(--f-head); font-size: 20px; font-weight: 400; text-transform: uppercase; }
.resume .ccard-due { margin: 0; }

/* --- курс: шапка, разделы, элементы ------------------------------------------------------------------------------------- */
.course-hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px; margin: 0 0 16px; padding: 22px 22px 20px; border: 3px solid var(--ink); }
.course-hero::after { content: ''; position: absolute; right: -40px; top: 34px; width: 160px; height: 9px; background: var(--red); transform: rotate(-45deg); }
.course-hero[style*="#D62718"]::after { background: var(--ink); }
.course-hero-main { flex: 1 1 360px; min-width: 0; position: relative; z-index: 1; }
.course-hero-t { margin: 0 0 6px; font-family: var(--f-head); font-size: clamp(22px, 3.4vw, 34px); font-weight: 400; line-height: 1.12; text-transform: uppercase; overflow-wrap: anywhere; padding-right: 70px; }
.course-hero-f { margin: 0; color: var(--paper-70); }
.course-hero-side { position: relative; z-index: 1; flex: 0 1 300px; display: grid; gap: 10px; justify-items: start; }
.course-progress { width: 100%; display: grid; gap: 4px; }
.course-progress .pbar { background: var(--paper-15); }
.course-progress .pbar-fill { background: var(--paper); }
.course-progress .pbar-ok .pbar-fill { background: #4CC274; }
.course-hero-meta { margin: 0; font-size: 13px; color: var(--paper-70); }
.course-desc { margin: 0 0 16px; }
.certline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 16px; padding: 10px 14px; border: 2px solid var(--ok); background: rgba(30, 123, 58, .08); }
.certline.is-bad { border-color: var(--red); background: rgba(214, 39, 24, .06); }
.certline .btn { margin-left: auto; }
.section { margin: 0 0 18px; }
.section-t { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; padding-top: 8px; border-top: 3px solid var(--ink); font-family: var(--f-cond); font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.section-n { flex: none; font-family: var(--f-head); font-size: 14px; color: var(--red); }
.acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.act > a { text-decoration: none; display: block; }
.act-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--sheet); border: 2px solid var(--ink); }
.act > a:hover .act-row { box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.act.is-locked .act-row { border-style: dashed; color: var(--ink-50); }
.act.is-done .act-row { border-left: 6px solid var(--ok); }
.act-i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 700; }
.act-i-quiz { background: var(--red); }
.act-i-assignment { background: var(--info); }
.act-i-scorm { background: var(--ok); }
.act-main { flex: 1; min-width: 0; display: grid; }
.act-t { font-weight: 700; overflow-wrap: anywhere; }
.act-k { font-size: 12px; color: var(--ink-50); }
.act-head { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 3px solid var(--ink); }
.act-head-st { display: flex; gap: 8px; margin-top: 8px; }
.act-head-st:empty { display: none; }
.act-content { display: grid; gap: 16px; }
.act-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--ink-15); }

/* --- разметка текста ------------------------------------------------------------------------------------------------------ */
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md h2, .md h3, .md h4, .md h5 { margin: 1.4em 0 .5em; font-family: var(--f-cond); font-weight: 700; letter-spacing: .03em; line-height: 1.25; }
.md h2 { font-family: var(--f-head); font-weight: 400; font-size: 22px; text-transform: uppercase; }
.md h3 { font-size: 19px; }
.md h4, .md h5 { font-size: 16px; }
.md p { margin: 0 0 .9em; }
.md ul, .md ol { margin: 0 0 1em; padding-left: 1.4em; }
.md li { margin: .25em 0; }
.md-page { max-width: 760px; font-size: 15px; line-height: 1.65; }
.md blockquote { margin: 0 0 1em; padding: 10px 14px; border-left: 5px solid var(--ink); background: var(--ink-06); }
.md blockquote.md-note { border-left-color: var(--red); background: rgba(214, 39, 24, .07); }
.md blockquote > :last-child { margin-bottom: 0; }
.md code { padding: 1px 4px; background: var(--ink-10); font-size: .92em; }
.md-code { overflow-x: auto; padding: 12px; background: var(--ink); color: var(--paper); }
.md-code code { background: none; padding: 0; }
.md hr { border: 0; border-top: 3px solid var(--ink); margin: 1.6em 0; }
.md-fig { margin: 1em 0; }
.md-fig img { display: block; border: 2px solid var(--ink); }
.md-fig figcaption { margin-top: 4px; font-size: 12px; color: var(--ink-50); }
.md-table { overflow-x: auto; margin: 0 0 1em; }
.md table { border-collapse: collapse; min-width: 50%; }
.md th, .md td { border: 1px solid var(--ink); padding: 6px 10px; text-align: left; vertical-align: top; }
.md th { background: var(--ink); color: var(--paper); font-family: var(--f-cond); letter-spacing: .05em; }
.md-preview { padding: 12px; border: 2px dashed var(--ink-50); min-height: 120px; }
.mdtools { display: flex; align-items: center; gap: 4px; padding: 4px; border: 2px solid var(--ink); border-bottom: 0; background: var(--ink-06); }
.mdt { min-width: 32px; height: 30px; border: 0; background: var(--sheet); cursor: pointer; font-weight: 700; }
.mdt:hover { background: var(--ink); color: var(--paper); }

/* --- материалы: видео, файл, SCORM, результаты --------------------------------------------------------------------------- */
.video { width: 100%; max-height: 72vh; background: var(--ink); border: 3px solid var(--ink); }
.video-frame { position: relative; aspect-ratio: 16 / 9; border: 3px solid var(--ink); background: var(--ink); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pdf { width: 100%; height: 78vh; border: 3px solid var(--ink); background: var(--sheet); }
.filecard { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px; background: var(--sheet); border: 2px solid var(--ink); }
.filecard-i { display: grid; place-items: center; width: 42px; height: 42px; background: var(--ink); color: var(--paper); font-size: 20px; flex: none; }
.filecard-m { flex: 1 1 200px; display: grid; min-width: 0; }
.filecard-m b { overflow-wrap: anywhere; }
.scorm-launch { border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.scorm-screen { display: grid; place-content: center; justify-items: center; gap: 14px; aspect-ratio: 16 / 9; max-height: 60vh; padding: 20px; --c: var(--ink); }
.play-btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 24px 12px 20px; border: 2px solid var(--paper); background: var(--red); color: var(--paper); box-shadow: 5px 5px 0 var(--paper); cursor: pointer;
  font-family: var(--f-cond); font-size: 17px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.play-btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--paper); }
.play-icon { flex: none; width: 16px; height: 18px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.scorm-note { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-70); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.facts div { display: grid; gap: 2px; padding: 10px 12px; background: var(--sheet); border: 2px solid var(--ink); }
.facts dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); }
.facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.facts-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.facts-list div { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 10px; padding: 7px 0; background: none; border: 0; border-bottom: 1px solid var(--ink-15); }
.facts-list dd { font-weight: 400; }
.result { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-left: 6px solid var(--ink); background: var(--sheet); }
.result.is-ok { border-left-color: var(--ok); }
.result.is-bad { border-left-color: var(--red); }
.attempts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.attempts li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 12px; background: var(--sheet); border: 2px solid var(--ink-15); }
.attempts li a { flex: 1; }

/* задания: ответы и проверка */
.subs { display: grid; gap: 10px; }
.sub { display: grid; gap: 6px; padding: 12px 14px; background: var(--sheet); border: 2px solid var(--ink); border-left-width: 6px; }
.sub.is-ok { border-left-color: var(--ok); }
.sub.is-bad { border-left-color: var(--red); }
.sub p { margin: 0; }
.sub-click { cursor: pointer; }
.sub-click:hover { box-shadow: 4px 4px 0 var(--ink); }
.sub-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sub-preview { color: var(--ink-70); white-space: pre-wrap; overflow-wrap: anywhere; }
.sub-files { display: flex; flex-wrap: wrap; gap: 8px; }
.sub-files a { overflow-wrap: anywhere; }
.feedback { margin: 0; padding: 8px 12px; border-left: 4px solid var(--info); background: rgba(47, 95, 158, .08); white-space: pre-wrap; }
.answer { display: grid; gap: 10px; }
.answer-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.answer-view { padding: 12px; background: var(--sheet); border: 2px solid var(--ink); max-height: 40vh; overflow: auto; }
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 8px; background: var(--ink-10); font-size: 13px; }
.fchip-x { border: 0; background: none; cursor: pointer; padding: 0 4px; }
.task { padding: 8px 12px; background: var(--ink-06); }
.task summary { cursor: pointer; font-weight: 700; }

/* обсуждение */
.comment-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-bottom: 16px; }
.comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.comment { padding: 10px 12px; background: var(--sheet); border: 2px solid var(--ink-15); }
.comment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; font-size: 12px; color: var(--ink-50); }
.comment-meta b { color: var(--ink); font-size: 13px; }
.comment-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* календарь */
.events { display: grid; gap: 8px; }
.events.is-past { opacity: .65; }
.event { display: flex; align-items: flex-start; gap: 14px; padding: 10px 12px; background: var(--sheet); border: 2px solid var(--ink); }
.event-date { flex: none; display: grid; justify-items: center; width: 54px; padding: 4px 0; background: var(--ink); color: var(--paper); }
.event-date b { font-family: var(--f-head); font-size: 22px; line-height: 1.1; }
.event-date span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.event-body { flex: 1; min-width: 0; display: grid; gap: 4px; justify-items: start; }
.event-body p { margin: 0; }
.event-t { font-weight: 700; }
.event-note { white-space: pre-wrap; font-size: 13px; }
.event-wrap { display: grid; gap: 2px; }
.event-wrap .link-danger { justify-self: end; }

/* документы слушателя */
.docs { display: grid; gap: 12px; }
.doc { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; padding: 14px 16px; background: var(--sheet); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); overflow: hidden; }
.doc.is-bad { border-color: var(--red); box-shadow: 6px 6px 0 var(--red); }
.doc-mark { flex: none; position: relative; width: 44px; height: 56px; border: 3px solid var(--ink); }
.doc-mark::after { content: ''; position: absolute; left: -8px; top: 22px; width: 62px; height: 5px; background: var(--red); transform: rotate(-45deg); }
.doc-main { flex: 1 1 260px; min-width: 0; }
.doc-t { margin: 0 0 4px; font-family: var(--f-head); font-size: 18px; font-weight: 400; text-transform: uppercase; overflow-wrap: anywhere; }
.doc-main p { margin: 0; }
.doc-actions { display: flex; gap: 8px; }

/* профиль */
.orglist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.orglist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--ink-06); }
.orglist li.is-active { border-left: 5px solid var(--red); }

/* --- управление ----------------------------------------------------------------------------------------------------------- */
.hub { margin-bottom: 18px; }
.hub-grid { display: grid; gap: 6px; }
.hub-link { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--sheet); border: 2px solid var(--ink); text-decoration: none; font-family: var(--f-cond); font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hub-link:active { background: var(--ink); color: var(--paper); }
.tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tree .tree { margin-top: 4px; }
.tree-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 10px 8px calc(10px + var(--depth) * 22px); background: var(--sheet); border: 2px solid var(--ink-15); border-left: 5px solid var(--ink); }
.invites { display: grid; gap: 8px; }
.invite { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; background: var(--sheet); border: 2px solid var(--ink); }
.invite.is-off { opacity: .55; border-style: dashed; }
.invite-main { flex: 1 1 260px; }
.invite-main p { margin: 2px 0 0; }
.linkbox { display: grid; gap: 4px; }
.linkbox-row { display: flex; gap: 6px; }
.errlist { margin: 0; padding-left: 18px; color: var(--red); font-size: 13px; max-height: 200px; overflow: auto; }
.mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mini li { padding: 6px 0; border-bottom: 1px solid var(--ink-15); overflow-wrap: anywhere; }
.mini li.is-bad a { color: var(--red); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.feed li { display: grid; gap: 1px; padding-left: 10px; border-left: 3px solid var(--ink); }
.crate { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.crate li { display: grid; gap: 3px; }
.crate a { font-weight: 700; text-decoration: none; }
.crate a:hover { color: var(--red); }
.gcourses { display: grid; gap: 8px; }
.gcourse { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 12px; background: var(--sheet); border: 2px solid var(--ink); }
.gcourse > div:first-child { flex: 1 1 260px; display: grid; gap: 4px; }
.gcourse p { margin: 0; }
.detail-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 60vh; overflow: auto; }
.detail-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.detail-row .act-i { width: 26px; height: 26px; font-size: 12px; }
.detail-sub { margin: 4px 0 0 34px; padding: 6px 10px; background: var(--ink-06); }
.detail-sub p { margin: 0; }

/* график: одна серия — один цвет; подпись последнего и максимального месяца, значение — при наведении */
.chart { margin: 0; }
.chart-t { margin: 0 0 12px; font-family: var(--f-cond); font-size: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bars { display: flex; align-items: stretch; gap: 10px; height: 180px; padding-bottom: 22px; border-bottom: 1px solid var(--ink-50); }
.bar-col { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline-offset: 0; }
.bar { width: min(36px, 70%); background: var(--ink); }
.bar-col:hover .bar, .bar-col:focus-visible .bar { background: var(--red); }
.bar-v { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.bar-l { position: absolute; bottom: -20px; font-size: 11px; color: var(--ink-50); text-transform: uppercase; letter-spacing: .06em; }
.bar-col:hover::after, .bar-col:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 4px 8px; background: var(--ink); color: var(--paper); font-size: 12px; white-space: nowrap; z-index: 2; }

/* конструктор курса */
.esec { margin: 0 0 14px; padding: 12px; background: var(--sheet); border: 2px solid var(--ink); }
.esec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.esec-title { font-family: var(--f-cond); font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.eacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.eact { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; background: var(--paper); border: 2px solid var(--ink-15); }
.eact-main { flex: 1; min-width: 0; display: grid; text-decoration: none; }
.eact-main:hover b { color: var(--red); }
.eact-main b { overflow-wrap: anywhere; }
.eact-main small { font-size: 12px; }
.eact-btns { display: flex; gap: 4px; flex: none; }
.esec-add { margin-top: 8px; }
.types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.type { display: grid; justify-items: start; gap: 4px; padding: 12px; background: var(--sheet); border: 2px solid var(--ink); text-align: left; cursor: pointer; }
.type:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.type small { color: var(--ink-50); font-size: 12px; }
.upload-bar { display: block; height: 8px; margin: 8px 0; border: 2px solid var(--ink); }
.upload-bar-fill { display: block; width: 0; height: 100%; background: var(--red); transition: width .2s; }
.form-extra { display: grid; gap: 14px; margin-bottom: 16px; }
.form-extra:empty { display: none; }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qitem { display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 10px 12px; background: var(--sheet); border: 2px solid var(--ink); }
.qitem-main { flex: 1; min-width: 0; cursor: pointer; }
.qitem-main:hover .qitem-t { color: var(--red); }
.qitem-main p { margin: 0; }
.qitem-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); }
.qitem-t { font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; }
.qrows { display: grid; gap: 6px; }
.qrow { display: flex; align-items: center; gap: 8px; }
.qrow input[type=radio], .qrow input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ok); flex: none; }

/* --- тест ---------------------------------------------------------------------------------------------------------------- */
.quiz { display: grid; gap: 14px; }
.quiz-bar { position: sticky; top: var(--tg-top); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--ink); color: var(--paper); margin: 0 calc(-1 * var(--gap)); }
.quiz-exit { flex: none; width: 36px; height: 36px; border: 2px solid var(--paper-15); background: none; color: var(--paper); cursor: pointer; }
.quiz-exit:hover { background: var(--red); border-color: var(--red); }
.quiz-title { flex: 1; min-width: 0; font-family: var(--f-head); font-size: 14px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quiz-count { font-size: 12px; color: var(--paper-70); white-space: nowrap; }
.quiz-timer { font-family: var(--f-head); font-size: 18px; letter-spacing: .04em; white-space: nowrap; }
.quiz-timer.is-low { color: #FF6A5C; }
.quiz-pal { display: flex; flex-wrap: wrap; gap: 4px; }
.pal { min-width: 34px; height: 34px; border: 2px solid var(--ink); background: var(--sheet); cursor: pointer; font-weight: 700; font-size: 13px; }
.pal.is-done { background: var(--ink); color: var(--paper); }
.pal.is-cur { outline: 3px solid var(--red); outline-offset: 1px; }
.quiz-card { padding: 18px; background: var(--sheet); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); scroll-margin-top: 80px; }
.quiz-q { font-size: 17px; font-weight: 700; line-height: 1.45; margin-bottom: 14px; }
.opts { display: grid; gap: 8px; }
.opt { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--paper); border: 2px solid var(--ink-15); cursor: pointer; font-size: 15px; }
.opt:hover { border-color: var(--ink); }
.opt.is-on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.opt input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--red); flex: none; }
.match { display: grid; gap: 8px; }
.match-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; background: var(--paper); }
.match-l { font-weight: 700; }
.order { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.order-item { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; background: var(--paper); border: 2px solid var(--ink); }
.order-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; background: var(--ink); color: var(--paper); font-weight: 700; }
.order-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.order-btns { display: flex; gap: 4px; flex: none; }
.quiz-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz-nav .btn-danger { margin-left: auto; }
.quiz-note { margin: 0; font-size: 12px; }
.quiz-result { display: grid; justify-items: start; gap: 6px; padding: 22px; color: var(--paper); background: var(--ink); border-left: 10px solid var(--red); }
.quiz-result.is-ok { border-left-color: #4CC274; }
.quiz-result p { margin: 0; }
.quiz-pct { font-family: var(--f-head); font-size: 56px; line-height: 1; }
.review { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rev { padding: 12px 14px; background: var(--sheet); border: 2px solid var(--ink); border-left-width: 6px; }
.rev.is-ok { border-left-color: var(--ok); }
.rev.is-bad { border-left-color: var(--red); }
.rev.is-part { border-left-color: var(--info); }
.rev p { margin: 0 0 6px; }
.rev .quiz-q { font-size: 15px; margin-bottom: 8px; }
.rev-head { display: flex; gap: 8px; align-items: center; }
.rev-c { color: var(--ok); }
.rev-x { padding: 6px 10px; background: var(--ink-06); font-size: 13px; }

/* --- плеер SCORM ------------------------------------------------------------------------------------------------------------ */
.player { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; padding: var(--tg-top) var(--tg-right) var(--tg-bottom) var(--tg-left); background: var(--ink); color: var(--paper); }
.player-bar { flex: none; display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 4px 6px 4px var(--gap); border-bottom: 3px solid var(--red); }
.player-title { flex: 1; min-width: 0; font-family: var(--f-head); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-status { flex: none; font-size: 12px; color: var(--paper-70); }
.player-status[data-kind="done"] { color: #4CC274; }
.player-close { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 2px solid var(--paper-15); background: none; color: var(--paper); cursor: pointer; font-family: var(--f-cond); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.player-close:hover { background: var(--red); border-color: var(--red); }
.player-stage { position: relative; flex: 1; min-height: 0; background: var(--paper); }
.player-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--ink-50); font-family: var(--f-cond); letter-spacing: .14em; text-transform: uppercase; }
.player-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- вход, сообщения, окна ------------------------------------------------------------------------------------------------- */
.login { min-height: 100dvh; display: grid; align-content: start; justify-items: center; gap: 18px; padding: calc(9vh + var(--tg-top)) 16px calc(40px + var(--tg-bottom)); }
.login-tagline { margin: -6px 0 6px; max-width: 440px; text-align: center; color: var(--ink-70); }
.login-box { width: min(460px, 100%); display: grid; gap: 14px; padding: 22px; background: var(--sheet); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.login-title { margin: 0; font-family: var(--f-head); font-size: 22px; font-weight: 400; text-transform: uppercase; overflow-wrap: anywhere; }
.login-text { margin: 0; color: var(--ink-70); }
.login-foot { font-size: 12px; }
.login-form { display: grid; gap: 10px; }
.login-body { display: grid; gap: 12px; }
.login-body > div { display: grid; gap: 12px; }
.login-msg { margin: 0; padding: 10px 12px; border-left: 5px solid var(--ink); background: var(--ink-06); }
.login-msg.is-error { border-left-color: var(--red); }

.toasts { position: fixed; left: 50%; bottom: calc(18px + var(--tg-bottom)); z-index: 99; transform: translateX(-50%); display: grid; gap: 8px; width: min(520px, calc(100% - 24px)); }
.toast { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--ink); color: var(--paper); border-left: 6px solid var(--paper-70); box-shadow: 6px 6px 0 rgba(20, 20, 20, .3); }
.toast span { flex: 1; }
.toast-error { border-left-color: var(--red); }
.toast-ok { border-left-color: #4CC274; }
.toast-action { border: 2px solid var(--paper); background: none; color: var(--paper); padding: 4px 10px; cursor: pointer; font-family: var(--f-cond); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

.modal-wrap { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: calc(16px + var(--tg-top)) 16px calc(16px + var(--tg-bottom)); background: rgba(20, 20, 20, .5); overflow-y: auto; }
.modal { width: min(500px, 100%); max-height: calc(100dvh - 32px - var(--tg-top) - var(--tg-bottom)); display: flex; flex-direction: column; background: var(--sheet); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.modal-wide { width: min(760px, 100%); }
.modal-head { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 10px 20px; border-bottom: 1px solid var(--ink-15); }
.modal-title { flex: 1; min-width: 0; font-family: var(--f-head); font-size: 18px; text-transform: uppercase; overflow-wrap: anywhere; }
.modal-x { flex: none; width: 32px; height: 32px; border: 0; background: var(--ink-06); cursor: pointer; }
.modal-x:hover { background: var(--red); color: var(--paper); }
.modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 20px; }
.modal-text { margin: 0 0 10px; }
.modal-actions { flex: none; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid var(--ink-15); }
.modal code { padding: 2px 6px; background: var(--ink); color: var(--paper); font-size: 15px; }

/* --- планшет и телефон --------------------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .stats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  :root { --gap: 14px; }
  .side { display: none; }
  .main { margin-left: 0; }
  .mtop {
    position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; height: calc(52px + var(--tg-top));
    padding: var(--tg-top) calc(var(--gap) + var(--tg-right)) 0 calc(var(--gap) + var(--tg-left)); background: var(--ink); color: var(--paper);
  }
  .mtop-org { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--paper); text-align: left; cursor: pointer; padding: 0; }
  .mtop-org-n { min-width: 0; font-family: var(--f-cond); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtop .org-switch-arrow { position: static; transform: none; }
  .mtop-me { flex: none; text-decoration: none; }
  .page { padding: 16px calc(var(--gap) + var(--tg-right)) calc(var(--mbar) + 28px + var(--tg-bottom)) calc(var(--gap) + var(--tg-left)); }
  .bare .page { padding-bottom: calc(28px + var(--tg-bottom)); }
  .mbar {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; height: calc(var(--mbar) + var(--tg-bottom));
    padding: 0 var(--tg-right) var(--tg-bottom) var(--tg-left); background: var(--ink); border-top: 3px solid var(--red);
  }
  .mbar-tab { flex: 1; display: grid; place-content: center; justify-items: center; gap: 1px; color: var(--paper-70); text-decoration: none; font-family: var(--f-cond); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
  .mbar-i { font-size: 18px; line-height: 1.1; }
  .mbar-tab.is-active { color: var(--paper); box-shadow: inset 0 3px 0 var(--red); }
  .quiz-bar { top: var(--tg-top); margin: -16px calc(-1 * var(--gap)) 0; }
  .page-head { margin-bottom: 14px; }
  .page-actions { width: 100%; }
  .stats, .stats-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 10px 12px; }
  .stat-v { font-size: 22px; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .form-2 { grid-template-columns: minmax(0, 1fr); }
  .input-search { flex: 1 1 100%; width: auto; }
  .toolbar .grow { display: none; }
  .resume { box-shadow: 5px 5px 0 var(--ink); }
  .course-hero { padding: 16px; }
  .course-hero-side { flex-basis: 100%; }
  a > .ccard:hover, a.ccard:hover, .act > a:hover .act-row, a.stat:hover { transform: none; box-shadow: none; }
  .quiz-card { padding: 14px; box-shadow: 5px 5px 0 var(--ink); }
  .quiz-count { display: none; }
  .quiz-nav .btn { flex: 1; }
  .quiz-nav .btn-danger { flex-basis: 100%; margin-left: 0; }
  .match-row { grid-template-columns: minmax(0, 1fr); }
  .act-nav .btn { flex: 1; }
  .scorm-screen { aspect-ratio: auto; min-height: 220px; }
  .comment-form { grid-template-columns: minmax(0, 1fr); }
  .facts-list div { grid-template-columns: minmax(0, 110px) minmax(0, 1fr); }
  /* таблица → карточки */
  .tbl-wrap { border: 0; background: none; overflow: visible; }
  .tbl:not(.tbl-matrix), .tbl:not(.tbl-matrix) tbody, .tbl:not(.tbl-matrix) tr, .tbl:not(.tbl-matrix) td { display: block; width: 100%; }
  .tbl:not(.tbl-matrix) thead { display: none; }
  .tbl:not(.tbl-matrix) tr { margin: 0 0 8px; padding: 8px 12px; background: var(--sheet); border: 2px solid var(--ink); }
  .tbl:not(.tbl-matrix) td { display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 0; border: 0; }
  .tbl:not(.tbl-matrix) td::before { content: attr(data-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50); }
  .tbl:not(.tbl-matrix) td:first-child { grid-template-columns: minmax(0, 1fr); }
  .tbl:not(.tbl-matrix) td:first-child::before { display: none; }
  .tbl:not(.tbl-matrix) td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  .tbl:not(.tbl-matrix) td[data-label=""]::before { display: none; }
  .tbl .td-actions { width: 100%; text-align: left; }
  .tbl-matrix { display: table; }
  .tbl-wrap:has(.tbl-matrix) { overflow-x: auto; border: 2px solid var(--ink); background: var(--sheet); }
  .modal-wrap { padding: calc(8px + var(--tg-top)) 8px calc(8px + var(--tg-bottom)); align-items: end; }
  .modal, .modal-wide { width: 100%; max-height: calc(100dvh - 16px - var(--tg-top) - var(--tg-bottom)); box-shadow: none; }
  .modal-head { padding-left: 16px; }
  .modal-body { padding: 12px 16px; }
  .modal-actions { padding: 10px 16px 14px; }
  .modal-actions .btn { flex: 1; }
  .player-bar { gap: 10px; padding-left: 12px; }
  .player-close-text { display: none; }
  .doc { box-shadow: 4px 4px 0 var(--ink); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }