/* Дизайн-система тренажёра.

   Задача из ТЗ (п. 3.2.3): дизайн «интуитивный, визуально лёгкий и
   эмоционально позитивный». Отсюда светлый холст, белые поверхности без
   лишних теней, один фирменный индиго для действий и тёплые оттенки для
   достижений. Слева — боковое меню; тёмная тема — по выбору пользователя
   (тема.js), телефон и планшет — в стиль-адаптив.css.

   Шрифт размещён на сервере Тренажёра, в папке /шрифты; внешние CDN
   не используются: сервер Заказчика может работать без интернета.
   Onest — весь интерфейс, лицензия SIL OFL 1.1, текст лицензии лежит рядом.

   Имена старых переменных (--фон, --карточка, --акцент…) сохранены
   как синонимы: на них ссылаются экраны администрирования. */

/* ─────────────────────── шрифты ─────────────────────── */

@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/шрифты/onest-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/шрифты/onest-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────── токены ─────────────────────── */

:root {
  /* Один рубленый шрифт на всё: книжная гарнитура в заголовках и репликах
     делала интерфейс старомодным. Имя --шрифт-голос оставлено: на него
     ссылаются экраны. */
  --шрифт: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --шрифт-голос: var(--шрифт);

  /* Каналы цвета текста и бренда — для полупрозрачных линий и теней:
     rgb(var(--чернила) / .08). В тёмной теме меняются сами каналы. */
  --чернила: 20 22 28;
  --бренд-rgb: 79 70 229;

  --холст: #f4f5f8;
  --холст-2: #eaecf1;
  --поверхность: #ffffff;
  --поверхность-2: #f8f9fb;
  --текст: #14161c;
  --приглушён: #585d6c;
  --тихий: #878c9b;
  --линия: rgb(var(--чернила) / .08);
  --линия-2: rgb(var(--чернила) / .14);
  --стекло: rgb(255 255 255 / .8);   /* полупрозрачная подложка поверх картинки */

  --бренд: #4f46e5;
  --бренд-тёмный: #4338ca;
  --бренд-глубокий: #1e1b4b;
  --бренд-светлый: #eef0ff;
  --бренд-бледный: #f6f7ff;
  /* Плоский фирменный цвет вместо градиентов; имена сохранены — на них ссылаются экраны. */
  --градиент: linear-gradient(var(--кнопка), var(--кнопка));
  --градиент-тёплый: linear-gradient(var(--кнопка), var(--кнопка));
  /* Заливка главных кнопок и значков с белым текстом: в тёмной теме фирменный
     цвет светлее, и белый текст на нём не читался бы. */
  --кнопка: #4f46e5;
  --кнопка-наведение: #4338ca;

  --золото: #d08a1a;  --золото-фон: #fdf3e0;  --золото-текст: #94600e;
  --успех: #16895f;   --успех-фон: #e4f5ed;
  --внимание: #c26a16; --внимание-фон: #fdf0e1;
  --ошибка: #cc4038;  --ошибка-фон: #fcebea;

  /* Тон сцены по типу персонажа: мягкий, чтобы образ был главным. */
  --тон-студент: #ecE9ff;      --тон-студент-2: #d6d0ff;
  --тон-родитель: #fcefdc;     --тон-родитель-2: #f5d9b1;
  --тон-педагог: #e2f3ea;      --тон-педагог-2: #bfe5d1;
  --тон-работодатель: #e3eefb; --тон-работодатель-2: #c3d9f3;

  /* Скругления строгие: поля и кнопки 6 px, карточки 8, крупные панели 10.
     Плашки и вкладки — не «таблетки», а прямоугольники (--р-п оставлено по имени). */
  --р-с: 4px; --р: 6px; --р-б: 8px; --р-п: 6px;
  --тень-1: none;
  --тень-2: 0 1px 2px rgb(var(--чернила) / .04);
  --тень-3: 0 12px 32px -12px rgb(var(--чернила) / .22);
  --тень-бренда: none;
  --плавно: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;

  /* Синонимы прежних имён — на них ссылаются экраны администрирования. */
  --фон: var(--холст);
  --карточка: var(--поверхность);
  --акцент: var(--бренд);
  --акцент-фон: var(--бренд-светлый);
  --чип: var(--холст-2);
  --радиус: var(--р);
}

/* Тёмная тема: data-theme ставит тема.js — по выбору пользователя, а без выбора —
   по настройке системы. Только для экрана: на печать отчёт идёт светлым. */
@media screen { :root[data-theme="dark"] {
  --чернила: 233 235 241;
  --бренд-rgb: 139 132 255;

  --холст: #0d0f13;
  --холст-2: #1d2027;
  --поверхность: #15181e;
  --поверхность-2: #1a1d24;
  --текст: #e9ebf1;
  --приглушён: #a9aebb;
  --тихий: #7f8494;
  --стекло: rgb(21 24 30 / .8);

  --бренд: #8b84ff;
  --бренд-тёмный: #a39dff;
  --бренд-глубокий: #0b0a24;
  --бренд-светлый: rgb(139 132 255 / .16);
  --бренд-бледный: rgb(139 132 255 / .08);
  --кнопка: #6159ea;
  --кнопка-наведение: #7069f2;

  --золото: #f0b44c;  --золото-фон: rgb(240 180 76 / .14);  --золото-текст: #f0c06a;
  --успех: #3fcf97;   --успех-фон: rgb(63 207 151 / .14);
  --внимание: #f0a255; --внимание-фон: rgb(240 162 85 / .14);
  --ошибка: #ff7066;  --ошибка-фон: rgb(255 112 102 / .14);

  --тон-студент: #231f3f;      --тон-студент-2: #2e2955;
  --тон-родитель: #33271b;     --тон-родитель-2: #463320;
  --тон-педагог: #172a22;      --тон-педагог-2: #1f3b2f;
  --тон-работодатель: #19232f; --тон-работодатель-2: #223046;

  --тень-2: 0 1px 2px rgb(0 0 0 / .3);
  --тень-3: 0 16px 40px -12px rgb(0 0 0 / .6);
  color-scheme: dark;
} }

/* ─────────────────────── основа ─────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--холст); }
body {
  margin: 0; min-height: 100vh;
  color: var(--текст);
  font: 400 15.5px/1.6 var(--шрифт);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background: var(--холст);
}
h1, h2, h3, h4 { letter-spacing: -.02em; line-height: 1.2; font-weight: 650; }
a { color: var(--бренд); }
::selection { background: rgb(var(--бренд-rgb) / .18); }

.иконка { display: inline-flex; flex: none; line-height: 0; }
.иконка svg { display: block; }

.загрузка { padding: 18vh 20px; text-align: center; color: var(--тихий); letter-spacing: .02em; }

@keyframes появление { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes всплытие  { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes сияние    { 0% { transform: scale(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes плавать   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes точки     { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ─────────────────────── каркас ─────────────────────── */

/* Слева боковое меню, справа содержимое. Ширина меню — в --меню: полное меню,
   полоса значков (.узкое: ноутбук поуже и экран ситуации) или ноль на телефоне
   и планшете, где меню выезжает по кнопке из верхней полосы. */
.каркас { --меню: 248px; min-height: 100vh; padding-left: var(--меню); }

.меню-боковое {
  position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: var(--меню);
  display: flex; flex-direction: column;
  padding: 14px 12px 12px;
  background: var(--поверхность); border-right: 1px solid var(--линия);
  overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin;
  transition: width .2s var(--плавно), box-shadow .2s var(--плавно);
}
.меню-верх { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 6px; margin-bottom: 18px; }
.логотип { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; color: inherit; text-decoration: none; border-radius: 6px; }
.знак {
  width: 36px; height: 36px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: #fff; background: var(--кнопка);
}
.бренд-текст { min-width: 0; line-height: 1.25; }
.бренд-текст b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.бренд-текст small { display: block; font-size: 12px; line-height: 1.3; color: var(--тихий); }
.меню-закрыть { display: none; }

.меню-разделы { display: flex; flex-direction: column; gap: 2px; }
.меню-группа {
  padding: 16px 12px 6px; white-space: nowrap; overflow: hidden;
  font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--тихий);
}
.меню-группа:first-child { padding-top: 0; }
.меню-пункт {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 6px;
  color: var(--приглушён); text-decoration: none; white-space: nowrap;
  font-size: 14.5px; font-weight: 540;
  transition: background .15s, color .15s;
}
.меню-пункт .иконка { color: var(--тихий); transition: color .15s; }
.меню-пункт:hover { color: var(--текст); background: rgb(var(--чернила) / .05); }
.меню-пункт:hover .иконка { color: var(--приглушён); }
.меню-пункт.активна { color: var(--бренд); background: var(--бренд-светлый); font-weight: 620; }
.меню-пункт.активна .иконка { color: var(--бренд); }
.меню-подпись { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.меню-низ { margin-top: auto; display: grid; gap: 10px; padding-top: 16px; }
/* Тема — сегментированный переключатель «Светлая / Тёмная». */
.тема { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 6px; background: rgb(var(--чернила) / .05); }
.тема button, .тема button:hover {
  height: 32px; padding: 0 8px; gap: 6px; border: 0; border-radius: 4px; box-shadow: none;
  font-size: 13px; font-weight: 560; color: var(--приглушён); background: transparent;
}
.тема button:hover { color: var(--текст); }
.тема button[aria-pressed="true"] {
  color: var(--текст); background: var(--поверхность);
  box-shadow: 0 1px 2px rgb(var(--чернила) / .1), 0 0 0 1px var(--линия);
}
:root[data-theme="dark"] .тема button[aria-pressed="true"] { background: var(--холст-2); }
.меню-низ .тема-кнопка { display: none; }

.кто { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 0 0 4px; border-top: 1px solid var(--линия); }
.аватарка {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 650; color: #fff; letter-spacing: .02em;
  background: var(--кнопка);
}
.кто-текст { flex: 1; min-width: 0; line-height: 1.25; }
.кто-текст b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.кто-текст small { display: block; font-size: 12px; color: var(--тихий); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.меню-низ .кнопка-иконка, .мобильная-шапка .кнопка-иконка { flex: none; width: 36px; height: 36px; border: 0; background: transparent; }
.меню-низ .кнопка-иконка:hover, .мобильная-шапка .кнопка-иконка:hover { background: rgb(var(--чернила) / .06); box-shadow: none; }

.мобильная-шапка, .меню-подложка { display: none; }

main { max-width: 1240px; margin: 0 auto; padding: 34px 32px 72px; animation: появление .35s var(--плавно); }

/* Полоса значков. Подписи прячутся, при наведении меню раскрывается поверх
   содержимого (с задержкой — чтобы не раскрывалось от случайного движения мыши). */
@media (min-width: 1024px) {
  .каркас.узкое { --меню: 72px; }
  .узкое .меню-боковое:is(:hover, :has(:focus-visible)) { width: 248px; box-shadow: var(--тень-3); transition-delay: .18s; }
  .узкое .меню-боковое :is(.бренд-текст, .меню-подпись, .меню-группа, .кто-текст) { opacity: 0; transition: opacity .12s; }
  .узкое .меню-боковое:is(:hover, :has(:focus-visible)) :is(.бренд-текст, .меню-подпись, .меню-группа, .кто-текст) { opacity: 1; transition-delay: .22s; }
  .узкое .меню-верх { padding: 0 0 0 6px; }
  .узкое .меню-пункт { padding: 0 15px; }
  .узкое .кто { padding-left: 7px; }
  .узкое .меню-боковое:not(:hover):not(:has(:focus-visible)) :is(.тема, .кто .кнопка-иконка) { display: none; }
  .узкое .меню-боковое:not(:hover):not(:has(:focus-visible)) .тема-кнопка { display: inline-flex; width: 48px; height: 38px; border-radius: 6px; }
}

/* Телефон и планшет: сверху полоса с кнопкой меню, меню выезжает слева. */
@media (max-width: 1023px) {
  .каркас { --меню: 0px; }
  .мобильная-шапка {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 8px;
    background: var(--холст); background: color-mix(in srgb, var(--холст) 88%, transparent);
    backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--линия);
  }
  .мобильная-шапка .кнопка-иконка { width: 44px; height: 44px; border-radius: 6px; color: var(--текст); }
  .мобильная-шапка .логотип { gap: 10px; font-size: 16px; }
  .мобильная-шапка .знак { width: 30px; height: 30px; border-radius: 6px; }
  /* На экране ситуации полоса уезжает вместе со страницей: место — ситуации. */
  .узкое .мобильная-шапка { position: relative; }

  .меню-боковое {
    z-index: 60; width: min(304px, 86vw); padding-top: 10px;
    border-right: 0; box-shadow: var(--тень-3);
    transform: translateX(-102%); visibility: hidden;
    transition: transform .28s var(--плавно), visibility 0s linear .28s;
  }
  .меню-открыто .меню-боковое { transform: none; visibility: visible; transition: transform .28s var(--плавно); }
  .меню-закрыть { display: inline-flex; }
  .меню-пункт { height: 46px; font-size: 15.5px; }
  .меню-подложка {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgb(10 12 18 / .45); opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .меню-открыто .меню-подложка { opacity: 1; pointer-events: auto; }
  body:has(.меню-открыто) { overflow: hidden; }
}

/* ─────────────────────── заголовки разделов ─────────────────────── */

.заголовок-раздела { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 24px; }
.заголовок-раздела h1 { font-size: 30px; line-height: 1.15; font-weight: 680; letter-spacing: -.028em; margin: 0; }
.заголовок-раздела .счёт { color: var(--тихий); font-size: 14px; padding-bottom: 4px; }
.заголовок-раздела h2 ~ .счёт { padding-bottom: 1px; }
.заголовок-раздела .справа { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.надзаголовок {
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--бренд); margin-bottom: 8px;
}

/* ─────────────────────── карточки и таблицы ─────────────────────── */

.карточка {
  background: var(--поверхность);
  border: 1px solid var(--линия); border-radius: var(--р-б);
  box-shadow: var(--тень-2); overflow: hidden;
}
/* Широкие таблицы прокручиваются внутри карточки, иначе колонка действий
   уезжает за край и до кнопки не добраться. */
.карточка > table, .карточка > .прокрутка { display: block; overflow-x: auto; }
.карточка > table > * { width: 100%; }
.карточка + .карточка { margin-top: 20px; }
.шапка-карточки {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 22px; border-bottom: 1px solid var(--линия);
  font-weight: 650; font-size: 16px; letter-spacing: -.01em;
}
.шапка-карточки .иконка { color: var(--бренд); }
.шапка-карточки .справа { margin-left: auto; font-weight: 500; font-size: 13.5px; color: var(--тихий); }

table { width: 100%; border-collapse: separate; border-spacing: 0; }
/* Заголовки столбцов переносятся: с боковым меню широкие таблицы (типы доступа)
   иначе уводили столбец действий за край карточки. */
th {
  text-align: left; white-space: normal; vertical-align: bottom;
  font-size: 11.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--тихий);
  padding: 12px 12px; background: var(--поверхность-2); border-bottom: 1px solid var(--линия);
}
th:first-child, td:first-child { padding-left: 20px; }
th:last-child, td:last-child { padding-right: 20px; }
td { padding: 13px 12px; border-bottom: 1px solid var(--линия); vertical-align: middle; font-size: 14px; }
td:last-child { white-space: nowrap; }
tbody tr { transition: background .15s; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--бренд-бледный); }
td.числа, th.числа { text-align: right; font-variant-numeric: tabular-nums; }
.пусто { padding: 44px 24px; text-align: center; color: var(--тихий); }

/* ─────────────────────── кнопки ─────────────────────── */

button, .кнопка {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 6px;
  font: inherit; font-size: 14.5px; font-weight: 560; line-height: 1; white-space: nowrap;
  color: var(--текст); background: var(--поверхность);
  border: 1px solid var(--линия-2); box-shadow: var(--тень-1);
  cursor: pointer; text-decoration: none;
  transition: transform .15s var(--плавно), box-shadow .2s var(--плавно), background .2s, border-color .2s, color .2s, filter .2s;
}
button:hover, .кнопка:hover { border-color: rgb(var(--чернила) / .24); box-shadow: var(--тень-2); }
button:active { transform: translateY(1px); }
button:focus-visible, a:focus-visible { outline: 3px solid rgb(var(--бренд-rgb) / .35); outline-offset: 2px; }
button.главная, .кнопка.главная {
  color: #fff; border-color: transparent; background: var(--кнопка);
  box-shadow: none;
}
button.главная:hover { background: var(--кнопка-наведение); box-shadow: none; }
button.главная:active { transform: translateY(0); }
button.тихая {
  height: 36px; padding: 0 12px; border-color: transparent; background: transparent; box-shadow: none; color: var(--бренд);
}
button.тихая:hover { background: var(--бренд-светлый); box-shadow: none; }
button.крупная { height: 52px; padding: 0 28px; font-size: 16px; border-radius: 6px; }
button.широкая { width: 100%; }
button:disabled, button:disabled:hover {
  opacity: .45; cursor: default; transform: none; filter: none; box-shadow: none;
}
.кнопка-иконка {
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  color: var(--приглушён); background: var(--поверхность);
}
.кнопка-иконка:hover { color: var(--текст); }

/* ─────────────────────── поля ввода ─────────────────────── */

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=search], input[type=email], select, textarea {
  width: 100%; height: 44px; padding: 0 14px;
  font: inherit; font-size: 15px; color: var(--текст);
  background: var(--поверхность); border: 1px solid var(--линия-2); border-radius: 6px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8e9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
input:hover, select:hover, textarea:hover { border-color: rgb(var(--чернила) / .24); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--бренд); box-shadow: 0 0 0 4px rgb(var(--бренд-rgb) / .14);
}
input::placeholder, textarea::placeholder { color: var(--тихий); }
input[type=checkbox], input[type=radio] { accent-color: var(--бренд); width: 17px; height: 17px; }

.поле { margin-bottom: 16px; }
.поле label { display: block; font-size: 13.5px; font-weight: 560; color: var(--приглушён); margin-bottom: 7px; }
.поле .подсказка { font-size: 12.5px; color: var(--тихий); margin-top: 6px; }

.строка { display: flex; gap: 14px; }
.строка > * { flex: 1; }

.фильтры {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--линия); background: var(--поверхность-2);
}
.фильтры input, .фильтры select { max-width: 260px; height: 40px; }

/* ─────────────────────── метки и коды ─────────────────────── */

.метка {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px; border-radius: var(--р-п);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: var(--приглушён); background: var(--холст-2); border: 0;
}
.метка .иконка { opacity: .85; }
.метка.успех, .метка-завершён { color: var(--успех); background: var(--успех-фон); }
.метка.выкл { color: var(--ошибка); background: var(--ошибка-фон); }
.метка.бренд, .метка-в-работе { color: var(--бренд); background: var(--бренд-светлый); }
.метка.золото, .метка-доступен { color: var(--золото-текст); background: var(--золото-фон); }
.метка-недоступен { color: var(--тихий); background: var(--холст-2); }

.код-группы {
  height: auto; padding: 4px 10px; border-radius: 4px; box-shadow: none;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13.5px; font-weight: 650; letter-spacing: .08em;
  color: var(--бренд); background: var(--бренд-светлый); border: 1px dashed rgb(var(--бренд-rgb) / .35);
}
.код-группы:hover { background: var(--бренд-светлый); border-style: solid; box-shadow: none; }

/* ─────────────────────── права: переключатели ─────────────────────── */

.права { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.право {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  font-size: 14px; cursor: pointer; background: var(--поверхность);
  border: 1px solid var(--линия-2); border-radius: 6px; transition: border-color .15s, background .15s;
}
.право:hover { border-color: rgb(var(--бренд-rgb) / .35); }
.право input { margin: 0; }
.право.переопределено { border-color: var(--бренд); background: var(--бренд-бледный); }
.право .название-права { flex: 1; min-width: 0; }
.право .источник { margin-left: 10px; flex: none; white-space: nowrap; font-size: 11.5px; color: var(--тихий); }
/* Флажки прав стоят внутри .поле: общее правило подписей поля (display: block)
   ломало строку флажка — флажок прилипал к названию. */
.поле .право { display: flex; margin-bottom: 0; font-size: 14px; font-weight: 450; color: var(--текст); }

/* ─────────────────────── модальное окно ─────────────────────── */

.подложка {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 7vh 20px; overflow: auto;
  background: rgba(22, 19, 48, .36);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: появление .2s var(--плавно);
}
.окно {
  width: 100%; max-width: 640px;
  background: var(--поверхность); border: 1px solid var(--линия); border-radius: 10px;
  box-shadow: 0 32px 80px -24px rgba(22, 19, 48, .5);
  animation: всплытие .3s var(--плавно);
}
.окно header {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 26px 18px; border-bottom: 1px solid var(--линия);
  font-size: 19px; font-weight: 680; letter-spacing: -.02em;
}
.окно header button {
  margin-left: auto; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  font-size: 20px; font-weight: 400; color: var(--приглушён);
  background: var(--холст); border: 0; box-shadow: none;
}
.окно header button:hover { background: var(--холст-2); color: var(--текст); box-shadow: none; }
.окно .тело { padding: 22px 26px; }
.окно footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 26px 20px; border-top: 1px solid var(--линия);
  background: var(--поверхность-2); border-radius: 0 0 10px 10px;
}
/* Окно редактора кейса шире обычного: слишком много полей. */
.окно:has(.вариант-редактор), .окно:has(.вкладки), .окно:has(.редактор-внешности) { max-width: 800px; }

/* ─────────────────────── уведомления ─────────────────────── */

.уведомления { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.уведомление {
  display: flex; align-items: center; gap: 10px; max-width: 400px;
  padding: 13px 18px; border-radius: 6px; font-size: 14px; color: #fff;
  background: rgba(20, 22, 28, .94); box-shadow: var(--тень-3);   /* тёмная в обеих темах */
  backdrop-filter: blur(8px); animation: всплытие .3s var(--плавно);
}
.уведомление::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #9aa0ff; flex: none; }
.уведомление.успех::before { background: #3ddc97; }
.уведомление.ошибка::before { background: #ff7a6e; }

/* ─────────────────────── вход ─────────────────────── */

/* Слева — иллюстрация во всю высоту с медленным «наплывом», поверх неё
   заголовок на затемнении; справа — форма в карточке. */
.вход-экран {
  position: relative; min-height: 100vh; display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr); grid-template-rows: auto 1fr; background: var(--холст);
}
.вход-история {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 28px 44px 48px; background: #1e1b4b;
}
.вход-фон {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 35%;
  animation: наплыв 26s ease-in-out infinite alternate;
}
@keyframes наплыв { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1.2%, -1%); } }
.вход-история::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(12 11 34 / .05) 0%, rgb(12 11 34 / 0) 34%, rgb(12 11 34 / .62) 62%, rgb(12 11 34 / .9) 100%);
}
.вход-логотип {
  align-self: flex-start; flex: none; padding: 8px 16px 8px 8px; border-radius: 8px;
  color: #14161c; background: rgb(255 255 255 / .84);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 24px -12px rgb(0 0 0 / .35);
}
.вход-логотип .бренд-текст small { color: #585d6c; }
.вход-текст { max-width: 640px; animation: всплытие .6s var(--плавно) both; }
.вход-заголовок {
  margin: 0 0 14px; font-weight: 760; font-size: clamp(32px, 3.3vw, 50px); line-height: 1.08; letter-spacing: -.028em;
  text-shadow: 0 2px 28px rgb(0 0 0 / .35);
}
.вход-заголовок em { font-style: normal; color: #ffd08a; }
.вход-подпись { margin: 0; max-width: 54ch; font-size: 16px; line-height: 1.55; color: rgb(255 255 255 / .86); }
.вход-преимущества { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.вход-преимущества li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: var(--р-п);
  font-size: 13px; line-height: 1.3; color: #fff;
  background: rgb(255 255 255 / .13); border: 1px solid rgb(255 255 255 / .22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.вход-преимущества .иконка { color: #ffd08a; }

.вход-форма { position: relative; z-index: 1; display: grid; place-items: center; padding: 48px 40px; }
.вход-карточка {
  width: 100%; max-width: 420px; padding: 36px 34px 30px;
  background: var(--поверхность); border: 1px solid var(--линия); border-radius: 10px;
  box-shadow: 0 30px 70px -34px rgb(var(--чернила) / .35);
  animation: всплытие .45s var(--плавно);
}
.вход-карточка h2 { font-size: 30px; font-weight: 750; letter-spacing: -.03em; margin: 0 0 6px; }
.вход-карточка .подзаголовок { color: var(--приглушён); font-size: 15px; margin: 0 0 26px; }
.вход-карточка input { height: 50px; font-size: 15.5px; border-radius: 6px; }
.вход-карточка button.главная { margin-top: 8px; }
.вход-примечание {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; padding: 12px 14px;
  font-size: 13px; line-height: 1.5; color: var(--приглушён);
  background: var(--поверхность-2); border: 1px solid var(--линия); border-radius: 6px;
}
.вход-примечание .иконка { color: var(--бренд); margin-top: 1px; }
/* Вход истёк (действует 12 часов): пояснение вместо подзаголовка. */
.вход-истёк {
  display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 22px; padding: 12px 14px;
  font-size: 14px; line-height: 1.5; color: var(--золото-текст);
  background: var(--золото-фон); border: 1px solid rgb(208 138 26 / .22); border-radius: 6px;
}
.вход-истёк .иконка { flex: none; margin-top: 1px; color: var(--золото); }
.вход-тема { position: absolute; top: 20px; right: 20px; z-index: 5; }
.вход-тема .кнопка-иконка {
  width: 42px; height: 42px; color: var(--текст); background: var(--стекло); border: 1px solid var(--линия);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
:root[data-theme="dark"] .вход-фон { filter: brightness(.82) saturate(.95); }

@media (max-width: 1023px) {
  .вход-экран { grid-template-columns: 1fr; grid-template-rows: none; }
  .вход-история { min-height: 52vh; padding: 20px 24px 44px; }
  .вход-форма { padding: 0 24px 48px; margin-top: -34px; }
}

/* ─────────────────────── тренажёр: главный экран ─────────────────────── */

.плашка-демо {
  display: flex; align-items: center; gap: 12px; margin-bottom: 26px;
  padding: 12px 16px; border-radius: 6px; font-size: 14px; color: var(--золото-текст);
  background: var(--золото-фон); border: 1px solid rgb(208 138 26 / .22);
}
.плашка-демо .иконка { color: var(--золото); }

/* Пометка «рабочая версия» (письмо 193-08): одна строка над рабочей областью и на экране входа. */
.плашка-рабочая {
  display: flex; align-items: center; gap: 8px; padding: 7px 20px;
  font-size: 13px; line-height: 1.4; color: var(--золото-текст);
  background: var(--золото-фон); border-bottom: 1px solid rgb(208 138 26 / .22);
}
.плашка-рабочая .иконка { flex: none; color: var(--золото); }
.плашка-рабочая b { font-weight: 650; }
.вход-экран > .плашка-рабочая { grid-column: 1 / -1; }
.плашка-рабочая + .вход-тема { top: 52px; }
@media (max-width: 1023px) { .плашка-рабочая + .вход-тема { top: 64px; } .плашка-рабочая { padding: 7px 14px; } }

.приветствие {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
  margin-bottom: 30px;
}
.приветствие h1 {
  font-family: var(--шрифт-голос); font-weight: 700; font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.1; letter-spacing: -.02em; margin: 0 0 12px;
}
.приветствие p { margin: 0; max-width: 640px; color: var(--приглушён); font-size: 16px; }
.сводка-прогресса {
  display: flex; align-items: center; gap: 22px; padding: 18px 24px 18px 18px;
  background: var(--поверхность); border: 1px solid var(--линия); border-radius: var(--р-б); box-shadow: var(--тень-2);
}
.сводка-прогресса .факты { display: grid; gap: 8px; }
.факт { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--приглушён); white-space: nowrap; }
.факт b { color: var(--текст); font-weight: 650; font-variant-numeric: tabular-nums; }
.факт .иконка { color: var(--золото); }

.кольцо { position: relative; flex: none; display: grid; place-items: center; }
.кольцо svg { display: block; transform: rotate(-90deg); }
.кольцо .дорожка { stroke: var(--холст-2); }
.кольцо .значение { transition: stroke-dashoffset 1.1s var(--плавно); }
.кольцо-текст { position: absolute; text-align: center; line-height: 1.1; }
.кольцо-текст b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.кольцо-текст small { font-size: 11px; color: var(--тихий); letter-spacing: .04em; text-transform: uppercase; }

/* Путь из трёх уровней: карточки, соединённые линией за номерами. */
.путь { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 38px; }
.путь::before {
  content: ''; position: absolute; top: 45px; left: 12%; right: 12%; height: 2px; z-index: 0;
  background: linear-gradient(90deg, var(--линия-2), var(--линия-2)) no-repeat;
}
.шаг {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px;
  padding: 22px 22px 20px; background: var(--поверхность);
  border: 1px solid var(--линия); border-radius: var(--р-б); box-shadow: var(--тень-2);
  transition: transform .25s var(--плавно), box-shadow .25s var(--плавно);
  animation: появление .45s var(--плавно) both;
}
.шаг:nth-child(2) { animation-delay: .06s; }
.шаг:nth-child(3) { animation-delay: .12s; }
.шаг:hover { border-color: var(--линия-2); }
.шаг-верх { display: flex; align-items: center; gap: 12px; }
.шаг-номер {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 17px;
  color: var(--тихий); background: var(--поверхность-2); border: 1px solid var(--линия-2);
}
.шаг-активен .шаг-номер { color: #fff; border-color: transparent; background: var(--градиент); box-shadow: var(--тень-бренда); }
.шаг-завершён .шаг-номер { color: #fff; border-color: transparent; background: var(--успех); }
.шаг-активен { border-color: rgb(var(--бренд-rgb) / .28); box-shadow: 0 0 0 4px rgb(var(--бренд-rgb) / .06), var(--тень-2); }
.шаг-заголовок { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.шаг h3 { margin: 0; font-size: 17px; font-weight: 680; }
.шаг .метка { height: 24px; padding: 0 10px; font-size: 12px; }
.шаг p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--приглушён); }
.шаг-факт { font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border-radius: 6px; color: var(--приглушён); background: var(--поверхность-2); border: 1px solid var(--линия); }
.шаг-факт.успех { color: var(--успех); background: var(--успех-фон); border-color: transparent; }
.шаг-факт.предупр { color: var(--внимание); background: var(--внимание-фон); border-color: transparent; }
.шаг-действия { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.шаг-закрыт { background: var(--поверхность-2); box-shadow: none; }
.шаг-закрыт h3, .шаг-закрыт p { color: var(--тихий); }

/* Вкладки — сегментированный переключатель. */
.вкладки {
  display: flex; gap: 4px; padding: 5px; margin-bottom: 26px; width: max-content; max-width: 100%; overflow-x: auto;
  background: rgb(var(--чернила) / .05); border-radius: var(--р-п);
}
.вкладки a {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 9px 18px; border-radius: var(--р-п);
  color: var(--приглушён); text-decoration: none; font-size: 14.5px; font-weight: 560;
  transition: color .18s, background .18s, box-shadow .18s;
}
.вкладки a:hover { color: var(--текст); }
.вкладки a.активна { color: var(--текст); background: var(--поверхность); box-shadow: var(--тень-1), 0 0 0 1px var(--линия); }
.вкладки a.активна .иконка { color: var(--бренд); }
.вкладки a.неактивна { color: var(--тихий); opacity: .6; cursor: default; }
.вкладка-тело { animation: появление .35s var(--плавно); }

.пусто-мягко {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 56px 24px; color: var(--приглушён); font-size: 15px;
  background: var(--поверхность); border: 1px dashed var(--линия-2); border-radius: var(--р-б);
}
.пусто-мягко .пусто-значок {
  width: 56px; height: 56px; border-radius: 8px; margin-bottom: 6px;
  display: grid; place-items: center; color: var(--бренд); background: var(--бренд-светлый);
}
.пусто-мягко .пусто-имя { font-size: 17px; font-weight: 650; color: var(--текст); }

/* Группа персонажей одной компетенции. */
.компетенция-группа + .компетенция-группа { margin-top: 36px; }
.компетенция-заголовок { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.компетенция-заголовок h2 { margin: 0; font-size: 20px; font-weight: 680; }
.компетенция-заголовок span { font-size: 13.5px; color: var(--тихий); }

.сетка-персонажей { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 18px; }
.персонаж-карточка {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--поверхность); border: 1px solid var(--линия); border-radius: var(--р-б); box-shadow: var(--тень-2);
  transition: transform .25s var(--плавно), box-shadow .25s var(--плавно);
  animation: появление .45s var(--плавно) both;
}
.персонаж-карточка:hover { border-color: var(--линия-2); }
.персонаж-сцена {
  position: relative; height: 176px; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(120% 90% at 50% 100%, var(--тон-2, #d6d0ff) 0%, var(--тон, #ece9ff) 62%);
}
.персонаж-сцена::after {
  content: ''; position: absolute; bottom: 10px; left: 50%; width: 120px; height: 14px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(var(--чернила) / .16), transparent); z-index: 0;
}
.персонаж-сцена .портрет { position: relative; z-index: 1; width: 150px; height: 150px; }
.персонаж-сцена .портрет svg { width: 100%; height: 100%; display: block; }
/* Утверждённый образ персонажа заполняет сцену карточки целиком. */
.персонаж-сцена .портрет.с-образом { position: absolute; inset: 0; width: auto; height: auto; }
/* Образ — в полный рост: целиком, стоит на нижней линии сцены, без обрезки. */
.персонаж-сцена .портрет.с-образом img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: 50% 100%; padding: 8px 6px 0; box-sizing: border-box; }
.персонаж-сцена .метка { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--стекло); color: var(--текст); backdrop-filter: blur(4px); }
.персонаж-сцена .готово {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--успех);
  box-shadow: none;
}
.тон-студент { --тон: var(--тон-студент); --тон-2: var(--тон-студент-2); }
.тон-родитель { --тон: var(--тон-родитель); --тон-2: var(--тон-родитель-2); }
.тон-педагог { --тон: var(--тон-педагог); --тон-2: var(--тон-педагог-2); }
.тон-работодатель { --тон: var(--тон-работодатель); --тон-2: var(--тон-работодатель-2); }

.персонаж-инфо { padding: 18px 20px 6px; }
.персонаж-инфо h3 { margin: 0 0 6px; font-size: 18px; font-weight: 680; }
.персонаж-инфо p {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--приглушён);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.персонаж-блоки { display: grid; gap: 10px; padding: 14px 20px 20px; margin-top: auto; }
.блок-строка {
  display: grid; gap: 10px;
  padding: 12px 14px; background: var(--поверхность-2); border: 1px solid var(--линия); border-radius: 6px;
}
.блок-низ { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.блок-имя { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.блок-подпись { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--тихий); margin-top: 3px; }
.блок-подпись .медаль { display: inline-flex; align-items: center; gap: 4px; color: var(--золото); font-weight: 650; }
.блок-подпись .мало { color: var(--внимание); font-weight: 600; }
.полоса { height: 6px; border-radius: 3px; background: var(--холст-2); overflow: hidden; }
.полоса i { display: block; height: 100%; border-radius: 3px; background: var(--градиент); transition: width .8s var(--плавно); }
.полоса.успех i { background: var(--успех); }
.полоса.внимание i { background: var(--внимание); }
.блок-строка button { height: 34px; padding: 0 14px; font-size: 13.5px; border-radius: 6px; }

/* Вкладка «Мой стиль». */
.стиль-карточка {
  display: grid; grid-template-columns: 230px minmax(0, 1fr); overflow: hidden;
  background: var(--поверхность); border: 1px solid var(--линия); border-radius: var(--р-б); box-shadow: var(--тень-2);
}
.стиль-эмблема {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px 20px;
  color: #fff; text-align: center;
  background: var(--бренд-глубокий);
}
.эмблема-круг {
  width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: inset 0 0 30px rgba(255, 255, 255, .12), 0 16px 40px -12px rgba(0, 0, 0, .5); color: #f7c98b;
}
.стиль-эмблема small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.стиль-тело { padding: 28px 30px; }
.стиль-тело h2 { font-family: var(--шрифт-голос); font-weight: 700; font-size: 30px; margin: 0 0 10px; }
.стиль-тело p { margin: 0 0 16px; color: var(--приглушён); }
.навыки { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 18px; }
.навыки i { width: 16px; height: 16px; border-radius: 5px; background: var(--холст-2); }
.навыки i.есть { background: var(--золото); }
.подпись-раздела { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--тихий); margin: 0 0 8px; }
.зоны { margin-top: 6px; padding: 16px 18px; border-radius: 8px; background: var(--поверхность-2); border: 1px solid var(--линия); }
.зоны p { margin: 0; }

/* Вкладка «Хранилище». */
.хранилище { display: grid; gap: 18px; }
.заметка-новая {
  display: grid; gap: 12px; padding: 18px;
  background: var(--поверхность); border: 1px solid var(--линия); border-radius: var(--р-б); box-shadow: var(--тень-2);
}
.заметка-новая textarea { border-radius: 6px; }
.заметка-действия { display: flex; justify-content: flex-end; }
.заметки { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.заметки li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 16px 18px; background: var(--поверхность); border: 1px solid var(--линия); border-radius: 8px;
}
.заметка-текст { font-family: var(--шрифт-голос); font-size: 15.5px; line-height: 1.6; white-space: pre-line; }
.заметка-дата { font-size: 12.5px; color: var(--тихий); white-space: nowrap; }
/* Компетенция и тема заметки; список — группами по компетенциям. */
.заметка-поля { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 12px; }
.заметка-действия { gap: 8px; }
.заметка-действия [hidden] { display: none; }
.заметки-группы { display: grid; gap: 18px; }
.заметки-группа { display: grid; gap: 4px; }
.заметка-тема { font-weight: 650; margin-bottom: 2px; }
.заметка-кнопки { display: flex; gap: 2px; }
@media (max-width: 640px) {
  .заметка-поля { grid-template-columns: minmax(0, 1fr); }
  .заметки li { grid-template-columns: minmax(0, 1fr) auto; }
  .заметки li .заметка-дата { grid-column: 1; grid-row: 2; }
}
/* «Рейтинг»: строка общего результата выделена. */
.рейтинг-общий { border-color: rgb(var(--бренд-rgb) / .35); }

/* ─────────────────────── экран кейса ─────────────────────── */

.экран-кейса { max-width: 1180px; margin: 0 auto; }
.кейс-панель {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.назад {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px;
  font-size: 14px; font-weight: 560; color: var(--приглушён);
  background: var(--поверхность); border: 1px solid var(--линия); border-radius: var(--р-п); box-shadow: var(--тень-1);
}
.назад:hover { color: var(--текст); }
.кейс-прогресс { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 13.5px; color: var(--приглушён); }
.кейс-прогресс b { color: var(--текст); font-variant-numeric: tabular-nums; }
.кейс-прогресс .полоса { width: 180px; height: 6px; }
.этапы { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.этап {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  font-size: 12.5px; font-weight: 600; color: var(--тихий);
  background: var(--поверхность); border: 1px solid var(--линия); border-radius: var(--р-п);
}
.этап.пройден { color: var(--успех); background: var(--успех-фон); border-color: transparent; }
.этап.текущий { color: #fff; background: var(--градиент); border-color: transparent; box-shadow: var(--тень-бренда); }
.этап-связка { width: 14px; height: 2px; border-radius: 1px; background: var(--линия-2); }

.кейс-сетка { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.кейс-сетка.без-сцены { grid-template-columns: minmax(0, 820px); justify-content: center; }

.сцена {
  position: sticky; top: 20px; overflow: hidden;
  background: var(--поверхность); border: 1px solid var(--линия); border-radius: 10px; box-shadow: var(--тень-2);
}
.сцена-образ {
  position: relative; height: 360px; display: flex; align-items: flex-end; justify-content: center;
  background: var(--тон, var(--тон-студент));
}
.сцена-образ::after {
  content: ''; position: absolute; bottom: 14px; left: 50%; width: 190px; height: 20px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(var(--чернила) / .18), transparent);
}
.сцена-образ .персонаж-рамка { position: relative; z-index: 1; width: 250px; height: 325px; }
.персонаж-рамка svg { width: 100%; height: 100%; display: block; }
/* Анимационные фрагменты персонажа: клип заполняет сцену, тень-подставка не нужна. */
.сцена-образ.с-видео { background: var(--тон, #ece9ff); }
.сцена-образ.с-видео::after { display: none; }
/* Дерево локаций на экране «Группы». */
.локации { list-style: none; margin: 0; padding: 4px 22px; }
.локации li { padding: 6px 0; border-top: 1px solid var(--линия); font-size: 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.действия-локации { display: flex; gap: 4px; flex-shrink: 0; opacity: .55; }
.локации li:hover .действия-локации, .действия-локации:focus-within { opacity: 1; }
.локации li:first-child { border-top: 0; }
.образ-персонажа { display: block; width: 180px; border-radius: 6px; border: 1px solid var(--линия); }
.персонаж-видео { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; object-position: 50% 100%; }
/* Пока звучит реплика, группа рта сжимается и разжимается — персонаж «говорит». */
.персонаж-рамка.говорит .рот-группа { animation: губы 240ms ease-in-out infinite alternate; }
@keyframes губы { from { transform: scaleY(1); } to { transform: scaleY(.4) translateY(6px); } }
.сцена-подпись { padding: 18px 22px 22px; }
.сцена-подпись h3 { margin: 0 0 4px; font-size: 20px; font-weight: 680; }
.сцена-роль { font-size: 13.5px; color: var(--тихий); }
.сцена-состояние {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; height: 30px; padding: 0 12px;
  font-size: 13px; font-weight: 600; color: var(--бренд); background: var(--бренд-светлый); border-radius: var(--р-п);
  animation: появление .4s var(--плавно);
}
.сцена-состояние::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.кейс-содержание { display: grid; gap: 18px; animation: появление .35s var(--плавно); }
.кейс-лист {
  padding: 26px 28px; background: var(--поверхность); border: 1px solid var(--линия); border-radius: var(--р-б); box-shadow: var(--тень-2);
}
.кейс-лист .подпись-раздела { display: flex; align-items: center; gap: 8px; }
.кейс-лист .подпись-раздела .иконка { color: var(--бренд); }
.кейс-контекст { margin: 0; font-size: 16px; line-height: 1.7; }
.кейс-задача { margin: 0; font-family: var(--шрифт-голос); font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -.015em; }
/* Иллюстрация к ситуации — в рамке 2:1, чтобы варианты ответа оставались на экране;
   обрезается верх (стены, окна), низ со столами и героями сохраняется. */
.кейс-иллюстрация { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 65%; border-radius: 8px; }

.варианты { display: grid; gap: 10px; }
button.вариант {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; align-items: start;
  height: auto; padding: 16px 18px; text-align: left; white-space: normal; line-height: 1.55;
  font-size: 15px; font-weight: 450; color: var(--текст);
  background: var(--поверхность); border: 1px solid var(--линия-2); border-radius: 8px; box-shadow: var(--тень-1);
}
button.вариант:hover { border-color: rgb(var(--бренд-rgb) / .45); box-shadow: none; }
.вариант .буква {
  width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; color: var(--приглушён);
  background: var(--поверхность-2); border: 1px solid var(--линия-2); transition: all .2s var(--плавно);
}
.вариант .текст { padding-top: 7px; }
button.вариант.вариант-выбран {
  border-color: var(--бренд); background: var(--бренд-бледный);
  box-shadow: 0 0 0 4px rgb(var(--бренд-rgb) / .12), var(--тень-2);
}
.вариант-выбран .буква { color: #fff; border-color: transparent; background: var(--кнопка); box-shadow: none; }
.кейс-действия { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.кейс-действия .подсказка { margin-right: auto; font-size: 13.5px; color: var(--тихий); }

/* Реакция персонажа. */
.реплика {
  position: relative; padding: 24px 26px 22px;
  background: var(--поверхность); border: 1px solid var(--линия); border-radius: 10px 10px 10px 4px; box-shadow: var(--тень-2);
}
.реплика-кто { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--тихий); }
.реплика-кто b { color: var(--текст); font-weight: 650; }
.реплика-кто button { margin-left: auto; }
.реплика-текст { margin: 0; font-family: var(--шрифт-голос); font-weight: 500; font-size: 20px; line-height: 1.5; letter-spacing: -.005em; }
.реплика-поведение { margin: 12px 0 0; font-size: 14px; color: var(--приглушён); }

.достижение {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 8px;
  color: var(--золото-текст); background: var(--золото-фон); border: 1px solid transparent;
  animation: всплытие .5s var(--плавно);
}
.достижение-значок { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--золото); box-shadow: none; }
.достижение-значок::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(240, 170, 60, .6); animation: сияние 1.6s var(--плавно) 2; }
.достижение b { display: block; font-size: 15.5px; }
.достижение span { font-size: 13.5px; opacity: .85; }

.ос { display: grid; gap: 14px; }
.ос-шкала { padding: 18px 20px; background: var(--поверхность); border: 1px solid var(--линия); border-radius: 8px; }
/* Несколько показателей состояния: шкалы друг под другом, при трёх и более — лепесток. */
.ос-показатели { display: grid; gap: 10px; }
.флажок { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.флажок input { margin-top: 3px; }
.ос-лепесток .диаграмма { max-width: 420px; margin: 4px auto 0; }
.ос-лепесток .диаграмма svg { width: 100%; height: auto; }
/* Поэтапный показ после ответа (ПР, п. 2.3.3): следующий этап проявляется сам. */
.кейс-содержание > * { transition: opacity .45s ease, transform .45s ease; }
.этап-скрыт { opacity: 0; transform: translateY(6px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .кейс-содержание > * { transition: none; } }
.ос-шкала-подпись { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--приглушён); margin-bottom: 12px; }
.ос-шкала-подпись b { margin-left: auto; font-size: 15px; color: var(--текст); font-variant-numeric: tabular-nums; }
.ос-шкала-полоса {
  position: relative; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #f3b3a6 0%, #f6d59a 45%, #9fdcc2 100%);
}
.ос-шкала-метка {
  position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--поверхность); border: 3px solid var(--текст); box-shadow: 0 2px 6px -1px rgb(var(--чернила) / .3);
  transition: left 1s var(--плавно);
}
.ос-шкала-края { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--тихий); }
.ос-текст { margin: 0; padding: 20px 22px; font-size: 16px; line-height: 1.65; background: var(--поверхность); border: 1px solid var(--линия); border-radius: 8px; }
.ос-раздел { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 20px; background: var(--поверхность); border: 1px solid var(--линия); border-radius: 8px; }
.ос-раздел .иконка { width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; color: var(--бренд); background: var(--бренд-светлый); }
.ос-раздел.совет .иконка { color: var(--золото-текст); background: var(--золото-фон); }
.ос-заголовок { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--тихий); margin-bottom: 4px; }
.ос-раздел p { margin: 0; font-size: 15px; line-height: 1.6; }
.ос-цитата {
  position: relative; margin: 0; padding: 22px 24px 22px 60px;
  font-family: var(--шрифт-голос); font-style: italic; font-size: 17px; line-height: 1.6; color: var(--текст);
  background: var(--бренд-бледный); border: 1px solid rgb(var(--бренд-rgb) / .14); border-radius: var(--р-б);
}
.ос-цитата .иконка { position: absolute; left: 20px; top: 22px; color: rgb(var(--бренд-rgb) / .45); }

.завершение { text-align: center; padding: 56px 32px; }
.завершение .значок-итога {
  width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 10px; display: grid; place-items: center; color: #fff;
  background: var(--градиент); box-shadow: var(--тень-бренда);
}
.завершение.успех .значок-итога { background: var(--успех); box-shadow: none; }
.завершение h2 { margin: 0 0 10px; font-family: var(--шрифт-голос); font-weight: 700; font-size: 32px; }
.завершение p { max-width: 520px; margin: 0 auto 12px; color: var(--приглушён); font-size: 16px; }
.завершение .кейс-действия { justify-content: center; margin-top: 22px; }

/* ─────────────────────── дашборд итога ─────────────────────── */

.итог-герой {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 30px; align-items: center;
  padding: 30px 34px; margin-bottom: 22px; color: #fff; overflow: hidden; position: relative;
  border-radius: 10px; box-shadow: var(--тень-3);
  background: var(--бренд-глубокий);
}
.итог-герой .кольцо .дорожка { stroke: rgba(255, 255, 255, .12); }
.итог-герой .кольцо-текст b { font-size: 34px; color: #fff; }
.итог-герой .кольцо-текст small { color: rgba(255, 255, 255, .6); }
.итог-герой h1 { font-family: var(--шрифт-голос); font-weight: 700; font-size: 34px; margin: 0 0 8px; letter-spacing: -.02em; }
.итог-герой p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 15.5px; }
.итог-герой .метка { background: rgba(255, 255, 255, .12); color: #fff; margin-top: 14px; }
.итог-герой button.тихая { color: #fff; }
.итог-герой button.тихая:hover { background: rgba(255, 255, 255, .12); }

.итог-сетка { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px; margin-bottom: 20px; }
.обрез { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.компетенции-список { display: grid; gap: 22px; padding: 22px 24px 26px; }
.компетенция-верх { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 9px; }
.компетенция-имя { font-size: 14.5px; font-weight: 560; line-height: 1.4; }
.компетенция-верх b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.компетенция-строка .полоса { height: 8px; border-radius: 4px; }
.компетенция-низ { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.дельта { font-size: 12.5px; font-weight: 650; }
.дельта.рост { color: var(--успех); }
.дельта.спад { color: var(--ошибка); }
.итог-сетка .карточка + .карточка { margin-top: 0; }
.диаграмма-и-легенда { padding: 16px 20px 22px; }
.диаграмма svg { display: block; width: 100%; max-width: 600px; margin: 0 auto; }
.диаграмма-легенда { display: flex; justify-content: center; gap: 22px; margin-top: 8px; }
.легенда { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--приглушён); }
.легенда::before { content: ''; width: 14px; height: 14px; border-radius: 4px; }
.легенда-серая::before { background: rgb(var(--чернила) / .1); border: 1.5px solid var(--тихий); }
.легенда-синяя::before { background: rgb(var(--бренд-rgb) / .22); border: 2px solid var(--бренд); }

.матрица { width: 100%; border-collapse: separate; border-spacing: 6px; font-size: 13px; }
.матрица th, .матрица td { padding: 10px 8px; text-align: center; border: 0; background: transparent; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.матрица thead th { color: var(--приглушён); font-weight: 600; white-space: normal; vertical-align: bottom; }
.матрица td { height: 40px; border-radius: 6px; background: var(--поверхность-2); }
.уровень-развития-ячейка { text-align: left !important; font-weight: 600; color: var(--текст) !important; white-space: nowrap; }
.уровень-развития-в { background: var(--градиент) !important; box-shadow: var(--тень-бренда); position: relative; }
.уровень-развития-в::after { content: '●'; color: #fff; font-size: 11px; }

.таблица-индикаторов td { font-size: 14px; }
/* На широком экране таблицы дашборда — во всю ширину карточки (на узком остаются прокручиваемыми блоками). */
@media (min-width: 900px) { .карточка > table.таблица-индикаторов { display: table; width: 100%; } }
/* Карточка «Переход на уровень 3»: отступы, как у остальных карточек дашборда. */
.карточка-перехода > p { margin: 14px 16px 10px; }
.карточка.карточка-перехода > table.таблица-индикаторов { margin: 0 16px 6px; width: calc(100% - 32px); }
.карточка-перехода > .кейс-действия { padding: 4px 16px 16px; }
.процент-ячейка { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.процент-ячейка .полоса { width: 90px; height: 6px; }

.блок-стиля { padding: 0; }

/* ─────────────────────── содержание: сводка ─────────────────────── */

.сводка { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.сводка-цифра {
  padding: 16px 18px; text-align: left;
  background: var(--поверхность); border: 1px solid var(--линия); border-radius: 8px; box-shadow: var(--тень-1);
}
.сводка-значение { font-size: 28px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.сводка-имя { margin-top: 2px; font-size: 12.5px; color: var(--тихий); }

/* ─────────────────────── содержание: структура ─────────────────────── */

.структура-компоненты { padding: 6px 0; }
.структура-компонент { padding: 14px 22px; border-top: 1px solid var(--линия); }
.структура-компонент:first-child { border-top: 0; }
.структура-имя-компонента { font-weight: 600; margin-bottom: 8px; }
.структура-индикаторы { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.структура-индикатор { display: contents; }
.структура-индикатор > div { padding: 7px 10px; font-size: 14px; color: var(--приглушён); border-top: 1px dashed var(--линия-2); }
.структура-индикатор > span { align-self: center; border-top: 1px dashed var(--линия-2); padding: 7px 0; }

/* ─────────────────────── содержание: редакторы ─────────────────────── */

.вариант-редактор { margin-bottom: 14px; padding: 16px; background: var(--поверхность-2); border: 1px solid var(--линия); border-radius: 8px; }
.вариант-редактор-шапка { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--линия); }
.вариант-редактор input[type=text], .вариант-редактор input[type=number],
.вариант-редактор select, .вариант-редактор textarea { background: var(--поверхность); }
.вариант-редактор .поле { margin-bottom: 10px; }
.вариант-подсекция { margin: 4px 0 8px; font-size: 11.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--тихий); }
.вариант-реакция, .вариант-ос { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--линия-2); }
/* Кейс с ответами: структура закреплена — пояснение над формой. */
.подсказка.закреплено { margin-bottom: 14px; padding: 10px 12px; border-radius: 6px; color: var(--золото-текст); background: var(--золото-фон); }
.окно select:disabled, .окно input:disabled, .окно textarea:read-only { opacity: .65; cursor: not-allowed; }
/* История изменений кейса. */
table.история td { vertical-align: top; font-size: 13px; }
.история-когда { white-space: nowrap; }
.история-значение { max-width: 220px; overflow-wrap: anywhere; }
/* Перечни в итоге загрузки: устаревший звук, отказ по структуре. */
.импорт-перечень { white-space: pre-line; font-size: 13px; line-height: 1.5; max-height: 320px; overflow: auto; }
.импорт-перечень.ошибка { color: var(--ошибка); }
.разделитель-раздела {
  margin: 20px 0 10px; padding-top: 14px; border-top: 1px solid var(--линия);
  font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--тихий);
}
.редактор-внешности { display: grid; grid-template-columns: 1fr 200px; gap: 20px; align-items: start; }
.редактор-внешности-поля { display: grid; gap: 6px; }
.редактор-внешности-поля .поле { margin-bottom: 6px; }
.предпросмотр-персонажа {
  width: 180px; height: 234px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, var(--тон-студент-2), var(--тон-студент) 64%);
  border: 1px solid var(--линия); border-radius: 8px;
}
.предпросмотр-персонажа svg { width: 100%; height: auto; }
.импорт-итог { margin-top: 16px; }
.импорт-итог ul { color: var(--текст); font-size: 14px; }

/* ─────────────────────── отчёты ─────────────────────── */

.бары { display: grid; gap: 12px; padding: 18px 22px; }
.бар { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: center; }
.бар-имя { font-size: 14.5px; color: var(--текст); }
.бар-полоса { position: relative; height: 26px; overflow: hidden; background: var(--поверхность-2); border: 1px solid var(--линия); border-radius: 6px; }
.бар-фон { height: 100%; border-radius: 4px; background: var(--градиент); }
.бар-процент { position: absolute; right: 10px; top: 4px; font-size: 12.5px; font-weight: 650; color: var(--текст); font-variant-numeric: tabular-nums; }

.дашборд-компетенции { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; padding: 18px 22px; }
.дашборд-компетенция { padding: 16px 18px; background: var(--поверхность); border: 1px solid var(--линия); border-radius: 8px; }
.дашборд-имя { margin-bottom: 4px; font-weight: 600; }
.дашборд-процент { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.дашборд-уровень { margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--тихий); }
.дашборд-компоненты { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--линия-2); }
.дашборд-компонент { display: flex; padding: 4px 0; font-size: 13.5px; }
.дашборд-компонент .числа { margin-left: auto; color: var(--приглушён); }

/* ─────────────────────── адаптив ─────────────────────── */

@media (max-width: 1020px) {
  .кейс-сетка { grid-template-columns: 1fr; }
  .сцена { position: static; display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; }
  .сцена-образ { height: 220px; }
  .сцена-образ .персонаж-рамка { width: auto; height: 196px; aspect-ratio: 5 / 12; }
  .путь { grid-template-columns: 1fr; }
  .путь::before { display: none; }
  .итог-сетка { grid-template-columns: 1fr; }
  .итог-герой { grid-template-columns: auto minmax(0, 1fr); }
  .стиль-карточка { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  main { padding: 22px 16px 56px; }
  .строка { flex-direction: column; }
  .приветствие { grid-template-columns: 1fr; }
  .сцена { grid-template-columns: 1fr; }
  .бар { grid-template-columns: 1fr; gap: 6px; }
  .редактор-внешности { grid-template-columns: 1fr; }
  .предпросмотр-персонажа { width: 140px; height: 182px; }
  table { font-size: 14px; }
  /* Три ступени сложности в узком окне: связки сжимаются, строка не шире экрана. */
  .этапы { width: 100%; margin-left: 0; gap: 4px; }
  .этап { padding: 0 9px; }
  .этап-связка { flex: 1 1 4px; min-width: 4px; width: auto; }
}
/* Подвал страницы: под рабочей областью, той же ширины, приглушённый. */
.подвал { max-width: 1240px; margin: 8px auto 0; padding: 18px 32px 28px; display: flex; flex-wrap: wrap; gap: 6px 22px;
  border-top: 1px solid var(--линия); font-size: 12.5px; color: var(--тихий); }
.подвал a { color: inherit; text-decoration: none; margin-left: auto; }
.подвал a:hover { color: var(--бренд); text-decoration: underline; }
@media (max-width: 760px) { .подвал { margin-top: 8px; padding: 16px 16px 24px; } .подвал a { margin-left: 0; } }
@media print { .подвал { display: none; } }