/* Обучение «Рецепт» — оформление платформы.
   Шрифт, скругления и фирменный синий взяты из админки app.recipe.cafe (её мы
   делали для этого же клиента), чтобы платформа читалась как часть одного
   продукта. Остальное — черный текст и нейтральный серый: синий остается только
   на том, что можно нажать или что сейчас выбрано.

   Темной темы нет намеренно: в админке её тоже нет, а показывать клиенту
   два разных облика одного продукта — плохо. Основная аудитория смотрит с
   телефона, поэтому базовая ширина мобильная, а десктоп получает две колонки. */

:root {
    color-scheme: light;

    /* каналы серого для полупрозрачных подложек и линий: rgb(var(--tint) / .06) */
    --tint: 0 0 0;
    --bg: #f2f4f9;
    --surface: #ffffff;
    --surface-2: #ebeced;
    --border: rgb(var(--tint) / .1);
    --border-strong: rgb(var(--tint) / .18);
    --text: #000000;
    --muted: #999999;
    --accent: #1b1f86;
    --accent-soft: #efefef;
    --accent-strong: #12156b;
    --success: #2f7a3f;
    --success-soft: rgba(47, 122, 63, .1);
    --warning: #b38a2b;
    --warning-soft: rgba(179, 138, 43, .12);
    --danger: #a33a3a;
    --danger-soft: rgba(163, 58, 58, .1);
    --radius: 16px;
    --radius-sm: 10px;
    /* плашка варианта ответа: на белом фоне серая, внутри серого острова — белая */
    --island: #f2f4f9;
    --island-hover: #e9ecf3;
    --shadow: 0 1px 2px rgb(var(--tint) / .06), 0 10px 30px rgb(var(--tint) / .06);
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, monospace;
}

* { box-sizing: border-box; }

/* Гарнитура Helper — ALS Hauss. Тот же шрифт стоит в кабинете Хелпера, отсюда
   и общий почерк: у заголовков сжатая интерлиньяж и отрицательный трекинг тем
   сильнее, чем крупнее кегль. Файлы свои, ничего внешнего не грузим. */
@font-face {
    font-family: "ALS Hauss";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/als-hauss-400.woff2") format("woff2");
}
@font-face {
    font-family: "ALS Hauss";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/static/fonts/als-hauss-500.woff2") format("woff2");
}
@font-face {
    font-family: "ALS Hauss";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/als-hauss-700.woff2") format("woff2");
}
@font-face {
    font-family: "ALS Hauss";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/static/fonts/als-hauss-900.woff2") format("woff2");
}

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.4 "ALS Hauss", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding-bottom: 84px;
}

a { color: inherit; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1; font-weight: 700; letter-spacing: -.04em; }
h1 { font-size: 38px; }
h2 { font-size: 28px; letter-spacing: -.045em; }
h3 { font-size: 20px; letter-spacing: -.025em; }
p { margin: 0 0 1em; }

/* ------------------------------------------------------------------ каркас */

.shell { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.shell--wide { max-width: 1320px; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid var(--border);
}

.topbar__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.logo__mark {
    height: 22px;
    width: auto;
    flex: none;
    color: var(--accent);
    position: relative;
    top: 2px;
}

/* фирменный знак на темной плашке — так он стоит на входе в админку */
.logo__badge {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--accent);
    color: #fff;
    display: grid; place-items: center;
    flex: none;
}
.logo__badge .logo__mark { color: #fff; height: 22px; top: 0; }

.topnav { display: flex; gap: 4px; margin-left: auto; align-items: center; }

.topnav a {
    padding: 7px 11px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--muted);
    font-size: 14px;
    font-weight: 550;
    white-space: nowrap;
}

.topnav a:hover { background: var(--surface-2); color: var(--text); }
.topnav a.is-active { background: var(--accent-soft); color: var(--accent-strong); }

.avatar {
    width: 32px; height: 32px; flex: none;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--text);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700;
    text-decoration: none;
}

main { padding: 22px 0 40px; }

/* ------------------------------------------------------------------ типовые блоки */

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head__text { flex: 1 1 320px; min-width: 0; }
.page-head p { color: var(--muted); margin: 4px 0 0; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
}

.card + .card { margin-top: 14px; }
.card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card__head h2, .card__head h3 { margin: 0; }

.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px; }
.stat__value { font-size: 27px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--muted); font-size: 13px; margin-top: 2px; }
.stat__hint { color: var(--muted); font-size: 12px; margin-top: 6px; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 13px; }
.center { text-align: center; }
.right { text-align: right; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row--tight { gap: 6px; }
.spacer { flex: 1; }

/* ------------------------------------------------------------------ кнопки */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn--danger { color: var(--danger); border-color: var(--danger-soft); }
.btn--danger:hover { background: var(--danger-soft); }
.btn--sm { padding: 6px 10px; font-size: 13px; }
.btn--lg { padding: 14px 20px; font-size: 16px; border-radius: var(--radius); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ------------------------------------------------------------------ формы */

label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], input[type=search], input[type=url], select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
    outline-offset: 1px;
    border-color: var(--accent);
}

textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

/* Системная кнопка выбора файла подписана языком браузера — у части людей это
   английский. Поэтому сам input прячем, а нажимают на нашу подпись рядом.
   Оформление системной кнопки оставляем на случай, если где-то ее забыли. */
.file-pick { margin: 0; display: inline-flex; align-items: center; }

input[type=file] { width: 100%; font: inherit; font-size: 13px; color: var(--muted); }
input[type=file]::file-selector-button {
    margin-right: 10px;
    padding: 7px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--surface-2); }
.field { margin-bottom: 13px; }
.field--inline { display: flex; align-items: center; gap: 8px; }
.field--inline label { margin: 0; font-weight: 500; color: var(--text); }
.field-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Список людей с отметками: назначение конкретным сотрудникам. Держим его
   невысоким и с прокруткой — в сети сотрудников сотни. */
.picklist {
    margin-top: 8px; max-height: 320px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.picklist__row {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border-bottom: 1px solid var(--border); cursor: pointer;
}
.picklist__row:last-child { border-bottom: 0; }
.picklist__row:hover { background: var(--surface-2); }
.picklist__row[hidden] { display: none; }
.picklist__name { font-weight: 550; color: var(--text); font-size: 15px; }
.picklist__note { color: var(--muted); font-size: 13px; margin-left: auto; }
.picklist__note + form { margin-left: 12px; }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); font-weight: 500; margin-bottom: 8px; }
.checkbox input { width: 17px; height: 17px; accent-color: var(--accent); }

/* ------------------------------------------------------------------ бейджи и прогресс */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.badge--success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge--warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge--accent { background: var(--accent-soft); color: var(--text); border-color: transparent; }

.bar { height: 6px; background: var(--border); border-radius: 100px; overflow: hidden; }
.bar__fill { height: 100%; background: var(--accent); border-radius: 100px; transition: width .3s ease; }
.bar__fill--done { background: var(--success); }

.ring { --p: 0; width: 74px; height: 74px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--border) 0); }
.ring__inner { width: 60px; height: 60px; border-radius: 50%; background: var(--surface); display: grid; place-items: center;
    font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ карточки материалов */

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.tile {
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 15px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow);
    transition: transform .14s ease, border-color .14s ease;
}

.tile:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.tile__top { display: flex; align-items: center; gap: 8px; }
.tile__icon {
    width: 30px; height: 30px; flex: none;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--text);
    display: grid; place-items: center;
    font-size: 15px;
}
.tile__type { font-size: 12px; color: var(--muted); font-weight: 600; }
.tile__title { font-weight: 620; line-height: 1.35; }
.tile__meta { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ списки-строки */

.rows { display: flex; flex-direction: column; }

.rowitem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}

.rowitem:last-child { border-bottom: 0; }
.rowitem:hover { background: var(--surface-2); }
.rowitem__body { flex: 1; min-width: 0; }
.rowitem__title { font-weight: 580; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowitem__sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.rowitem__icon {
    width: 32px; height: 32px; flex: none; border-radius: 9px;
    background: var(--accent-soft); color: var(--text);
    display: grid; place-items: center; font-size: 15px;
}
.rowitem--locked { opacity: .55; pointer-events: none; }

/* ------------------------------------------------------------------ таблицы */

.table-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--surface-2); }

/* ------------------------------------------------------------------ фильтры */

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filters input[type=search] { flex: 1 1 210px; min-width: 0; }
.filters select { flex: 0 1 190px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
    padding: 5px 11px; border-radius: 100px; font-size: 13px; font-weight: 550;
    background: var(--surface); border: 1px solid var(--border); color: var(--muted); text-decoration: none;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ------------------------------------------------------------------ плееры */

.player { max-width: 760px; margin: 0 auto; }
.player__head { margin-bottom: 18px; }
.player__kicker { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.player__frame { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #000; }
.player__frame iframe, .player__frame video { display: block; width: 100%; border: 0; }
.player__actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.longread { font-size: 17px; line-height: 1.65; }
.longread h2 { margin-top: 1.4em; }
.longread h3 { margin-top: 1.3em; }
.longread img { max-width: 100%; border-radius: var(--radius-sm); }
.longread ul { padding-left: 20px; }
.longread li { margin-bottom: .4em; }
.longread figure { margin: 1.4em 0; }
.longread figcaption { font-size: 13px; color: var(--muted); margin-top: 7px; }
.longread blockquote {
    margin: 1.4em 0; padding: 2px 0 2px 16px;
    border-left: 3px solid var(--border-strong); color: var(--muted); font-style: italic;
}
.callout { padding: 13px 15px; border-radius: var(--radius-sm); background: var(--accent-soft); margin: 1.3em 0; font-size: 15px; }
.callout--warning { background: var(--warning-soft); }
.callout--success { background: var(--success-soft); }
.hr { height: 1px; background: var(--border); border: 0; margin: 1.8em 0; }

/* слайды */
.slide {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 26px; min-height: 320px; display: flex; flex-direction: column; justify-content: center;
}
.slide h2 { font-size: 23px; }
.slide__bullets { padding-left: 20px; font-size: 17px; line-height: 1.7; }
.slide__nav { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.slide__dots { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; }
.slide__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.slide__dot.is-active { background: var(--accent); }

/* интерактивности */
.accordion__item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; background: var(--surface); }
.accordion__head { padding: 13px 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.accordion__head::after { content: "＋"; margin-left: auto; color: var(--muted); }
.accordion__item.is-open .accordion__head::after { content: "－"; }
.accordion__body { padding: 0 15px 15px; display: none; color: var(--muted); }
.accordion__item.is-open .accordion__body { display: block; }

.flipcards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.flipcard { perspective: 1000px; height: 165px; cursor: pointer; }
.flipcard__inner { position: relative; width: 100%; height: 100%; transition: transform .5s; transform-style: preserve-3d; }
.flipcard.is-flipped .flipcard__inner { transform: rotateY(180deg); }
.flipcard__face {
    position: absolute; inset: 0; backface-visibility: hidden;
    border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
    display: grid; place-items: center; text-align: center; background: var(--surface);
}
.flipcard__face--back { transform: rotateY(180deg); background: var(--accent-soft); color: var(--text); }

.hotspot { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.hotspot img { display: block; width: 100%; }
.hotspot__dot {
    position: absolute; width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent); color: #fff; border: 2px solid #fff;
    display: grid; place-items: center; font-size: 13px; font-weight: 700; cursor: pointer;
    transform: translate(-50%, -50%);
}
.hotspot__tip {
    position: absolute; z-index: 5; max-width: 240px; padding: 11px 13px;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: 14px;
    transform: translate(-50%, 14px);
}

.tabs__head { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; }
.tabs__btn { padding: 9px 13px; border: 0; background: none; font: inherit; font-weight: 570; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs__btn.is-active { color: var(--text); border-bottom-color: var(--accent); }

.timeline { border-left: 2px solid var(--border); padding-left: 18px; }
.timeline__item { position: relative; padding-bottom: 20px; }
.timeline__item::before {
    content: ""; position: absolute; left: -25px; top: 5px; width: 11px; height: 11px;
    border-radius: 50%; background: var(--accent); border: 2px solid var(--bg);
}

/* диалоговый тренажер */
.dialog__scene { display: flex; gap: 13px; margin-bottom: 20px; }
.dialog__avatar {
    width: 44px; height: 44px; flex: none; border-radius: 50%;
    background: var(--accent-soft); color: var(--text);
    display: grid; place-items: center; font-size: 19px;
}
.dialog__bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 3px 15px 15px 15px; padding: 14px 16px; font-size: 16px; }
.dialog__speaker { font-size: 12px; color: var(--muted); font-weight: 650; margin-bottom: 4px; }
.dialog__choice {
    display: block; width: 100%; text-align: left; margin-bottom: 9px;
    padding: 15px 18px; border: 0; border-radius: 18px;
    background: var(--island); font: inherit; font-size: 16px; letter-spacing: -.02em; cursor: pointer;
    transition: background-color .18s ease;
}
.dialog__choice:hover { background: var(--island-hover); }
.dialog__feedback { margin: 10px 0 18px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14.5px; }
.dialog__feedback--good { background: var(--success-soft); color: var(--success); }
.dialog__feedback--bad { background: var(--danger-soft); color: var(--danger); }
.dialog__mine { justify-content: flex-end; }
.dialog__mine .dialog__bubble { background: var(--accent-soft); border-color: transparent; border-radius: 15px 3px 15px 15px; }

/* Тесты. Вопрос — серый остров, варианты внутри него белые; на слайде
   презентации наоборот: слайд белый, а варианты серые. Поэтому цвет плашки
   держим в переменной и переопределяем там, где меняется фон под ней. */
.question {
    --island: var(--surface);
    --island-hover: #f7f8fb;
    margin-bottom: 14px; padding: 24px 26px;
    border: 0; border-radius: 28px; background: var(--bg);
}
.question__num { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: -.02em; margin-bottom: 8px; }
.question__text { font-size: 20px; font-weight: 500; letter-spacing: -.03em; margin-bottom: 16px; line-height: 1.15; }
.option {
    display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px;
    border: 0; border-radius: 16px; margin-bottom: 8px; cursor: pointer;
    background: var(--island); font-size: 16px; letter-spacing: -.02em;
}
.option input { margin-top: 3px; accent-color: var(--accent); width: 17px; height: 17px; flex: none; }
.option--correct { background: var(--success-soft); }
.option--wrong { background: var(--danger-soft); }
.order-list { list-style: none; padding: 0; margin: 0; }
.order-item {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px; margin-bottom: 8px;
    border: 0; border-radius: 16px; background: var(--island); cursor: grab;
    font-size: 16px; letter-spacing: -.02em;
}
.order-item__handle { color: #b6b6b9; }
/* Соответствие: строки слева, ответы справа, соединяем нажатием.
   Выпадающих списков нет намеренно — пара должна быть видна целиком. */
.match__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.match__col { display: flex; flex-direction: column; gap: 9px; }
.match__col--answers { align-content: start; }

.match-card {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 14px 16px; border-radius: 16px;
    border: 0; background: var(--island);
    color: var(--text); font: inherit; font-size: 16px; letter-spacing: -.02em;
    text-align: left; cursor: pointer;
    transition: background-color .18s ease, box-shadow .18s ease;
}
.match-card:hover { background: var(--island-hover); }
.match-card.is-picked { background: var(--accent); color: #fff; }
.match-card.is-filled { box-shadow: inset 0 0 0 1.5px var(--accent); }
.match-card__text { flex: 1; min-width: 0; }
.match-card__slot:not(:empty) {
    padding: 4px 10px; border-radius: 100px; flex: none;
    background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600;
}

.match-chip {
    padding: 14px 16px; border-radius: 16px; cursor: grab;
    border: 0; background: var(--island);
    color: var(--text); font: inherit; font-size: 16px; letter-spacing: -.02em; text-align: left;
    transition: background-color .18s ease;
}
.match-chip:hover { background: var(--island-hover); }
.match-chip.is-picked { background: var(--accent); color: #fff; }

/* Разложить по категориям: корзины сверху, фразы снизу. */
.baskets__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.basket {
    border: 0; border-radius: 24px;
    background: var(--island); padding: 14px; min-height: 118px;
}
.basket__name {
    font-weight: 500; font-size: 15px; letter-spacing: -.02em; margin-bottom: 10px;
    color: var(--text); text-align: center;
}
.basket__items { display: flex; flex-direction: column; gap: 6px; }
.baskets__bank { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.basket__chip {
    padding: 11px 15px; border-radius: 14px; cursor: grab;
    border: 0; background: var(--surface);
    color: var(--text); font: inherit; font-size: 15px; letter-spacing: -.02em; text-align: left;
}
.basket__chip.is-picked { background: var(--accent); color: #fff; }
.basket__items .basket__chip { width: 100%; font-size: 13.5px; padding: 7px 10px; }

@media (max-width: 620px) {
    .match__cols { grid-template-columns: 1fr; }
}

.score-hero { text-align: center; padding: 26px 16px; }
.score-hero__value { font-size: 46px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ конструкторы */

.builder { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .builder { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.builder__side { position: sticky; top: 72px; }

.block-list { display: flex; flex-direction: column; gap: 10px; }
.block {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); padding: 13px;
}
/* на узком экране кнопки ↑ ↓ ✕ переносятся вниз, а не вылезают за карточку */
.block__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 9px; }
.block__kind { font-size: 12px; font-weight: 700; color: var(--text); background: var(--accent-soft); padding: 3px 9px; border-radius: 100px; }
.block__tools { margin-left: auto; display: flex; gap: 3px; }
.icon-btn {
    width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border);
    background: var(--surface); color: var(--muted); cursor: pointer; font-size: 13px;
    display: grid; place-items: center; padding: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.add-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }

.picker { max-height: 380px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.picker__item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 14px; }
.picker__item:last-child { border-bottom: 0; }
.picker__item:hover { background: var(--surface-2); }

.toast {
    position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(20px);
    background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 100px;
    font-size: 14px; font-weight: 550; opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 1000;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ------------------------------------------------------------------ нижняя навигация на телефоне */

.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; background: var(--surface); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
}

.tabbar a {
    flex: 1; padding: 9px 4px 8px; text-align: center; text-decoration: none;
    color: var(--muted); font-size: 10.5px; font-weight: 600;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}

.tabbar a.is-active { color: var(--accent-strong); }
.tabbar__icon { font-size: 18px; line-height: 1; }

@media (min-width: 760px) {
    .tabbar { display: none; }
    body { padding-bottom: 0; }
}

/* на странице курса низ занимает полоса «Назад / Далее»: нижняя навигация
   телефона ложилась поверх нее и закрывала кнопки */
body:has(.deck--rich) .tabbar { display: none; }
body:has(.deck--rich) { padding-bottom: 0; }

@media (max-width: 759px) {
    .topnav { display: none; }
    .shell { padding: 0 14px; }
    h1 { font-size: 22px; }
    .table-wrap { margin: 0 -14px; padding: 0 14px; }
}

/* ------------------------------------------------------------------ вход */

/* Вход повторяет админку app.recipe.cafe: форма слева, фотография справа. */

.login-body { padding-bottom: 0; background: var(--surface); }

.login-split { min-height: 100dvh; display: grid; grid-template-columns: 1fr; }

.login-split__form { display: grid; place-items: center; padding: 48px 24px; }

.login-form { width: 100%; max-width: 380px; text-align: center; }
.login-form__badge { display: flex; justify-content: center; margin-bottom: 40px; }
.login-form h1 { font-size: 34px; letter-spacing: -.02em; margin-bottom: 12px; }
.login-form__lead { color: var(--muted); margin-bottom: 36px; }
.login-form__fields { display: grid; gap: 10px; }
.login-form__fields input {
    padding: 15px 19px;
    border-radius: var(--radius);
    font-size: 16px;
}
.login-form__error {
    margin: 0;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
    color: var(--danger);
    font-size: 14px;
}
.login-form__foot { color: var(--muted); font-size: 12px; margin: 30px 0 0; }

.login-split__aside { display: none; position: relative; overflow: hidden; background: var(--accent); }
.login-split__aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.login-split__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        color-mix(in srgb, var(--text) 80%, transparent),
        color-mix(in srgb, var(--text) 25%, transparent) 45%,
        transparent);
}
.login-split__text { position: relative; padding: 48px; color: #fff; align-self: end; }
.login-split__title { font-size: 36px; font-weight: 650; line-height: 1.15; margin: 0; max-width: 460px; }
.login-split__sub { margin: 12px 0 0; color: rgba(255, 255, 255, .75); max-width: 400px; }

@media (min-width: 1024px) {
    .login-split { grid-template-columns: 1fr 2fr; }
    .login-split__aside { display: grid; }
}

.empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.empty__icon { font-size: 34px; opacity: .35; margin-bottom: 10px; }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ плеер презентаций

   Презентация — отдельное приложение поверх платформы: сверху строка с названием,
   посередине слайд, внизу управление. Материалы те же, что на остальных страницах:
   серый остров #f2f4f9, белый слайд без рамок и теней, кнопки-пилюли.

   Синим помечено только то, что нажимают или что сейчас выбрано, — кнопка «Далее»,
   полоса пройденного и номер вопроса в списке слайдов. Градиента у синего нет
   нигде: знак «здесь нажимают» должен читаться одинаково в любом месте. */

.deck { max-width: 1320px; margin: 0 auto; }

.deck__bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-bottom: 14px; margin-bottom: 14px; box-shadow: inset 0 -1px 0 #eee;
}
.deck__name {
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 20px; font-weight: 500; letter-spacing: -.03em;
}

/* счетчик слайдов и число вопросов: серые пилюли, цифры не прыгают при листании */
.deck__count,
.deck__qs {
    flex: none;
    padding: 6px 13px 7px;
    border-radius: 10000px;
    background: var(--bg);
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.deck__qs { color: var(--text); }

/* выход из презентации — круглая кнопка со стрелкой, как в редакторе */
.deck__back {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease;
}
.deck__back:hover { background: #e9ecf3; }

.deck__body { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .deck__body { grid-template-columns: minmax(0, 1fr) 268px; } }

.deck__stage { min-width: 0; }

/* Презентация расширенного редактора: слайд рисует его движок в рамке,
   поэтому держим ей ровно те же пропорции, что у полотна — 16:9. */
.deck__screen {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #fff;
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    container-type: inline-size;
}
.deck__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Шаг с вопросом: слайд убираем совсем.

   У iSpring тест — отдельный экран во весь слайд. Если оставить слайд на
   месте, ответ будет висеть прямо над вопросом, и это уже не проверка. */
/* прячем именно полотно слайда: рамка тренажера тоже iframe и должна остаться */
.deck__screen--ask > #deck-frame { visibility: hidden; }
.deck__screen--ask { background: var(--surface); }

.deck__ask {
    position: absolute;
    inset: 0;
    display: grid;
    /* по центру, пока влезает; длинный вопрос прижимаем к верху и прокручиваем,
       иначе у него срезает начало */
    align-content: safe center;
    justify-items: stretch;
    /* поля как у слайда: вопрос — такой же экран курса, а не карточка формы */
    padding: clamp(20px, 4.2%, 54px) clamp(20px, 5.6%, 76px);
    overflow-y: auto;
    font-family: "ALS Hauss", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* display в классе перебивает атрибут hidden — гасим явно, иначе скрытый
   экран продолжает ловить нажатия поверх видимого */
.deck__ask[hidden] { display: none; }

/* Итог задания. Отдельный экран во весь слайд — как у iSpring после теста. */
.deck__result {
    position: absolute; inset: 0; display: grid; place-content: center;
    padding: 32px; background: var(--surface); text-align: center;
    font-family: "ALS Hauss", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.deck__result[hidden] { display: none; }
.result-card { display: grid; gap: 20px; justify-items: center; max-width: 620px; }
.result-card__mark {
    width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
    font-size: 46px; line-height: 1; color: var(--muted); background: var(--bg);
}
/* задание принято — та же градиентная плашка, что у «Принято» в ленте учебы */
.result-card--ok .result-card__mark {
    background: linear-gradient(95deg, #4bfb2e -2.23%, #1fda97 40.4%, #47cbd3 73.79%, #1dccf2 101.06%);
    color: #fff;
}
.result-card--fail .result-card__mark { background: rgb(255 76 65 / .12); color: #ff4c41; }
.result-card--wait .result-card__mark { background: rgb(255 153 0 / .12); color: #f90; }
.result-card__head {
    margin: 0; font-size: clamp(22px, 1.8cqw + 12px, 32px); line-height: 1.1;
    font-weight: 500; letter-spacing: -.04em;
}
.result-card__rows { display: grid; gap: 8px; margin: 0; font-size: 18px; letter-spacing: -.02em; }
.result-card__rows div { display: flex; gap: 10px; justify-content: center; }
.result-card__rows dt { color: var(--muted); margin: 0; }
.result-card__rows dd { margin: 0; font-weight: 500; }
.result-card [data-retry][hidden] { display: none; }

/* Тренажер внутри курса: занимает весь экран слайда, своей рамки не рисуем —
   она у него уже есть. */
.deck__embed { position: absolute; inset: 0; display: block; background: var(--surface); }
.deck__embed[hidden] { display: none; }
.deck__embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Материал, открытый внутри курса: без шапки платформы и без нижнего меню. */
body.is-embed { padding-bottom: 0; background: var(--surface); }
/* Картинке с метками нужна вся ширина: пояснение всплывает сбоку от рисунка,
   и в колонке на 760 пикселей ему просто некуда встать. */
.player:has(.labeled) { max-width: 1180px; }
body.is-embed .shell { padding-top: 12px; padding-bottom: 12px; }
body.is-embed .player__head[hidden] { display: none; }
/* Вопрос во весь слайд: карточку с рамкой не рисуем — на слайде она лишняя,
   вопрос и так занимает весь экран. Класс пишем вдвойне: общее правило
   .deck__quiz идет ниже по файлу и иначе возвращает рамку с полями. */
.deck__quiz.deck__quiz--full {
    width: 100%;
    max-width: none;
    border: 0;
    padding: 0;
    margin-top: 0;
    background: transparent;
    box-shadow: none;
}

/* Кегль считаем от ширины слайда, а не в точках: экран вопроса должен читаться
   так же, как слайд, и на ноутбуке, и на проекторе. */
.deck__quiz--full .question__num { font-size: clamp(12px, 1.1cqw + 8px, 16px); }
.deck__quiz--full .question__text {
    font-size: clamp(22px, 2.2cqw + 12px, 38px);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -.04em;
    margin-bottom: clamp(14px, 2.4%, 28px);
}
.deck__quiz--full .small.muted { font-size: clamp(13px, .9cqw + 9px, 18px); }
.deck__quiz--full .option,
.deck__quiz--full .match-card,
.deck__quiz--full .match-chip,
.deck__quiz--full .basket__chip,
.deck__quiz--full .wordbank__word,
.deck__quiz--full .order-item,
.deck__quiz--full .basket__name { font-size: clamp(14px, 1cqw + 9px, 19px); }
.deck__quiz--full .baskets__row { gap: clamp(10px, 1.4%, 18px); }
.deck__quiz--full .basket { min-height: clamp(96px, 14%, 150px); }
/* Фотография вопроса не должна занимать весь экран: под ней еще варианты и
   разбор. Ужимаем по высоте, ширину считает браузер — рамка остается ровно по
   картинке, иначе отметки на ней разъедутся. */
.deck__quiz--full .pickzone,
.deck__quiz--full .dragzone__stage { width: fit-content; max-width: 100%; margin-inline: auto; }
/* Высоту картинки меряем от ширины слайда, а не от окна: тогда вопрос
   целиком помещается в экран и на ноутбуке, и на проекторе. */
.deck__quiz--full .pickzone img,
.deck__quiz--full .dragzone__stage img { max-height: 26cqw; width: auto; max-width: 100%; }
.deck__quiz--full .question__image {
    display: block; margin-inline: auto;
    width: auto; max-width: 100%; max-height: 26cqw;
}

/* ------------------------------------------- презентация во весь экран

   Курс — это отдельное приложение, а не страница со скроллом: слайд
   посередине, управление всегда на виду внизу, список слайдов выезжает
   поверх и прячется. Так сотрудник не теряет кнопку «Далее», когда вопрос
   получился длинным. */

.deck--rich {
    max-width: none;
    position: fixed;
    inset: 56px 0 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.deck--rich .deck__bar {
    flex: none;
    margin: 0;
    padding: 0 20px;
    height: 72px;
    background: var(--surface);
    box-shadow: inset 0 -1px 0 #eee;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.deck--rich .deck__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 0;
}

.deck--rich .deck__stage {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 0;
    transition: padding-right .24s cubic-bezier(.32, .72, 0, 1);
}
/* когда список слайдов открыт, сцена ужимается, а не прячется под ним */
@media (min-width: 1000px) {
    .deck--rich .deck__body.with-side .deck__stage { padding-right: calc(min(320px, 86vw) + 24px); }
}

.deck--rich .deck__screen {
    flex: 1;
    min-height: 0;
    aspect-ratio: 16 / 9;
    width: auto;
    max-width: 100%;
    align-self: center;
}

/* нижняя полоса управления: всегда на месте, ниже панели слайдов */
.deck--rich .deck__nav {
    flex: none;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
    background: var(--surface);
    box-shadow: inset 0 1px 0 #eee;
    border-top: 0;
    margin: 0;
}
/* полоса пройденного: тонкая, синим — это и есть отметка «где я сейчас» */
.deck__nav .bar { height: 5px; background: #ececf1; }
.deck__hint {
    color: #b6b6b9;
    font-size: 13px;
    letter-spacing: -.02em;
    white-space: nowrap;
}

/* список слайдов выезжает справа поверх содержимого */
.deck--rich .deck__side {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    /* высоту задаем явно: в колонке-флексе одних top и bottom не хватает,
       и панель вырастала на всю длину списка, накрывая кнопки внизу */
    height: 100%;
    overflow: hidden;
    width: min(320px, 86vw);
    max-height: none;
    padding: 18px 14px 14px;
    border: 0;
    border-radius: 0;
    box-shadow: -24px 0 60px rgb(12 14 20 / .12);
    transform: translateX(102%);
    transition: transform .24s cubic-bezier(.32, .72, 0, 1), visibility .24s;
    z-index: 40;
    display: flex;
    /* закрытая панель не должна ловить нажатия: на узком экране она
       перекрывала кнопку «Далее», хотя ее самой не видно */
    visibility: hidden;
    pointer-events: none;
}
.deck--rich .deck__side.is-open {
    transform: none;
    visibility: visible;
    pointer-events: auto;
}

.deck__side {
    display: flex;
    flex-direction: column;
    align-self: start;
    position: sticky;
    top: 72px;
    max-height: calc(100dvh - 96px);
    padding: 16px 12px 12px;
    border: 0;
    border-radius: 28px;
    background: var(--surface);
}
.deck__side-head {
    display: flex; align-items: center; gap: 8px;
    padding: 0 6px 10px; margin-bottom: 2px;
}
.deck__side-head strong { font-size: 18px; font-weight: 500; letter-spacing: -.03em; }
/* закрыть список — круглая кнопка без рамки, как выход из презентации */
.deck__side-head .icon-btn {
    width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: var(--bg); color: var(--muted); font-size: 14px;
    transition: background-color .18s ease, color .18s ease;
}
.deck__side-head .icon-btn:hover { background: #e9ecf3; color: var(--text); }

.deck__list { flex: 1; min-height: 0; overflow-y: auto; margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }

.deck__section {
    font-size: 13px; letter-spacing: -.01em;
    color: #b6b6b9; font-weight: 500; padding: 16px 8px 6px;
}

.deck__item {
    display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 8px;
    border: 0; background: none; border-radius: 14px; cursor: pointer;
    text-align: left; font: inherit; font-size: 14px; letter-spacing: -.01em; color: var(--text);
    transition: background-color .18s ease;
}
.deck__item:hover { background: rgb(var(--tint) / .045); }
.deck__item.is-active { background: rgb(var(--tint) / .07); color: var(--text); font-weight: 500; }
.deck__item img {
    width: 64px; height: 36px; object-fit: cover; border-radius: 8px;
    border: 0; flex: none; background: var(--bg);
}
.deck__item-ask-icon {
    width: 64px; height: 36px; border-radius: 8px; flex: none;
    display: grid; place-items: center;
    background: var(--bg); color: var(--muted);
    font-weight: 500; font-size: 16px;
}
.deck__item > span:last-child { white-space: normal; line-height: 1.25; padding-top: 3px; }
.deck__item span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck__item span.deck__item-ask-icon { display: grid; }
.deck__item-num {
    display: inline-block;
    color: #b6b6b9;
    margin-right: 5px;
    font-variant-numeric: tabular-nums;
}

/* Вопрос в панели — вложен в свой слайд: видно, к чему он относится. */
.deck__item--ask { padding-left: 26px; position: relative; }
.deck__item--ask::before {
    content: '';
    position: absolute;
    left: 13px; top: 0; bottom: 0;
    border-left: 2px solid #eee;
}
.deck__item--ask .deck__item-num {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    padding: 0 6px;
    line-height: 1.5;
}
.deck__item__kind { color: var(--muted); font-size: 12px; display: block; }

/* отметка «на слайде есть вопрос» в простом списке слайдов */
.deck__item-ask {
    display: inline-block; margin-left: 6px; padding: 0 7px;
    border-radius: 6px; background: var(--accent); color: #fff;
    font-size: 12px; font-weight: 500; line-height: 1.5;
}

/* поиск по слайдам — такой же остров, как поля на других страницах */
.deck__side input[type=search] {
    border: 0; border-radius: 14px; background: var(--bg);
    padding: 11px 14px; font-size: 15px; letter-spacing: -.02em;
}
.deck__side input[type=search]:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }

@media (max-width: 999px) {
    .deck__side:not(.deck--rich .deck__side) { display: none; position: fixed; inset: 56px 12px 92px; z-index: 70; max-height: none; }
    .deck__side.is-open { display: flex; }
}

@media (max-width: 720px) {
    .deck--rich .deck__bar { height: 62px; padding: 0 12px; gap: 8px; }
    .deck--rich .deck__stage { padding: 12px 12px 0; }
    .deck--rich .deck__nav { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); gap: 10px; }
    .deck__hint { display: none; }
    .deck__screen { border-radius: 20px; }
}

.deck__extra { margin-top: 14px; }
.deck__rotate { display: none; }

@media (max-width: 640px) and (orientation: portrait) {
    /* на телефоне вертикально слайд нечитаем — просим повернуть */
    .deck__rotate {
        display: block;
        margin: 10px 0 0;
        padding: 11px 14px;
        border-radius: 100px;
        background: rgb(255 153 0 / .1);
        color: #f90;
        font-size: 13px;
        font-weight: 500;
        text-align: center;
    }
}

.deck__image {
    display: block; width: 100%; height: auto;
    border: 0; border-radius: 28px; background: #fff;
}

.deck__text {
    background: var(--surface); border: 0; border-radius: 28px;
    padding: 28px; min-height: 300px;
}

.deck__audio { width: 100%; margin-top: 12px; }

.deck__quiz {
    margin-top: 16px; padding: 22px 24px;
    background: var(--bg); border: 0; border-radius: 28px;
}
.deck__verdict { font-size: 15px; letter-spacing: -.02em; }

.deck__notes { margin-top: 14px; font-size: 15px; }
.deck__notes summary { cursor: pointer; color: var(--muted); font-weight: 500; }
.deck__notes p { margin: 10px 0 0; color: var(--muted); line-height: 1.5; }

.deck__nav { display: flex; align-items: center; gap: 14px; margin-top: 18px; }

/* ------------------------------------------------------- вопросы: новые типы */

.question__kind {
    float: right; font-weight: 500; letter-spacing: -.02em; color: var(--muted);
    background: var(--island); border: 0;
    padding: 4px 11px 5px; border-radius: 10000px; font-size: 13px;
}
.question__image { max-width: 100%; border-radius: 20px; margin-bottom: 14px; display: block; }
.answer-input {
    width: 100%; padding: 14px 16px; font: inherit; font-size: 16px; letter-spacing: -.02em;
    border: 0; border-radius: 16px;
    background: var(--island); color: var(--text);
}
.answer-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }

/* шкала Ликерта */
.scale__row { display: flex; gap: 6px; }
.scale__step {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 12px 6px; border: 0; border-radius: 16px;
    background: var(--island); cursor: pointer; font-size: 15px; font-weight: 500;
    transition: background-color .18s ease;
}
.scale__step:hover { background: var(--island-hover); }
.scale__step:has(input:checked) { background: var(--accent); color: #fff; }
.scale__step input { accent-color: var(--accent); }
.scale__ends { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; color: var(--muted); }

/* эссе */
.essay-counter.is-short::after { content: " Осталось " attr(data-left) " знаков."; color: var(--warning); }
.essay-answer {
    margin: 8px 0 0; padding: 12px 14px; border-left: 3px solid var(--border-strong);
    background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    white-space: pre-wrap; font-size: 15px;
}

/* текст с пропусками */
.blanks__text { font-size: 16.5px; line-height: 2.3; margin: 0; }
.blank { display: inline-block; vertical-align: baseline; }
.blank--input, .blank--select {
    font: inherit; font-size: 15px; padding: 4px 9px; border-radius: 7px;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    /* поля стоят внутри строки текста, поэтому ширина по содержимому, а не на всю строку */
    width: auto; min-width: 130px; max-width: 260px; margin: 0 2px;
}
.blank--drop {
    min-width: 110px; padding: 4px 9px; border-radius: 7px; cursor: pointer;
    border: 1px dashed var(--border-strong); background: var(--surface-2); color: var(--muted);
    text-align: center; font-size: 15px;
}
.blank--drop::before { content: attr(data-empty); }

/* пропуск с вариантами: те же плашки, что и у перетаскивания слов */
.blank--pick {
    min-width: 120px; padding: 4px 9px; border-radius: 7px; cursor: pointer;
    border: 1px dashed var(--border-strong); background: var(--surface-2);
    color: var(--muted); text-align: center; font-size: 15px;
}
.blank--pick:empty::before { content: attr(data-empty); }
.blank--pick.is-active { border-color: var(--accent); background: var(--accent-soft); }
.blank--pick.is-filled {
    border-style: solid; border-color: var(--accent); background: var(--accent-soft);
    color: var(--accent-strong); font-weight: 600;
}
.pickbank { margin-top: 12px; }
.pickbank__row { display: flex; flex-wrap: wrap; gap: 7px; }
/* display в классе перебивает атрибут hidden — гасим явно, иначе видны
   варианты сразу всех пропусков и они перемешиваются */
.pickbank__row[hidden] { display: none; }
.blank--drop.is-filled {
    border-style: solid; border-color: var(--accent); background: var(--accent-soft);
    color: var(--accent-strong); font-weight: 600;
}
.blank--drop.is-filled::before { content: none; }

.wordbank { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.wordbank__word {
    padding: 9px 15px 10px; border-radius: 10000px; cursor: grab;
    font-size: 15px; font-weight: 500; letter-spacing: -.02em;
    border: 0; background: var(--island);
}
.wordbank__word.is-picked { background: var(--accent); color: #fff; }

/* выбор области на картинке */
.pickzone { position: relative; border: 0; border-radius: 20px; overflow: hidden; }
.pickzone img { display: block; width: 100%; cursor: crosshair; user-select: none; }
.pickzone__marks { position: absolute; inset: 0; pointer-events: none; }

/* Разбор ответа: верное место на фотографии подсвечиваем целиком — так же,
   как это делает iSpring, только своим цветом. */
.pickzone__right {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none;
}
.pickzone__right polygon,
.pickzone__right rect {
    fill: color-mix(in srgb, var(--success) 42%, transparent);
    stroke: #fff;
    stroke-width: .5;
    vector-effect: non-scaling-stroke;
    animation: pickzone-in .35s ease both;
}
@keyframes pickzone-in { from { opacity: 0; } to { opacity: 1; } }
.pickzone__mark {
    position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer;
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent); color: #fff; font-size: 13px; font-weight: 700;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
}

/* перетаскивание объектов */
.dragzone__stage { position: relative; border: 0; border-radius: 20px; overflow: hidden; }
.dragzone__stage img { display: block; width: 100%; user-select: none; }
.dragzone__target {
    position: absolute; border: 2px dashed rgba(255, 255, 255, .9); border-radius: 10px;
    background: rgba(32, 27, 22, .32); display: flex; flex-wrap: wrap; gap: 4px;
    align-content: flex-start; padding: 6px; overflow: auto;
}
.dragzone__target > span:first-child {
    position: absolute; inset: auto 0 4px; text-align: center; pointer-events: none;
    color: #fff; font-size: 12px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.dragzone__bank { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; min-height: 46px; }
.dragzone__object {
    padding: 9px 15px 10px; border-radius: 10000px; cursor: grab;
    font-size: 15px; font-weight: 500; letter-spacing: -.02em;
    border: 0; background: var(--island);
    display: inline-flex; align-items: center; gap: 6px;
}
.dragzone__object img { width: 22px; height: 22px; object-fit: cover; border-radius: 5px; }
.dragzone__object.is-placed { position: relative; z-index: 2; font-size: 13px; padding: 4px 9px; }
.dragzone__object.is-picked { background: var(--accent); color: #fff; }

.order-item.is-dragging { opacity: .45; }
.order-item__tools { margin-left: auto; display: flex; gap: 3px; }
.order-item__tools button {
    width: 30px; height: 30px; border-radius: 50%; border: 0;
    background: transparent; color: #b6b6b9; cursor: pointer; font-size: 14px; padding: 0;
    transition: background-color .18s ease, color .18s ease;
}
.order-item__tools button:hover { background: rgb(var(--tint) / .06); color: var(--text); }

/* ------------------------------------------- конструктор: разметка на картинке */

.area-editor { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.area-editor img { display: block; width: 100%; user-select: none; -webkit-user-drag: none; }
.area-editor__layer { position: absolute; inset: 0; cursor: crosshair; }
.area {
    position: absolute; border: 2px solid var(--danger); background: rgba(179, 70, 47, .18);
    border-radius: 6px; cursor: move;
}
.area.is-correct { border-color: var(--success); background: rgba(63, 125, 82, .2); }
.area__num {
    position: absolute; top: -11px; left: -11px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--text); color: var(--bg); font-size: 11px; font-weight: 700;
    display: grid; place-items: center;
}
.area__label {
    position: absolute; left: 0; right: 0; bottom: 2px; text-align: center;
    font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
    pointer-events: none; overflow: hidden; white-space: nowrap;
}
.area__grip {
    position: absolute; right: -6px; bottom: -6px; width: 13px; height: 13px;
    background: var(--surface); border: 2px solid var(--text); border-radius: 3px; cursor: nwse-resize;
}

/* --------------------------------------------- конструктор: выбор типа вопроса */

.type-picker { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; display: grid; gap: 12px; }
.type-picker__title {
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); font-weight: 700; margin-bottom: 6px;
}
.type-picker__row { display: flex; flex-wrap: wrap; gap: 6px; }
.type-chip {
    padding: 7px 12px; border-radius: 100px; font: inherit; font-size: 13.5px; font-weight: 550;
    border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
}
.type-chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }

.dropdown-blank {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 10px; margin-bottom: 8px; background: var(--surface-2);
}

/* ------------------------------------------------- интерактивности: процесс */

.steps__rail { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; }
.steps__dot {
    width: 34px; height: 34px; border-radius: 50%; flex: none; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--muted); font: inherit; font-weight: 700; font-size: 14px;
}
.steps__dot.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.steps__panel { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .steps__panel { grid-template-columns: 260px minmax(0, 1fr); } }
.steps__panel img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.steps__panel h3 { margin: 4px 0 8px; }
.steps__num { font-size: 12px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .04em; }
.steps__nav { display: flex; gap: 8px; margin-top: 16px; }
.steps__nav button:disabled { opacity: .4; cursor: default; }

.process__row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px; }
.process__stage {
    flex: 1 0 auto; min-width: 130px; text-align: left; cursor: pointer; font: inherit;
    padding: 11px 13px 11px 16px; border: 1px solid var(--border); background: var(--surface);
    color: var(--text); position: relative;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%);
}
.process__stage.is-active { background: var(--accent-soft); border-color: var(--accent); }
.process__num { display: block; font-size: 11px; font-weight: 700; color: var(--text); }
.process__title { font-size: 14px; font-weight: 600; }
.process__panel img { max-width: 100%; border-radius: var(--radius-sm); margin-bottom: 10px; }

.cycle { display: grid; place-items: center; padding: 10px 0; }
.cycle__ring { position: relative; width: min(420px, 100%); aspect-ratio: 1; }
.cycle__node {
    position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px;
    border-radius: 50%; cursor: pointer; font: inherit; font-weight: 700;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted);
    transform: rotate(calc(var(--index) * (360deg / var(--count))))
               translate(0, calc(min(420px, 100%) * -0.5 + 27px))
               rotate(calc(var(--index) * (-360deg / var(--count))));
}
.cycle__node.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cycle__center {
    position: absolute; inset: 26%; border-radius: 50%; display: grid; place-items: center;
    text-align: center; padding: 14px; background: var(--surface-2); border: 1px solid var(--border);
}
.cycle__text p { margin: 6px 0 0; font-size: 14px; }

/* ------------------------------------------- интерактивности: аннотирование */

/* Картинка с метками. Пояснение всплывает у самой точки, а не списком сбоку:
   так видно, о чем речь, не отрывая глаз от рисунка. */
.labeled { position: relative; display: grid; gap: 12px; justify-items: center; }
.labeled__hint { margin: 0; }
/* Рамку вокруг картинки не рисуем: она обводит сам интерактив и лишняя на
   слайде, а еще срезает метки, которые стоят у самого края. */
.labeled__image { position: relative; width: fit-content; max-width: 100%; }
.labeled__image img {
    display: block; max-width: 100%; max-height: 74vh; width: auto;
    border-radius: var(--radius);
}

.labeled__pop {
    position: absolute; z-index: 6; width: min(330px, 78vw);
    padding: 14px 16px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: 0 12px 32px rgb(var(--tint) / .18);
}
.labeled__pop[hidden] { display: none; }
.labeled__pop strong { display: block; padding-right: 22px; margin-bottom: 6px; }
.labeled__pop p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.labeled__close {
    position: absolute; top: 8px; right: 8px; width: 22px; height: 22px;
    border: 0; border-radius: 50%; background: transparent; cursor: pointer;
    color: var(--muted); font: 600 13px/22px inherit; padding: 0;
}
.labeled__close:hover { background: var(--surface-2); color: var(--text); }
.labeled__pin {
    position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px;
    border-radius: 50%; border: 2px solid #fff; background: var(--accent); color: #fff;
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.labeled__pin.is-active { background: var(--accent-strong); transform: translate(-50%, -50%) scale(1.25); }


.described { display: grid; gap: 16px; }
@media (min-width: 800px) { .described { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.described__stage img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); display: block; }
.described__item {
    display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; margin-bottom: 7px;
    padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
}
.described__item.is-active { border-color: var(--accent); background: var(--accent-soft); }
.described__item span { display: block; font-size: 14px; margin-top: 3px; }

/* ---------------------------------------------- интерактивности: иерархия */

.pie { display: grid; gap: 18px; align-items: center; }
@media (min-width: 760px) { .pie { grid-template-columns: 260px minmax(0, 1fr); } }
.pie__chart svg { width: 100%; transform: rotate(-90deg); }
.pie__slice { transition: stroke-width .15s; cursor: pointer; }
.pie__slice.is-active { stroke-width: 10; }
.pie__legend { list-style: none; margin: 0; padding: 0; }
.pie__entry {
    display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; cursor: pointer;
    border-radius: var(--radius-sm); border: 1px solid transparent;
}
.pie__entry.is-active { background: var(--surface-2); border-color: var(--border); }
.pie__swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; margin-top: 4px; }
.pie__value { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 6px; }
.pie__entry p { margin: 2px 0 0; font-size: 14px; }

.pyramid { display: grid; gap: 4px; justify-items: center; }
.pyramid__level {
    border: 0; cursor: pointer; font: inherit; font-weight: 600; color: #fff; padding: 13px 16px;
    clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
}
.pyramid__level.is-active { outline: 2px solid var(--text); outline-offset: 2px; }
.pyramid__panel {
    margin-top: 12px; padding: 13px 15px; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--border); width: 100%;
}
.pyramid__panel p { margin: 5px 0 0; font-size: 14.5px; }

/* -------------------------------------------- интерактивности: справочник */

.glossary__search { margin-bottom: 14px; }
.glossary__entry { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.glossary__letter {
    width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--text); font-weight: 700;
}
.glossary__entry p { margin: 3px 0 0; font-size: 14.5px; }

.catalog { display: grid; gap: 13px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.catalog__card {
    margin: 0; border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; background: var(--surface);
}
.catalog__card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.catalog__card figcaption { padding: 12px 13px; }
.catalog__card p { margin: 5px 0 0; font-size: 14px; }

.timeline__when { display: block; font-size: 12px; font-weight: 700; color: var(--text); }
.timeline__image { display: block; width: 100%; border-radius: var(--radius-sm); margin-top: 9px; }

/* ------------------------------------- конструктор: выбор вида интерактивности */

.kind-picker { display: grid; gap: 14px; margin: 14px 0 18px; }
.kind-picker[hidden] { display: none; }
.kind-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.kind-card {
    display: grid; gap: 7px; justify-items: center; padding: 12px 8px; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font: inherit;
}
.kind-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.kind-card.is-active { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); }
.kind-card__name { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.3; }
.kind-icon { width: 60px; height: 40px; color: var(--accent); fill: currentColor; }
.kind-icon .dim { opacity: .38; }
.kind-icon .ring { fill: none; stroke: currentColor; }

.pin-stage { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-top: 10px; }
.pin-stage img { display: block; width: 100%; cursor: crosshair; user-select: none; }
.pin-stage__pin {
    position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px;
    border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
    box-shadow: 0 0 0 2px #fff;
}
.pin-stage__pin.is-active { background: var(--text); }

/* ------------------------------------------------------------ полотно слайда */

.slide {
    aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
    background: var(--surface); border: 1px solid var(--border);
    padding: clamp(18px, 4.2%, 48px); display: flex; flex-direction: column; gap: 14px;
    container-type: inline-size; position: relative;
}
.slide--dark { background: #201b16; border-color: #201b16; color: #f3ece4; }
.slide--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.slide--rendered, .slide--image_full { padding: 0; }

.slide__title { font-size: clamp(20px, 4.4cqi, 40px); line-height: 1.15; margin: 0; letter-spacing: -.02em; }
.slide__subtitle { font-size: clamp(14px, 2.4cqi, 21px); margin: 0; opacity: .72; }
.slide__text { font-size: clamp(13px, 2.2cqi, 20px); line-height: 1.45; margin: 0; }
.slide__caption { font-size: clamp(12px, 1.9cqi, 17px); margin: 0; opacity: .72; }
.slide__bullets { margin: 0; padding-left: 1.1em; display: grid; gap: .45em; font-size: clamp(13px, 2.2cqi, 20px); }
.slide__center { margin: auto 0; display: grid; gap: 12px; }
.slide__quote { margin: 0; font-size: clamp(17px, 3.4cqi, 32px); line-height: 1.3; font-weight: 500; }
.slide__quote::before { content: "«"; }
.slide__quote::after { content: "»"; }
.slide__author { margin: 0; opacity: .7; font-size: clamp(12px, 2cqi, 18px); }

.slide__render, .slide__cover { width: 100%; height: 100%; object-fit: contain; display: block; }
.slide__cover { object-fit: cover; position: absolute; inset: 0; }
.slide__overlay {
    position: relative; margin-top: auto; padding: clamp(16px, 4%, 40px);
    background: linear-gradient(transparent, rgba(20, 16, 12, .82)); color: #fff; width: 100%;
}
.slide__picture { width: 100%; flex: 1; min-height: 0; object-fit: contain; border-radius: var(--radius-sm); }
.slide__placeholder, .slide__empty {
    flex: 1; display: grid; place-items: center; border-radius: var(--radius-sm);
    border: 1px dashed var(--border-strong); color: var(--muted); font-size: 14px;
}
.slide__split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 3%, 32px); flex: 1; min-height: 0; }
.slide__half { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.slide__columns { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 3%, 32px); flex: 1; min-height: 0; }
.slide__column { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

.slide [contenteditable]:focus { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.slide [contenteditable]:empty::before { content: attr(data-slide-field); opacity: .35; }

/* --------------------------------------------------- конструктор презентации */

.editor { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .editor { grid-template-columns: 190px minmax(0, 1fr); align-items: start; } }
.editor__thumbs {
    display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto;
    padding-right: 4px;
}
.editor__hint { margin-top: 10px; }

.thumb {
    display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; align-items: start;
    padding: 7px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); cursor: pointer; position: relative;
}
.thumb.is-active { border-color: var(--accent); border-width: 2px; padding: 6px 7px; background: var(--accent-soft); }
.thumb__num { font-size: 11px; font-weight: 700; color: var(--muted); }
.thumb__body { min-width: 0; display: grid; gap: 4px; }
.thumb__body img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); }
.thumb__title { font-size: 12px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.thumb__layout { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 4px; }
.thumb__marks { grid-column: 2; display: flex; gap: 4px; flex-wrap: wrap; }
.thumb__section { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.thumb__tools { position: absolute; top: 4px; right: 4px; display: none; gap: 2px; }
.thumb:hover .thumb__tools { display: flex; }
.thumb__tools .icon-btn { width: 22px; height: 22px; font-size: 11px; }

/* значки раскладок: рисуем прямоугольниками, без картинок */
.layout-icon {
    display: inline-block; width: 34px; height: 22px; border-radius: 4px; flex: none;
    border: 1px solid var(--border-strong); background: var(--surface-2);
    background-repeat: no-repeat; position: relative;
}
.layout-icon--title { background-image: linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--border-strong), var(--border-strong)); background-size: 60% 4px, 40% 3px; background-position: 50% 34%, 50% 62%; }
.layout-icon--text { background-image: linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--border-strong), var(--border-strong)); background-size: 60% 3px, 80% 3px; background-position: 12% 25%, 12% 55%; }
.layout-icon--bullets { background-image: linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--border-strong), var(--border-strong)), linear-gradient(var(--border-strong), var(--border-strong)); background-size: 50% 3px, 66% 2.5px, 66% 2.5px; background-position: 12% 24%, 18% 52%, 18% 76%; }
.layout-icon--split { background-image: linear-gradient(var(--border-strong), var(--border-strong)), linear-gradient(var(--muted), var(--muted)); background-size: 42% 70%, 42% 3px; background-position: 8% 50%, 92% 34%; }
.layout-icon--image { background-image: linear-gradient(var(--border-strong), var(--border-strong)), linear-gradient(var(--muted), var(--muted)); background-size: 78% 55%, 50% 2.5px; background-position: 50% 30%, 12% 88%; }
.layout-icon--image_full { background: var(--border-strong); }
.layout-icon--quote { background-image: linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--border-strong), var(--border-strong)); background-size: 66% 4px, 30% 2.5px; background-position: 50% 40%, 50% 70%; }
.layout-icon--compare { background-image: linear-gradient(var(--border-strong), var(--border-strong)), linear-gradient(var(--border-strong), var(--border-strong)); background-size: 40% 60%, 40% 60%; background-position: 8% 62%, 92% 62%; }
.layout-icon--rendered { background-image: repeating-linear-gradient(45deg, var(--border) 0 4px, transparent 4px 8px); }

.layout-grid { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); }
.layout-card {
    display: grid; gap: 4px; justify-items: center; padding: 7px 4px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
    color: var(--text); font: inherit; font-size: 10.5px; line-height: 1.2; text-align: center;
}
.layout-card:hover { border-color: var(--accent); }
.layout-card.is-active { border-color: var(--accent); border-width: 2px; padding: 6px 3px; background: var(--accent-soft); }

.menu { position: relative; display: inline-block; }
.menu__list {
    position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 230px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); padding: 5px; display: grid; gap: 2px;
}
.menu__list[hidden] { display: none; }
.menu__item {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px;
    border: 0; background: none; border-radius: 7px; cursor: pointer; font: inherit;
    font-size: 13.5px; color: var(--text); text-align: left;
}
.menu__item:hover { background: var(--surface-2); }

/* --------------------------------------------- слайд: фон и появление */

/* текст поверх фотографии — светлый, иначе не прочитать */
.slide--on-image { color: #fff; }
.slide--on-image .slide__subtitle,
.slide--on-image .slide__caption,
.slide--on-image .slide__author { opacity: .85; }

/* Появление слайда. Анимацию заводит плеер, добавляя .is-playing:
   иначе она сработала бы один раз при загрузке всей презентации. */
.slide.is-playing.anim-fade { animation: slide-fade .45s ease both; }
.slide.is-playing.anim-rise { animation: slide-rise .5s cubic-bezier(.22,.7,.3,1) both; }
.slide.is-playing.anim-zoom { animation: slide-zoom .45s cubic-bezier(.22,.7,.3,1) both; }
.slide.is-playing.anim-wipe { animation: slide-wipe .55s cubic-bezier(.4,0,.2,1) both; }

@keyframes slide-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes slide-rise { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
@keyframes slide-zoom { from { opacity: 0; transform: scale(.965) } to { opacity: 1; transform: none } }
@keyframes slide-wipe { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0) } }

@media (prefers-reduced-motion: reduce) {
    .slide.is-playing { animation: none !important; }
}

/* выбор фона в конструкторе */
.bg-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-swatch {
    width: 34px; height: 26px; border-radius: 7px; cursor: pointer; padding: 0;
    border: 1px solid var(--border-strong); background-clip: padding-box;
}
.bg-swatch.is-active { outline: 2px solid var(--accent); outline-offset: 2px; }
.bg-swatch--none {
    background: repeating-linear-gradient(45deg, var(--surface) 0 5px, var(--surface-2) 5px 10px);
}

/* --------------------------------------------- полноэкранный редактор слайдов */

.shell--full { max-width: none; padding: 0; }
/* Редактор на весь экран: шапки платформы и нижнего меню нет. Сверху одна строка —
   назад, название с состоянием, действия; под ней полотно и панель платформы. */
body:has(.editor-full) { padding-bottom: 0; background: var(--surface); }
body:has(.editor-full) .tabbar { display: none; }
.editor-full { display: flex; flex-direction: column; height: 100dvh; }

.ed-bar {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    height: 60px;
    padding: 0 12px 0 8px;
    border-bottom: 1px solid rgb(var(--tint) / .08);
    background: var(--surface);
}

.ed-bar > * { flex: none; }
.ed-bar > .spacer { flex: 1; }
.ed-bar__info { display: flex; flex: 0 1 auto; flex-direction: column; min-width: 0; margin-left: 2px; }
.ed-bar__title { overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.ed-bar__meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.ed-bar__state { overflow: hidden; text-overflow: ellipsis; }
.ed-bar__state[data-kind="danger"] { color: var(--danger); }
.ed-bar__state[data-kind="warning"] { color: var(--warning); }

.ed-status { padding: 1px 8px; border-radius: 100px; background: var(--bg); color: var(--text); font-weight: 550; }
.ed-status.is-live { background: var(--success-soft); color: var(--success); }
/* правки сохранены, но сотрудники их еще не видят — подсвечиваем */
.ed-status.is-pending { background: var(--warning-soft); color: var(--warning); }

.ed-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    border: 0;
    border-radius: 100px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease;
}

.ed-btn:hover { background: rgb(var(--tint) / .08); }
.ed-btn--sm { height: 30px; padding: 0 12px; font-size: 13px; }
.ed-btn:disabled,
.ed-btn:disabled:hover { background: var(--bg); color: rgb(var(--tint) / .35); cursor: default; }
.ed-btn--block { width: 100%; margin-top: 10px; }
.ed-main { border-radius: 100px; }
.ed-bar .ed-main { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; font-size: 14px; font-weight: 550; }

.ed-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background-color .2s ease;
}

.ed-icon:hover,
.ed-icon[aria-pressed="true"] { background: var(--bg); }
.ed-icon--sm { width: 32px; height: 32px; color: var(--muted); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.editor-full__body { flex: 1; display: flex; min-height: 0; }
.editor-full__frame { flex: 1; height: 100%; border: 0; display: block; min-width: 0; }

/* Вопрос к слайду: кнопка над полотном и всплывающая панель над ней. Центр —
   середина полотна редактора: слева у него миниатюры 160px, справа панель 260px. */
.editor-full__body { position: relative; }

/* виджеты над полотном: вопрос и раздел текущего слайда */
.ed-dock {
    position: absolute;
    left: calc(160px + (100% - 420px) / 2);
    bottom: 58px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%);
}

.ed-fab {
    display: inline-flex;
    align-items: center;
    padding: 5px;
    border-radius: 100px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgb(var(--tint) / .16), 0 0 0 1px rgb(var(--tint) / .06);
    transition: box-shadow .25s ease, transform .25s cubic-bezier(.2, .7, .2, 1);
}

.ed-fab:hover { box-shadow: 0 14px 32px rgb(var(--tint) / .2), 0 0 0 1px rgb(var(--tint) / .06); transform: translateY(-2px); }

.ed-fab__main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 16px 0 5px;
    border: 0;
    border-radius: 100px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.ed-fab__icon { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; }
.ed-fab__check,
.ed-fab__play,
.ed-fab.has-question .ed-fab__plus,
.ed-fab.has-trainer .ed-fab__plus { display: none; }
.ed-fab.has-question .ed-fab__check { display: block; }
.ed-fab.has-question .ed-fab__icon { background: var(--success); }
/* слайд-тренажер ▶: темный значок, как на миниатюре в меню «Добавить слайд» */
.ed-fab.has-trainer .ed-fab__play { display: block; }
.ed-fab.has-trainer .ed-fab__icon { background: var(--text); }
.ed-fab a.ed-fab__remove { text-decoration: none; }
.ed-fab a.ed-fab__remove:hover { background: #e9ecf3; color: var(--text); }

/* окно выбора тренажера */
#trainer-search { width: 100%; }
.trainer-list { max-height: 360px; margin-top: 10px; overflow-y: auto; border-radius: 14px; background: var(--bg); }
.trainer-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}
.trainer-row + .trainer-row { box-shadow: inset 0 1px 0 rgb(var(--tint) / .06); }
.trainer-row:hover { background: rgb(var(--tint) / .05); }
.trainer-row.is-current { background: rgb(var(--tint) / .07); }
.trainer-row__title { font-size: 14px; font-weight: 550; }
.trainer-row__note { color: var(--muted); font-size: 12.5px; }
.trainer-list .ed-modal__empty,
.trainer-list .ed-modal__loading { padding: 14px; }
.ed-modal__actions.trainer-actions { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.trainer-actions form { margin: 0; }
.ed-fab__text { display: flex; flex-direction: column; line-height: 1.2; }
.ed-fab__label { max-width: 220px; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; }
.ed-fab__sub { color: var(--muted); font-size: 12.5px; }
.ed-fab__sub[hidden] { display: none; }

.ed-fab__remove {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: 2px;
    border: 0;
    border-radius: 50%;
    background: var(--bg);
    color: var(--muted);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.ed-fab__remove:hover { background: var(--danger-soft); color: var(--danger); }
.ed-fab__remove[hidden] { display: none; }
.ed-fab__main[aria-expanded="true"] .ed-fab__label { color: var(--accent); }
.ed-pop--small { width: min(380px, calc(100% - 460px)); }
/* панель раздела — у колонки слайдов, откуда ее открыли */
.ed-pop.ed-pop--side { top: 56px; bottom: auto; left: 172px; max-height: calc(100% - 80px); transform: none; }
.ed-hint { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }

.ed-pop {
    position: absolute;
    left: calc(160px + (100% - 420px) / 2);
    bottom: 112px;
    z-index: 21;
    display: flex;
    flex-direction: column;
    width: min(420px, calc(100% - 460px));
    max-height: calc(100% - 140px);
    overflow: hidden;
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 24px 60px rgb(var(--tint) / .22), 0 0 0 1px rgb(var(--tint) / .06);
    transform: translateX(-50%);
    animation: soon-in .2s ease-out;
}

.ed-pop[hidden] { display: none; }
.ed-pop__head { display: flex; flex: none; align-items: center; gap: 8px; padding: 12px 12px 4px 18px; }
.ed-pop__body { padding: 4px 18px 12px; overflow-y: auto; }
.ed-pop__foot { display: flex; flex: none; align-items: center; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid rgb(var(--tint) / .07); }
.ed-pop__foot .ed-main { height: 38px; padding: 0 20px; }
.ed-link-danger { padding: 6px 2px; border: 0; background: none; color: var(--danger); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; }
.ed-link-danger:hover { text-decoration: underline; text-underline-offset: 3px; }
.ed-link-danger[hidden] { display: none; }
.ed-kicker { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }

/* поля во всплывающей панели и в окнах — серые без рамок, как на остальных страницах */
:is(.ed-pop, .ed-modal) .field label { color: var(--muted); font-size: 12.5px; font-weight: 500; }
:is(.ed-pop, .ed-modal) :is(input[type=text], input[type=number], input[type=date], input[type=search], select, textarea) {
    width: 100%;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--bg);
    box-shadow: none;
}
:is(.ed-pop, .ed-modal) :is(input, select, textarea):focus { border-color: transparent; outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.ed-pop .block { padding: 12px 14px 6px; border: 0; border-radius: 16px; background: var(--bg); box-shadow: none; }
.ed-pop .block :is(input[type=text], input[type=number], input[type=url], select, textarea) { background: var(--surface); }
:is(.ed-pop, .ed-modal) .switch { margin: 6px 0 12px; }
.ed-modal .card-form__note { margin-top: 6px; }

.ed-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgb(var(--tint) / .07); }
.ed-section h4 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }

/* окна «Настройки презентации» и «Назначить» */
.ed-modal .ed-modal__card {
    width: min(560px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 22px 24px 20px;
    text-align: left;
}

.ed-modal p { margin: 0; font-size: 14px; }
.ed-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ed-modal__head h2 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.ed-modal__head p { margin-top: 4px; }
.ed-modal__section { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgb(var(--tint) / .07); }
.ed-modal__section h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.ed-modal__empty,
.ed-modal__loading { color: var(--muted); }

.ed-modal__actions {
    position: sticky;
    bottom: -20px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 18px -24px -20px;
    padding: 14px 24px 20px;
    border-top: 1px solid rgb(var(--tint) / .07);
    background: var(--surface);
}

.ed-modal .ed-modal__actions .btn { width: auto; }
.ed-modal__actions .ed-main { height: 38px; padding: 0 18px; }
.ed-modal .field .assign-pick__row { color: var(--text); font-size: 14px; font-weight: 400; }
.ed-publish-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 14px; }

.assign-list,
.assign-pick { max-height: 240px; overflow-y: auto; border-radius: 14px; background: var(--bg); }
.assign-pick { margin-top: 8px; }
.assign-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.assign-row + .assign-row,
.assign-pick__row + .assign-pick__row { box-shadow: inset 0 1px 0 rgb(var(--tint) / .06); }
.assign-row__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
/* «Кому уже назначено» по территориям: заголовок группы с числом, внутри люди */
.assign-list { max-height: 320px; }
.assign-group + .assign-group { box-shadow: inset 0 1px 0 rgb(var(--tint) / .08); }
.assign-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 550;
    cursor: pointer;
    list-style: none;
}
.assign-group__head::-webkit-details-marker { display: none; }
.assign-group__head::after { content: "›"; color: var(--muted); transition: transform .2s ease; }
.assign-group[open] > .assign-group__head::after { transform: rotate(90deg); }
.assign-group__count { margin-left: auto; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.assign-group .assign-row { padding-left: 20px; }
.assign-row__name { font-size: 14px; font-weight: 550; }
.assign-row__note { overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.assign-pick__row { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 8px 12px; cursor: pointer; }
.assign-pick__row .assign-row__note { grid-column: 2; }
.assign-pick__row[hidden],
[data-scope-part][hidden] { display: none; }


@media (max-width: 720px) {
    .ed-pop { left: 50%; width: calc(100% - 24px); }
    .ed-dock { left: 50%; }
    .ed-bar .ed-btn:not(#editor-save) { display: none; }
}

/* Просьба повернуть телефон. Слайд шире экрана, и в книжной ориентации
   ни собирать, ни смотреть его нельзя — так это решено и у нас, и у соседей. */
.rotate-wall { display: none; }

@media (max-width: 700px) and (orientation: portrait) {
    .rotate-wall {
        display: grid;
        place-items: center;
        position: fixed;
        inset: 0;
        z-index: 200;
        background: var(--surface);
        padding: 32px 24px;
        text-align: center;
    }
    .rotate-wall__icon { font-size: 44px; margin: 0 0 12px; color: var(--accent); }
    .rotate-wall__title { font-size: 21px; font-weight: 650; margin: 0 0 10px; }
    .rotate-wall__text { color: var(--muted); margin: 0 0 20px; max-width: 320px; }
    .editor-full { display: none; }
}


/* ------------------------------------------------ разбор ответа

   Три состояния, как в iSpring: верно, частично, неверно. Заметная шапка,
   под ней объяснение — сотрудник должен понять, почему ответ такой. */

.verdict {
    margin-top: 16px;
    border-radius: 24px;
    overflow: hidden;
    border: 0;
    background: var(--island);
}
.verdict__head {
    padding: 13px 20px 14px;
    color: #fff;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -.02em;
}
.verdict__body { padding: 15px 20px; color: var(--text); letter-spacing: -.02em; }
.verdict__body p { margin: 0 0 8px; }
.verdict__body p:last-child { margin: 0; }
.verdict--ok .verdict__head { background: var(--success); }
.verdict--part .verdict__head { background: var(--warning); }
.verdict--wrong .verdict__head { background: var(--danger); }
.verdict--wait .verdict__head { background: var(--accent); }

/* верный вариант в разборе: галочка слева, как у iSpring */
.option--right { position: relative; }
.option--right::after {
    content: '✓';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--success);
    font-weight: 700;
}

/* Крупная подсветка варианта под курсором: попасть проще, и видно, куда жмешь. */
.option { transition: background-color .18s ease; }
.option:hover { background: var(--island-hover); }

/* Приглашение открыть редактор слайдов вместо прежнего конструктора. */
.deck-cta {
    display: grid;
    place-items: center;
    padding: 34px 24px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    text-align: center;
}
.deck-cta__text { max-width: 460px; }
.deck-cta__text h3 { margin-bottom: 8px; }
.deck-cta__text p { margin-bottom: 18px; }

/* Предложение продолжить с прежнего места — поверх слайда, как у iSpring. */
.deck__resume {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    background: rgb(12 14 20 / .45);
}
.deck__resume[hidden] { display: none; }
.deck__resume-card {
    background: var(--surface);
    border-radius: 32px;
    box-shadow: 0 24px 60px rgb(12 14 20 / .28);
    padding: 36px 36px 32px;
    max-width: 460px;
    text-align: center;
}
.deck__resume-title { font-size: 26px; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; margin: 0 0 10px; }
.deck__resume-card p.muted { margin: 0; font-size: 16px; letter-spacing: -.02em; }

/* тексты карточек интерактивностей: абзацы и списки из iSpring разделены переводом строки */
.pre { white-space: pre-line; }

/* атрибут hidden сильнее любого display у класса: иначе панели шагов и подобных виджетов показываются все разом */
[hidden] { display: none !important; }

/* картинки внутри карточек вопросов: пары «слово — картинка» и перетаскивание картинок */
.match-chip--picture, .basket__chip--picture { padding: 6px; }
.match-chip img, .basket__chip img { display: block; max-width: 160px; max-height: 110px; border-radius: 6px; object-fit: contain; }
.basket__picture { display: block; max-width: 100%; max-height: 90px; margin: 0 auto 6px; object-fit: contain; }
.option__picture { display: inline-block; vertical-align: middle; max-height: 56px; border-radius: 4px; }
.dragzone__target--picture > span:first-child { padding: 0; background: none; }
.dragzone__target--picture img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: .55; }
.dragzone__object img { display: block; max-width: 140px; max-height: 100px; object-fit: contain; }

/* ------------------------------------------------------------------ главная сотрудника */

/* Шапка страницы: кадр кафе во всю ширину, поверх него меню и заголовок, снизу
   наезжает белая шторка. Кадры листаются сами (app.js), фото затемнено снизу —
   залы сети белые, иначе белый текст на них теряется. При прокрутке шапка стоит
   на месте: --cover растет от 0 до 1, пока шторка идет к верху экрана. */

body:has(main.with-hero) { background: var(--surface); }
main.with-hero { padding: 0; }

.hero {
    --cover: 0;
    position: sticky;
    top: 0;
    height: 430px;
    overflow: hidden;
    background: #d9d2c6;
    color: #fff;
}

.hero--short { height: 340px; }

/* отчеты: вместо фотографии мягкий градиент, на нем цифры читаются спокойнее */
.hero--tint { background: linear-gradient(160deg, #b9c6e8 0%, #a9cfe0 45%, #7fc3cd 100%); }

.hero__photo,
.hero__video {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transform: scale(calc(1 + var(--cover) * .06));
    transform-origin: 50% 30%;
}

/* фотографии лежат стопкой: видна та, что с is-on, новая проявляется поверх */
.hero__photo { opacity: 0; transition: opacity 1.4s ease; }
.hero__photo.is-on { opacity: 1; }
.hero__photo.is-front { z-index: 1; }

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
}

.hero::before { background: #000; opacity: calc(var(--cover) * .45); }

.hero::after {
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, .28) 0%,
            rgba(0, 0, 0, .1) 14%,
            rgba(0, 0, 0, 0) 30%),
        linear-gradient(to top,
            rgba(0, 0, 0, .5) 0%,
            rgba(0, 0, 0, .3) 24%,
            rgba(0, 0, 0, .12) 48%,
            rgba(0, 0, 0, 0) 72%);
}

.hero--tint::after { background: none; }

/* ------- меню поверх фото */

.hero__bar {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 18px 22px 0;
}

.hero__bar .logo { margin-right: 6px; }
.hero__bar .logo__mark { height: 58px; color: #fff; top: 0; }

.hero__nav {
    display: flex;
    gap: 6px;
    height: 57px;
    padding: 0 10px;
    align-items: center;
    border-radius: 100px;
    background: linear-gradient(180deg, rgb(255 255 255 / .24), rgb(255 255 255 / .1));
    -webkit-backdrop-filter: blur(40px) saturate(1.5) brightness(1.04);
    backdrop-filter: blur(40px) saturate(1.5) brightness(1.04);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -1px 0 rgb(255 255 255 / .12);
}

.hero__nav a {
    padding: 8px 16px;
    border-radius: 100px;
    color: rgb(255 255 255 / .75);
    font-size: 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}

.hero__nav a:hover { color: #fff; }
.hero__nav a.is-active { color: #fff; font-weight: 500; }

.hero__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.tool { position: relative; }

.tool__btn svg { width: 24px; height: 24px; }

.tool__btn,
.tool__face {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, rgb(255 255 255 / .24), rgb(255 255 255 / .1));
    -webkit-backdrop-filter: blur(40px) saturate(1.5) brightness(1.04);
    backdrop-filter: blur(40px) saturate(1.5) brightness(1.04);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -1px 0 rgb(255 255 255 / .12);
    color: #fff;
    cursor: pointer;
    transition: background-color .25s ease, transform .25s cubic-bezier(.32, .72, 0, 1);
}

.tool__btn:hover,
.tool__face:hover { background: rgb(255 255 255 / .3); transform: translateY(-1px); }
.tool__btn:active,
.tool__face:active { transform: scale(.96); }

.tool__face {
    width: 64px;
    height: 64px;
    overflow: hidden;
    background: rgb(255 255 255 / .25);
    font-size: 17px;
    font-weight: 500;
}

.tool__face img { width: 100%; height: 100%; object-fit: cover; }

/* выпадашка: белая карточка со строками, открывается по наведению и нажатию */
.tool__pop {
    position: absolute;
    z-index: 20;
    top: calc(100% + 10px);
    right: 0;
    min-width: 242px;
    padding: 0;
    border-radius: 32px;
    background: var(--surface);
    color: var(--text);
    overflow: hidden;
    box-shadow: 0 18px 44px rgb(var(--tint) / .16), inset 0 0 0 1px rgb(var(--tint) / .06);
    opacity: 0;
    transform: translateY(-10px) scale(.96);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity .18s ease, transform .28s cubic-bezier(.32, .72, 0, 1);
}

/* появление и уход: меню выезжает из-под кнопки, а не возникает рывком */
[data-menu-pop].is-shown { opacity: 1; transform: none; pointer-events: auto; }


.tool__pop a,
.tool__pop button {
    display: block;
    width: 100%;
    padding: 15px 23px;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -.025em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s ease;
}

.tool__pop a + a,
.tool__pop button + button { box-shadow: inset 0 1px 0 rgb(0 0 0 / .1); }
.tool__pop a:hover,
.tool__pop button:hover:not(:disabled) { background: rgb(0 0 0 / .05); }
.tool__pop button.is-off { color: var(--muted); cursor: default; }

.tool__pop--card { min-width: 268px; padding: 0; }

.mecard { padding: 25px 23px 22px; }
.tool__pop .mecard a { width: auto; padding: 0; background: none; font: inherit; }
.tool__pop .mecard a:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.mecard__name { display: block; color: var(--text); font-size: 20px; font-weight: 500; letter-spacing: -.025em; text-decoration: none; }
.mecard__sub { margin: 6px 0 0; color: rgb(0 0 0 / .4); font-size: 14px; line-height: 1.2; letter-spacing: -.025em; }
.mecard__stat { margin: 24px 0 0; }
.mecard__stat span { display: block; font-size: 20px; font-weight: 500; letter-spacing: -.025em; }
.mecard__stat b { font-size: 44px; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; }

.tool__pop a.tool__out,
.tool__out {
    display: block;
    padding: 18px 23px 20px;
    box-shadow: inset 0 1px 0 rgb(0 0 0 / .1);
    color: rgb(0 0 0 / .3);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -.025em;
    text-decoration: none;
}

.tool__out:hover { background: var(--bg); color: var(--text); }

/* ------- заголовок и «Продолжить» */

.hero__head {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 56px;
    width: min(1280px, 100%);
    margin: 0 auto;
    padding: 0 30px;
}

.hero__title {
    margin: 0;
    color: #fff;
    max-width: 13ch;
    font-size: clamp(44px, 6.5vw, 84px);
    font-weight: 500;
    line-height: .85;
    letter-spacing: -.06em;
}

.hero--tint .hero__lead { max-width: 440px; font-size: 16px; }

.hero__lead {
    max-width: 320px;
    margin: 14px 0 0;
    color: rgb(255 255 255 / .85);
    font-size: 13px;
    line-height: 1.15;
}

.hero__go { display: flex; align-items: center; gap: 19px; margin-top: 26px; }

.gobtn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    height: 76px;
    padding: 0 18px 0 28px;
    border-radius: 100px;
    background: var(--surface);
    color: var(--text);
    font-size: 25px;
    font-weight: 400;
    text-decoration: none;
    transition: transform .2s ease;
}

.gobtn:hover { transform: translateY(-1px); }
/* у кольца по умолчанию есть нижний отступ — в кнопке он сдвигал его вверх */
.gobtn .path__ring { display: grid; place-items: center; width: 42px; height: 42px; margin: 0; }
.gobtn .path__value { font-size: 15px; font-weight: 400; }

.hero__note { max-width: 318px; margin: 0; color: rgb(255 255 255 / .85); font-size: 13px; line-height: 1.15; }

.sheet {
    position: relative;
    z-index: 4;
    margin-top: -32px;
    padding: 40px 30px 80px;
    border-radius: 32px 32px 0 0;
    background: var(--surface);
}

@media (max-width: 1023px) {
    .hero__bar { padding: 14px 16px 0; gap: 12px; }
    .hero__head { left: 20px; right: 20px; bottom: 40px; }
    .sheet { padding: 28px 20px 60px; }
}

@media (max-width: 759px) {
    .hero { height: 400px; }
    .hero--short { height: 250px; }
    .hero__nav { display: none; }
    .hero__bar .logo__mark { height: 38px; }
    .tool__btn, .tool__face { width: 44px; height: 44px; }
    .tool__face { width: 48px; height: 48px; }
    .hero__title { font-size: 30px; }
    .hero__lead { font-size: 12px; }
    /* подпись «на чем остановились» на телефоне лишняя — то же видно в ленте */
    .hero__note { display: none; }
    .hero__go { flex-direction: column; align-items: flex-start; gap: 10px; }
    .gobtn { height: 60px; font-size: 19px; padding: 0 10px 0 22px; }
    .gobtn .path__ring { width: 40px; height: 40px; }
    .hero__note { font-size: 12px; }
    .sheet { margin-top: -28px; padding: 22px 16px 40px; border-radius: 26px 26px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__photo { transform: none; }
}

.home-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr);
}

.home-main,
.home-side { width: 100%; max-width: 520px; margin: 0 auto; }

@media (min-width: 1024px) {
    .home-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 470px) minmax(0, 1fr);
        align-items: start;
    }
    .home-main { grid-column: 2; max-width: none; }
    .home-side { grid-column: 3; justify-self: end; max-width: 300px; margin: 0; }
}

/* вкладки: «Активные · 5  Завершенные · 12» на главной, разделы в отчетах */
.sheet-tabs { display: flex; gap: 20px; padding: 0 6px 16px; }

.sheet-tabs a,
.sheet-tabs button {
    appearance: none;
    margin: 0;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease;
}

.sheet-tabs a:hover { color: var(--text); }

.sheet-tabs [aria-selected="true"],
.sheet-tabs [aria-current="page"] { color: var(--text); font-weight: 600; }
.home-panel[hidden] { display: none; }

/* карточка курса: обложка, прогресс и кнопка «Продолжить» */
.lcard {
    display: block;
    padding: 18px 22px 20px;
    border-radius: 24px;
    background: var(--bg);
    color: inherit;
    text-decoration: none;
}

.lcard + .lcard { margin-top: 14px; }

.lcard__flag {
    display: table;
    margin: 0 auto 16px;
    padding: 5px 13px;
    border-radius: 100px;
    background: rgb(var(--tint) / .07);
    font-size: 13px;
}

.lcard__cover {
    display: block;
    width: min(260px, 64%);
    aspect-ratio: 16 / 9;
    margin: 0 auto 20px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--accent-soft);
}

:is(.lcard__cover, .dcard__cover, .ccard__cover):not(.cover-blank) { box-shadow: 0 0 0 1px rgb(var(--tint) / .06); }

/* материалу нечего показать обложкой — белая плашка с серым значком */
.cover-blank {
    display: grid;
    place-items: center;
    background: var(--surface);
    color: var(--muted);
}

.cover-blank .type-icon { width: 17%; min-width: 22px; height: auto; }

.lcard__kind { display: block; color: var(--muted); font-size: 13px; }

.lcard__title {
    display: block;
    margin: 4px 0 10px;
    font-size: 19px;
    font-weight: 550;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.lcard__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 13px;
}

.lcard__percent { flex: none; font-variant-numeric: tabular-nums; }

.lcard__bar {
    display: block;
    height: 3px;
    margin: 8px 0 18px;
    border-radius: 3px;
    background: rgb(var(--tint) / .1);
    overflow: hidden;
}

.lcard__bar > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }

.lcard__go { display: flex; align-items: center; gap: 14px; }

.lcard__play {
    flex: none;
    width: 56px;
    height: 38px;
    display: grid;
    place-items: center;
    padding-left: 3px;
    border-radius: 100px;
    background: var(--accent);
    color: #fff;
    transition: background-color .2s ease;
}

/* наведение на любую точку карточки оживляет ее кнопку — см. «Кнопки с бликом» */

.lcard__action { display: flex; flex-direction: column; min-width: 0; }
.lcard__action-title { font-size: 14px; font-weight: 550; }

.lcard__action-sub {
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* пройденный курс — строкой с маленькой обложкой */
.dcard {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    background: var(--bg);
    color: inherit;
    text-decoration: none;
    transition: background-color .2s ease;
}

.lcard + .dcard { margin-top: 14px; }
.dcard + .dcard { margin-top: 10px; }
.dcard:hover { background: rgb(var(--tint) / .055); }

/* display не задаем: у заглушки он свой, grid, чтобы значок встал по центру */
.dcard__cover {
    width: 112px;
    aspect-ratio: 16 / 9;
    border-radius: 9px;
    object-fit: cover;
}

.dcard__body { display: block; min-width: 0; }
.dcard__kind { display: block; color: var(--muted); font-size: 12.5px; }
.dcard__title { display: block; margin: 2px 0 4px; font-size: 15px; font-weight: 550; line-height: 1.3; }
.dcard__status { display: block; color: var(--success); font-size: 13px; }

.dcard__meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 12.5px;
}

.dcard__bar { margin: 6px 0 2px; }

.home-empty {
    padding: 36px 24px;
    border-radius: 24px;
    background: var(--bg);
    text-align: center;
}

.home-empty h2 { font-size: 18px; }
.home-empty p { color: var(--muted); font-size: 14px; }

/* общий прогресс — круг с процентом */
.path {
    padding: 26px 22px 28px;
    border: 1px solid var(--border);
    border-radius: 24px;
    text-align: center;
}

.path__ring { position: relative; width: 108px; height: 108px; margin: 0 auto 12px; }
.path__ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.path__track { fill: none; stroke: rgb(var(--tint) / .08); stroke-width: 7; }
/* дуга залита градиентом из ring.html; в CSS цвет задавать нельзя — он перебьет заливку */
.path__arc { fill: none; stroke: url(#ring-gradient); stroke-width: 7; stroke-linecap: round; }

.path__value {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.path__label { color: var(--muted); font-size: 13px; }
.path__title { margin-top: 4px; font-size: 19px; font-weight: 550; line-height: 1.3; }
.path__note { margin-top: 2px; color: var(--muted); font-size: 13px; }

/* опрос со сроком — темная карточка под прогрессом */
.pulse {
    display: block;
    margin-top: 14px;
    padding: 18px 20px 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
    color: #fff;
    text-decoration: none;
}

.pulse__top { display: flex; align-items: center; justify-content: space-between; }

.pulse__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--accent);
}

.pulse__go {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    transition: color .2s ease;
}

.pulse:hover .pulse__go { color: #fff; }
.pulse__text { display: block; margin-top: 20px; font-size: 17px; font-weight: 550; line-height: 1.3; }

@media (max-width: 759px) {
    .hero { height: 236px; }
    .hero__bar { display: flex; justify-content: space-between; width: calc(100% - 20px); margin-top: 10px; padding: 5px 5px 5px 16px; }
    .hero__bar .logo { margin-left: 0; }
    .hero__nav { display: none; }
    .hero__avatar { width: 34px; height: 34px; font-size: 12px; }
    .hero__title { bottom: 52px; gap: 10px; font-size: 26px; }
    .hero__title .avatar { width: 34px; height: 34px; font-size: 12px; }

    .sheet { margin-top: -28px; padding: 18px 14px 36px; border-radius: 26px 26px 0 0; }
    .home-grid { gap: 18px; }
    .lcard { padding: 14px 16px 18px; border-radius: 20px; }
    .lcard__cover { width: 60%; margin-bottom: 16px; }
    .lcard__title { font-size: 17px; }
    .dcard { grid-template-columns: 88px minmax(0, 1fr); }
    .dcard__cover { width: 88px; }
}

/* ------------------------------------------------------------------ отчеты */

/* Та же шапка и шторка, что на главной, только ниже: в отчетах важнее цифры.
   Сверху вкладки между отчетами, под ними плитки с главными цифрами, дальше
   таблица на сером фоне. На телефоне строка таблицы складывается: название,
   под ним короткая сводка и полоска. */

.hero--short { height: 280px; }

.report { max-width: 1280px; margin: 0 auto; }

.report-bar {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.report-bar .sheet-tabs { padding-bottom: 0; }

.report-bar__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 100px;
    box-shadow: inset 0 0 0 1px var(--border-strong);
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.report-bar__action:hover { background: #000; box-shadow: none; color: #fff; }

.report-title { margin: 22px 6px 4px; font-size: 24px; font-weight: 600; letter-spacing: -.015em; }
.report-lead { margin: 0 6px 20px; color: var(--muted); font-size: 14px; }
.report-lead--after { margin: 12px 6px 0; }

.report-subtitle { margin: 34px 6px 14px; font-size: 19px; font-weight: 600; }
.report-subtitle span { color: var(--muted); font-weight: 400; }

/* плитки с главными цифрами */
.kpis {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin-bottom: 14px;
}

.kpi { padding: 20px 22px; border-radius: 24px; background: var(--bg); }

.kpi__value {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.kpi__value--warning { color: var(--warning); }
.kpi__value--danger { color: var(--danger); }
.kpi__label { margin-top: 4px; color: var(--muted); font-size: 13px; }
.kpi__title { margin-top: 2px; font-size: 18px; font-weight: 550; line-height: 1.25; }

.kpi--ring {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border);
}

.kpi--ring .path__ring { flex: none; width: 84px; height: 84px; margin: 0; }
.kpi--ring .path__value { font-size: 19px; }
.kpi--ring .kpi__label:first-child { margin-top: 0; }
.kpis .pulse { margin-top: 0; }
.kpis .pulse__text { margin-top: 16px; font-size: 16px; }

/* таблица на сером фоне */
.rtable { padding: 6px 10px 10px; border-radius: 24px; background: var(--bg); }

.rtable__row {
    display: grid;
    grid-template-columns: var(--rtable-cols);
    gap: 18px;
    align-items: center;
    padding: 12px;
    border-top: 1px solid rgb(var(--tint) / .07);
    font-size: 14px;
}

.rtable__head { border-top: 0; color: var(--muted); font-size: 12.5px; }
.rtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.rtable__name { min-width: 0; }
.rtable__name a { color: inherit; text-decoration: none; }
.rtable__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rtable__kind { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.rtable__sub { display: none; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.rtable__extra { min-width: 0; color: var(--muted); font-size: 13px; }
.rtable__empty { padding: 28px 12px; color: var(--muted); text-align: center; }

.rtable--discipline { --rtable-cols: minmax(0, 2fr) repeat(3, minmax(64px, .5fr)) minmax(160px, 1.4fr); }
.rtable--materials { --rtable-cols: minmax(0, 2.6fr) repeat(3, minmax(76px, .5fr)) minmax(160px, 1.3fr); }
.rtable--engagement { --rtable-cols: minmax(0, 2fr) repeat(4, minmax(64px, .45fr)) minmax(160px, 1.3fr); }
.rtable--people { --rtable-cols: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 96px; }

.rtable__meter { display: flex; align-items: center; gap: 10px; }

.meter {
    flex: 1;
    display: flex;
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: rgb(var(--tint) / .1);
}

.meter > span { display: block; height: 100%; background: var(--accent); }
.meter > .is-good { background: var(--success); }
.meter > .is-stale { background: var(--warning); }
.meter > .is-never { background: var(--danger); }
.meter--stack { height: 6px; }

.rtable__percent { flex: none; min-width: 38px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }

/* легенда к полоскам «Кто заходит» */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 6px 14px; color: var(--muted); font-size: 13px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; }
.legend .is-good { background: var(--success); }
.legend .is-stale { background: var(--warning); }
.legend .is-never { background: var(--danger); }

@media (max-width: 759px) {
    .hero--short { height: 196px; }

    /* вкладки не помещаются в строку — листаются пальцем, полоса прокрутки не видна */
    .report-bar .sheet-tabs {
        width: calc(100% + 28px);
        margin: 0 -14px;
        padding: 4px 20px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .report-bar .sheet-tabs::-webkit-scrollbar { display: none; }

    .report-title { margin-top: 16px; font-size: 21px; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kpi { padding: 16px; border-radius: 20px; }
    .kpi__value { font-size: 28px; }
    .kpi--ring, .kpis .pulse { grid-column: 1 / -1; }

    .rtable { padding: 2px 6px 6px; border-radius: 20px; }
    .rtable__row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 10px; }
    .rtable__head { display: none; }
    .rtable__head + .rtable__row { border-top: 0; }
    .rtable__row > .num,
    .rtable__row > .rtable__extra { display: none; }
    .rtable__sub { display: block; }
}

/* заголовок отчета: слева название и пояснение, справа выгрузка */
.report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.report-head__text { min-width: 0; }
.report-head .report-title { margin-top: 2px; }
.report-head .report-lead { margin-bottom: 0; }
.report-head .report-bar__action { flex: none; margin-top: 4px; }
.report-lead a { color: var(--text); }
.report-shell .report { max-width: none; }

@media (max-width: 759px) {
    .report-head { flex-direction: column; }
    .report-head .report-bar__action { margin-top: 0; }
}

/* ------------------------------------------------------------------ курс и траектория */

/* Название курса стоит в шапке. Длинное переносится не больше чем на три строки,
   иначе на телефоне упрется в верхнюю панель. */
.hero__text {
    display: -webkit-box;
    overflow: hidden;
    text-align: center;
    text-wrap: balance;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.hero--short .hero__title { font-size: 30px; line-height: 1.15; }

.program { max-width: 560px; margin: 0 auto; }

.program__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
    margin: 0 6px 14px;
}

.program__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
    transition: color .2s ease;
}

.program__back:hover { color: var(--text); }

.lcard__text { display: block; margin: 6px 0 14px; color: var(--muted); font-size: 14px; }
.lcard__done { display: block; color: var(--success); font-size: 14px; font-weight: 550; }

a.lcard__go { color: inherit; text-decoration: none; }


.program__title { margin: 32px 6px 12px; font-size: 19px; font-weight: 600; }
.program__title span { color: var(--muted); font-weight: 400; }
.program__stage { margin: 22px 6px 10px; color: var(--muted); font-size: 13px; font-weight: 500; }

.dcard__note { display: block; color: var(--muted); font-size: 13px; }

/* закрытый шаг траектории: виден, но приглушен */
.dcard--locked .dcard__title { color: var(--muted); }
.dcard--locked .dcard__cover { filter: grayscale(1); opacity: .6; }

@media (max-width: 759px) {
    .hero--short .hero__title { font-size: 22px; }
    .program__bar { margin-bottom: 10px; }
}

/* ------------------------------------------------------------------ заглушка «скоро перенесем» */

.soon-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 100px;
    background: rgb(var(--tint) / .08);
    color: var(--text);
    font-size: 12px;
    font-weight: 550;
}

.dcard__soon { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }

.soon-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
}

.soon-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgb(12 14 20 / .68);
}

.soon-modal[hidden] { display: none; }

.soon-modal__card,
.soon-card { text-align: center; }

.soon-modal__card {
    width: min(400px, 100%);
    padding: 30px 26px 24px;
    border-radius: 32px;
    background: var(--surface);
    box-shadow: 0 24px 60px rgb(12 14 20 / .28), 0 2px 8px rgb(12 14 20 / .08);
    animation: soon-in .34s cubic-bezier(.32, .72, 0, 1);
}

.soon-modal h2,
.soon-card h2 { margin: 0 0 8px; font-size: 21px; font-weight: 600; }

.soon-modal p,
.soon-card p { margin: 0 0 20px; color: var(--muted); font-size: 15px; }

.soon-modal .btn,
.soon-card .btn { border-radius: 100px; }

.soon-modal .btn { width: 100%; }
.soon-card { padding: 34px 26px 28px; }
.soon-card .soon-card__admin { margin: 18px 0 0; font-size: 13px; }
.soon-card__admin a { color: var(--text); }

body.has-modal { overflow: hidden; }

@keyframes soon-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .soon-modal__card { animation: none; }
}

/* ------------------------------------------------------------------ каталог */

/* Слева разделы, справа курсы карточками. На телефоне разделы уходят в ленту
   над поиском и листаются пальцем. */

.catalog {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.catalog-menu { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; }

.catalog-menu a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    color: var(--muted);
    font-size: 15px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.catalog-menu a:hover { background: var(--bg); color: var(--text); }
.catalog-menu a[aria-current] { background: var(--bg); color: var(--text); font-weight: 600; }
.catalog-menu__count { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.catalog-menu__sep { height: 1px; margin: 10px 14px; background: var(--border); }

.catalog-bar { display: flex; align-items: center; gap: 12px; }

.search { position: relative; flex: 1; margin: 0; }

.search input[type="search"] {
    width: 100%;
    height: 50px;
    padding: 0 48px 0 50px;
    border: 0;
    border-radius: 100px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    transition: background-color .2s ease, box-shadow .2s ease;
}

.search input[type="search"]::placeholder { color: var(--muted); }
.search input[type="search"]:focus { outline: none; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent); }
.search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.search__icon {
    position: absolute;
    top: 50%;
    left: 19px;
    display: grid;
    color: var(--muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.search__key {
    position: absolute;
    top: 50%;
    right: 16px;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--border-strong);
    color: var(--muted);
    font: 12px/1.5 var(--mono);
    text-align: center;
    transform: translateY(-50%);
    pointer-events: none;
}

.search input:focus ~ .search__key,
.search input:not(:placeholder-shown) ~ .search__key { display: none; }


.catalog-count { margin: 16px 6px 12px; color: var(--muted); font-size: 13px; }

.catalog-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.ccard {
    display: flex;
    flex-direction: column;
    padding: 12px 12px 16px;
    border-radius: 22px;
    background: var(--bg);
    color: inherit;
    text-decoration: none;
    transition: background-color .2s ease;
}

/* при наведении подложка темнеет, обводки нет */
.ccard:hover { background: rgb(var(--tint) / .055); }
.ccard[hidden] { display: none; }

.ccard__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 12px;
    border-radius: 12px;
    object-fit: cover;
}

.ccard__title { margin: 2px 0 2px; padding: 0 6px; font-size: 16px; font-weight: 550; line-height: 1.3; }
.ccard__kind { margin-bottom: 12px; padding: 0 6px; color: var(--muted); font-size: 12.5px; }
.ccard__hint { margin: -4px 0 10px; padding: 0 6px; color: var(--text); font-size: 12.5px; }
.ccard__hint[hidden] { display: none; }
.ccard__status { margin-top: auto; padding: 0 6px; color: var(--muted); font-size: 13px; }
.ccard__done { color: var(--success); }
.catalog-empty[hidden] { display: none; }
.drafts .dcard + .dcard { margin-top: 10px; }

/* Окно «Создать материал» в общем стиле: белая карточка со скруглением 32,
   серые строки-острова, галочка вместо радиокнопки, кнопки-пилюли. */
.create-modal .soon-modal__card {
    width: min(540px, 100%);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    text-align: left;
}

.create-modal h2 { margin: 0 0 10px; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.create-modal > form > p { margin: 0 0 20px; color: #b6b6b9; font-size: 14px; line-height: 1.25; }

.type-list { margin: 16px 0 0; overflow: hidden; border-radius: 20px; background: var(--bg); }

.type-row {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 20px;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: background-color .16s ease;
}

.type-row + .type-row { box-shadow: inset 0 1px 0 rgb(0 0 0 / .06); }
.type-row:hover { background: rgb(0 0 0 / .03); }
.type-row input { position: absolute; opacity: 0; pointer-events: none; }

.type-row__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    transition: background-color .2s ease, color .2s ease;
}

.type-row:has(input:checked) .type-row__icon { background: var(--accent); color: #fff; }
.type-row__icon .type-icon { width: 20px; height: 20px; }
.type-row__body { display: flex; flex-direction: column; min-width: 0; }
.type-row__title { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.type-row__hint { margin-top: 2px; color: #b6b6b9; font-size: 13px; line-height: 1.15; }

.type-row__check { color: var(--text); opacity: 0; transition: opacity .16s ease; }
.type-row:has(input:checked) { background: var(--surface); }
.type-row:has(input:checked) .type-row__check { opacity: 1; }
.type-row:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent); }

.create-field { display: block; }

.create-field input {
    width: 100%;
    padding: 18px 20px;
    border: 0;
    border-radius: 20px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 18px;
    letter-spacing: -.02em;
}

.create-field input::placeholder { color: rgb(0 0 0 / .2); }
.create-field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / .18); }

/* кнопки прилипают к низу окна: список способов длинный, листать до них не надо */
.create-actions {
    position: sticky;
    bottom: -24px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 18px -26px -24px;
    padding: 16px 26px 24px;
    background: linear-gradient(to bottom, rgb(255 255 255 / 0) 0, var(--surface) 22%);
}

.create-actions .btn-h { padding: 16px 26px 17px; }

@media (max-width: 899px) {
    .catalog { grid-template-columns: minmax(0, 1fr); gap: 14px; }

    .catalog-menu {
        position: static;
        flex-direction: row;
        gap: 8px;
        margin: 0 -14px;
        padding: 2px 14px 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .catalog-menu::-webkit-scrollbar { display: none; }
    .catalog-menu a { flex: none; padding: 8px 14px; border-radius: 100px; background: var(--bg); font-size: 14px; white-space: nowrap; }
    .catalog-menu a[aria-current] { background: var(--accent); color: #fff; }
    .catalog-menu a[aria-current] .catalog-menu__count { color: rgba(255, 255, 255, .7); }
    .catalog-menu__sep { display: none; }
    .search__key { display: none; }
}

@media (max-width: 559px) {
    .catalog-bar { flex-wrap: wrap; }
    .catalog-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ страницы на шторке */

/* Общая раскладка служебных страниц в новом оформлении: админка, сотрудники,
   проверка, профиль. Карточки и таблицы на белой шторке — серые, без рамок
   и теней, как на главной. */

.sheet-page { max-width: 1080px; margin: 0 auto; }
.sheet-page--narrow { max-width: 680px; }
.sheet-page--wide { max-width: 1280px; }

.page-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 38px;
    margin: 0 6px 16px;
}

.page-bar__lead { margin: 0; color: var(--muted); font-size: 14px; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
    transition: color .2s ease;
}

.back-link:hover { color: var(--text); }

.sheet .card { border: 0; border-radius: 24px; background: var(--bg); box-shadow: none; padding: 20px 22px; }
.sheet .stat { border: 0; border-radius: 20px; background: var(--bg); padding: 18px 20px; }
.sheet .stat__value { font-weight: 600; }
.sheet table th { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sheet table th,
.sheet table td { border-bottom-color: rgb(var(--tint) / .07); }
.sheet tbody tr:hover { background: var(--surface); }

/* кнопки — пилюли; главная — с градиентом и бликом, см. «Кнопки с бликом» */
.btn { border-radius: 100px; padding: 9px 17px; }
.btn--sm { padding: 6px 12px; }

.icon-btn {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: var(--muted);
    transition: background-color .2s ease, color .2s ease;
}

.icon-btn:hover { background: var(--surface); color: var(--text); }
.ui-icon { width: 20px; height: 20px; display: block; }

/* главная админки — как настройки телефона */
.settings-title { margin: 26px 18px 8px; color: var(--muted); font-size: 13px; font-weight: 500; }
.settings-title:first-child { margin-top: 4px; }

.settings-group { overflow: hidden; border-radius: 22px; background: var(--bg); }

.settings-row {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 20px;
    gap: 14px;
    align-items: center;
    min-height: 72px;
    padding: 12px 18px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

.settings-row + .settings-row { box-shadow: inset 0 1px 0 rgb(var(--tint) / .07); }
.settings-row:hover { background: rgb(var(--tint) / .04); }

.settings-row__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
}

.settings-row__icon--alert { background: var(--danger); color: #fff; }
.settings-row__body { display: flex; flex-direction: column; min-width: 0; }
.settings-row__title { font-size: 17px; font-weight: 550; line-height: 1.3; }
.settings-row__note { color: var(--muted); font-size: 13px; line-height: 1.35; }
.settings-row__count { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }

.settings-row__count--alert {
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--danger);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.settings-row__chevron { color: var(--border-strong); }

/* список материалов в админке */
.state-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }

.state-tabs a {
    padding: 7px 14px;
    border-radius: 100px;
    background: var(--bg);
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.state-tabs a span { margin-left: 4px; font-variant-numeric: tabular-nums; }
.state-tabs a:hover { color: var(--text); }
.state-tabs a[aria-current="page"] { background: var(--accent); color: #fff; }
.state-tabs a[aria-current="page"] span { color: rgba(255, 255, 255, .7); }

.content-rows { overflow: hidden; border-radius: 22px; background: var(--bg); }

.content-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px 0 0;
    transition: background-color .2s ease;
}

.content-row + .content-row { box-shadow: inset 0 1px 0 rgb(var(--tint) / .07); }
.content-row:hover { background: rgb(var(--tint) / .04); }

.content-row__main {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 4px 12px 16px;
    color: inherit;
    text-decoration: none;
}

.content-row__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--surface);
    color: var(--muted);
}

.content-row__icon .type-icon { width: 20px; height: 20px; }
.content-row__body { display: flex; flex-direction: column; min-width: 0; }
.content-row__title { overflow: hidden; font-size: 15px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.content-row__note { overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.content-row__actions { display: flex; align-items: center; gap: 4px; flex: none; }

.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 18px; }

.pager a {
    min-width: 36px;
    padding: 6px 10px;
    border-radius: 100px;
    background: var(--bg);
    color: var(--muted);
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}

.pager a[aria-current="page"] { background: var(--accent); color: #fff; }

@media (max-width: 759px) {
    .settings-row { min-height: 64px; padding: 10px 14px; gap: 12px; grid-template-columns: 38px minmax(0, 1fr) auto 18px; }
    .settings-row__icon { width: 38px; height: 38px; border-radius: 11px; }
    .settings-row__title { font-size: 16px; }
    .state-tabs { flex-wrap: nowrap; margin: 14px -14px 4px; padding: 0 14px 4px; overflow-x: auto; scrollbar-width: none; }
    .state-tabs::-webkit-scrollbar { display: none; }
    /* на телефоне строка в три этажа: значок с названием, состояние, кнопки */
    .content-row { flex-wrap: wrap; padding: 0 12px 12px 0; }
    .content-row__main { flex-basis: 100%; grid-template-columns: 36px minmax(0, 1fr); padding: 12px 0 8px 12px; }
    .content-row__title,
    .content-row__note { white-space: normal; }
    .content-row__state { grid-column: 2; }
    .content-row__actions { margin-left: 62px; }
}

/* в отчетах слева меню, колонка уже: плитке с кругом нужна своя ширина,
   иначе подписи рядом с кругом рвутся на пять строк */
@media (min-width: 1100px) {
    .report-shell .kpis { grid-template-columns: 300px repeat(auto-fit, minmax(160px, 1fr)); }
}

/* заголовок внутри страницы на шторке — в шапке уже стоит раздел */
.page-title { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -.015em; }

/* страница материала на шторке */
.player-page { max-width: 820px; }
.player-page .player { max-width: none; }
.player-page:has(.labeled) { max-width: 1180px; }
.player__bar { margin: 0 0 12px; }
.player__bar .player__kicker { flex: 1; margin: 0; }
.player__edit { margin-left: auto; }
.player__lead { margin: 0 6px 18px; color: var(--muted); font-size: 15px; }
.sheet .player__frame { border: 0; border-radius: 20px; }

/* верхняя панель на рабочих страницах без фотографии (конструкторы, редактор):
   пункты меню — пилюли, как в шапке с фотографией */
.topnav a { padding: 8px 14px; border-radius: 100px; }
.topnav a.is-active { background: var(--accent); color: #fff; }
.topnav a.is-active:hover { background: #000; color: #fff; }

/* ------------------------------------------------------------------ конструкторы */

/* Та же шторка, что у остальных страниц. Слева содержимое материала — серый блок,
   внутри белые карточки блоков; шапка блока с «Сохранить» прилипает к верху при
   прокрутке длинного лонгрида или диалога. Справа карточка материала. */

.builder-bar { margin-bottom: 18px; }
.builder-bar__meta { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; color: var(--muted); font-size: 14px; }
.builder-bar__actions { display: inline-flex; gap: 8px; }

.builder-page .builder { gap: 20px; }
@media (min-width: 1000px) {
    .builder-page .builder { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}
.builder-page .builder__side { top: 20px; display: flex; flex-direction: column; gap: 14px; }
.builder-page .builder__side .card + .card { margin-top: 0; }

/* поля форм на шторке: без рамок, на сером — белые, в белой карточке — серые */
.sheet :is(input[type=text], input[type=number], input[type=date], input[type=datetime-local],
    input[type=url], input[type=password], select, textarea) {
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: none;
}

.sheet :is(input, select, textarea):focus { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.sheet .block :is(input[type=text], input[type=number], input[type=url], select, textarea) { background: var(--bg); }
.sheet label { font-size: 12.5px; font-weight: 500; }

.builder__main .card > .card__head {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: -20px -22px 16px;
    padding: 16px 22px 12px;
    border-radius: 24px 24px 0 0;
    background: var(--bg);
}

.builder__main .card__head h2 { font-size: 19px; font-weight: 600; }

.sheet .block {
    padding: 14px 16px 6px;
    border: 0;
    border-radius: 16px;
    background: var(--surface);
    box-shadow: none;
}

.sheet .block__kind { padding: 3px 10px; background: var(--bg); color: var(--text); font-weight: 600; }
.sheet .add-bar { gap: 8px; margin-top: 14px; }
.sheet .add-bar .btn { background: var(--surface); border-color: transparent; }
.sheet .add-bar .btn:hover { background: var(--accent); color: #fff; }

/* карточка материала справа */
.card-form__title { margin: 0 0 14px; font-size: 17px; font-weight: 600; }
.card-form__note { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; }
.card-form__note a { color: var(--text); }
.card-form__note--danger { color: var(--danger, #c0392b); }
/* обложка в карточке материала: как она выглядит в каталоге, 4:3 */
.cover-field__preview {
    display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 8px;
    border-radius: 12px; overflow: hidden; background: rgb(var(--tint, 0 0 0) / .04);
    color: var(--muted); font-size: 13px;
}
.cover-field__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-field__pick { position: relative; cursor: pointer; }
/* сам выбор файла прячем под кнопку, но оставляем доступным с клавиатуры */
.cover-field__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cover-field__pick:focus-within { outline: 2px solid var(--accent, #1b1f86); outline-offset: 2px; }
.cover-field__remove { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 13px; }

.switch { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 16px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }

.switch__track {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    border-radius: 100px;
    background: var(--border-strong);
    transition: background-color .2s ease;
}

.switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s ease;
}

.switch input:checked + .switch__track { background: var(--success); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--accent-soft); }
.switch__text { display: flex; flex-direction: column; color: var(--text); font-size: 14px; font-weight: 550; }
.switch__text span { color: var(--muted); font-size: 12.5px; font-weight: 400; }

.builder__delete { margin: 0; text-align: center; }

.builder__delete button {
    padding: 8px 12px;
    border: 0;
    border-radius: 100px;
    background: none;
    color: var(--danger);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.builder__delete button:hover { background: var(--danger-soft); }

@media (max-width: 759px) {
    .builder-bar__meta { order: 3; width: 100%; }
    .builder__main .card > .card__head { margin: -20px -16px 14px; padding: 14px 16px 10px; }
    .sheet .card { padding: 20px 16px; }
}

/* список «Добавить материал» в конструкторе курса и траектории */
.sheet .picker { border: 0; border-radius: 16px; background: var(--surface); }
.sheet .picker__item { border-bottom-color: rgb(var(--tint) / .07); }
.sheet .picker__item:hover { background: var(--bg); }
.sheet .picker__item .btn { background: var(--bg); border-color: transparent; }

/* ------------------------------------------------------------------ траектория на главной */

/* Главная одной лентой: траектории по этапам, потом «Другие курсы». Текущий шаг —
   большой карточкой внутри своего этапа, пройденные и будущие этапы свернуты.
   Отдельной страницы траектории у сотрудника нет — все здесь. */

.home-section { scroll-margin-top: 20px; }
.home-section + .home-section { margin-top: 48px; }
.home-section__head { margin: 0 6px 14px; }
.home-section__title,
.catalog-group__title { margin: 0; font-size: 34px; font-weight: 650; letter-spacing: -.025em; line-height: 1.1; }
@media (max-width: 759px) {
    .home-section__title,
    .catalog-group__title { font-size: 27px; }
}


@media (prefers-reduced-motion: no-preference) {
    html:has([data-spy-menu]) { scroll-behavior: smooth; }
}

.lcard__link { color: inherit; text-decoration: none; }
a.lcard__title:hover { text-decoration: underline; text-underline-offset: 3px; }

.home-empty + .stages { margin-top: 18px; }
.stage + .stage { margin-top: 10px; }
.stage__rows + .lcard,
.lcard + .stage__rows { margin-top: 10px; }

.stage__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 6px;
    cursor: pointer;
    list-style: none;
}

.stage__head::-webkit-details-marker { display: none; }
.stage__title { font-size: 16px; font-weight: 600; }
.stage__title::after { content: "›"; display: inline-block; margin-left: 8px; color: var(--muted); transition: transform .2s ease; }
.stage[open] .stage__title::after { transform: rotate(90deg); }
.stage__note { color: var(--muted); font-size: 13px; }

@media (max-width: 559px) {
    /* на телефоне подпись этапа под названием, иначе «откроются позже» рвет заголовок */
    .stage__head { flex-direction: column; align-items: flex-start; gap: 2px; }
}

.stage__rows { overflow: hidden; border-radius: 18px; background: var(--bg); }

.stage-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    color: inherit;
    text-decoration: none;
    transition: background-color .2s ease;
}

.stage-row + .stage-row { box-shadow: inset 0 1px 0 rgb(var(--tint) / .07); }
.stage-row:hover { background: rgb(var(--tint) / .04); }
.stage-row__body { display: flex; flex-direction: column; min-width: 0; }
.stage-row__title { font-size: 15px; font-weight: 550; line-height: 1.3; }
.stage-row__kind { color: var(--muted); font-size: 12.5px; }
.stage-row__state { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

.stage-row__mark {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.stage-row__mark--done { background: var(--success); color: #fff; }
.stage-row__mark--going { box-shadow: inset 0 0 0 6px var(--accent); }
.stage-row__mark--new { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.stage-row__mark--locked { color: var(--muted); }
.stage-row.is-locked .stage-row__title { color: var(--muted); }

.path + .path { margin-top: 14px; }

/* меню на главной — как в каталоге: у левого края, прилипает при прокрутке.
   На узком экране — лентой над разделами */
@media (min-width: 1024px) {
    .home-grid--menu .home-menu { grid-column: 1; grid-row: 1; justify-self: start; width: min(290px, 100%); }
    .home-menu a > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 1023px) {
    .home-menu {
        position: static;
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        padding: 2px 0 6px;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .home-menu::-webkit-scrollbar { display: none; }
    .home-menu a { flex: none; padding: 8px 14px; border-radius: 100px; background: var(--bg); font-size: 14px; white-space: nowrap; }
    .home-menu a[aria-current] { background: var(--accent); color: #fff; }
    .home-menu a[aria-current] .catalog-menu__count { color: rgba(255, 255, 255, .7); }
}

/* стопка под обложкой курса, в котором несколько материалов */
.cover-stack { position: relative; display: block; }
.cover-stack::before,
.cover-stack::after {
    content: "";
    position: absolute;
    left: 7%;
    right: 7%;
    height: 16px;
    border-radius: 10px;
    background: rgb(var(--tint) / .12);
}
.cover-stack::before { top: -6px; }
.cover-stack::before,
.cover-stack::after { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.dcard:hover .cover-stack::before { transform: translateY(-3px); }
.dcard:hover .cover-stack::after { transform: translateY(-6px); }
.cover-stack::after { top: -11px; left: 14%; right: 14%; background: rgb(var(--tint) / .07); }
.cover-stack > * { position: relative; z-index: 1; }
.cover-stack--lcard__cover { width: min(260px, 64%); margin: 12px auto 20px; }
.cover-stack--lcard__cover .lcard__cover { width: 100%; margin: 0; }
.cover-stack--dcard__cover { width: 112px; margin-top: 8px; }
.cover-stack--dcard__cover .dcard__cover { width: 100%; }
@media (max-width: 759px) {
    .cover-stack--lcard__cover { width: 60%; }
    .cover-stack--dcard__cover { width: 88px; }
}

/* ------------------------------------------------------------------ баллы и достижения */

/* Медаль достижения: лента, объемный ободок, рисунок в центре. Полученная — золотая
   с ореолом, не полученная — серебристая. Градиенты — в partials/medals.html. */
.medal-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.medal { flex: none; display: inline-block; width: 44px; line-height: 0; }
.medal svg { display: block; width: 100%; height: auto; overflow: visible; }
.medal--sm { width: 36px; }
.medal__halo { fill: none; stroke: #f6a72a; stroke-opacity: .5; stroke-width: 1.2; }
.medal__shine { fill: none; stroke: #fff; stroke-opacity: .75; stroke-width: 1.3; stroke-linecap: round; }
.medal__glyph { fill: none; stroke: #a4560a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.medal.is-locked .medal__glyph { stroke: #adadad; }

/* виджет на главной — как на референсе: без карточки, заголовок со счетчиком,
   строка про баллы и медали в ряд. При наведении проступает подложка */
.awards {
    display: block;
    margin-top: 16px;
    padding: 14px 14px 16px;
    border-radius: 20px;
    color: inherit;
    text-decoration: none;
    transition: background-color .2s ease;
}

.awards:hover { background: var(--bg); }
.awards__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.awards__title { font-size: 16px; font-weight: 600; }
.awards__count { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.awards__note { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.awards__row { display: flex; justify-content: space-between; gap: 4px; margin-top: 14px; }
.awards__row .medal { flex: 0 1 38px; width: auto; min-width: 0; }

/* профиль: все достижения плиткой */
.medal-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }

.medal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px 14px;
    border-radius: 18px;
    background: var(--surface);
    text-align: center;
}

.medal-card__title { font-size: 14px; font-weight: 600; line-height: 1.25; }
.medal-card__note { color: var(--muted); font-size: 12px; line-height: 1.3; }
.medal-card.is-locked .medal-card__title { color: var(--muted); }
.medal-card__left { margin-top: -4px; color: var(--muted); font-size: 12px; opacity: .8; }

/* админка: сколько баллов за какой вид материала */
.points-saved { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: var(--success-soft); color: var(--success); font-size: 14px; }
.points-switch { margin: 0; padding: 16px 18px; }

.points-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 14px;
    align-items: center;
    min-height: 68px;
    padding: 12px 18px;
    color: inherit;
    text-decoration: none;
}

.points-row + .points-row,
.points-switch + .points-row { box-shadow: inset 0 1px 0 rgb(var(--tint) / .07); }
.points-row__body { display: flex; flex-direction: column; min-width: 0; }
.points-row__title { font-size: 16px; font-weight: 550; line-height: 1.3; }
.points-row__note { color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.35; }
.sheet .points-row input[type=number] { width: 100%; font-size: 17px; font-weight: 600; text-align: right; }
.points-row--award { grid-template-columns: 44px minmax(0, 1fr) auto; }
.points-row--link { grid-template-columns: minmax(0, 1fr) auto; transition: background-color .2s ease; }
.points-row--link:hover { background: rgb(var(--tint) / .04); }
.points-row__count { color: var(--muted); font-size: 13px; white-space: nowrap; }
.settings-note { margin: 10px 18px 16px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.points-submit { margin-left: 6px; border-radius: 100px; }
.points-field .card-form__note { margin-top: 6px; }

/* Большая карточка курса: обложки его материалов пачкой. Верхняя раз в несколько
   секунд уезжает вниз, следующая выходит вперед (app.js). Позиция листа в пачке —
   data-pos: 0 спереди, дальше глубже; начиная с третьего листы спрятаны. */
.flip-stack { position: relative; display: block; width: min(260px, 64%); aspect-ratio: 16 / 9; margin: 24px auto 20px; }

.flip-stack__card {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: var(--surface);
    object-fit: cover;
    box-shadow: 0 1px 2px rgb(var(--tint) / .06), 0 8px 18px rgb(var(--tint) / .08);
    opacity: 0;
    transform: translateY(-24px) scale(.8);
    transform-origin: 50% 0;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .6s ease, filter .6s ease;
}

.flip-stack__card[data-pos="0"] { z-index: 3; opacity: 1; transform: none; }
.flip-stack__card[data-pos="1"] { z-index: 2; opacity: 1; transform: translateY(-9px) scale(.93); filter: brightness(.95); }
.flip-stack__card[data-pos="2"] { z-index: 1; opacity: 1; transform: translateY(-17px) scale(.86); filter: brightness(.9); }
.flip-stack__card.is-leaving { z-index: 4; animation: flip-stack-leave .65s cubic-bezier(.5, 0, .75, 0) forwards; }

@keyframes flip-stack-leave {
    to { opacity: 0; transform: translateY(26px) rotate(-5deg) scale(.96); }
}

@media (max-width: 759px) {
    .flip-stack { width: 60%; }
}

/* ------------------------------------------------------------------ каталог лентой */

/* Разделы под крупными заголовками, число курсов рядом мелко. Пустые после
   поиска прячутся, их пункты в меню бледнеют. */
.catalog-group { margin-top: 20px; scroll-margin-top: 20px; }
.catalog-group + .catalog-group,
.catalog-empty + .catalog-group { margin-top: 52px; }
.catalog-group[hidden] { display: none; }
.catalog-group__title { margin: 0 6px 16px; }
.catalog-group__lead { margin: -8px 6px 16px; color: var(--muted); font-size: 14px; }
.catalog-menu a.is-empty { opacity: .4; }
.catalog-count { margin-bottom: 0; }
.catalog-count[hidden] { display: none; }

/* пачка в карточке каталога: листы выглядывают над обложкой в пределах отступа */
.flip-stack--card { width: 100%; margin: 0 0 12px; }
.flip-stack--card .flip-stack__card[data-pos="1"] { transform: translateY(-6px) scale(.94); }
.flip-stack--card .flip-stack__card[data-pos="2"] { transform: translateY(-11px) scale(.88); }
.flip-stack--card .flip-stack__card { box-shadow: 0 0 0 1px rgb(var(--tint) / .06), 0 6px 14px rgb(var(--tint) / .07); }

.cover-stack--ccard__cover { width: 100%; margin-bottom: 12px; }
.cover-stack--ccard__cover .ccard__cover { margin-bottom: 0; }
.cover-stack--ccard__cover::before { top: -5px; }
.cover-stack--ccard__cover::after { top: -9px; }
.ccard:hover .cover-stack::before { transform: translateY(-2px); }
.ccard:hover .cover-stack::after { transform: translateY(-4px); }

/* «Создать» — плавающая кнопка внизу по центру экрана */
.fab-create {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 54px;
    padding: 0 26px 0 22px;
    border-radius: 100px;
    font-size: 16px;
    box-shadow: 0 14px 34px rgb(var(--tint) / .24);
    transform: translateX(-50%);
}

.catalog-main:has(~ .fab-create),
.catalog:has(~ .fab-create) { padding-bottom: 60px; }

@media (max-width: 759px) {
    .fab-create { bottom: calc(86px + env(safe-area-inset-bottom)); height: 50px; }
}

/* ------------------------------------------------------------------ теги и кнопки */

/* Теги «Активные 20 · Завершенные 3» — переключают список под собой */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 6px 14px; }

.chip-tag {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 15px;
    border: 0;
    border-radius: 100px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 550;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.chip-tag span { color: var(--muted); font-weight: 450; font-variant-numeric: tabular-nums; transition: color .2s ease; }
.chip-tag:hover { background: rgb(var(--tint) / .07); }
.chip-tag[aria-selected="true"] { background: var(--accent); color: #fff; }
.chip-tag[aria-selected="true"] span { color: rgb(255 255 255 / .7); }

/* Главные кнопки: плоский фирменный синий, без градиента и блика. Синий на
   платформе — знак «здесь нажимают», и он должен читаться одинаково на кнопке,
   на полосе пройденного и на выбранном пункте. У карточки урока по наведению
   вперед сдвигается стрелка «плей» — этого движения достаточно. */
.lcard__play,
.btn--primary {
    position: relative;
    border-color: transparent;
    background: var(--accent);
    box-shadow: none;
    transition: background-color .18s ease;
}

.lcard__play svg { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }

.btn--primary:hover,
.lcard:hover .lcard__play,
a.lcard__go:hover .lcard__play,
a.lcard__go:focus-visible .lcard__play { border-color: transparent; background: var(--accent-strong); }
.lcard:hover .lcard__play svg,
a.lcard__go:hover .lcard__play svg { transform: translateX(2px); }

/* плавающая «Создать» остается прибитой к низу экрана и держит положение при наведении */
.fab-create { position: fixed; }
.fab-create:hover { transform: translateX(-50%) translateY(-1px); }

/* фото в аватарке — кружком на всю площадь */
.avatar { overflow: hidden; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ обзор отчетов для директора */

/* Главная цифра крупным кругом, рядом — что за ней стоит. Ниже две карточки «где
   отстают», список людей и курсы, которые идут хуже всего. */
.brief {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 22px 26px;
    border-radius: 28px;
    background: var(--bg);
}

.brief__main { display: flex; align-items: center; gap: 22px; min-width: 0; }
.brief__main .path__ring { flex: none; width: 116px; height: 116px; margin: 0; }
.brief__main .path__value { font-size: 26px; }
.brief__title { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.brief__note { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.45; }

.brief__alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 100px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 14px;
    font-weight: 550;
    text-decoration: none;
    transition: background-color .2s ease;
}

.brief__alert:hover { background: rgb(163 58 58 / .16); }

.brief-grid { display: grid; gap: 14px; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.brief-card { padding: 18px 20px 12px; border-radius: 24px; background: var(--bg); }
.brief-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.brief-card__head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.brief-card__head a { color: var(--muted); font-size: 13px; text-decoration: none; }
.brief-card__head a:hover { color: var(--text); }

.lag-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
    margin: 0 -10px;
    padding: 10px;
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: background-color .2s ease;
}

a.lag-row:hover { background: rgb(var(--tint) / .045); }
.lag-row + .lag-row { box-shadow: inset 0 1px 0 rgb(var(--tint) / .06); }
.lag-row__name { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.lag-row__nums { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.lag-row .meter { align-self: center; }
.lag-row__percent { font-size: 13px; font-weight: 550; text-align: right; font-variant-numeric: tabular-nums; }
.lag-list__empty { margin: 8px 0 12px; color: var(--muted); font-size: 14px; }

.brief-section { margin-top: 8px; }
.brief-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.brief-filter select { min-width: 220px; }
.brief-card--wide { margin-top: 26px; }

.rtable--open { --rtable-cols: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr) 110px; }
.rtable--open .rtable__row--overdue { --rtable-cols: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr) 110px 96px; }
.rtable .is-late { color: var(--danger); font-weight: 600; }

@media (max-width: 759px) {
    .brief { padding: 18px; }
    .brief__main .path__ring { width: 92px; height: 92px; }
    .brief__title { font-size: 18px; }
    .brief-filter select { min-width: 0; width: 100%; }
    .brief-filter { width: 100%; }
}

/* полоса предпросмотра над плеером презентации */
.deck__preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 20px;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 #eee;
    background: var(--surface);
    color: var(--muted);
    font-size: 15px;
    letter-spacing: -.02em;
}

/* редактор и предпросмотр — без шапки платформы: полотно от самого верха экрана */
main.editor-page { padding: 0; }
.deck--rich[data-preview="1"] { inset: 0; }


/* ------------------------------------------------------------------ учеба лентой */

/* Все назначенное одним списком: заголовок курса, под ним его материалы.
   Карточка материала — серый остров без рамок и теней, обложка справа.
   Справа колонка достижений: картинка, название, подпись. */

/* по бокам еще 30 к отступу шторки — вместе дают талию в 60, как в макете */
.feed { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); max-width: 1440px; margin: 0 auto; padding: 0 30px; }

@media (min-width: 1000px) {
    .feed { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
}

.fgroup { margin-bottom: 44px; }

/* заголовок группы прилипает к верху, пока листаем ее уроки; белая подложка
   внизу уходит в прозрачность, чтобы карточки не обрубались резкой кромкой */
.fgroup__head {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 20px 0 26px;
    background: linear-gradient(to bottom,
        var(--surface) 0,
        var(--surface) 62%,
        rgb(255 255 255 / .55) 82%,
        rgb(255 255 255 / 0) 100%);
}

.fgroup__note { margin: -18px 0 18px; color: #b6b6b9; font-size: 14px; }

.fgroup__title {
    margin: 0;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.7px;
}


.frow {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 20px;
    min-height: 206px;
    margin-bottom: 14px;
    padding: 26px 30px;
    border-radius: 24px;
    background: var(--bg);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: background-color .2s ease;
}

.frow:hover { background: rgb(var(--tint) / .07); }

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

.frow__title {
    max-width: 20ch;
    font-size: clamp(21px, 2.2vw, 28px);
    font-weight: 400;
    line-height: 1.05;
}

.frow__note { margin-top: 8px; color: #b6b6b9; font-size: 13px; line-height: 1.15; }

.frow__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 6px;
    border-radius: 20px;
    background: rgb(0 0 0 / .15);
    -webkit-backdrop-filter: blur(32px);
    backdrop-filter: blur(32px);
    color: #fff;
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
}

.chip svg { width: 10px; height: 10px; }

/* дедлайн: близкий — оранжевый, просроченный — красный, как в Хелпере */
.chip--soon { background: rgb(255 153 0 / .1); color: #f90; }

/* «Принято» — заливка градиентом и белый текст, как статус done в Хелпере */
.chip--done {
    padding: 7px 10px;
    background: linear-gradient(95deg, #4bfb2e -2.23%, #1fda97 40.4%, #47cbd3 73.79%, #1dccf2 101.06%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #fff;
}

.chip--late { background: rgb(255 76 65 / .1); color: #ff4c41; }

.frow__cover {
    flex: none;
    align-self: stretch;
    width: clamp(180px, 30%, 290px);
    margin: -26px -30px -26px 0;
    object-fit: cover;
    object-position: 50% 50%;
}

.frow__cover--blank { display: grid; place-items: center; color: #c9ccd6; font-size: 40px; }
.frow__cover--blank svg { width: 46px; height: 46px; }

.frow.is-done .frow__title,
.frow.is-done .frow__cover { opacity: .55; }
.frow.is-locked .frow__title { color: var(--muted); }
.frow.is-locked .frow__cover { filter: grayscale(1); opacity: .5; }

.fgroup--done { margin-bottom: 26px; }

.fdone { margin-top: 10px; }

/* кнопка как в Хелпере: пилюля 18/500 на сером, без иконок */
.btn-h {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 19px 32px 20px;
    border: 0;
    border-radius: 10000px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: -.5px;
    text-align: center;
    cursor: pointer;
    transition: background-color .18s ease;
}

.btn-h:hover { background: #e9ecf3; }
.btn-h:active { transform: scale(.985); }
.btn-h--primary { background: var(--accent); color: #fff; }
.btn-h--primary:hover { background: var(--accent-strong); }
.btn-h--sm { padding: 14px 24px 15px; font-size: 16px; line-height: 19px; }
.btn-h--xs { padding: 11px 18px 12px; font-size: 15px; line-height: 18px; }
.btn-h[disabled] { color: #cacacc; pointer-events: none; }
.btn-h--primary[disabled] { background: var(--bg); }

.fdone__btn { min-width: 260px; }
.fdone__list { margin-top: 24px; }

/* достижения справа */
.side__title { margin: 6px 0 14px; font-size: 20px; font-weight: 500; letter-spacing: -.025em; }

.award { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.award + .award { box-shadow: inset 0 1px 0 rgb(0 0 0 / .1); }
.award__pic {
    flex: none;
    width: 88px;
    height: 88px;
    padding: 6px;
    border-radius: 18px;
    background: #0b0b0d;
    object-fit: contain;
}
.award__text { min-width: 0; }
.award__title { display: block; font-size: 20px; font-weight: 400; line-height: 1.05; }
.award__note { display: block; margin-top: 5px; color: #b6b6b9; font-size: 12px; line-height: 1.15; }
.award.is-locked .award__pic { filter: saturate(.3); opacity: .55; }
.award.is-locked .award__title { color: var(--muted); }

@media (max-width: 759px) {
    .feed, .rpage, .libpage { padding: 0; }
    .fgroup__title { font-size: 30px; letter-spacing: -.04em; }
    .fgroup__head { padding: 14px 0 18px; }
    .frow { flex-direction: column; min-height: 0; padding: 18px 20px; border-radius: 20px; }
    .frow__cover { width: 100%; max-height: 170px; align-self: stretch; order: -1; }
    .frow__cover--blank { height: 120px; }
    .frow__chips { padding-top: 14px; }
}

/* ------------------------------------------------------------------ библиотека */

/* Все материалы сети карточками. Размеры с макета: карточка 371×350, радиус 20,
   серый остров без рамок и теней; текст сверху, рисунок снизу по центру —
   так же устроены карточки уроков в Хелпере. */

.libpage { max-width: 1440px; margin: 0 auto; padding: 0 30px; }

.libbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }

/* переключатель как в Хелпере: пилюли, неактивные бледные */
.tabs-pills { display: flex; gap: 4px; }

.tabs-pills__item {
    padding: 13px 21px;
    border: 0;
    border-radius: 1000px;
    background: none;
    color: rgb(0 0 0 / .25);
    font: inherit;
    font-size: 26px;
    letter-spacing: -.025em;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.025em;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

.tabs-pills__item:hover { color: rgb(0 0 0 / .45); }
.tabs-pills__item.is-active { background: rgb(0 0 0 / .06); color: var(--text); }

.libbar .search { width: min(320px, 40%); }

.libgrid {
    display: grid;
    gap: 11px 11px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.lib {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 350px;
    padding: 24px 24px 20px;
    border-radius: 20px;
    background: var(--bg);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: background-color .2s ease;
}

.lib:hover { background: #e9ecf3; }

.lib__title {
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 400;
    line-height: 1.05;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.lib__note {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 8px;
    color: #b6b6b9;
    font-size: 13px;
    line-height: 1.15;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* кому назначено — только руководству; нажатие открывает окно «Назначить» */
.lib__assigned {
    display: inline-block;
    align-self: flex-start;
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    transition: color .2s ease;
}
.lib__assigned:hover,
.lib__assigned:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.lib__assigned.is-none { color: #c2c2c6; }
.lib__art { display: grid; place-items: center; height: 190px; margin-top: 18px; }
.lib__art img { max-width: 78%; max-height: 100%; object-fit: contain; }
.lib__blank { color: #c9ccd6; font-size: 76px; }

.libdrafts { margin-top: 56px; }
.libdrafts__note { margin: -10px 0 18px; color: var(--muted); font-size: 13px; }
.lib--draft { min-height: 240px; }

@media (max-width: 759px) {
    .libbar { flex-direction: column; align-items: stretch; }
    .libbar .search { width: 100%; }
    .tabs-pills { overflow-x: auto; scrollbar-width: none; }
    .tabs-pills::-webkit-scrollbar { display: none; }
    .tabs-pills__item { font-size: 17px; padding: 10px 15px; }
    .libgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
    .lib { min-height: 210px; padding: 14px; border-radius: 14px; }
    .lib__title { font-size: 15px; -webkit-line-clamp: 3; }
    .lib__art { height: 90px; }
}

/* ------------------------------------------------------------------ отчеты */

/* Три цифры сверху, слева разброс по локациям точками (строка — территория,
   мелкие точки — ее кафе, крупная — вся территория), справа сотрудники и
   непроходимые курсы. Карточки — серые острова радиусом 20 без рамок. */

.rpage { max-width: 1440px; margin: 0 auto; padding: 0 30px; }

.kpi3 { display: flex; flex-wrap: wrap; gap: 20px 56px; margin-bottom: 40px; }
.kpi3__item { display: flex; flex-direction: column; gap: 6px; }
.kpi3__label { max-width: 15ch; font-size: 20px; line-height: 1.05; letter-spacing: -.02em; }
.kpi3__value { font-size: clamp(56px, 8.4vw, 114px); font-weight: 400; line-height: 1; letter-spacing: -.1em; color: #7abfd3; }

.rgrid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }

@media (min-width: 1000px) {
    .rgrid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
}

.rcol { display: grid; gap: 20px; }

.rcard { padding: 20px 16px 16px; border-radius: 20px; background: var(--bg); }
.rcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rcard__title { margin: 0 0 16px; padding: 0 6px; font-size: clamp(30px, 3.4vw, 44px); font-weight: 500; line-height: .81; letter-spacing: -.034em; }
.rcard__title--wide { max-width: 12ch; }

.tabs-pills--sm { margin: 0 0 12px 2px; }
.tabs-pills--sm .tabs-pills__item { padding: 10px 15px; font-size: 20px; letter-spacing: -.025em; }

/* график: строка — локация, точки по шкале 0–100 */
.dots { position: relative; padding: 6px 6px 2px; }

.dotrow {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    border-radius: 12px;
    transition: background-color .15s ease;
}

.dotrow:hover { background: rgb(0 0 0 / .04); }
.dotrow__name { font-size: 13px; line-height: 1.1; text-align: right; }
.dotrow__name em { display: block; color: var(--muted); font-size: 11px; font-style: normal; }

.dotrow__track { position: relative; height: 24px; }

/* вертикальные градации и красный пунктир цели — одним слоем на всю карточку */
.dots__grid {
    position: absolute;
    z-index: 0;
    top: 2px;
    bottom: 2px;
    left: 140px;
    right: 58px;
    pointer-events: none;
}

.dots__grid i {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px dashed rgb(var(--tint) / .16);
}

.dots__grid i.is-goal { border-left: 1.5px dashed #c8372d; }

/* подписи шкалы под графиком */
.dots__scale { position: relative; height: 16px; margin: 10px 64px 0 146px; }

.dots__scale span {
    position: absolute;
    transform: translateX(-50%);
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.dotrow__dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #9fb7d8;
    transition: transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .18s ease;
}

/* зона клика больше самой точки — попасть мышью легко */
.dotrow__dot::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
}

/* среднее по локации — того же размера, только темнее */
.dotrow__dot--avg { background: #2f3c71; box-shadow: 0 0 0 3px var(--bg); }

/* Подсказка на наведении: какая точка и сколько у нее пройдено. Вне наведения ее
   нет совсем, а не просто прозрачная: невидимые подсказки точек у правого края
   раздвигали страницу на телефоне до 446 px, и нижнее меню уезжало за экран. */
.dotrow__dot::after {
    content: attr(data-tip);
    display: none;
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    padding: 7px 11px;
    border-radius: 9999px;
    background: #272728;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

.dotrow__dot:hover { z-index: 3; transform: scale(1.5); box-shadow: 0 0 0 5px rgb(47 60 113 / .12); }
.dotrow__dot:hover::after {
    display: block;
    transform: translateX(-50%) scale(.72);
    animation: dot-tip .15s ease both;
}
@keyframes dot-tip { from { opacity: 0; } to { opacity: 1; } }
.dotrow__value { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.dots__legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.dots__legend span { display: inline-flex; align-items: center; gap: 6px; }
.dots__legend i { width: 10px; height: 10px; border-radius: 50%; background: #9fb7d8; }
.dots__legend i.is-avg { background: #2f3c71; }
.dots__legend i.is-goal { width: 16px; height: 0; border-radius: 0; border-top: 1.5px dashed #c8372d; background: none; }

/* списки людей и курсов */
.rsearch__btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: rgb(var(--tint) / .07);
    color: var(--text);
    cursor: pointer;
    transition: background-color .2s ease;
}

.rsearch__btn:hover { background: rgb(var(--tint) / .12); }

.sheet input.rsearch,
.rsearch {
    width: calc(100% - 12px);
    margin: 0 6px 12px;
    padding: 12px 18px;
    border: 0;
    border-radius: 1000px;
    background: var(--surface);
    font: inherit;
    font-size: 15px;
}

.rsearch:focus { outline: none; box-shadow: inset 0 0 0 1.5px rgb(var(--tint) / .2); }

.rfilters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 6px 6px; }

/* общий стиль полей в шторке специфичнее — перебиваем его по тегу */
.sheet select.rselect,
.rselect {
    appearance: none;
    width: auto;
    max-width: 100%;
    padding: 10px 36px 10px 16px;
    border: 0;
    border-radius: 1000px;
    background: rgb(0 0 0 / .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4.5 4.5L10 1'/%3E%3C/svg%3E") no-repeat right 15px center;
    color: var(--text);
    font: inherit;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -.025em;
    cursor: pointer;
}

.plist { display: flex; flex-direction: column; margin: 0 -6px; }

.prow {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 14px 12px;
    border-radius: 16px;
    transition: background-color .18s ease;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

button.prow { cursor: pointer; }
button.prow:hover { background: rgb(0 0 0 / .04); }
.prow + .prow { box-shadow: inset 0 1px 0 #eee; }
.prow__face { flex: none; width: 50px; height: 50px; font-size: 15px; font-weight: 700; background: var(--surface); }
.prow__text { flex: 1; min-width: 0; }
.prow__name { display: block; font-size: 18px; line-height: 1.05; }
.prow__note { display: block; margin-top: 4px; color: #b6b6b9; font-size: 13px; line-height: 1.15; }
.prow__value { flex: none; font-size: clamp(17px, 1.8vw, 24px); font-variant-numeric: tabular-nums; }

@media (max-width: 759px) {
    .kpi3 { gap: 16px 28px; }
    .kpi3__label { font-size: 15px; }
    .rcard__title { font-size: 26px; }
    .dotrow { grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 8px; }
    .dots__grid { left: 108px; right: 50px; }
    .dots__scale { margin: 10px 52px 0 110px; }
    .prow__value { font-size: 14px; }
}


/* пустое состояние по Хелперу: только текст, по центру, бледно-серый */
.home-empty { max-width: 280px; margin: 40px auto; padding: 16px; text-align: center; }
.home-empty h2 { margin: 0; font-size: 18px; font-weight: 500; line-height: .98; letter-spacing: -.02em; color: #d3d4d6; }
.home-empty p { margin: 10px 0 0; color: #d3d4d6; font-size: 15px; line-height: 1.25; }
.home-empty .btn { margin-top: 18px; }

/* ------------------------------------------------------------------ панель сотрудника */

/* Выезжает справа по нажатию на строку в отчетах — отдельной страницы на человека
   пока не заводим. Геометрия и кривая выезда взяты из шторки Хелпера. */

.panel {
    position: fixed;
    z-index: 900;
    inset: 0;
    background: rgb(12 14 20 / 0);
    transition: background .3s cubic-bezier(.32, .72, 0, 1);
    pointer-events: none;
}

.panel.is-open { background: rgb(12 14 20 / .68); pointer-events: auto; }

.panel__card {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: min(480px, calc(100% - 24px));
    padding: 26px 22px 22px;
    border-radius: 32px;
    background: var(--surface);
    box-shadow: 0 24px 60px rgb(12 14 20 / .28), 0 2px 8px rgb(12 14 20 / .08);
    overflow: auto;
    transform: translateX(calc(100% + 24px));
    transition: transform .34s cubic-bezier(.32, .72, 0, 1);
}

.panel.is-open .panel__card { transform: none; }

.pcard__head { display: flex; align-items: flex-start; gap: 14px; }
.pcard__face { flex: none; width: 66px; height: 66px; font-size: 20px; font-weight: 700; background: var(--bg); }
.pcard__name { margin: 2px 0 0; font-size: 28px; font-weight: 700; line-height: .95; letter-spacing: -.045em; }
.pcard__note { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.15; }

.pcard__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    border: 0;
    border-radius: 9999px;
    background: rgb(12 14 20 / .06);
    color: rgb(var(--tint) / .42);
    cursor: pointer;
}

.pcard__close:hover { background: rgb(12 14 20 / .12); }

.pcard__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 6px; }
.pcard__stats span { display: block; color: var(--muted); font-size: 13px; }
.pcard__stats b { font-size: 21px; font-weight: 500; letter-spacing: -.03em; }
.pcard__list { margin-top: 10px; }
.pcard__list .prow__value .chip { font-size: 12px; }
.pcard__empty { color: #d3d4d6; font-size: 15px; }

@media (max-width: 759px) {
    .panel__card {
        top: auto;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        width: auto;
        max-height: 85vh;
        transform: translateY(calc(100% + 24px));
    }
}

/* карточка библиотеки: ссылка на весь материал и «…» в углу для админа */
.lib { position: relative; padding: 0; }
.lib__link { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 24px 24px 20px; color: inherit; text-decoration: none; }
.lib__more { position: absolute; top: 12px; right: 12px; }

.lib__dots {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgb(0 0 0 / .35);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background-color .15s ease;
}

.lib:hover .lib__dots,
.lib__more.is-open .lib__dots { opacity: 1; }
.lib__dots:hover { background: rgb(0 0 0 / .06); color: var(--text); transform: scale(1.06); }
.lib__dots { transition: opacity .2s ease, background-color .2s ease, transform .2s cubic-bezier(.32, .72, 0, 1); }
/* меню на время показа уезжает в конец страницы и теряет .lib__more вокруг себя —
   поэтому размеры держит и свой класс .tool__pop--lib */
.lib__more .tool__pop,
.tool__pop--lib { top: calc(100% + 6px); min-width: 208px; }
.lib__more .tool__pop a,
.lib__more .tool__pop button,
.tool__pop--lib a,
.tool__pop--lib button { font-size: 17px; padding: 13px 20px; }
/* на телефоне наведения нет — «…» видно всегда */
@media (hover: none) { .lib__dots { opacity: 1; } }

.tabs-pills--sort .tabs-pills__item { font-size: 18px; padding: 10px 16px; }

/* кнопка «показать всех» под списком в отчетах */
.rmore { width: calc(100% - 12px); margin: 10px 6px 0; background: rgb(0 0 0 / .05); }

/* свои выпадушки-фильтры: пилюля с текущим значением и список под ней */
.rpick { position: relative; }

.rpick__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 260px;
    padding: 10px 16px;
    border: 0;
    border-radius: 1000px;
    background: rgb(0 0 0 / .06);
    color: var(--text);
    font: inherit;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -.025em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s cubic-bezier(.32, .72, 0, 1);
}

.rpick__btn span { overflow: hidden; text-overflow: ellipsis; }
.rpick__btn:hover { background: rgb(0 0 0 / .1); }
.rpick__btn:active { transform: scale(.985); }
.rpick.is-open .rpick__btn svg { transform: rotate(180deg); }
.rpick__btn svg { flex: none; transition: transform .2s ease; }

/* докрутив список до конца, страницу не тянем: ее прокрутка закрывает меню */
.rpick__pop { left: 0; right: auto; max-height: 320px; overflow: auto; overscroll-behavior: contain; }
.tool__out { transition: background-color .16s ease, color .16s ease; }
.rpick__pop button { font-size: 17px; padding: 12px 20px; }


/* галочка у выбранного пункта выпадушки */
.rpick__pop button { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rpick__tick { flex: none; color: var(--text); opacity: 0; transition: opacity .15s ease; }
.rpick__pop button[data-picked] .rpick__tick { opacity: 1; }
.rpick__pop button[hidden] { display: none; }

/* ------------------------------------------------------------------ проверка ответов */

/* Очередь ручных проверок: развернутые ответы из тестов и работы по заданиям.
   Карточка — серый остров, ответ сотрудника выделен белым, оценка и комментарий
   в одну строку. */

.checks__lead { margin: 0 0 18px; color: #b6b6b9; font-size: 14px; }

.check { margin-bottom: 14px; padding: 24px 26px; border-radius: 20px; background: var(--bg); }
.check__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.check__title { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; }
.check__meta { color: #b6b6b9; font-size: 13px; }
.check__question { margin: 16px 0 10px; font-size: 17px; line-height: 1.3; }

.check__answer {
    margin: 0;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--surface);
    font-size: 16px;
    line-height: 1.4;
    white-space: pre-wrap;
}

.check__criteria { margin-top: 14px; color: var(--muted); font-size: 14px; }
.check__criteria span { font-weight: 500; }
.check__criteria ul { margin: 6px 0 0; padding-left: 18px; }

.check__form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.check__score,
.check__comment {
    padding: 14px 18px;
    border: 0;
    border-radius: 1000px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 16px;
}

.sheet input.check__score,
.check__score { width: 108px; flex: none; text-align: center; font-variant-numeric: tabular-nums; }
.check__comment { flex: 1; min-width: 220px; }
.check__score:focus,
.check__comment:focus { outline: none; box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / .18); }
.check__form .btn-h { padding: 14px 24px 15px; background: var(--surface); font-size: 16px; }
.check__form .btn-h:hover { background: #e9ecf3; }
.check__form .btn-h--primary { background: var(--accent); }
.check__form .btn-h--primary:hover { background: var(--accent-strong); }

@media (max-width: 759px) {
    .check { padding: 18px; }
    .check__form .btn-h { width: 100%; }
}


/* ------------------------------------------------------------------ страницы админки */

/* Сотрудники и «Баллы и достижения» в общем стиле: серые острова, пилюли,
   таблица без рамок с волосяными линиями. */

.page-head { margin-bottom: 20px; }
.page-head__text p { margin: 0; color: #b6b6b9; font-size: 14px; }

.settings-title { margin: 32px 0 14px; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.settings-note { margin: 14px 2px 0; color: #b6b6b9; font-size: 14px; line-height: 1.35; }
.settings-group { overflow: hidden; border-radius: 20px; background: var(--bg); }

.points-row { padding: 18px 22px; }
.points-row + .points-row,
.points-switch + .points-row { box-shadow: inset 0 1px 0 rgb(0 0 0 / .06); }
.points-row__title { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.points-row__note { margin-top: 2px; color: #b6b6b9; font-size: 13px; line-height: 1.15; }
.points-row__count { color: var(--muted); font-size: 15px; }

.sheet .points-row input[type=number] {
    width: 104px;
    padding: 12px 16px;
    border: 0;
    border-radius: 1000px;
    background: var(--surface);
    font-size: 17px;
    font-weight: 500;
    text-align: center;
}

.points-switch { padding: 18px 22px; }
.points-submit { margin-top: 22px; }
.points-saved { margin-bottom: 16px; padding: 14px 18px; border-radius: 16px; background: var(--success-soft); color: var(--success); font-size: 14px; }

/* фильтры и таблица сотрудников */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.sheet .filters input[type=search],
.sheet .filters select {
    min-height: 0;
    padding: 13px 18px;
    border: 0;
    border-radius: 1000px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 16px;
}

.sheet .filters input[type=search] { flex: 1; min-width: 260px; }
.sheet .filters select { max-width: 240px; }
.filters .btn-h { padding: 13px 26px 14px; font-size: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }

.chips .chip {
    padding: 10px 16px;
    border-radius: 1000px;
    background: rgb(0 0 0 / .05);
    color: var(--text);
    font-size: 15px;
    text-decoration: none;
    transition: background-color .16s ease;
}

.chips .chip:hover { background: rgb(0 0 0 / .09); }
.chips .chip.is-active { background: var(--text); color: var(--surface); }
.chips .chip .muted { color: inherit; opacity: .55; }

.admin-table { padding: 6px 10px 10px; border-radius: 20px; background: var(--bg); }
.admin-table table { width: 100%; border-collapse: collapse; }
.admin-table th { padding: 14px 12px; color: #b6b6b9; font-size: 13px; font-weight: 400; text-align: left; }
.admin-table td { padding: 14px 12px; font-size: 16px; vertical-align: top; }
.admin-table tbody tr + tr td { box-shadow: inset 0 1px 0 rgb(0 0 0 / .06); }
.admin-table tbody tr:hover td { background: rgb(0 0 0 / .03); }
.admin-table td strong { font-weight: 500; }
.admin-table .small { font-size: 14px; }
.admin-table .muted { color: #b6b6b9; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.admin-table .badge {
    display: inline-block;
    padding: 6px 12px 7px;
    border-radius: 1000px;
    background: rgb(0 0 0 / .05);
    color: var(--muted);
    font-size: 13px;
}

.admin-table .badge--success { background: var(--success-soft); color: var(--success); }
.admin-table .badge--warning { background: var(--warning-soft); color: var(--warning); }
.admin-table .badge--danger { background: var(--danger-soft); color: var(--danger); }

/* Окно «Добавить сотрудника» и «Ссылка для входа» — в стиле окна «Новый материал» */
.person-modal .soon-modal__card { width: min(620px, 100%); }
.person-modal h2 { margin: 0 0 10px; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.person-modal p { margin: 0 0 18px; color: #b6b6b9; font-size: 14px; line-height: 1.3; }
.person-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.person-grid__wide { grid-column: 1 / -1; }
.person-grid .create-field span { display: block; margin: 0 0 6px 4px; color: #999; font-size: 13px; }
.person-grid .create-field input,
.person-grid .create-field select {
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-radius: 16px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 16px;
}
.person-grid .create-field select { appearance: none; cursor: pointer; }
.person-grid .create-field input:focus,
.person-grid .create-field select:focus { outline: none; box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / .18); }
.person-modal .person-grid__note { grid-column: 1 / -1; margin: -4px 0 4px 4px; font-size: 13px; }
.person-modal .person-form__error { margin: 14px 0 0; color: var(--danger); }
.person-modal .person-form__error[hidden] { display: none; }
.person-link { display: flex; gap: 8px; margin: 4px 0 12px; }
.person-link input {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 16px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}
.person-modal .person-done__hint { margin: 0; font-size: 13px; }
.person-modal .person-done b { color: var(--text); font-weight: 600; }

@media (max-width: 560px) {
    .person-grid { grid-template-columns: 1fr; }
    .person-link { flex-direction: column; }
}

/* действия в строке «Сотрудников»: доступ, уволить, вернуть — столбиком и мелко,
   иначе последняя колонка вылезала за край таблицы и «Уволить» обрезалось */
.people-actions { white-space: nowrap; }
.people-actions .btn-h { display: block; padding: 7px 12px 8px; background: var(--surface); font-size: 13px; line-height: 16px; }
.people-actions .btn-h:hover { background: #e9ecf3; }
.people-actions .btn-h + .btn-h { margin: 6px 0 0; }
.people-actions__quiet { color: var(--muted); }
.people-actions__quiet:hover { color: var(--danger); }


/* ТЗ #1 (USPECT1) — «Моё обучение»: подписи по состоянию, табы «Назначенные / Пройденные», своя обложка */
/* «Начать» / «Продолжить» — та же градиентная плашка, что была у «Принято»: это действие */
.chip--go { font-weight: 500; }
/* пройдено — спокойная отметка, не кнопка */
.chip--passed {
    background: rgb(0 0 0 / .05);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #999;
}
.chip--passed svg { width: 11px; height: 11px; }
/* табы в каноне: 10px 15px, 18/500, неактивные #cacacc */
.tabs-pills--sm .tabs-pills__item { padding: 10px 15px; font-size: 18px; color: #cacacc; }
.tabs-pills--sm .tabs-pills__item:hover { color: #999; }
.tabs-pills--sm .tabs-pills__item.is-active { color: var(--text); }
.feed__tabs { margin: 0 0 22px -15px; }
.fdone__list[data-feed-panel] { margin-top: 0; }
@media (max-width: 767px) {
    .feed__tabs { margin-left: -10px; overflow-x: auto; }
    .tabs-pills--sm .tabs-pills__item { padding: 8px 10px; font-size: 16px; }
}
/* своя загруженная обложка в библиотеке — во всю площадку с обрезкой, как в ленте */
.lib__art--own img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 20px; }

/* ТЗ #3 — черновики в библиотеке (USPECT2): позже `.lib { padding: 0 }` переносит отступы
   во внутренний .lib__link, а у карточки черновика его нет — возвращаем отступы ей самой;
   подпись под заголовком больше не заезжает на него отрицательным отступом. */
.libdrafts .fgroup__title { margin: 0 0 8px; }
.libdrafts__note { margin: 0 0 22px; color: #999; font-size: 14px; }

/* ТЗ #3 — меню «⋯» у черновиков (USPECT2): «Удалить» — форма внутри меню, выглядит как пункт */
.tool__pop-form { margin: 0; box-shadow: inset 0 1px 0 rgb(0 0 0 / .1); }
.tool__pop .tool__danger { color: #d93a2b; }

/* ТЗ #8 (USPECT3) — база знаний */
/* Полка файлов: пространства и карточки файлов — серые острова радиусом 20, как
   в библиотеке; у пространства свой цвет только в подложке под миниатюрами.
   Просмотр: страницы лентой на сером, сверху прилипшая полоса с «Скачать». */

.kbpage { padding-bottom: 20px; }
.kbbar { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.kbbar .kbsearch { flex: 1; max-width: 640px; }
.kbbar .btn-h { flex: none; }
.kbhint { margin: -10px 0 20px 4px; color: #999; font-size: 13px; }
.kbcrumb { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px -4px; color: #999; font-size: 15px; text-decoration: none; }
.kbcrumb:hover { color: var(--text); }
.kbsort { margin: 0 0 14px -16px; }

/* пространства */
.kbspaces { display: grid; gap: 11px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }
.kbspace { position: relative; border-radius: 20px; background: var(--bg); transition: background-color .2s ease; }
.kbspace:hover { background: #e9ecf3; }
.kbspace__link { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 340px; padding: 24px 24px 20px; color: inherit; text-decoration: none; }
.kbspace__text { display: flex; flex-direction: column; gap: 8px; padding-right: 30px; }
.kbspace__title { font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.kbspace__note { color: #999; font-size: 15px; }
.kbspace__desc { color: #999; font-size: 14px; line-height: 1.25; }
.kbspace__art {
    position: relative; display: block; height: 180px; border-radius: 16px; overflow: hidden;
    background: color-mix(in srgb, var(--kb-color, #7abfd3) 55%, #fff);
}
.kbspace__art img {
    position: absolute; bottom: -14px; width: 46%; border-radius: 8px; background: #fff;
    transform-origin: bottom center;
}
.kbspace__art img:nth-child(1) { left: 27%; z-index: 3; bottom: -8px; }
.kbspace__art img:nth-child(2) { left: 6%; z-index: 2; transform: rotate(-7deg); }
.kbspace__art img:nth-child(3) { left: 48%; z-index: 1; transform: rotate(7deg); }
.kbspace .lib__more { top: 16px; right: 16px; }
.kbspace:hover .lib__dots, .kbfile:hover .lib__dots { opacity: 1; }

/* файлы */
.kbgrid { display: grid; gap: 11px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kbgrid .home-empty { grid-column: 1 / -1; }
.kbfile { position: relative; border-radius: 20px; background: var(--bg); transition: background-color .2s ease; }
.kbfile:hover { background: #e9ecf3; }
.kbfile__link { display: flex; flex-direction: column; height: 100%; padding: 12px 12px 18px; color: inherit; text-decoration: none; }
.kbfile__art {
    display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 14px;
    border-radius: 14px; background: #fff; overflow: hidden;
}
.kbfile__art img { width: 100%; height: 100%; object-fit: contain; }
.kbfile__art.is-wait { background: rgb(255 255 255 / .6); }
.kbfile__state { color: #999; font-size: 14px; }
.kbfile__title {
    display: -webkit-box; overflow: hidden; padding: 0 8px; font-size: 20px; font-weight: 500; line-height: 1.08;
    letter-spacing: -.02em; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.kbfile__meta { margin-top: auto; padding: 10px 8px 0; color: #999; font-size: 13px; }
.kbfile__error { padding: 6px 8px 0; color: #d93a2b; font-size: 12px; }
.kbfile .lib__more { top: 18px; right: 18px; }
.kbfile .lib__dots { background: rgb(255 255 255 / .85); }

/* загрузка */
.kbupload { display: grid; gap: 6px; margin: -8px 0 22px; }
.kbupload__row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 110px; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 14px; background: var(--bg); font-size: 14px; }
.kbupload__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbupload__bar { height: 4px; border-radius: 4px; background: #eee; overflow: hidden; }
.kbupload__bar i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .2s ease; }
.kbupload__pct { color: #999; text-align: right; }
.kbupload__row.is-done .kbupload__pct { color: var(--text); }
.kbupload__row.is-error .kbupload__pct { color: #d93a2b; }
[data-kb-drop].is-drop { box-shadow: inset 0 0 0 2px var(--accent); }

/* найденное */
.kbhits__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.kbhits__reset { color: #999; font-size: 15px; }
.kbhits__head .fgroup__title { margin: 0; font-size: clamp(24px, 2.4vw, 32px); }
.kbhits__none { color: #999; }
.kbhit { display: flex; gap: 16px; align-items: flex-start; padding: 12px; border-radius: 20px; color: inherit; text-decoration: none; transition: background-color .2s ease; }
.kbhit:hover { background: var(--bg); }
.kbhit__thumb { flex: none; width: 120px; aspect-ratio: 16 / 10; border-radius: 10px; background: var(--bg); overflow: hidden; }
.kbhit__thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.kbhit__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kbhit__title { font-size: 19px; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.kbhit__where { color: #999; font-size: 13px; }
.kbhit__snippet { color: #555; font-size: 14px; line-height: 1.3; }
.kbhit mark { padding: 0 2px; border-radius: 4px; background: rgb(122 191 211 / .35); color: inherit; }

/* окна */
.kbmodal__card { text-align: left; }
.kbfield { display: grid; gap: 6px; margin: 0 0 14px; }
.kbfield span { color: #999; font-size: 13px; }
.kbfield input, .kbfield select {
    width: 100%; height: 50px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--bg);
    color: var(--text); font: inherit; font-size: 16px; font-weight: 400;
}
.kbfield input:focus, .kbfield select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.kbcolors { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; padding: 0; border: 0; }
.kbcolors legend { margin-bottom: 8px; color: #999; font-size: 13px; }
.kbcolors__item input { position: absolute; opacity: 0; pointer-events: none; }
.kbcolors__item span { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--kb-color); cursor: pointer; }
.kbcolors__item input:checked + span { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent); }
.kbcolors__item input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px; }

/* просмотр файла */
body:has(main.kbview-main) { background: var(--bg); }
main.kbview-main { padding: 0 0 90px; }
.kbview__bar {
    position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px;
    padding: 10px 20px; padding-top: max(10px, env(safe-area-inset-top));
    background: rgb(255 255 255 / .94); border-bottom: 1px solid #eee;
}
.kbview__back { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--text); }
.kbview__back:hover { background: var(--bg); }
.kbview__head { flex: 1; min-width: 0; }
.kbview__title { margin: 0; overflow: hidden; font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.kbview__meta { margin: 2px 0 0; overflow: hidden; color: #999; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.kbview__download { flex: none; gap: 6px; text-decoration: none; }
.kbpages { display: grid; gap: 14px; max-width: 1000px; margin: 0 auto; padding: 18px 16px 0; }
.kbpage-img { margin: 0; }
.kbpage-img__btn { display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; background: #fff; overflow: hidden; cursor: zoom-in; }
.kbpage-img img { display: block; width: 100%; height: auto; }
.kbpage-img figcaption { padding: 6px 0 0; color: #999; font-size: 12px; text-align: center; }
.kbwait { max-width: 520px; margin: 60px auto; padding: 36px 26px; border-radius: 27px; background: var(--surface); text-align: center; }
.kbwait h2 { margin: 12px 0 8px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.kbwait p { margin: 0 0 22px; color: #999; }
.kbwait .btn-h, .kbbar .btn-h { text-decoration: none; }
.kbwait__spin { display: inline-block; width: 34px; height: 34px; border: 3px solid #eee; border-top-color: var(--accent); border-radius: 50%; animation: kb-spin 1s linear infinite; }
@keyframes kb-spin { to { transform: rotate(360deg); } }

.kblight { position: fixed; inset: 0; z-index: 300; background: #0c0e14; }
.kblight[hidden] { display: none; }
.kblight__stage { position: absolute; inset: 0 0 72px; display: grid; place-items: center; overflow: hidden; touch-action: none; }
.kblight__stage img { max-width: 100%; max-height: 100%; user-select: none; -webkit-user-drag: none; transform-origin: center; will-change: transform; }
.kblight__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 22px; height: 72px; padding-bottom: env(safe-area-inset-bottom); color: #fff; }
.kblight__count { min-width: 70px; font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; }
.kblight__btn, .kblight__close { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; }
.kblight__btn:disabled { opacity: .3; cursor: default; }
.kblight__close { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; }

@media (max-width: 759px) {
    .kbbar { flex-wrap: wrap; }
    .kbbar .kbsearch { flex-basis: 100%; max-width: none; }
    .kbbar .btn-h { width: 100%; }
    .kbsort { margin-left: -10px; }
    .kbspace__link { min-height: 0; padding: 18px 18px 16px; }
    .kbspace__art { height: 120px; }
    .kbspace__title { font-size: 26px; }
    .kbspace__note { font-size: 14px; }
    .kbgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .kbfile { border-radius: 16px; }
    .kbfile__link { padding: 8px 8px 12px; }
    .kbfile__art { margin-bottom: 10px; border-radius: 10px; }
    .kbfile__title { padding: 0 4px; font-size: 15px; }
    .kbfile__meta { padding: 8px 4px 0; font-size: 11.5px; }
    .kbfile .lib__more { top: 10px; right: 10px; }
    .kbupload__row { grid-template-columns: minmax(0, 1fr) 90px; }
    .kbupload__bar { display: none; }
    .kbhit { gap: 12px; padding: 10px 4px; }
    .kbhit__thumb { width: 84px; }
    .kbhit__title { font-size: 16px; }
    .kbview__bar { padding: 8px 10px; gap: 6px; }
    .kbview__title { font-size: 16px; }
    .kbview__download span { display: none; }
    .kbview__download { width: 44px; height: 44px; padding: 0; }
    .kbpages { gap: 10px; padding: 10px 0 0; }
    .kbpage-img__btn { border-radius: 0; }
}

/* ТЗ #3.3–3.4 — фильтр «Папка» (USPECT2): пилюля .rpick из отчетов, список папок деревом,
   у выбранной галочка; подпапки сдвинуты вправо, справа от названия — сколько материалов. */
.folderpick__pop { min-width: 300px; }
.folderpick__pop a,
.folderpick__pop button { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    font-size: 17px; padding: 12px 20px 12px calc(20px + var(--depth, 0) * 18px); }
.folderpick__pop a + a,
.folderpick__pop button + button { box-shadow: inset 0 1px 0 rgb(0 0 0 / .06); }
.folderpick__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folderpick__name em { margin-left: 6px; color: #999; font-style: normal; font-weight: 400; }
.folderpick__pop a[data-picked] .rpick__tick { opacity: 1; }
.catalog-bar .folderpick .rpick__btn { font-size: 18px; padding: 12px 18px; }
/* в боковой колонке конструктора — компактнее, во всю ширину над поиском */
.builder .folderpick,
.card .folderpick { margin-bottom: 10px; }
.card .folderpick .rpick__btn { width: 100%; max-width: none; justify-content: space-between; font-size: 16px; padding: 10px 16px; }
.folderpick__pop [data-empty] .folderpick__name { color: #cacacc; }
/* на телефоне меню папок не шире экрана — иначе Menus прижимает его за левый край */
.folderpick__pop { max-width: calc(100vw - 24px); }

/* ТЗ #6 (USPECT1) — мобильная версия сотрудника: нижняя панель с «Профилем»,
   компактная шапка внутренних страниц, строки ленты с миниатюрой, плеер на телефоне,
   размеры касания. Всё, кроме скрытых по умолчанию элементов, — только до 759px:
   десктоп не меняется. */
.hero__back, .deck__now, .deck__turn, .deck__full { display: none; }
.mesheet[hidden] { display: none; }

@media (max-width: 759px) {
    /* нижняя панель: линейные значки 24px, подпись 11/500, зона нажатия 52px,
       выбранное — синим, остальное серым; снизу запас под «домашнюю полоску» iPhone */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .tabbar {
        padding: 4px 4px env(safe-area-inset-bottom);
        background: #fff;
        border-top: 1px solid #eee;
    }
    .tabbar a, .tabbar__me {
        flex: 1 1 0;
        min-width: 0;
        min-height: 56px;
        padding: 7px 2px 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 0;
        background: none;
        color: #999;
        font: inherit;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: -.01em;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .tabbar a.is-active, .tabbar__me.is-active { color: #1b1f86; }
    .tabbar a:active, .tabbar__me:active { opacity: .55; }
    .tabbar__icon {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* «Профиль» — нижний лист: кто я, точка и должность, сколько прошел, «Выйти» */
    .mesheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; background: rgb(0 0 0 / .32); }
    .mesheet__card {
        width: 100%;
        padding: 10px 20px calc(18px + env(safe-area-inset-bottom));
        border-radius: 27px 27px 0 0;
        background: #fff;
    }
    .mesheet__grab { display: block; width: 40px; height: 5px; margin: 0 auto 18px; border-radius: 10000px; background: #e3e3e6; }
    .mesheet__top { display: flex; align-items: center; gap: 14px; }
    .mesheet__face { flex: none; width: 56px; height: 56px; font-size: 18px; }
    .mesheet__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .mesheet__who b { font-size: 20px; font-weight: 500; letter-spacing: -.5px; line-height: 1.15; }
    .mesheet__who span { color: #999; font-size: 14px; line-height: 1.25; }
    .mesheet__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0 14px; }
    .mesheet__stats p { margin: 0; padding: 16px; border-radius: 20px; background: #f2f4f9; }
    .mesheet__stats b { display: block; font-size: 26px; font-weight: 500; letter-spacing: -.5px; line-height: 1; }
    .mesheet__stats span { display: block; margin-top: 6px; color: #999; font-size: 13px; }
    .mesheet__out { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; font-size: 17px; }

    /* шапка: на главной и в библиотеке фото остается, но ниже */
    .hero.hero--home { height: 300px; }
    .hero--home .hero__head { bottom: 44px; }
    .hero--home .hero__title { font-size: 30px; }

    /* внутренние страницы: компактная полоса «← Назад + название», без фотографии */
    .hero.hero--inner {
        height: auto;
        background: #fff;
        color: var(--text);
        border-bottom: 1px solid #eee;
    }
    .hero--inner::before, .hero--inner::after,
    .hero--inner .hero__photo, .hero--inner .hero__video,
    .hero--inner .hero__bar, .hero--inner .hero__lead, .hero--inner .hero__go { display: none; }
    .hero--inner .hero__head {
        position: static;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: calc(8px + env(safe-area-inset-top)) 14px 8px 10px;
    }
    .hero--inner .hero__back {
        flex: none;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #f2f4f9;
        color: var(--text);
    }
    .hero--inner .hero__back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .hero--inner .hero__back:active { opacity: .6; }
    .hero--inner .hero__title {
        margin: 0;
        font-size: 19px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -.4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    body:has(.hero--inner) .sheet { margin-top: 0; padding-top: 14px; border-radius: 0; }

    /* «Моё обучение»: заголовок группы не прилипает (съедал место), строки компактные —
       миниатюра слева, название, тип, подпись-действие */
    .fgroup { margin-bottom: 26px; }
    .fgroup__head { position: static; padding: 14px 0 12px; background: none; }
    .fgroup__title { font-size: 26px; letter-spacing: -1px; }
    .frow { flex-direction: row; align-items: center; gap: 14px; min-height: 0; margin-bottom: 8px; padding: 10px 14px 10px 10px; border-radius: 20px; }
    .frow__cover { order: -1; flex: none; width: 84px; height: 84px; max-height: none; margin: 0; border-radius: 16px; align-self: center; }
    .frow__cover--blank { height: 84px; }
    .frow__title { max-width: none; font-size: 17px; line-height: 1.15; }
    .frow__note { margin-top: 4px; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    .frow__chips { padding-top: 8px; gap: 6px; }
    .frow:active { background: rgb(var(--tint) / .07); }

    /* «Продолжить» с кольцом — внизу, в зоне большого пальца, над нижней панелью */
    .hero--home .hero__go {
        position: fixed;
        z-index: 55;
        left: 14px;
        right: 14px;
        bottom: calc(72px + env(safe-area-inset-bottom));
        margin: 0;
    }
    .hero--home .gobtn {
        width: 100%;
        justify-content: space-between;
        height: 60px;
        padding: 0 10px 0 24px;
        background: #1b1f86;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
    }
    .hero--home .gobtn:active { opacity: .85; }
    body:has(.hero--home .hero__go) .sheet { padding-bottom: 96px; }

    /* размеры касания: кнопки не меньше 44, поля 16px (иначе iOS увеличивает страницу) */
    .btn, .btn-h, .tabs-pills__item, .chip-tag { min-height: 44px; }
    .btn:active, .btn-h:active, .lib__link:active, .tabs-pills__item:active { opacity: .7; }
    :is(input, textarea, select):not([type=checkbox], [type=radio], [type=range]) { font-size: 16px; }
    .lib__note, .fgroup__note { font-size: 13px; }
}

/* плеер презентации на телефоне вертикально: слайд по ширине сверху, под ним его
   название, «Назад / Далее» крупно внизу; «во весь экран» и подсказка повернуть */
@media (max-width: 759px) and (orientation: portrait) {
    .deck--rich .deck__stage { padding: 12px 12px 0; justify-content: flex-start; overflow-y: auto; }
    .deck--rich .deck__screen { flex: none; width: 100%; height: auto; max-width: none; aspect-ratio: 16 / 9; border-radius: 16px; }
    .deck__now { display: block; margin: 14px 4px 0; font-size: 16px; font-weight: 500; line-height: 1.25; letter-spacing: -.3px; }
    .deck--rich .deck__nav { gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
    .deck--rich .deck__nav .btn-h { min-height: 52px; padding: 0 20px; font-size: 17px; }
    .deck__turn { display: grid; place-items: center; width: 28px; height: 44px; color: #b6b6b9; }
    .deck__turn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .deck__full { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #f2f4f9; color: var(--text); cursor: pointer; }
    .deck__full svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .deck__full:active { opacity: .6; }
    .deck--rich .deck__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* телефон горизонтально или «во весь экран»: слайд на весь экран, кнопки поверх полупрозрачно */
@media (hover: none) and (orientation: landscape) and (max-height: 500px) {
    body:has(.deck--rich) .topbar { display: none; }
    .deck--rich { inset: 0; background: #000; }
}
.deck--rich.is-full { position: fixed; inset: 0; z-index: 100; background: #000; }
.deck--rich:fullscreen { inset: 0; background: #000; }
@media (hover: none) and (orientation: landscape) and (max-height: 500px) {
    .deck--rich .deck__bar {
        position: absolute; z-index: 6; top: 0; left: 0; right: 0;
        height: 52px; background: rgb(255 255 255 / .78);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    }
    .deck--rich .deck__stage { padding: 0; justify-content: center; align-items: center; }
    .deck--rich .deck__screen { height: 100%; width: auto; max-width: 100%; border-radius: 0; }
    .deck--rich .deck__nav {
        position: absolute; z-index: 6; left: 0; right: 0; bottom: 0;
        padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
        background: rgb(255 255 255 / .72);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    }
    .deck--rich .deck__nav .btn-h { min-height: 44px; }
    .deck__full { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .06); color: var(--text); }
    .deck__full svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}
.deck--rich.is-full .deck__stage, .deck--rich:fullscreen .deck__stage { padding: 0; justify-content: center; align-items: center; }
.deck--rich.is-full .deck__screen, .deck--rich:fullscreen .deck__screen { flex: none; width: 100%; height: auto; max-height: 100%; border-radius: 0; }
body:has(.deck--rich.is-full) .topbar { display: none; }

/* ТЗ #6 (USPECT1), поправка: плавающая «Продолжить» — отдельным элементом ленты
   (внутри шапки ее перекрывал лист); название во внутренней полосе — темным */
.gofloat { display: none; }
@media (max-width: 759px) {
    .hero--home .hero__go { position: static; }
    .hero--home .hero__go .gobtn { display: none; }
    .gofloat {
        position: fixed;
        z-index: 55;
        left: 14px;
        right: 14px;
        bottom: calc(72px + env(safe-area-inset-bottom));
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 0 10px 0 24px;
        border-radius: 10000px;
        background: #1b1f86;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -.5px;
        text-decoration: none;
    }
    .gofloat .path__ring { width: 42px; height: 42px; margin: 0; }
    .gofloat:active { opacity: .85; }
    body:has(.gofloat) .sheet { padding-bottom: 100px; }
    .hero--inner .hero__title { color: var(--text); text-shadow: none; position: static; }
}
@media (max-width: 759px) { .hero--inner .hero__title { max-width: none; } }

/* ТЗ #6 (USPECT1), поправка: кольцо в плавающей «Продолжить» — белый кружок с процентом.
   Кнопку в шапке не убираем display:none: в ней лежит градиент дуги (#ring-gradient),
   и в скрытом так блоке он перестает рисоваться у второго кольца */
@media (max-width: 759px) {
    .hero--home .hero__go .gobtn { display: inline-flex; }
    .hero--home .hero__go { position: absolute; visibility: hidden; pointer-events: none; }
    .gofloat .path__ring { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--text); }
    .gofloat .path__value { font-size: 11px; }
    .mesheet__out { text-decoration: none; }
}

/* ТЗ #8.1 (USPECT3) — база знаний: ссылки оглавления поверх страниц, страницы в найденном */
.kbpage-img { scroll-margin-top: 74px; }
.kbpage-img__frame { position: relative; }
.kblink { position: absolute; z-index: 2; border-radius: 6px; -webkit-tap-highlight-color: rgb(27 31 134 / .18); }
.kblink:hover { background: rgb(27 31 134 / .08); }
.kblink:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kbpage-img.is-target .kbpage-img__btn { box-shadow: 0 0 0 3px var(--accent); }
.kbhit { color: inherit; }
.kbhit:hover { background: none; }
.kbhit__thumb { display: block; }
.kbhit__title { color: inherit; text-decoration: none; }
.kbhit__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.kbhit__page { display: flex; gap: 10px; align-items: baseline; margin: 2px -10px 0; padding: 7px 10px; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color .2s ease; }
.kbhit__page:hover { background: var(--bg); }
.kbhit__num { flex: none; min-width: 54px; color: #999; font-size: 13px; }
.kbhit__more { color: #999; font-size: 13px; }
@media (max-width: 759px) {
    .kbpage-img { scroll-margin-top: 62px; }
    .kbhit__page { flex-direction: column; gap: 2px; margin: 2px -8px 0; padding: 6px 8px; }
}

/* ТЗ #6а (USPECT1) — «Сменить пароль» в листе «Профиль» */
@media (max-width: 759px) {
    .mesheet__pass-open { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-bottom: 8px; font-size: 17px; }
    .mesheet__pass { display: grid; gap: 8px; margin-bottom: 8px; }
    .mesheet__pass[hidden], .mesheet__pass-error[hidden] { display: none; }
    .mesheet__pass input { width: 100%; box-sizing: border-box; padding: 15px 18px; border: 0; border-radius: 20px; background: #f2f4f9; font: inherit; font-size: 16px; }
    .mesheet__pass input:focus { outline: none; box-shadow: inset 0 0 0 1.5px #1b1f86; }
    .mesheet__pass-error { margin: 0; color: #ff4c41; font-size: 14px; }
    .mesheet__pass-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .mesheet__pass-row .btn-h { min-height: 52px; font-size: 17px; justify-content: center; }
    .mesheet.is-pass .mesheet__pass-open, .mesheet.is-pass .mesheet__stats { display: none; }
}

/* ТЗ #6а (USPECT1) — плеер на телефоне: слайд по центру между шапкой и кнопками, подпись
   «Слайд N» не показываем, счетчик мельче; во весь экран и боком — полосы поверх слайда
   прячутся сами и возвращаются по тапу. Страница курса: вторая «назад» на телефоне лишняя */
.deck__now[hidden] { display: none; }
@media (max-width: 759px) and (orientation: portrait) {
    .deck--rich .deck__stage { justify-content: center; }
    .deck--rich .deck__count { padding: 3px 7px; font-size: 12px; }
    .deck--rich .deck__bar { gap: 6px; }
}
@media (max-width: 759px) {
    .program__back { display: none; }
}
.deck--rich.is-full .deck__bar, .deck--rich:fullscreen .deck__bar {
    position: absolute; z-index: 6; top: 0; left: 0; right: 0;
    background: rgb(255 255 255 / .78);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.deck--rich.is-full .deck__nav, .deck--rich:fullscreen .deck__nav {
    position: absolute; z-index: 6; left: 0; right: 0; bottom: 0;
    background: rgb(255 255 255 / .72);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.deck--rich.is-full .deck__now, .deck--rich:fullscreen .deck__now { display: none; }
.deck--rich .deck__bar, .deck--rich .deck__nav { transition: opacity .3s ease, transform .3s cubic-bezier(.32, .72, 0, 1); }
.deck--rich.is-calm .deck__bar { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.deck--rich.is-calm .deck__nav { opacity: 0; transform: translateY(100%); pointer-events: none; }

/* ТЗ #6а (USPECT1), поправка: в плеере на телефоне верхней полосы сайта нет — у плеера своя;
   «Сменить пароль» на компьютере — окно по центру из карточки по аватарке */
@media (max-width: 759px) {
    body:has(.deck--rich) .topbar { display: none; }
    .deck--rich { inset: 0; }
    .deck--rich .deck__bar { padding-top: env(safe-area-inset-top); }
}
.tool__pass { display: block; width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
@media (min-width: 760px) {
    .mesheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgb(0 0 0 / .32); }
    .mesheet__card { width: 420px; padding: 28px; border-radius: 32px; background: #fff; }
    .mesheet__grab, .mesheet__stats, .mesheet__pass-open, .mesheet__out { display: none; }
    .mesheet__top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
    .mesheet__face { flex: none; width: 56px; height: 56px; font-size: 18px; }
    .mesheet__who { display: flex; flex-direction: column; gap: 4px; }
    .mesheet__who b { font-size: 20px; font-weight: 500; letter-spacing: -.5px; }
    .mesheet__who span { color: #999; font-size: 14px; }
    .mesheet__pass { display: grid; gap: 8px; }
    .mesheet__pass[hidden], .mesheet__pass-error[hidden] { display: none; }
    .mesheet__pass input { width: 100%; box-sizing: border-box; padding: 15px 18px; border: 0; border-radius: 20px; background: #f2f4f9; font: inherit; font-size: 16px; }
    .mesheet__pass input:focus { outline: none; box-shadow: inset 0 0 0 1.5px #1b1f86; }
    .mesheet__pass-error { margin: 0; color: #ff4c41; font-size: 14px; }
    .mesheet__pass-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
    .mesheet__pass-row .btn-h { justify-content: center; }
}

/* ТЗ #9.1 (USPECT1) — общие элементы страниц материалов в канон: строка «назад · тип · статус»,
   кнопки — каноническая .btn-h (19px 32px 20px, 18/500), статусы — тем же видом, что в ленте */
.player__bar { min-height: 44px; }
.player__kicker { gap: 10px; color: #999; font-size: 15px; letter-spacing: -.2px; }
.player__kicker .chip { font-size: 13px; }
.player__lead { margin: 0 0 22px; color: #999; font-size: 16px; line-height: 1.35; }
.player .card h3, .player .card__head h3 { font-size: 20px; font-weight: 500; letter-spacing: -.5px; }
.player__url { margin: 0 0 18px; color: #999; font-size: 14px; word-break: break-all; }
.player__actions { gap: 12px; margin-top: 26px; }
.player .chip--passed, .player .chip--soon, .player .chip--late { padding: 6px 12px 7px; }
@media (max-width: 759px) {
    /* «назад» на телефоне — круглая кнопка в компактной полосе (#6), второй не нужно */
    .player__bar .back-link { display: none; }
    .player__actions { flex-direction: column; align-items: stretch; }
    .player__actions form { display: contents; }
    .player :is(.btn-h--primary, .player__actions .btn-h, .card > .btn-h) { width: 100%; }
    .player__edit { display: none; }
}

/* ТЗ #9.1 (USPECT1), поправка: кнопки-ссылки внутри материала без подчеркивания текста */
.player a.btn-h, .player a.btn-h:hover { text-decoration: none; }

/* ТЗ #9.2 (USPECT1) — тест в канон: вход (сводка островами, попытки строками),
   прохождение (свои кружки и галочки вместо нативных, крупные варианты), результат */
.qstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 18px; }
.qstats p { margin: 0; padding: 20px 22px; border-radius: 27px; background: #f2f4f9; }
.qstats b { display: block; font-size: 34px; font-weight: 500; letter-spacing: -1px; line-height: 1; }
.qstats span { display: block; margin-top: 8px; color: #999; font-size: 14px; }
.qbest { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; color: #999; font-size: 16px; }
.qbest .chip { font-size: 14px; padding: 7px 12px; }
.qstart { margin: 0 0 34px; }
.qtries__title { margin: 0 0 14px; font-size: 30px; font-weight: 700; letter-spacing: -1px; }
.qreview__title { margin-top: 34px; }
.qtry {
    display: grid;
    grid-template-columns: 120px 170px 1fr auto auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    padding: 18px 22px;
    border-radius: 20px;
    background: #f2f4f9;
    color: inherit;
    text-decoration: none;
    font-size: 16px;
    transition: background-color .18s ease;
}
.qtry:hover { background: #e9ecf3; }
.qtry:active { opacity: .8; }
.qtry__n { font-weight: 500; }
.qtry__date, .qtry__score { color: #999; font-variant-numeric: tabular-nums; }
.qtry__go { color: #1b1f86; font-weight: 500; white-space: nowrap; }
.qtry .chip { font-size: 13px; padding: 6px 11px; }

/* вопросы: остров, номер и тип мелко серым, вариант — белая строка с кружком или квадратиком */
.question { padding: 28px 30px; border-radius: 27px; background: #f2f4f9; }
.question__num { font-size: 14px; color: #999; }
.question__num .chip { margin-left: 6px; font-size: 13px; padding: 5px 10px; }
.question__kind { background: #fff; color: #999; }
.question__text { font-size: 22px; letter-spacing: -.5px; line-height: 1.2; }
.question .small.muted { color: #999; font-size: 14px; }
.option { position: relative; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: #fff; font-size: 17px; color: var(--text); }
.option:hover { background: #fafbfd; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.option:has(input) > span::before {
    content: "";
    flex: none;
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 14px;
    vertical-align: -5px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.6px #cacacc;
    background: #fff center / 14px no-repeat;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.option:has(input[type=checkbox]) > span::before { border-radius: 7px; }
.option:has(input:checked) { box-shadow: inset 0 0 0 1.6px #1b1f86; }
.option:has(input:checked) > span::before {
    background-color: #1b1f86;
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.option:has(input[type=radio]:checked) > span::before {
    background-image: radial-gradient(circle, #fff 0 4px, transparent 4.5px);
    background-size: auto;
}
.option:has(input:focus-visible) { box-shadow: inset 0 0 0 2px #1b1f86; }
.option--correct { background: rgb(29 204 120 / .12); }
.option--wrong { background: rgb(255 76 65 / .1); }
.answer-input { padding: 16px 18px; border-radius: 20px; background: #fff; font-size: 17px; }
.scale__step { padding: 14px 6px; border-radius: 20px; background: #fff; font-size: 17px; }
.scale__step input { position: absolute; opacity: 0; }
.scale__ends { color: #999; font-size: 13px; }
.match-card, .match-chip { font-size: 16px; }
.score-hero { padding: 34px 20px; }
.score-hero__value { font-size: 64px; font-weight: 500; letter-spacing: -2px; color: var(--text); }
.score-hero .chip { font-size: 15px; padding: 8px 14px; }
.player__actions .btn-h, .qstart .btn-h, .score-hero .btn-h { min-width: 220px; }

@media (max-width: 759px) {
    .qstats { grid-template-columns: 1fr 1fr; }
    .qstats p { padding: 16px 18px; border-radius: 20px; }
    .qstats b { font-size: 28px; }
    .qstart .btn-h, .score-hero .btn-h { width: 100%; }
    .qtries__title { font-size: 24px; }
    /* попытка — карточкой: номер и статус сверху, дата и балл ниже, «Разбор →» справа внизу */
    .qtry { grid-template-columns: 1fr auto; grid-template-areas: "n status" "date date" "score go"; gap: 6px 10px; padding: 16px 18px; }
    .qtry__n { grid-area: n; }
    .qtry__status { grid-area: status; justify-self: end; }
    .qtry__date { grid-area: date; font-size: 14px; }
    .qtry__score { grid-area: score; font-size: 14px; }
    .qtry__go { grid-area: go; justify-self: end; }
    .question { padding: 20px 16px; border-radius: 24px; }
    .question__kind { float: none; display: inline-block; margin: 6px 0 0; }
    .question__text { font-size: 19px; }
    .option { padding: 14px 14px; font-size: 16px; }
    #quiz-form .player__actions .btn-h { width: 100%; }
}

/* ТЗ #9.2 (USPECT1), поправка: варианты ответа — <label>, а «.sheet label» делал их 12.5/500 */
.sheet label.option { margin-bottom: 8px; font-size: 17px; font-weight: 400; color: var(--text); }
.sheet label.scale__step { margin: 0; font-size: 17px; font-weight: 500; color: var(--text); }
@media (max-width: 759px) { .sheet label.option { font-size: 16px; } }

/* ТЗ #9.3 (USPECT1) — «Материал скоро появится» вместо служебных текстов, карточка документа,
   строка потока мероприятия; правки 9.2: слово-состояние в результате, тест без нижней панели */
.msoon { padding: 40px 28px 34px; border-radius: 32px; background: #f2f4f9; text-align: center; }
.msoon .soon-icon { background: #1b1f86; }
.msoon__title { margin: 0 0 10px; font-size: 26px; font-weight: 500; letter-spacing: -.8px; }
.msoon__text { max-width: 440px; margin: 0 auto 24px; color: #999; font-size: 16px; line-height: 1.35; }
.msoon a.btn-h { text-decoration: none; }
.msoon__admin { margin: 28px auto 0; padding: 18px 20px; max-width: 520px; border-radius: 20px; background: #fff; text-align: left; }
.msoon__admin b { display: block; font-size: 14px; font-weight: 500; }
.msoon__admin p { margin: 6px 0 14px; color: #999; font-size: 14px; line-height: 1.35; }
.msoon__row { display: flex; flex-wrap: wrap; gap: 8px; }

.docfile { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding: 18px 20px; border-radius: 20px; background: #f2f4f9; }
.docfile__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; color: #ff4c41; font-size: 13px; font-weight: 700; letter-spacing: .3px; }
.docfile__name { flex: 1; min-width: 160px; font-size: 17px; font-weight: 500; letter-spacing: -.3px; }
.docfile__row { display: flex; gap: 8px; }
.docfile a.btn-h { text-decoration: none; }

.evrows .rowitem { gap: 14px; padding: 16px 18px; border-radius: 20px; background: #fff; }
.evrows .rowitem + .rowitem { margin-top: 8px; }
.evrows .rowitem__title { font-size: 17px; font-weight: 500; }
.evrows .rowitem__sub { margin-top: 4px; color: #999; font-size: 15px; }

.score-hero__value--word { font-size: 40px; letter-spacing: -1px; }

@media (max-width: 759px) {
    .msoon { padding: 30px 18px 24px; border-radius: 24px; }
    .msoon__title { font-size: 22px; }
    .msoon > .btn-h { width: 100%; }
    /* PDF во фрейме на телефоне не листается — только карточка файла */
    .doc__frame { display: none; }
    .docfile { flex-direction: column; align-items: stretch; margin-top: 0; text-align: left; }
    .docfile__row { flex-direction: column; }
    .docfile__row .btn-h { width: 100%; }
    .evrows .rowitem { flex-wrap: wrap; }
    .evrows .rowitem form, .evrows .rowitem .btn-h { width: 100%; }
    .score-hero__value { font-size: 52px; }
    .score-hero__value--word { font-size: 34px; white-space: nowrap; }
    /* в тесте нижняя панель лишняя: случайный тап уводил посреди ответа */
    body:has(#quiz-form) .tabbar { display: none; }
    body:has(#quiz-form) { padding-bottom: env(safe-area-inset-bottom); }
}

/* ТЗ #9.3 (USPECT1), поправка к #6: на телефоне вертикально шаг-вопрос (и тренажер, итог) не
   влезал в рамку 16:9 — варианты обрезались. У таких шагов рамка растет на всю высоту сцены
   и листается, подпись под слайдом не нужна (вопрос и так написан) */
@media (max-width: 759px) and (orientation: portrait) {
    .deck--rich .deck__stage:has(.deck__screen--ask) { justify-content: stretch; }
    .deck--rich .deck__screen.deck__screen--ask { flex: 1 1 auto; aspect-ratio: auto; height: auto; min-height: 0; overflow-y: auto; }
    .deck__stage:has(.deck__screen--ask) .deck__now { display: none; }
}

/* ТЗ #9.3 (USPECT1): на телефоне чип «N вопросов» в шапке плеера отнимал место у названия */
@media (max-width: 759px) { .deck--rich .deck__qs { display: none; } }

/* ТЗ #9.4 (USPECT1) — отчеты в канон: разделы табами сверху (вместо меню слева), заголовок
   отчета 30/700, плитки — серые острова с крупной цифрой, строки таблиц крупнее; на телефоне
   строки — карточками (название, «13 из 15 · 7 сотрудников», полоса): четыре числовые колонки
   при горизонтальном скролле теряют заголовки, а карточка читается одной рукой */
.report-shell { display: block; }
.rtabs { flex-wrap: wrap; margin: 0 0 26px -15px; }
.rtabs .tabs-pills__item { text-decoration: none; }
.rpage > .rtabs { margin-bottom: 30px; }
.report-head { align-items: flex-end; margin-bottom: 24px; }
.report-head .report-title, .report-title { margin: 0 0 8px; font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 1.05; }
.report-lead, .report-head .report-lead { margin: 0; max-width: 640px; color: #999; font-size: 16px; line-height: 1.35; }
.report-csv { flex: none; text-decoration: none; }
.kpis { gap: 8px; margin-bottom: 14px; }
.kpi { padding: 22px 24px; border-radius: 27px; background: #f2f4f9; }
.kpi__value { font-size: 34px; font-weight: 500; letter-spacing: -1px; line-height: 1; }
.kpi__label { margin-top: 8px; color: #999; font-size: 14px; }
.kpi__title { font-size: 20px; font-weight: 500; letter-spacing: -.5px; }
.rtable { padding: 6px 16px 10px; border-radius: 27px; background: #f2f4f9; }
.rtable__row { font-size: 16px; }
.rtable__head { color: #999; font-size: 13px; }
.rtable__kind, .rtable__sub { color: #999; font-size: 13px; }
.rtable__percent { font-size: 14px; }
.meter { height: 6px; border-radius: 10000px; }
.kpi3__value { color: var(--text); }
.dotrow__name { font-size: 14px; }
.dotrow__name em { font-size: 12px; }
.dots__legend { font-size: 13px; }

@media (max-width: 759px) {
    .rtabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 20px; padding: 0 16px; scrollbar-width: none; }
    .rtabs::-webkit-scrollbar { display: none; }
    .rtabs .tabs-pills__item { flex: none; }
    .report-head { align-items: stretch; }
    .report-head .report-title, .report-title { font-size: 24px; }
    .report-lead, .report-head .report-lead { font-size: 15px; }
    .report-csv { align-self: flex-start; }
    .kpi { padding: 16px 18px; border-radius: 20px; }
    .kpi__value { font-size: 28px; }
    /* таблица — карточками */
    .rtable { padding: 0; background: none; border-radius: 0; }
    .rtable__row, .rtable__head + .rtable__row { margin-bottom: 8px; padding: 14px 16px; border: 0; border-radius: 20px; background: #f2f4f9; }
    .rtable__name { font-size: 16px; font-weight: 500; }
    .rtable__sub { margin-top: 4px; font-weight: 400; }
    .rtable__empty { border-radius: 20px; background: #f2f4f9; }
}

/* ТЗ #9.4 (USPECT1), поправка: плитка с кольцом — такой же серый остров без рамки, как соседние */
.kpi--ring { background: #f2f4f9; box-shadow: none; }

/* ТЗ #4 — интерактивности (USPECT2) */
/* картинка и текст пункта: слева / справа / сверху / снизу; без картинки — текст во всю ширину */
.ixm { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.ixm__img { display: block; width: 100%; max-width: 100%; border-radius: 20px; }
.ixm--bottom .ixm__img { order: 2; }
@media (min-width: 700px) {
    .ixm--left { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
    .ixm--right { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: start; }
    .ixm--right .ixm__img { order: 2; }
}
/* шаги: панель больше не делит ширину сама — этим занимается .ixm (4.1: текст во всю ширину) */
.steps__panel { display: block; }
/* текст с легкой разметкой: абзацы, списки, ссылки */
.rich p { margin: 0 0 .6em; }
.rich > :last-child { margin-bottom: 0; }
.rich ul, .rich ol { margin: .2em 0 .6em; padding-left: 1.3em; }
.rich li + li { margin-top: .25em; }
.rich a { color: #1b1f86; text-decoration: underline; text-underline-offset: 3px; }
/* процесс (4.2): плоские пилюли-кнопки вместо стрелок, выбранная синяя, перенос вместо прокрутки */
.process__row { flex-wrap: wrap; gap: 8px; overflow: visible; padding-bottom: 0; margin-bottom: 28px; }
.process__stage {
    flex: 0 1 auto; min-width: 0; clip-path: none; border: 0; border-radius: 10000px;
    padding: 10px 15px; background: #f2f4f9; color: var(--text); font-size: 18px; font-weight: 500;
    letter-spacing: -.5px; line-height: 1.2; text-align: left; transition: background-color .2s ease, color .2s ease;
}
.process__stage:hover { background: #e8ebf3; }
.process__stage.is-active { background: #1b1f86; color: #fff; }
.process__num { display: inline; margin-right: 6px; font-size: inherit; font-weight: 500; color: inherit; opacity: .5; }
.process__title { font-size: inherit; font-weight: 500; }
.process__panel .ixm { gap: 16px; }
/* «Я прошел материал» ждет, пока открыты все шаги (4.3) — подсказка на ее месте */
.ix-gate { margin: 0; color: #999; font-size: 15px; }
/* конструктор интерактивности: кнопки форматирования над текстом и выбор места картинки */
.fmt-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.fmt-bar__btn { padding: 6px 12px; border: 0; border-radius: 10000px; background: #f2f4f9; color: var(--text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.fmt-bar__btn:hover { background: #e8ebf3; }
.fmt-hint { margin: 6px 0 0; color: #999; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg__item { position: relative; cursor: pointer; }
.seg__item input { position: absolute; opacity: 0; pointer-events: none; }
.seg__item span { display: inline-block; padding: 8px 14px; border-radius: 10000px; background: #f2f4f9; font-size: 15px; font-weight: 500; }
.seg__item input:checked + span { background: #1b1f86; color: #fff; }
.seg__item input:focus-visible + span { outline: 2px solid #1b1f86; outline-offset: 2px; }
/* картинка пункта без рамки (канон: линий нет); на телефоне высокая картинка не уводит текст за экран */
.steps__panel .ixm__img, .ixm__img { border: 0; }
@media (max-width: 699px) {
    .ixm__img { max-height: 320px; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
    .process__stage { font-size: 16px; padding: 9px 14px; }
}

/* ТЗ #10 — полоса разделов отчетов на телефоне: поля листа 14px, а не 16 — без лишних 2px прокрутки вбок (USPECT1) */
@media (max-width: 759px) {
    .rtabs { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
}
/* ТЗ #3 — дополнение (USPECT2): закрытое меню папок лежало за правым краем и давало
   горизонтальную прокрутку на телефоне. В строке поиска открываем его к правому краю,
   в узкой колонке конструктора — по ширине пилюли. */
.catalog-bar .folderpick__pop { left: auto; right: 0; }
.card .folderpick__pop { min-width: 0; width: 100%; }

/* ТЗ #10а — обзор отчетов на телефоне: поля листа 14px, как у разделов (общее .rpage с 30px стояло ниже мобильного правила); чип прогресса в окне сотрудника — темный текст на сером, а не белый на полупрозрачном (USPECT1) */
@media (max-width: 759px) {
    .rpage { padding-left: 0; padding-right: 0; }
}
.pcard__list .prow__value .chip:not(.chip--done) {
    background: #e6e8ef;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #161616;
}

/* ТЗ #10а — пунктир «цель 80%»: на iPhone дробная толщина 1.5px (1.33 на ретине) не рисовалась вовсе; 1px — как уже видно в Chrome (USPECT1) */
.dots__grid i.is-goal { border-left-width: 1px; }

/* ТЗ #8.4 (USPECT3) — база знаний: найденное не распирает телефон. Отрывок — элемент
   флекс-строки, у него min-width:auto = ширина самого длинного «слова»; строка точек из
   оглавления давала 406px при экране 360. Разрешаем сжиматься и переносить где угодно. */
.kbhit__text, .kbhit__page > * { min-width: 0; }
.kbhit__title, .kbhit__where, .kbhit__snippet, .kbhits__none, .kbspace__title, .kbfile__title { overflow-wrap: anywhere; }
/* подсветка найденного без внутренних полей: поля рвали слово на «кофемашин е» */
.kbhit mark { padding: 0; border-radius: 3px; box-shadow: 0 0 0 2px rgb(122 191 211 / .35); }

/* ТЗ #13 — каркас конструкторов и строки «Материалов» в стиле главной (USPECT2).
   Все правила под .builder-page или .content-row: другие экраны не задеты.
   Кнопки: главное действие — синяя пилюля, остальное — серый остров без обводки;
   иконки ↑ ↓ ⧉ ✕ — серые кружки; подписи 13–14px #999; бейджи — одно семейство. */
.builder-page .btn,
.content-row .btn {
    border: 0; border-radius: 10000px; background: #f2f4f9; color: var(--text);
    font-size: 15px; font-weight: 500; letter-spacing: -.3px; padding: 10px 18px;
}
.builder-page .btn:hover,
.content-row .btn:hover { background: #e8ebf3; }
.builder-page .btn--sm,
.content-row .btn--sm { padding: 8px 15px; font-size: 14px; }
.builder-page .btn--primary { background: var(--accent); color: #fff; }
.builder-page .btn--primary:hover { background: var(--accent-strong); }
.builder-page .btn--block { padding: 15px 22px; font-size: 16px; }
/* белые кнопки на сером острове карточки/блоков */
.builder-page .card .btn:not(.btn--primary),
.builder-page .block .btn:not(.btn--primary) { background: #fff; }
.builder-page .card .btn:not(.btn--primary):hover,
.builder-page .block .btn:not(.btn--primary):hover { background: #e8ebf3; }
.builder-page .icon-btn,
.content-row .icon-btn {
    width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f2f4f9;
    color: #777; font-size: 14px;
}
.builder-page .block .icon-btn { background: #f2f4f9; }
.builder-page .icon-btn:hover,
.content-row .icon-btn:hover { background: #e8ebf3; color: var(--text); }
.builder-page .block__tools { gap: 6px; }

/* блоки содержимого — белые карточки без обводки на сером острове */
.builder-page .block { border: 0; border-radius: 20px; background: #fff; padding: 16px 18px; }
.builder-page .block__kind { background: #f2f4f9; font-size: 13px; font-weight: 500; padding: 5px 11px; }

/* подписи полей и мелкий текст: 13–14px, #999 */
.builder-page .field > label,
.builder-page .field label:not(.btn):not(.seg__item):not(.switch):not(.checkbox):not(.cover-field__remove) {
    color: #999; font-size: 13px; font-weight: 500; letter-spacing: -.1px;
}
.builder-page .small,
.builder-page .card-form__note { font-size: 13px; }
.builder-page .muted { color: #999; }
.builder-page .builder-bar__meta { font-size: 15px; color: #999; }
.builder-page .back-link { font-size: 15px; }

/* бейджи состояния — одно семейство пилюль без обводки */
.builder-page .badge,
.content-row .badge,
.content-row .soon-badge,
.builder-page .soon-badge {
    display: inline-flex; align-items: center; border: 0; border-radius: 10000px;
    padding: 5px 11px 6px; background: #f2f4f9; color: #555;
    font-size: 13px; font-weight: 500; letter-spacing: -.1px; line-height: 1.15;
}
.builder-page .badge--success, .content-row .badge--success { background: rgb(47 180 99 / .12); color: #23944f; }
.builder-page .badge--warning, .content-row .badge--warning,
.builder-page .soon-badge, .content-row .soon-badge { background: rgb(255 153 0 / .12); color: #c77700; }
.builder-page .badge--danger, .content-row .badge--danger { background: rgb(255 76 65 / .1); color: #e0362c; }
.builder-page .badge--accent, .content-row .badge--accent { background: #f2f4f9; color: #555; }

/* плитки видов интерактивности и типы вопросов — без обводки, выбранное синее */
.builder-page .kind-card { border: 0; border-radius: 20px; background: #fff; }
.builder-page .kind-card:hover { background: #e8ebf3; }
.builder-page .kind-card.is-active { border: 0; background: var(--accent); color: #fff; }
.builder-page .kind-card.is-active .kind-icon { color: #fff; }
.builder-page .kind-card__name { font-size: 13px; font-weight: 500; }
.builder-page .type-chip { border: 0; background: #fff; font-size: 14px; font-weight: 500; padding: 8px 14px; }
.builder-page .type-chip:hover { background: #e8ebf3; color: var(--text); }
.builder-page .type-picker__title { color: #999; font-size: 13px; letter-spacing: 0; text-transform: none; }

/* список «Добавить материал / шаг» — строки без линий, «+» серым кружком */
.builder-page .picker { border: 0; border-radius: 20px; background: #fff; }
.builder-page .picker__item { border-bottom: 0; border-radius: 14px; padding: 10px 12px; font-size: 15px; }
.builder-page .picker__item + .picker__item { box-shadow: inset 0 1px 0 rgb(0 0 0 / .05); }
.builder-page .picker__item .btn { width: 32px; height: 32px; padding: 0; background: #f2f4f9; font-size: 18px; }

/* флажки → тумблеры, радио — синяя точка; вид как «Опубликован» */
.builder input[type="checkbox"]:not(.switch input):not(.cover-field__input) {
    appearance: none; -webkit-appearance: none; flex: none; position: relative;
    width: 38px; height: 22px; margin: 0; border-radius: 10000px; background: #d9dce3;
    cursor: pointer; transition: background-color .2s ease; vertical-align: middle;
}
.builder input[type="checkbox"]:not(.switch input):not(.cover-field__input)::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.32, .72, 0, 1);
}
.builder input[type="checkbox"]:not(.switch input):not(.cover-field__input):checked { background: var(--accent); }
.builder input[type="checkbox"]:not(.switch input):not(.cover-field__input):checked::after { transform: translateX(16px); }
.builder input[type="checkbox"]:focus-visible,
.builder input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.builder input[type="radio"]:not(.seg__item input) {
    appearance: none; -webkit-appearance: none; flex: none; width: 20px !important; height: 20px !important;
    margin: 0; border-radius: 50%; background: #d9dce3; cursor: pointer; position: relative;
}
.builder input[type="radio"]:not(.seg__item input):checked { background: var(--accent); }
.builder input[type="radio"]:not(.seg__item input):checked::after {
    content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff;
}
.builder .checkbox { gap: 10px; font-size: 15px; font-weight: 500; }
.builder .checkbox input { width: 38px; height: 22px; }

/* выпадашка канона вместо нативного select (builder.js оборачивает его в .bsel) */
.bsel { position: relative; }
.bsel > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.bsel__btn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    min-height: 44px; padding: 10px 16px; border: 0; border-radius: 14px; background: #fff;
    color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.bsel__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsel__btn svg { flex: none; transition: transform .2s ease; }
.bsel.is-open .bsel__btn svg { transform: rotate(180deg); }
.bsel__pop {
    position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%; max-width: min(360px, calc(100vw - 24px));
    max-height: 320px; overflow: auto; overscroll-behavior: contain; padding: 0; border-radius: 22px;
    background: #fff; box-shadow: 0 18px 44px rgb(0 0 0 / .16), inset 0 0 0 1px rgb(0 0 0 / .06);
}
.bsel__pop[hidden] { display: none; }
.bsel__pop button {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
    padding: 12px 18px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px;
    text-align: left; cursor: pointer;
}
.bsel__pop button + button { box-shadow: inset 0 1px 0 rgb(0 0 0 / .06); }
.bsel__pop button:hover { background: rgb(0 0 0 / .05); }
.bsel__pop button svg { flex: none; opacity: 0; }
.bsel__pop button[aria-selected="true"] svg { opacity: 1; }

/* 13.2 — строки «Материалов»: кнопки без обводки (общие правила выше),
   на телефоне пилюля папок встает под поиск, поиск во всю ширину */
.content-row .content-row__note { font-size: 13px; color: #999; }
@media (max-width: 599px) {
    .catalog-bar { flex-wrap: wrap; }
    .catalog-bar .search { flex: 1 0 100%; }
}

/* 13.3 — «Шаги» в интерактивности: кружки и листалка без обводки */
.steps__dot { border: 0; background: #f2f4f9; color: var(--text); font-weight: 500; }
.steps__dot.is-active { background: var(--accent); color: #fff; }
.steps__nav .btn { border: 0; border-radius: 10000px; background: #f2f4f9; padding: 10px 18px; font-size: 15px; font-weight: 500; }
.steps__nav .btn:hover { background: #e8ebf3; }
.steps__nav .btn--primary { background: var(--accent); color: #fff; }
.steps__nav .btn--primary:hover { background: var(--accent-strong); }
/* поле «Обложка» — зона прораба: кнопке выбора возвращаем ее прежний вид */
.builder-page .btn.cover-field__pick {
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    padding: 6px 12px; font-size: 13px; font-weight: 550; letter-spacing: 0;
}
.builder-page .btn.cover-field__pick:hover { background: var(--surface-2); }
/* счетчик у заголовка острова — белый кружок на сером, как был */
.builder-page .card__head .badge { background: #fff; color: var(--text); }

/* ТЗ #14 — «Назначение» (окно и страница, partials/assign_form.html): язык «Моё обучение» —
   пилюли «Кому», строки с галочкой на сером острове, поиск-пилюля, срок «дд.мм.гггг»
   и быстрые сроки, кнопка 19×32; без обводок и нативных select/checkbox/date (USPECT1) */
.ed-modal .ed-modal__card:has(> .asg-head) { width: min(620px, 100%); padding: 28px 28px 24px; border-radius: 32px; }
.asg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.asg-head h2 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.asg-head p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.25; }
.asg-head__close {
    flex: none; width: 40px; height: 40px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: var(--bg); color: var(--text); cursor: pointer;
    transition: background-color .18s ease;
}
.asg-head__close:hover { background: #e9ecf3; }

.asg { margin-top: 20px; }
.asg-scope { margin: 0 0 14px -2px; }
.asg-scope .tabs-pills__item { position: relative; padding: 10px 15px; color: #cacacc; font-size: 18px; }
.asg-scope .tabs-pills__item:hover { color: rgb(0 0 0 / .45); }
.asg-scope .tabs-pills__item.is-active { background: rgb(0 0 0 / .06); color: var(--text); }
.asg-scope input { position: absolute; opacity: 0; pointer-events: none; }
.asg-scope .tabs-pills__item:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent); }

.asg-search {
    display: flex; align-items: center; gap: 10px; padding: 0 18px;
    border-radius: 10000px; background: var(--bg); color: var(--muted); cursor: text;
}
.asg-search input {
    flex: 1; min-width: 0; padding: 15px 0; border: 0; outline: 0;
    background: none; color: var(--text); font: inherit; font-size: 16px;
}
.asg-search input::placeholder { color: var(--muted); }
.asg-search input::-webkit-search-cancel-button { display: none; }

.asg-list { max-height: 300px; margin-top: 10px; overflow-y: auto; overscroll-behavior: contain; border-radius: 20px; background: var(--bg); }
.asg-list__empty { margin: 0; padding: 16px 18px; color: var(--muted); font-size: 14px; }
.asg-row {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 14px; align-items: center;
    padding: 12px 16px 12px 18px; cursor: pointer; transition: background-color .16s ease;
}
.asg-row[hidden] { display: none; }
.asg-row + .asg-row { box-shadow: inset 0 1px 0 rgb(0 0 0 / .06); }
.asg-row:hover { background: rgb(0 0 0 / .03); }
.asg-row input { position: absolute; opacity: 0; pointer-events: none; }
.asg-row__body { display: flex; flex-direction: column; min-width: 0; }
.asg-row__name { overflow: hidden; font-size: 16px; font-weight: 500; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.asg-row__note { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.asg-row__check {
    width: 26px; height: 26px; display: grid; place-items: center;
    border-radius: 50%; background: rgb(0 0 0 / .07); color: transparent;
    transition: background-color .16s ease, color .16s ease;
}
.asg-row:has(input:checked) { background: var(--surface); }
.asg-row:has(input:checked) .asg-row__check { background: var(--accent); color: #fff; }
.asg-row:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent); }

.asg-all { margin: 0; padding: 18px 20px; border-radius: 20px; background: var(--bg); font-size: 16px; line-height: 1.3; }

.asg-due { margin-top: 22px; }
.asg-due__label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 14px; }
.asg-due__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.asg-due__quick { margin-left: -2px; }
.asg-due__quick .tabs-pills__item { padding: 10px 15px; color: #cacacc; font-size: 18px; }
.asg-due__quick .tabs-pills__item:hover { color: rgb(0 0 0 / .45); }
.asg-due__quick .tabs-pills__item.is-active { background: rgb(0 0 0 / .06); color: var(--text); }
.asg-due__date {
    width: 150px; padding: 11px 18px; border: 0; outline: 0; border-radius: 10000px;
    background: var(--bg); color: var(--text); font: inherit; font-size: 17px; font-weight: 500;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.asg-due__date::placeholder { color: #cacacc; font-weight: 400; }
.asg-due__date:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.asg-due__error { margin: 8px 0 0; color: #ff4c41; font-size: 13px; }

.asg-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.asg-actions__note { margin-right: auto; color: var(--muted); font-size: 14px; }
.asg-actions .btn-h[disabled] { opacity: .35; cursor: default; pointer-events: none; }

.asg-section { margin-top: 30px; }
.asg-section h3,
.asg-island h3 { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -.04em; }
.asg-section__empty { margin: 0; color: var(--muted); font-size: 14px; }
.asg-done { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; border-radius: 20px; background: var(--bg); }
.asg-group + .asg-group { box-shadow: inset 0 1px 0 rgb(0 0 0 / .06); }
.asg-group__head {
    display: flex; align-items: center; gap: 10px; padding: 14px 18px;
    font-size: 16px; font-weight: 500; letter-spacing: -.02em; list-style: none; cursor: pointer;
}
.asg-group__head::-webkit-details-marker { display: none; }
.asg-group__head::after { content: ""; width: 7px; height: 7px; margin-left: 4px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(-45deg); transition: transform .2s ease; }
.asg-group[open] > .asg-group__head::after { transform: rotate(45deg); }
.asg-group__count { margin-left: auto; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.asg-done__row { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 30px; box-shadow: inset 0 1px 0 rgb(0 0 0 / .05); }
.asg-done__row form { margin: 0; flex: none; }
.asg-done__row .btn-h--xs { background: var(--surface); }

/* страница /admin/content/<id>/assign — тот же набор на листе */
.asg-page { max-width: 720px; margin: 0 auto; padding: 6px 0 40px; }
.asg-page__title { margin: 18px 0 0; font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -.05em; }
.asg-page__lead { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.asg-page__done { display: inline-block; margin: 18px 0 0; padding: 10px 16px; border-radius: 10000px; background: var(--bg); font-size: 15px; font-weight: 500; }
.asg-island { margin-top: 34px; }
.asg-island .asg { margin-top: 0; }

@media (max-width: 759px) {
    .ed-modal .ed-modal__card:has(> .asg-head) { padding: 22px 16px 18px; border-radius: 27px; }
    .asg-head h2 { font-size: 26px; }
    .asg-scope,
    .asg-due__quick { margin-right: -16px; padding-right: 16px; }
    .asg-scope .tabs-pills__item,
    .asg-due__quick .tabs-pills__item { padding: 9px 13px; font-size: 16px; }
    .asg-list { max-height: 240px; }
    .asg-actions__note { flex-basis: 100%; }
    .asg-actions .btn-h { flex: 1; }
    .asg-page__title { font-size: 32px; }
}
/* ТЗ #14 — на странице поля листа 14px (в окне 16): полосы пилюль не должны выходить за край; уже назначенные — приглушенно */
@media (max-width: 759px) {
    .asg-page .asg-scope,
    .asg-page .asg-due__quick { margin-right: -14px; padding-right: 14px; }
}
.asg-row.is-assigned .asg-row__name { color: rgb(0 0 0 / .45); }
.asg-row__note b { color: var(--text); font-weight: 500; }
/* отметка верного варианта в тесте — квадратная галочка, а не тумблер */
.builder input[type="checkbox"][data-opt="correct"]:not(.switch input):not(.cover-field__input) {
    width: 20px !important; height: 20px !important; border-radius: 6px; background: #d9dce3;
}
.builder input[type="checkbox"][data-opt="correct"]:not(.switch input):not(.cover-field__input)::after {
    top: 4px; left: 7px; width: 5px; height: 9px; border-radius: 0; background: none;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0;
}
.builder input[type="checkbox"][data-opt="correct"]:not(.switch input):not(.cover-field__input):checked { background: var(--accent); }
.builder input[type="checkbox"][data-opt="correct"]:not(.switch input):not(.cover-field__input):checked::after { transform: rotate(45deg); opacity: 1; }
/* ТЗ #14 — поле срока компактной пилюлей и в окне (общие правила окна тянут поля на всю ширину) */
.asg .asg-due__row .asg-due__date { flex: none; width: 150px; min-height: 0; margin: 0; padding: 11px 18px; border: 0; border-radius: 10000px; background: var(--bg); font-size: 17px; }
/* строки «Материалов» лежат на сером острове — кнопки и бейджи в них белые */
.content-row .btn:not(.btn--primary),
.content-row .icon-btn,
.content-row .badge,
.content-row .soon-badge { background: #fff; }
.content-row .badge--success { background: rgb(47 180 99 / .14); }
.content-row .badge--warning, .content-row .soon-badge { background: rgb(255 153 0 / .14); }
.content-row .btn:not(.btn--primary):hover,
.content-row .icon-btn:hover { background: #e8ebf3; }
/* ТЗ #14 — строки и поиск — это label: общее правило label (серый, 600, отступ снизу) им не подходит */
.asg label.asg-row { margin: 0; color: var(--text); font-weight: 400; }
.asg label.asg-search { margin: 0; color: var(--muted); font-weight: 400; }
.asg .asg-scope label { margin: 0; }

/* ТЗ #15 — «Сотрудники» и окно нового сотрудника в стиле главной (USPECT2) */
/* шапка: «← Админка» над строкой, как на других экранах админки; кнопка справа */
.people-page .page-head { align-items: center; }
.people-page .page-head .back-link { order: -1; flex: 1 0 100%; font-size: 15px; }
.people-page .page-head__text p { color: #999; font-size: 15px; }
/* фильтры: поиск-пилюля и выпадашки канона; «Показать» — серая пилюля */
.people-page .filters { align-items: center; }
.people-page .filters .bsel { flex: 0 1 240px; min-width: 180px; }
.people-page .filters .bsel__btn { min-height: 0; padding: 13px 18px; border-radius: 10000px; background: var(--bg); font-size: 16px; }
.people-page .filters .btn-h { background: var(--bg); color: var(--text); }
.people-page .filters .btn-h:hover { background: #e8ebf3; }
/* бейджи статусов — та же семья пилюль, что в конструкторах */
.people-page .admin-table .badge { padding: 5px 11px 6px; background: #fff; color: #555; font-size: 13px; font-weight: 500; }
.people-page .admin-table .badge--success { background: rgb(47 180 99 / .14); color: #23944f; }
.people-page .admin-table .badge--warning { background: rgb(255 153 0 / .14); color: #c77700; }
.people-page .admin-table .badge--danger { background: rgb(255 76 65 / .1); color: #e0362c; }
.people-page .admin-table th { color: #999; }
.people-page .admin-table .muted { color: #999; }
/* телефон: таблица → карточки сотрудников, без прокрутки вбок */
@media (max-width: 699px) {
    .people-page .filters input[type=search] { flex: 1 0 100%; min-width: 0; }
    .people-page .filters .bsel { flex: 1 1 140px; min-width: 0; }
    .people-page .filters .btn-h { flex: 1 0 100%; }
    .people-page .admin-table { padding: 4px; }
    .people-page .admin-table .table-wrap { overflow: visible; }
    .people-page .admin-table table,
    .people-page .admin-table tbody { display: block; }
    .people-page .admin-table thead { display: none; }
    .people-page .admin-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px; }
    .people-page .admin-table tbody tr + tr { box-shadow: inset 0 1px 0 rgb(0 0 0 / .06); }
    .people-page .admin-table tbody tr + tr td { box-shadow: none; }
    .people-page .admin-table td { display: block; padding: 0; font-size: 15px; }
    .people-page .admin-table td:first-child { grid-column: 1 / -1; }
    .people-page .admin-table td:empty { display: none; }
    .people-page .admin-table td.num::before { content: "Баллы "; color: #999; }
    .people-page .admin-table td.num { text-align: left; }
    .people-page .admin-table .people-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }
    .people-page .admin-table .people-actions .btn-h { display: inline-block; }
    .people-page .admin-table .people-actions .btn-h + .btn-h { margin: 0; }
}
/* окно нового сотрудника: подписи 13–14px #999, выпадашки — серые острова как поля */
.person-form .create-field > span { color: #999; font-size: 14px; font-weight: 500; }
.person-form .bsel__btn { min-height: 0; padding: 18px 20px; border-radius: 20px; background: var(--bg); font-size: 18px; letter-spacing: -.02em; }
.person-form .bsel__pop { max-width: min(420px, calc(100vw - 24px)); }
.person-form .bsel__btn span { display: inline; margin: 0; color: var(--text); font-size: inherit; }

/* ТЗ #14.2 — «Статус переноса» (admin/migration.html): цифры островами в один ряд, типы строками
   с полосой готовности (синий; 100% — градиент «пройдено»), «Собрать N» пилюлей; без таблицы,
   зеленого и оранжевого. «Баллы»: заголовки разделов черные 42/700. «Проверка ответов»: «← Админка»
   над табами (USPECT1) */
.mig { padding: 6px 0 40px; }
.mig__title { margin: 18px 0 0; font-size: 42px; font-weight: 700; line-height: 1.05; letter-spacing: -1.7px; }
.mig__lead { max-width: 640px; margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.3; }
.mig-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.mig-stat { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 20px; background: var(--bg); }
.mig-stat b { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.mig-stat span { color: var(--muted); font-size: 13px; line-height: 1.15; }
.mig-block { margin-top: 40px; }
.mig-block__title { margin: 0 0 14px; font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -.04em; }
.mig-types { overflow: hidden; border-radius: 20px; background: var(--bg); }
.mig-type {
    display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(120px, 2fr) 150px; gap: 20px; align-items: center;
    padding: 12px 14px 12px 20px;
}
.mig-type + .mig-type { box-shadow: inset 0 1px 0 rgb(0 0 0 / .06); }
.mig-type__text { display: flex; flex-direction: column; min-width: 0; }
.mig-type__name { font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.mig-type__note { margin-top: 2px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.mig-type__bar { position: relative; height: 6px; overflow: hidden; border-radius: 10000px; background: rgb(0 0 0 / .07); }
.mig-type__bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); }
.mig-type.is-done .mig-type__bar i { background: linear-gradient(95deg, #4bfb2e -2.23%, #1fda97 40.4%, #47cbd3 73.79%, #1dccf2 101.06%); }
.mig-type__go { justify-self: end; background: var(--surface); }
.mig-type__go:hover { background: #e9ecf3; }
.mig-type__done { display: inline-flex; align-items: center; gap: 6px; justify-self: end; padding-right: 6px; color: var(--muted); font-size: 14px; }
.mig-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mig-card { padding: 20px 22px; border-radius: 20px; background: var(--bg); }
.mig-card h4 { margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.mig-card ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.4; }
.mig-card li + li { margin-top: 4px; }
.mig-card p { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }

.pts .settings-title { margin: 40px 0 16px; color: var(--text); font-size: 42px; font-weight: 700; line-height: 1.05; letter-spacing: -1.7px; }
.pts form:first-of-type .settings-title { margin-top: 18px; }

.answers-back { margin: 6px 0 14px; }

@media (max-width: 1100px) {
    .mig-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 759px) {
    .mig__title { font-size: 30px; letter-spacing: -.04em; }
    .mig-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
    .mig-stat { padding: 14px 16px; }
    .mig-stat b { font-size: 28px; }
    .mig-block { margin-top: 30px; }
    .mig-block__title { font-size: 24px; }
    .mig-type { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 12px 12px 16px; }
    .mig-type__bar { grid-column: 1 / -1; grid-row: 2; }
    .mig-split { grid-template-columns: 1fr; }
    .pts .settings-title { font-size: 30px; letter-spacing: -.04em; }
}
/* ТЗ #14.2 — «Собрать N» — ссылка: без подчеркивания, как кнопка */
.mig-type__go { color: var(--text); text-decoration: none; }
/* ТЗ #14.2 — «Баллы» на телефоне: «назад» уже есть в компактной полосе, вторая не нужна */
@media (max-width: 759px) {
    .pts > .page-bar { display: none; }
}
@media (max-width: 699px) {
    /* карточка сотрудника на телефоне — строки одна под другой, второстепенное серым */
    .people-page .admin-table tr { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
    .people-page .admin-table td { width: 100%; overflow-wrap: anywhere; white-space: normal; }
    .people-page .admin-table td:nth-child(n+3):not(.people-actions):not(.num) { color: #999; font-size: 14px; }
    .people-page .admin-table td:empty, .people-page .admin-table td:nth-child(n+2):not(.people-actions):not(.num):not(:has(.badge)) { min-height: 0; }
}
@media (max-width: 699px) { .people-page .admin-table td { border-bottom: 0; box-shadow: none; } }
/* ТЗ #14а — подсветка при наведении у пилюль «Кому» и срока только там, где есть мышь:
   на телефоне после нажатия она «залипала» и выглядела как выбранный срок */
@media (hover: none) {
    .asg-scope .tabs-pills__item:hover:not(.is-active),
    .asg-due__quick .tabs-pills__item:hover:not(.is-active) { color: #cacacc; }
}
.asg-due__quick .tabs-pills__item:not(.is-active):focus { color: #cacacc; }
.asg-due__quick .tabs-pills__item:not(.is-active):hover { color: rgb(0 0 0 / .45); }

/* ТЗ #15а — поиск в длинных выпадашках и подписи в карточке сотрудника на телефоне */
.bsel__find { position: sticky; top: 0; z-index: 1; padding: 10px; background: #fff; box-shadow: inset 0 -1px 0 rgb(0 0 0 / .06); }
.bsel__find input { width: 100%; padding: 10px 14px; border: 0; border-radius: 10000px; background: #f2f4f9; font: inherit; font-size: 15px; }
.bsel__find input:focus { outline: none; box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / .18); }
.bsel__pop button[hidden] { display: none; }
.bsel__empty { margin: 0; padding: 14px 18px; color: #999; font-size: 14px; }
@media (max-width: 699px) {
    .people-page .admin-table td[data-label]::before { content: attr(data-label); display: block; color: #999; font-size: 13px; }
    .people-page .admin-table td[data-label] { color: var(--text) !important; font-size: 15px !important; margin-top: 4px; }
}

/* ТЗ #12 (USPECT3) — редактор слайдов: «Название слайда» над полотном рядом с вопросом.
   Кнопка второстепенная — серый значок; подпись — какое название увидит сотрудник:
   свое — черным, взятое из текста слайда — серым. */
.ed-fab--title .ed-fab__icon { background: var(--bg); color: var(--text); }
.ed-fab--title .ed-fab__sub { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-fab--title.has-title .ed-fab__sub { color: var(--text); }
.ed-title-auto { margin: 2px 0 0; }

/* ТЗ #17: тумблеры и точки — только в самом конструкторе (.builder). Окно «Назначить»
   лежит на той же странице, но вне .builder — его флажки рисует USPECT1 сама */

/* ТЗ #18 — окно «Назначить» на телефоне: пилюли «Кому» и «Срок» переносятся на вторую строку,
   а не уходят за край; «Закрыть / Назначить» прилипают к низу окна — видны без прокрутки (USPECT1) */
@media (max-width: 759px) {
    .asg .asg-scope,
    .asg .asg-due__quick,
    .asg-page .asg-scope,
    .asg-page .asg-due__quick { flex-wrap: wrap; gap: 4px 2px; overflow: visible; margin-right: 0; padding-right: 0; }
    .ed-modal .asg-actions {
        position: sticky; bottom: -18px; z-index: 2;
        margin: 18px -16px -18px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
        background: var(--surface); box-shadow: 0 -1px 0 rgb(0 0 0 / .06);
    }
}

/* ТЗ #22 — признак несохраненного списка в конструкторе траектории и курса */
.unsaved-flag {
    display: inline-flex; align-items: center; gap: 8px;
    margin-right: 12px; font-size: 14px; font-weight: 500; color: var(--accent, #1b1f86);
}
.unsaved-flag::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
}
.unsaved-flag[hidden] { display: none; }

/* ТЗ #31 — календарь срока в «Назначить»: остров канона, неделя с понедельника, выбранный день синий;
   подсказка про 23:59 МСК и продление; пометка «просрочено» в списках (USPECT1) */
.asg-due__cal { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%;
    background: var(--bg); color: var(--text); cursor: pointer; transition: background-color .18s ease; }
.asg-due__cal:hover, .asg-due__cal[aria-expanded="true"] { background: #e9ecf3; }
.asg-cal { width: min(320px, 100%); margin-top: 10px; padding: 14px; border-radius: 20px; background: var(--bg); }
.asg-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 16px; }
.asg-cal__head b { font-weight: 600; }
.asg-cal__nav { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
.asg-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.asg-cal__grid i { padding: 4px 0; color: var(--muted); font-size: 12px; font-style: normal; }
.asg-cal__day { height: 36px; border: 0; border-radius: 10000px; background: none; color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
.asg-cal__day:hover:not(:disabled) { background: var(--surface); }
.asg-cal__day:disabled { color: #cacacc; cursor: default; }
.asg-cal__day.is-today { box-shadow: inset 0 0 0 1.5px #cacacc; }
.asg-cal__day.is-picked { background: var(--accent); color: #fff; box-shadow: none; }
.asg-due__hint { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.3; }
.asg-row__note i, .asg-done__row i { color: #ff4c41; font-style: normal; }

/* ТЗ #27 — визуальный редактор текста в конструкторах и оформленный текст у сотрудника */
.rte { display: block; }
.rte .rte__bar { margin: 0 0 8px; }
.rte__area {
    min-height: 96px; padding: 11px 14px; border-radius: 12px;
    background: var(--surface); color: var(--text); font-size: 16px; line-height: 1.5;
    outline: none; overflow-wrap: anywhere; cursor: text;
}
.sheet .block .rte__area { background: var(--bg); }
.rte__area:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.rte--inline .rte__area { min-height: 42px; }
.rte__area.is-empty::before { content: attr(data-placeholder); color: #999; pointer-events: none; }
.rte__area p { margin: 0 0 .6em; }
.rte__area > :last-child { margin-bottom: 0; }
.rich u { text-underline-offset: 3px; }
.rich ul ul, .rich ol ol, .rich ul ol, .rich ol ul { margin: .25em 0 0; }
.rich .indent-1 { margin-left: 1.5em; }
.rich .indent-2 { margin-left: 3em; }
.rich .indent-3 { margin-left: 4.5em; }
.rich .indent-4 { margin-left: 6em; }
.longread .rich { margin: 0 0 1em; }
.lead.rich p { margin: 0; }
.dialog__choice .rich p, .dialog__feedback .rich p, .dialog__bubble .rich > :last-child { margin-bottom: 0; }
/* ТЗ #31а — «просрочено» в окне сотрудника отчетов; кнопка календаря в один ряд с полем даты */
.prow__late { color: #ff4c41; font-weight: 500; }
@media (min-width: 760px) {
    .asg-due__row { flex-wrap: nowrap; }
    .asg-due__quick { flex: none; }
    .asg .asg-due__row .asg-due__date { width: 128px; padding-left: 14px; padding-right: 14px; }
}

/* ТЗ #26 (USPECT3) — редактор слайдов: тихий индикатор загрузки картинок в шапке
   («Загружаем картинки · 23 из 58 · 41%»), тонкая полоска рядом с состоянием */
.ed-uploads { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted); }
.ed-uploads[hidden] { display: none; }
.ed-uploads__text { overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ed-uploads__bar { flex: none; width: 56px; height: 4px; border-radius: 4px; background: #eee; overflow: hidden; }
.ed-uploads__bar i { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--accent); transition: width .4s ease; }
.ed-uploads.is-waiting { color: var(--warning); }
.ed-uploads.is-waiting .ed-uploads__bar i { background: var(--warning); }
.ed-uploads.is-failed { color: var(--danger); }
.ed-uploads.is-failed .ed-uploads__bar,
.ed-uploads.is-done .ed-uploads__bar { display: none; }
.ed-uploads.is-done { color: var(--success); }

/* ТЗ #32 — страница «Профиль»: фото с обрезкой квадратом, кто я, цифры, мои достижения (USPECT1) */
.pf { max-width: 860px; margin: 0 auto; padding: 8px 0 48px; }
.pf-head { display: flex; align-items: center; gap: 24px; }
.pf-photo { position: relative; flex: none; }
.pf-photo__face { width: 120px; height: 120px; font-size: 38px; }
.pf-photo__face img { width: 100%; height: 100%; object-fit: cover; }
.pf-photo__pick { position: absolute; right: -2px; bottom: -2px; width: 40px; height: 40px; display: grid; place-items: center;
    margin: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 0 0 4px var(--surface); }
.pf-who { min-width: 0; }
.pf-who__name { margin: 0; font-size: 42px; font-weight: 700; line-height: 1.02; letter-spacing: -1.7px; }
.pf-who__sub { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.pf-who__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
.pf-stat { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 20px; background: var(--bg); }
.pf-stat b { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.05em; }
.pf-stat span { color: var(--muted); font-size: 14px; }
.pf-block { margin-top: 38px; scroll-margin-top: 16px; }
.pf-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pf-block__head h3 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.04em; }
.pf-block__head span { color: var(--muted); font-size: 16px; }
.pf-next { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding: 16px 20px; border-radius: 20px; background: var(--bg); font-size: 15px; }
.pf-next__bar { position: relative; height: 6px; overflow: hidden; border-radius: 10000px; background: rgb(0 0 0 / .07); }
.pf-next__bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit;
    background: linear-gradient(95deg, #4bfb2e -2.23%, #1fda97 40.4%, #47cbd3 73.79%, #1dccf2 101.06%); }
.pf-awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pf-awards .award { padding: 12px 14px; border-radius: 20px; background: var(--bg); }
.pf-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-crop__card { width: min(420px, 100%); text-align: left; }
.pf-crop__card h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.04em; }
.pf-crop__card > p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.pf-crop__stage { position: relative; width: 100%; aspect-ratio: 1; margin-top: 16px; overflow: hidden; border-radius: 20px;
    background: #111; touch-action: none; cursor: grab; }
.pf-crop__stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; pointer-events: none; }
.pf-crop__ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgb(0 0 0 / .45); pointer-events: none; }
.pf-crop__zoom { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; color: var(--muted); font-size: 14px; font-weight: 400; }
.pf-crop__zoom input { flex: 1; accent-color: var(--accent); }
.pf-crop__error { margin: 10px 0 0; color: #ff4c41; font-size: 14px; }
.pf-crop__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.mesheet__profile { width: 100%; }
@media (max-width: 759px) {
    .pf { padding-top: 0; }
    .pf-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .pf-photo__face { width: 96px; height: 96px; font-size: 30px; }
    .pf-who__name { font-size: 30px; letter-spacing: -.04em; }
    .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
    .pf-stat { padding: 14px 16px; }
    .pf-stat b { font-size: 28px; }
    .pf-block__head h3 { font-size: 24px; }
    .pf-awards { grid-template-columns: minmax(0, 1fr); }
    .pf-actions .btn-h { flex: 1; }
}
/* ТЗ #32 — на главной вместо колонки достижений короткая карточка-ссылка в профиль */
.awardlink { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--bg);
    color: var(--text); text-decoration: none; transition: background-color .18s ease; }
.awardlink:hover { background: #e9ecf3; }
.awardlink .award__pic { flex: none; width: 48px; height: 48px; }
.awardlink__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.awardlink__title { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.awardlink__note { margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.2; }
.awardlink__go { color: var(--muted); font-size: 18px; }
.pf-actions a.btn-h, a.mesheet__profile { color: var(--text); text-decoration: none; }
/* ТЗ #27 — кнопки панели в цвет поля: на сером острове белые, в белой карточке серые */
.sheet .rte .fmt-bar__btn { background: var(--surface); }
.sheet .block .rte .fmt-bar__btn { background: var(--bg); }

/* ТЗ #28 — интерактивности в каноне главной: серые острова без рамок, крупные
   заголовки, пилюли; синий — только выбранное. Основной текст темный во всех
   видах, серым остаются подписи (уточнение, «Шаг 1 из 5»). */
.ix .rich, .ix .accordion__body { color: var(--text); }

/* шаги: полоса прогресса из сегментов, шаг — серый остров */
.ix--steps .steps__rail { display: flex; gap: 6px; padding: 0 0 18px; overflow: visible; }
.ix--steps .steps__dot {
    flex: 1; min-width: 0; height: 28px; padding: 0; border: 0; border-radius: 0;
    background: none; color: transparent; font-size: 0; cursor: pointer;
}
.ix--steps .steps__dot::before {
    content: ""; display: block; height: 6px; border-radius: 10000px;
    background: #e3e6ee; transition: background-color .25s ease;
}
.ix--steps .steps__dot:hover::before { background: #cfd3de; }
.ix--steps .steps__dot.is-active::before,
.ix--steps .steps__dot:has(~ .steps__dot.is-active)::before { background: var(--accent); }
.ix--steps .steps__panel { padding: 40px 44px; border-radius: 32px; background: var(--bg); }
.ix--steps .steps__panel:not([hidden]) { animation: ix-in .3s ease both; }
.ix--steps .steps__num { color: #999; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ix--steps .steps__panel h3 {
    margin: 6px 0 18px; font-size: clamp(26px, 3vw, 36px); font-weight: 700;
    line-height: 1.05; letter-spacing: -1px;
}
.ix--steps .steps__panel .rich { font-size: 18px; line-height: 1.5; }
.ix--steps .steps__nav { justify-content: space-between; margin-top: 20px; }
.ix--steps .steps__nav .btn {
    padding: 19px 32px 20px; border-radius: 10000px; font-size: 18px; font-weight: 500;
    letter-spacing: -.5px; line-height: 1;
}
.ix--steps .steps__nav .btn:not(.btn--primary) { background: var(--bg); color: var(--text); }
.ix--steps .steps__nav .btn:disabled { opacity: .35; }

/* аккордеон и вопрос-ответ: пункт — серый остров, знак в белом круге,
   у раскрытого — синий */
.ix .accordion__item {
    margin-bottom: 10px; border: 0; border-radius: 27px; background: var(--bg);
    transition: background-color .2s ease;
}
.ix .accordion__item:not(.is-open):hover { background: var(--island-hover); }
.ix .accordion__head {
    gap: 16px; padding: 22px 24px 22px 28px; font-size: 20px; font-weight: 500;
    line-height: 1.2; letter-spacing: -.3px;
}
.ix .accordion__head::after {
    content: "+"; display: grid; place-items: center; flex: none; width: 36px; height: 36px;
    border-radius: 50%; background: var(--surface); color: var(--text);
    font-size: 22px; font-weight: 400; line-height: 1;
    transition: background-color .2s ease, color .2s ease, transform .25s ease;
}
.ix .accordion__item.is-open .accordion__head::after {
    content: "+"; background: var(--accent); color: #fff; transform: rotate(45deg);
}
.ix .accordion__body { padding: 0 28px 28px; font-size: 18px; line-height: 1.5; }
.ix .accordion__item.is-open .accordion__body { animation: ix-in .25s ease both; }

/* вкладки: пилюли как на главной, содержимое — серый остров */
.ix .tabs__head { flex-wrap: wrap; gap: 4px; margin: 0 0 16px; border-bottom: 0; overflow: visible; }
.ix .tabs__btn {
    padding: 10px 15px; border: 0; border-radius: 10000px; color: #cacacc;
    font-size: 18px; font-weight: 500; letter-spacing: -.5px; line-height: 1.2;
    transition: color .2s ease, background-color .2s ease;
}
.ix .tabs__btn:hover { color: #999; }
.ix .tabs__btn.is-active { border: 0; background: var(--bg); color: var(--text); }
.ix .tabs__panel { padding: 36px 40px; border-radius: 32px; background: var(--bg); font-size: 18px; line-height: 1.5; }
.ix .tabs__panel:not([hidden]) { animation: ix-in .25s ease both; }

@keyframes ix-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .ix .steps__panel, .ix .accordion__body, .ix .tabs__panel { animation: none !important; }
}

@media (max-width: 600px) {
    .ix--steps .steps__panel, .ix .tabs__panel { padding: 24px 20px; border-radius: 27px; }
    .ix--steps .steps__nav .btn { flex: 1; padding: 16px 20px 17px; }
    .ix .accordion__head { padding: 18px 16px 18px 20px; font-size: 18px; }
    .ix .accordion__body { padding: 0 20px 22px; font-size: 17px; }
    .ix .tabs__btn { font-size: 17px; padding: 9px 13px; }
}
.tool__pop a.tool__pop-main { font-weight: 600; }

/* ТЗ #28 — остальные виды в том же языке: острова без рамок, крупные заголовки,
   синий только у выбранного. Пройденные шаги — классом из JS (без :has). */
.ix--steps .steps__dot.is-passed::before { background: var(--accent); }

/* процесс: этапы-пилюли (#4), содержимое — серый остров */
.ix .process__panel { padding: 36px 40px; border-radius: 32px; background: var(--bg); font-size: 18px; line-height: 1.5; }
.ix .process__panel:not([hidden]) { animation: ix-in .25s ease both; }
.ix .process__stage { padding: 12px 18px; font-size: 18px; letter-spacing: -.3px; }

/* лента времени: события — острова, слева линия с точками */
.ix .timeline { display: grid; gap: 10px; padding-left: 0; border-left: 0; }
.ix .timeline__item { position: relative; padding: 26px 32px 28px 64px; border-radius: 27px; background: var(--bg); }
.ix .timeline__item::before {
    left: 28px; top: 33px; width: 12px; height: 12px; border: 0; background: var(--accent);
}
.ix .timeline__item:not(:last-child)::after {
    content: ""; position: absolute; left: 33px; top: 51px; bottom: -28px; width: 2px;
    background: #dfe2ea; z-index: 1;
}
.ix .timeline__when { margin-bottom: 4px; color: #999; font-size: 16px; font-weight: 500; }
.ix .timeline__item > strong { display: block; margin-bottom: 8px; font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.5px; }
.ix .timeline__item .rich { font-size: 17px; line-height: 1.5; }

/* цикл: этапы по кругу на линии, центр — серый остров. Кружки раньше стояли в центре:
   сдвиг считался в процентах от самого кружка — теперь от размера круга. */
.ix .cycle__ring { --ring: 440px; width: var(--ring); max-width: 100%; }
.ix .cycle__ring::before {
    content: ""; position: absolute; inset: 30px; border-radius: 50%; border: 2px solid #e3e6ee;
}
.ix .cycle__node {
    width: 60px; height: 60px; margin: -30px; border: 0; background: var(--bg); color: var(--text);
    font-size: 18px; font-weight: 500; z-index: 1;
    transform: rotate(calc(var(--index) * (360deg / var(--count))))
               translate(0, calc(var(--ring) * -0.5 + 30px))
               rotate(calc(var(--index) * (-360deg / var(--count))));
    transition: background-color .2s ease, color .2s ease;
}
.ix .cycle__node:hover { background: var(--island-hover); }
.ix .cycle__node.is-active { background: var(--accent); color: #fff; }
.ix .cycle__center { inset: 21%; padding: 22px; border: 0; background: var(--bg); }
.ix .cycle__text strong { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.3px; line-height: 1.15; }
.ix .cycle__text .rich { margin-top: 8px; font-size: 16px; line-height: 1.4; }

/* карточки: лицевая — серый остров, обратная — синяя (перевернутая = выбранная) */
.ix .flipcards { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ix .flipcard { height: 210px; }
.ix .flipcard__face { padding: 24px; border: 0; border-radius: 27px; background: var(--bg); }
.ix .flipcard__face strong { font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.3px; }
.ix .flipcard__face--back { background: var(--accent); color: #fff; overflow: auto; }
.ix .flipcard__face--back .rich, .ix .flipcard__face--back .rich a { color: #fff; font-size: 16px; line-height: 1.4; }
.ix .flipcard:not(.is-flipped):hover .flipcard__face:not(.flipcard__face--back) { background: var(--island-hover); }

/* глоссарий: поиск-пилюля, термины строками через тонкую линию, буква в круге */
.ix .glossary__search { width: 100%; margin-bottom: 18px; padding: 15px 22px; border: 0; border-radius: 10000px; background: var(--bg); font-size: 18px; }
.ix .glossary__entry { gap: 18px; padding: 20px 0; border-bottom: 1px solid #eee; }
.ix .glossary__letter { width: 44px; height: 44px; border-radius: 50%; background: var(--bg); font-size: 18px; }
.ix .glossary__entry strong { font-size: 20px; font-weight: 500; letter-spacing: -.3px; }
.ix .glossary__entry .rich { margin-top: 4px; font-size: 17px; line-height: 1.45; }

/* медиакаталог: карточки — острова */
.ix .catalog { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ix .catalog__card { border: 0; border-radius: 27px; background: var(--bg); }
.ix .catalog__card figcaption { padding: 20px 22px 22px; }
.ix .catalog__card strong { display: block; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.3px; }
.ix .catalog__card .badge { margin-top: 8px; border: 0; background: var(--surface); color: #999; }
.ix .catalog__card .rich { margin-top: 8px; font-size: 16px; line-height: 1.45; }

/* описываемое изображение: пункты — острова, выбранный синий */
.ix .described__stage img { border: 0; border-radius: 27px; }
.ix .described__item {
    margin-bottom: 8px; padding: 18px 20px; border: 0; border-radius: 20px; background: var(--bg);
    transition: background-color .2s ease, color .2s ease;
}
.ix .described__item:hover { background: var(--island-hover); }
.ix .described__item strong { font-size: 18px; font-weight: 500; }
.ix .described__item .rich { margin-top: 6px; font-size: 15px; line-height: 1.45; }
.ix .described__item.is-active { background: var(--accent); color: #fff; }
.ix .described__item.is-active .rich, .ix .described__item.is-active .rich a { color: #fff; }

/* пирамида: уровни серые, выбранный синий; пояснение — остров */
.ix .pyramid { gap: 6px; }
.ix .pyramid__level {
    padding: 16px 18px; background: var(--bg); color: var(--text); font-size: 17px; font-weight: 500;
    transition: background-color .2s ease, color .2s ease;
}
.ix .pyramid__level:hover { background: var(--island-hover); }
.ix .pyramid__level.is-active { outline: 0; background: var(--accent); color: #fff; }
.ix .pyramid__panel { margin-top: 14px; padding: 26px 30px; border: 0; border-radius: 27px; background: var(--bg); }
.ix .pyramid__panel strong { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.ix .pyramid__panel .rich { margin-top: 8px; font-size: 18px; line-height: 1.5; }

/* круговая диаграмма: выбранная строка легенды — серый остров */
.ix .pie__entry { padding: 14px 16px; border: 0; border-radius: 20px; }
.ix .pie__entry:hover { background: var(--bg); }
.ix .pie__entry.is-active { background: var(--bg); border: 0; }
.ix .pie__entry strong { font-size: 18px; font-weight: 500; }
.ix .pie__entry .rich { margin-top: 4px; font-size: 15px; line-height: 1.45; }

/* картинка с метками и точки: подсказка — белая карточка со скруглением 20.
   Тень оставлена мягкой: без нее белая подсказка теряется на светлых фото. */
.ix .labeled__pop, .ix .hotspot__tip {
    padding: 18px 20px; border: 0; border-radius: 20px; box-shadow: 0 10px 30px rgb(var(--tint) / .14);
}
.ix .labeled__pop strong, .ix .hotspot__tip strong { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.ix .labeled__pop .rich, .ix .hotspot__tip .rich { font-size: 15px; line-height: 1.5; }
.ix .labeled__image img { border-radius: 27px; }
.ix .hotspot { border: 0; border-radius: 27px; }
.ix .hotspot__tip { max-width: 300px; }

@media (max-width: 600px) {
    .ix .process__panel { padding: 24px 20px; border-radius: 27px; }
    .ix .timeline__item { padding: 22px 20px 22px 52px; }
    .ix .timeline__item::before { left: 22px; top: 29px; }
    .ix .timeline__item:not(:last-child)::after { left: 27px; top: 47px; }
    .ix .cycle__ring { --ring: 340px; }
    .ix .cycle__node { width: 52px; height: 52px; margin: -26px; font-size: 16px;
        transform: rotate(calc(var(--index) * (360deg / var(--count))))
                   translate(0, calc(var(--ring) * -0.5 + 26px))
                   rotate(calc(var(--index) * (-360deg / var(--count)))); }
    .ix .cycle__center { inset: 19%; padding: 14px; }
    .ix .cycle__text strong { font-size: 17px; }
    .ix .cycle__text .rich { font-size: 14px; }
    .ix .pyramid__panel { padding: 22px 20px; }
    .ix .glossary__entry strong, .ix .catalog__card strong { font-size: 18px; }
}
@media (max-width: 380px) { .ix .cycle__ring { --ring: 300px; } }
/* ТЗ #28 — абзацы и пункты внутри текста берут цвет текста, а не серый из старых
   правил (.labeled__pop p и др.); на телефоне подсказка у точки — по низу картинки,
   иначе у края она обрезается */
.ix .rich :is(p, li, ul, ol) { color: inherit; }
@media (max-width: 600px) {
    .ix .hotspot__tip {
        left: 12px !important; right: 12px; top: auto !important; bottom: 12px;
        max-width: none; transform: none;
    }
}
/* ТЗ #28 — на телефоне подсказка точки под картинкой, отдельным островом: поверх
   невысокой картинки она закрывает ее целиком */
@media (max-width: 600px) {
    .ix .hotspot { overflow: visible; }
    .ix .hotspot img { border-radius: 27px; }
    .ix .hotspot__tip {
        position: static; margin-top: 12px; padding: 20px; background: var(--bg); box-shadow: none;
    }
}
/* ТЗ #28 — поправка: подсказка выносится скриптом за блок картинки, точки остаются на месте */
@media (max-width: 600px) {
    .ix .hotspot { overflow: hidden; }
    .ix .hotspot + .hotspot__tip { position: static; left: auto !important; top: auto !important; }
}

/* ТЗ #28а — цикл с любым числом этапов: размер кружка от числа этапов (--count),
   центр сжимается вместе с кружками и не наезжает на них */
.ix .cycle__ring { --node: min(60px, calc(var(--ring) * 1.9 / (var(--count) + 3))); }
.ix .cycle__ring::before { inset: calc(var(--node) / 2); }
.ix .cycle__node {
    width: var(--node); height: var(--node); margin: calc(var(--node) / -2);
    font-size: max(13px, calc(var(--node) * .32));
    transform: rotate(calc(var(--index) * (360deg / var(--count))))
               translate(0, calc(var(--ring) * -0.5 + var(--node) / 2))
               rotate(calc(var(--index) * (-360deg / var(--count))));
}
.ix .cycle__center { inset: calc(var(--node) + 12px); overflow: auto; }
@media (max-width: 600px) {
    .ix .cycle__ring { --node: min(52px, calc(var(--ring) * 1.9 / (var(--count) + 3))); }
    .ix .cycle__center { inset: calc(var(--node) + 10px); }
}

/* ТЗ #34а — отметка не дошла: плашка над нижней панелью, пока не досланa */
.offline-done { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 950; transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px; width: min(560px, calc(100% - 32px)); padding: 12px 12px 12px 18px;
    border-radius: 20px; background: #161616; color: #fff; }
.offline-done p { margin: 0; flex: 1; font-size: 14px; line-height: 1.3; }
@media (max-width: 759px) { .offline-done { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ТЗ #28б — «Карточки» в Safari/WebKit: оборот был виден сразу и зеркально. WebKit
   сплющивает 3D, если у стороны overflow, и без префикса не прячет изнанку. Каждой
   стороне — свой 3D-слой (rotateY), изнанка скрыта с префиксом, прокрутка длинного
   текста — во внутреннем блоке, а не на самой стороне. */
.flipcard__inner { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.flipcard__face { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: rotateY(0deg); }
.flipcard__face--back { transform: rotateY(180deg); }
.ix .flipcard__face--back { overflow: visible; }
.ix .flipcard__face--back > .rich { max-height: 100%; overflow: auto; }
/* ТЗ #28б — WebKit без аппаратного 3D не прячет изнанку и с префиксом: какая сторона
   видна, решаем видимостью; смена — на середине поворота (поворот .5s) */
.flipcard__face { visibility: visible; transition: visibility 0s linear .25s; }
.flipcard__face--back { visibility: hidden; }
.flipcard.is-flipped .flipcard__face { visibility: hidden; }
.flipcard.is-flipped .flipcard__face--back { visibility: visible; }

/* ТЗ #28б, находка 10 — длинное слово или ссылка без пробелов переносится, а не
   распирает страницу (у тестировщика 1095 точек при экране 390): все содержимое
   материала у сотрудника — интерактивности, лонгрид, тренажер */
.player, .player :is(h1, h2, h3, h4, p, li, a, strong, span, div, button, figcaption, blockquote) { overflow-wrap: anywhere; }
.player :is(.ixm__body, .steps__panel, .tabs__panel, .described__item, .pie__entry, .dialog__bubble) { min-width: 0; }

/* ТЗ #31б — поле срока и календарь держатся вместе, ряд переносится целиком; подсказка «дд.мм.гггг»
   не обрезается; отказ сервера на странице назначения — красным */
.asg .asg-due__row { flex-wrap: wrap; }
.asg-due__pick { display: inline-flex; flex: none; align-items: center; gap: 8px; }
.asg .asg-due__row .asg-due__pick .asg-due__date { width: 156px; padding-left: 16px; padding-right: 16px; }
.asg-page__done--bad { background: rgb(255 76 65 / .1); color: #d92d20; }

/* ТЗ #38 — окно «Материал уже изменили» в конструкторах */
.conflict-modal__card { max-width: 560px; }
.conflict-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 14px; }
.conflict-modal__note { margin: 0; color: #999; font-size: 14px; line-height: 1.45; }

/* ТЗ #41 — подсказка у поля редактора, если ссылку поставить нельзя */
.rte__hint { margin: 8px 0 0; color: #ff4c41; font-size: 14px; line-height: 1.4; }
.rte__hint[hidden] { display: none; }

/* ТЗ #42 — окно «Такой файл уже есть» в базе знаний */
.kbtwin__text { margin: 10px 0 0; color: var(--text); font-size: 16px; line-height: 1.45; }
.kbtwin__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ТЗ #40 — «Не получилось открыть фото» у кнопки в профиле */
.pf-photo__error { margin: 10px 0 0; color: #ff4c41; font-size: 14px; line-height: 1.4; }
.pf-photo__error[hidden] { display: none; }

/* ТЗ #48 — нумерация уровней как в Word и Google Docs: 1 → a → i; явный тип из вставки важнее */
.rich ol ol { list-style-type: lower-alpha; }
.rich ol ol ol { list-style-type: lower-roman; }
.rich ol[type="1"] { list-style-type: decimal; }
.rich ol[type="a" s] { list-style-type: lower-alpha; }
.rich ol[type="A" s] { list-style-type: upper-alpha; }
.rich ol[type="i" s] { list-style-type: lower-roman; }
.rich ol[type="I" s] { list-style-type: upper-roman; }

/* ТЗ #49 — плашка «Есть правки, которых сотрудники еще не видят» над конструктором */
.publish-pending {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
    margin: 0 0 18px; padding: 16px 20px; border-radius: 20px; background: var(--bg);
}
.publish-pending[hidden] { display: none; }
.publish-pending p { flex: 1 1 320px; margin: 0; font-size: 16px; line-height: 1.4; }
.builder-bar__meta [data-unpublished-badge][hidden] { display: none; }

/* ТЗ #31в — ошибка срока красная везде (в окне общее правило серого текста перебивало);
   при прокрутке к полю — запас под прилипшими «Закрыть / Назначить» */
.ed-modal .asg .asg-due__error, .asg-page .asg .asg-due__error { color: #ff4c41; }
@media (max-width: 759px) {
    .ed-modal .ed-modal__card:has(> .asg-head) { scroll-padding-bottom: 120px; }
}

/* ТЗ #28г — длинное название вкладки переносится внутри своей пилюли, а не распирает
   страницу (на iPhone «Концентрированное средство для удаления накипи, 1л» уводило вбок на 72 px) */
.ix .tabs__btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }

/* ТЗ #38д и #49в — кто последним сохранил в окне конфликта; пометка версии у сотрудника */
.conflict-modal__who { margin: 6px 0 0; color: var(--text); font-size: 15px; }
.learn-note { margin-bottom: 20px; }

/* мелочь 10 (qa-h3) — в библиотеке у управляющих: есть правки, которых сотрудники не видят */
.lib__pending { display: inline-flex; align-self: flex-start; margin-top: 8px; padding: 4px 10px; border-radius: 10000px;
    background: var(--warning-soft); color: var(--warning); font-size: 13px; font-weight: 500; }

/* мелочь 7 (qa-h3) — плашка «Есть правки, которых сотрудники еще не видят» липкая: внизу
   длинного лонгрида кнопка «Опубликовать изменения» остается на экране */
.publish-pending { position: sticky; top: 12px; z-index: 8; }

/* мелочь 14 (qa-h3) — в окне кадрирования прозрачное на белом, как сохранится; сообщение
   о неподходящем файле — целиком, под кнопками фото */
.pf-crop__stage { background: #fff; }
.pf-who .pf-photo__error { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* ТЗ М5 — на телефоне подпись «Курс из N уроков» налезала на заголовок курса на 6px:
   у заголовка снизу 12px, а подпись поднята на 18px (под 26px компьютера). Зазор — 8px, как на компьютере */
@media (max-width: 759px) {
    .fgroup__note { margin-top: -4px; }
}

/* #49г — кто сохранил неопубликованные правки (qa-h4) */
.publish-pending__who { flex: 1 1 100%; order: 2; color: var(--muted); font-size: 14px; }
.publish-pending__who:empty { display: none; }

/* ТЗ М2 — окно «Назначить» у неопубликованного материала: честно, что сотрудники его пока не видят */
.asg .asg-unpub { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #fff4e5; color: #8a5300; font-size: 14px; line-height: 1.35; }

/* М1 (qa-h4) — «Метки» и «Точки» без картинки-подложки: точки строкой на сером острове,
   а не друг на друге в центре; каждую можно нажать и пройти материал */
.ix .labeled--nobg .labeled__image, .ix .hotspot--nobg {
    display: flex; flex-wrap: wrap; gap: 12px; width: 100%; min-height: 0; padding: 20px; border-radius: 27px; background: var(--bg);
}
.ix .labeled--nobg .labeled__pin, .ix .hotspot--nobg .hotspot__dot {
    position: static; transform: none; left: auto !important; top: auto !important; width: 44px; height: 44px;
}
.ix .hotspot--nobg { overflow: visible; }
/* М6 (qa-h4) — крестик окошка метки: 44×44 и заметный */
.ix .labeled__close {
    top: 6px; right: 6px; width: 44px; height: 44px; border-radius: 50%;
    background: var(--bg); color: var(--text); font-size: 18px; line-height: 44px;
}
.ix .labeled__pop strong { padding-right: 52px; }