/* Ноир — уголь + золото. Скин по умолчанию, потому и в :root. Дубль [data-skin="noir"]
   нужен превью на /skins: без него строка «Ноир» красилась бы скином страницы. */
.login__hint { margin-top: 1rem; text-align: center; }
.login__hint a { color: var(--accent-text); }
.login__optional { color: var(--dim); font-size: 0.85em; }

:root, [data-skin="noir"] {
    color-scheme: dark;
    --bg: #14110d;  --text: #efe6d4;  --dim: #d8cdb6;
    --card: #efe6d4;  --card-text: #2a2118;  --card-border: #b8ab90;
    --surface: #1e1913;  --border: #4a4234;
    --accent: #d4a017;  --accent-ink: #2a2118;  --accent-text: #d4a017;
    --ok: #4a7c3f;  --danger: #b3402f;
}

/* Полночь — индиго + лёд */
[data-skin="midnight"] {
    color-scheme: dark;
    --bg: #0f1626;  --text: #e2e8f4;  --dim: #a9b5cb;
    --card: #eef2f8;  --card-text: #1a2336;  --card-border: #b8c2d3;
    --surface: #1a2338;  --border: #33405c;
    --accent: #6cb2f0;  --accent-ink: #0d1524;  --accent-text: #7cbcf5;
    --ok: #45a37a;  --danger: #e0605c;
}

/* Графит — уголь + серебро */
[data-skin="graphite"] {
    color-scheme: dark;
    --bg: #15171a;  --text: #e4e7ea;  --dim: #99a0a8;
    --card: #eceef1;  --card-text: #1c1f23;  --card-border: #b6bcc3;
    --surface: #1e2126;  --border: #363b42;
    --accent: #c3ccd4;  --accent-ink: #15171a;  --accent-text: #cfd6dd;
    --ok: #5ba86f;  --danger: #e0625c;
}

/* Слива — сине-фиолетовый + лаванда */
[data-skin="damson"] {
    color-scheme: dark;
    --bg: #131029;  --text: #e6e1f5;  --dim: #b0a8cc;
    --card: #f0edf9;  --card-text: #1e1930;  --card-border: #c4bcd6;
    --surface: #1b1738;  --border: #2f2a55;
    --accent: #a78bfa;  --accent-ink: #14102b;  --accent-text: #b49dfb;
    --ok: #4fb389;  --danger: #f0637a;
}

/* Космос — чёрно-синий + василёк */
[data-skin="cosmos"] {
    color-scheme: dark;
    --bg: #0b0d1c;  --text: #e2e5f0;  --dim: #a0a6bd;
    --card: #edeef5;  --card-text: #16182a;  --card-border: #bbbdcf;
    --surface: #12142a;  --border: #272b47;
    --accent: #9db1ff;  --accent-ink: #0d0f20;  --accent-text: #adbeff;
    --ok: #4fb389;  --danger: #ef6572;
}

/* Матрица — угольно-зелёный + мягкий код. Единственный скин с тёмной карточкой. */
[data-skin="matrix"] {
    color-scheme: dark;
    --bg: #060d08;  --text: #a8d9b6;  --dim: #6a8f77;
    --card: #0d1710;  --card-text: #bfe6c9;  --card-border: #2b4a35;
    --surface: #0b1410;  --border: #24402d;
    --accent: #5fce88;  --accent-ink: #07130b;  --accent-text: #6fd695;
    --ok: #9ee0a8;  --danger: #e0707a;
}

/* Досье — бумага + охра */
[data-skin="paper"] {
    color-scheme: light;
    --bg: #ece3d2;  --text: #2a2118;  --dim: #6b6252;
    --card: #fbf7ef;  --card-text: #2a2118;  --card-border: #cbbfa6;
    --surface: #e0d6c2;  --border: #c3b7a0;
    --accent: #d4a017;  --accent-ink: #2a2118;  --accent-text: #8a6508;
    --ok: #3d6b34;  --danger: #a13527;
}

/* Ясный день — белый + синий */
[data-skin="sky"] {
    color-scheme: light;
    --bg: #eef3f9;  --text: #16233a;  --dim: #5a6a83;
    --card: #ffffff;  --card-text: #16233a;  --card-border: #cbd7e6;
    --surface: #dfe8f2;  --border: #c2cfe0;
    --accent: #2f6fd0;  --accent-ink: #ffffff;  --accent-text: #1d5bb8;
    --ok: #2e7d52;  --danger: #c0392b;
}

/* Сакура — розовый + слива */
[data-skin="sakura"] {
    color-scheme: light;
    --bg: #fbeef3;  --text: #2e1a25;  --dim: #7a5566;
    --card: #fffafc;  --card-text: #2e1a25;  --card-border: #e6c9d6;
    --surface: #f3dde6;  --border: #e0c2cf;
    --accent: #c2447e;  --accent-ink: #ffffff;  --accent-text: #a63668;
    --ok: #3d7d5a;  --danger: #c0392b;
}

/* Дымчатый — пыльно-голубой + слива */
[data-skin="dove"] {
    color-scheme: light;
    --bg: #eaeff4;  --text: #1f2733;  --dim: #5c6875;
    --card: #ffffff;  --card-text: #1f2733;  --card-border: #ccd5de;
    --surface: #dde4ec;  --border: #c5cfd9;
    --accent: #5b4a86;  --accent-ink: #ffffff;  --accent-text: #4b3c72;
    --ok: #2e7d52;  --danger: #c0392b;
}

/* Пудра — пудровый + тёплый уголь */
[data-skin="powder"] {
    color-scheme: light;
    --bg: #fbf0ee;  --text: #2b2124;  --dim: #6f5c60;
    --card: #fffcfb;  --card-text: #2b2124;  --card-border: #e4cfcb;
    --surface: #f4e0dc;  --border: #ead2ce;
    --accent: #3f3a3d;  --accent-ink: #ffffff;  --accent-text: #322d30;
    --ok: #2e7d52;  --danger: #b83a2f;
}

/* Кларет — розовый беж + винный */
[data-skin="claret"] {
    color-scheme: light;
    --bg: #f9eeec;  --text: #2c1c1c;  --dim: #71585a;
    --card: #fffbfa;  --card-text: #2c1c1c;  --card-border: #e3cac8;
    --surface: #f2ddda;  --border: #e9cfcd;
    --accent: #8c2f39;  --accent-ink: #ffffff;  --accent-text: #7a2831;
    --ok: #2e7d52;  --danger: #b8452f;
}

/* Не палитровое: шрифт от скина не зависит, а тень обязана оставаться тёмной и на светлых.
   --text-scale задаёт ползунок в настройках — инлайновым style на <html>. */
:root {
    --mono: "SF Mono", ui-monospace, Menlo, monospace;
    --shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
    --text-scale: 1;
}

/* База пересчёта rem, а не размер текста страницы (его задаёт body ниже): всё, что должно
   расти вместе с текстом, считается от неё в rem. На телефоне база крупнее — 18px против
   десктопных 16px (десктоп переопределяет её в @media внизу файла): экран у телефона
   близко к глазам, но строка короткая, и мелкий кегль там читается тяжелее. */
html { font-size: calc(18px * var(--text-scale)); }

/* Производные от ядра. Селектор ловит и вложенные элементы с палитрой (превью на /skins):
   var() подставляется на том элементе, где переменная объявлена, поэтому объявления в одном
   лишь :root пересчитались бы по скину страницы, а не по скину превью. */
:root, [data-skin] {
    --surface-2:    color-mix(in srgb, var(--surface) 97%, var(--text));
    --border-soft:  color-mix(in srgb, var(--border) 74%, var(--bg));
    --card-dim:     color-mix(in srgb, var(--card-text) 68%, var(--card));
    --accent-wash:  color-mix(in srgb, var(--accent) 12%, var(--bg));
    --boss-bg:      color-mix(in srgb, var(--surface) 88%, var(--accent));
    --diagram-line: color-mix(in srgb, var(--text) 52%, var(--bg));
    --hint-text:    color-mix(in srgb, var(--accent) 47%, var(--card-text));
    --kind-side:    color-mix(in srgb, var(--accent) 39%, var(--card-text));
    --kind-field:   color-mix(in srgb, var(--ok) 65%, var(--card-text));
    --topbar-bg:    color-mix(in srgb, var(--bg) 95%, transparent);
}

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 1.125rem/1.55 -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Флекс-элементам вроде input/textarea/select/button браузер по умолчанию
   даёт min-width по контенту, а не 0 — из-за этого flex:1-поле рядом с
   кнопкой (напр. .mailbox__search) может распереть всю страницу вширь
   на узких экранах вместо того чтобы сжаться. */
input, textarea, select, button { min-width: 0; }

img, svg { max-width: 100%; }

.page { max-width: 640px; margin: 0 auto; padding: 16px 14px 48px; }

.app-header { position: sticky; top: 0; z-index: 10; }
/* .app-header — липкая шапка (топбар + вкладки курса + полоса игры), поэтому
   якорь вроде <h2 id="stars"> без отступа уезжает под неё — и по клику,
   и при обычной навигации браузера по #hash. Запас взят под самый высокий
   вариант шапки (карточка игрока с селектором игрока). */
[id] { scroll-margin-top: 8.5rem; }
.topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: var(--topbar-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    font-family: var(--mono); font-size: 0.875rem;
}
.topbar__brand { color: var(--accent-text); font-weight: 700; letter-spacing: 2px; text-decoration: none; }
.topbar__section {
    color: var(--dim); font-size: 0.75rem; flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar__rank { color: var(--dim); text-decoration: none; font-size: 0.75rem; text-align: right; }
.topbar__guide {
    color: var(--accent-text); text-decoration: none; border: 1px solid var(--accent-text);
    border-radius: 50%; width: 1.375rem; height: 1.375rem; display: grid; place-items: center;
    font-size: 0.8125rem; font-weight: 700; flex: 0 0 auto; margin-left: auto;
}
.topbar__chief-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar__mail {
    color: var(--accent-text); text-decoration: none; border: 1px solid var(--accent-text);
    border-radius: 50%; width: 1.375rem; height: 1.375rem; display: grid; place-items: center;
    font-size: 0.8125rem; font-weight: 700; flex: 0 0 auto; position: relative;
}
.topbar__mail .tab-badge {
    position: absolute; top: -7px; right: -8px; min-width: 1rem; padding: 1px 4px;
    font-size: 0.625rem; border: 1px solid var(--bg);
}
.course-tabs {
    display: flex; background: var(--topbar-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    font-family: var(--mono); font-size: 0.8125rem;
}
.course-tabs__tab {
    flex: 1; text-align: center; padding: 8px 6px;
    color: var(--dim); text-decoration: none; font-weight: 700;
}
.course-tabs__tab.is-active { color: var(--accent-text); border-bottom: 2px solid var(--accent-text); }
.course-tabs__tab.is-locked { opacity: 0.5; cursor: default; }
.course-tabs--select { padding: 6px 10px; }
.chief-player-select {
    width: 100%; background: transparent; color: var(--dim); border: none;
    font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; padding: 4px;
}

.btn {
    display: inline-block; padding: 12px 20px; border: 0; border-radius: 8px;
    background: var(--accent); color: var(--accent-ink); font-size: 1rem; font-weight: 700;
    cursor: pointer; touch-action: manipulation;
}
.btn:disabled { opacity: 0.5; }
.btn--ghost { background: transparent; color: var(--accent-text); border: 1px solid var(--accent-text); }
.btn--danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }

/* --- Режим игрока: плашка возврата — единственное отличие от вида игрока
       и единственный путь назад в кабинет куратора --- */
.play-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 8px 14px; background: var(--accent); color: var(--accent-ink);
    font-size: 0.875rem; font-weight: 700;
}
.play-banner__btn {
    display: inline-block; border: 0; border-radius: 6px; background: var(--accent-ink);
    color: var(--accent); font-size: 0.8125rem; font-weight: 700; padding: 6px 12px;
    cursor: pointer; touch-action: manipulation; text-decoration: none;
}
.admin__menu-form { display: contents; }

.login { text-align: center; padding-top: 12vh; }
.login__stamp {
    display: inline-block; padding: 4px 12px; border: 2px solid var(--accent-text);
    color: var(--accent-text); font-family: var(--mono); letter-spacing: 3px; transform: rotate(-3deg);
}
.login__error { color: var(--danger); }
.login__form { display: grid; gap: 14px; max-width: 300px; margin: 0 auto; text-align: left; }
.login__form label { display: grid; gap: 6px; font-size: 0.875rem; color: var(--dim); }
.login__form input {
    padding: 12px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font-size: 1.125rem;
}

.sector { margin-bottom: 28px; }
.sector__title {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 1.125rem; border-bottom: 1px dashed var(--border); padding-bottom: 6px;
    cursor: pointer; list-style: none;
}
.sector__title::-webkit-details-marker { display: none; }
.sector__arrow { color: var(--accent-text); transition: transform 0.15s; flex: 0 0 auto; }
.sector[open] .sector__arrow { transform: rotate(90deg); }
.sector__week { color: var(--accent-text); font-family: var(--mono); font-size: 0.8125rem; flex: 0 0 auto; }
.sector__name { flex: 1; min-width: 0; }
.sector__count { color: var(--dim); font-family: var(--mono); font-size: 0.75rem; flex: 0 0 auto; }

.trail { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* min-width:0 — .trail это grid, а у грид-элементов своя автоматическая минимальная
   ширина (по контенту), сама по себе не ужимаемая min-width:0 у внутреннего флекс-текста:
   без неё узел карты дел раздувает колонку .trail на крупном --text-scale. */
.trail__node { position: relative; min-width: 0; }
.trail__card {
    display: flex; align-items: center; gap: 12px;
    background: var(--card); color: var(--card-text);
    border-radius: 10px; padding: 12px 14px; text-decoration: none;
    box-shadow: var(--shadow);
}
.trail__node.is-done::after {
    content: "РАСКРЫТО";
    position: absolute; top: -8px; right: 10px;
    padding: 2px 6px; border: 2px double var(--danger);
    color: var(--danger); background: var(--card);
    font-family: var(--mono); font-weight: 700; font-size: 0.5625rem;
    letter-spacing: 1px; transform: rotate(-6deg);
    pointer-events: none;
}
.trail__card--fog { background: var(--surface-2); color: var(--card-dim); box-shadow: none; border: 1px dashed var(--border-soft); }
.trail__num {
    flex: 0 0 2.25rem; height: 2.25rem; display: grid; place-items: center;
    border-radius: 50%; border: 2px solid currentColor; font-family: var(--mono); font-weight: 700;
    font-size: 0.8125rem; letter-spacing: -0.5px; padding: 0 2px;
}
/* min-width:0 — иначе на крупном --text-scale длинный заголовок не может сжаться
   ниже своей «естественной» ширины и выталкивает карточку за границы (а в сетке
   .page > .sector .trail — ещё и раздувает саму колонку минимакса). */
.trail__title { flex: 1; min-width: 0; overflow-wrap: break-word; font-weight: 600; }
.trail__stars .star { font-style: normal; color: var(--card-border); }
.trail__stars .star.on { color: var(--accent-text); }
.trail__node.is-current .trail__card { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.trail__node.is-boss .trail__card { background: var(--boss-bg); color: var(--text); }

.journal__progress-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 8px; font-family: var(--mono);
}
.journal__progress-head strong { font-size: 1rem; }
.journal__progress-rank { color: var(--accent-text); font-size: 0.8125rem; }
.journal__progress-bar {
    background: var(--surface-2); border-radius: 6px; height: 10px; overflow: hidden; margin-bottom: 6px;
}
.journal__progress-bar-fill { background: var(--accent); height: 100%; }
.journal__progress-caption {
    display: block; color: var(--dim); font-size: 0.8125rem; text-decoration: none; margin-bottom: 14px;
}
.journal__progress-caption:active { color: var(--accent-text); }
.journal__stat-cards { display: flex; gap: 8px; margin-bottom: 14px; }
.journal__stat-card {
    flex: 1; background: var(--surface-2); border-radius: 8px; padding: 8px; text-align: center; font-family: var(--mono);
}
.journal__stat-card-value { display: block; font-size: 1rem; }
.journal__stat-card-label { display: block; color: var(--dim); font-size: 0.625rem; }
.journal__list { list-style: none; padding: 0; display: grid; gap: 8px; }
.journal__list li { background: var(--surface); border-radius: 8px; padding: 10px 12px; font-size: 0.9375rem; }
.journal__diamonds { color: var(--dim); }
.journal__section-title { font-size: 0.9375rem; margin: 20px 0 10px; }

.admin__player-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.admin__player-card + .admin__player-card { border-top: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); padding-top: 18px; }
.admin__player-link { display: block; color: inherit; text-decoration: none; }

.badges { list-style: none; padding: 0; display: grid; gap: 8px; margin-bottom: 8px; }
.badge {
    display: flex; align-items: center; gap: 12px; background: var(--surface);
    border-radius: 8px; padding: 10px 12px;
}
.badge.is-locked { opacity: 0.4; }
.badge__icon { font-size: 1.5rem; flex: 0 0 auto; }
.badge__text { display: flex; flex-direction: column; }
.badge__title { font-weight: 700; font-size: 0.875rem; }
.badge__desc { font-size: 0.75rem; color: var(--dim); }

.letters { list-style: none; padding: 0; display: grid; gap: 8px; margin-bottom: 8px; }
.letter { background: var(--surface); border-radius: 8px; }
.letter.is-locked { opacity: 0.5; }
.letter__summary {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    cursor: pointer; list-style: none; color: var(--text); text-decoration: none; font-weight: 600;
}
.letter__summary::-webkit-details-marker { display: none; }
.letter__summary--locked { cursor: default; }
.letter__icon { font-size: 1.25rem; flex: 0 0 auto; }
.letter__title { font-size: 0.875rem; }
.letter__body { padding: 0 14px 14px; color: var(--dim); font-size: 0.875rem; }
.letters--trail { margin-bottom: 28px; }
.letters--trail .letter { border-left: 3px solid var(--accent-text); }
.letters--trail .letter.is-locked { border-left-color: var(--border); }
.sector .letters--trail { margin: 10px 0 0; }

.back { display: inline-block; margin-top: 20px; color: var(--accent-text); }

.case__title { font-size: 1.375rem; margin-bottom: 4px; }
.case__stamp {
    display: inline-block; padding: 4px 10px; border: 3px double var(--danger);
    color: var(--danger); font-family: var(--mono); font-weight: 700;
    letter-spacing: 2px; transform: rotate(-2deg); background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.case__stars .star { font-style: normal; color: var(--card-dim); }
.case__stars .star.on { color: var(--accent-text); }
.case__next { margin: 10px 0 0; }
.case__intro { color: var(--dim); }

/* Обзор операции для куратора на странице «Содержимое» — свёрнут по умолчанию */
.case-about {
    background: var(--surface-2); border: 1px solid var(--border-soft);
    border-radius: 10px; padding: 10px 14px; margin: 14px 0;
}
.case-about__title { cursor: pointer; font-weight: 700; color: var(--accent-text); }
.case-about__body { margin-top: 8px; }
.case-about__body p { margin: 0 0 10px; color: var(--card-text); line-height: 1.5; }
.case-about__body p:last-child { margin-bottom: 0; }

.euler-diagram { margin: 12px 0 20px; text-align: center; }
.euler-diagram svg { width: 100%; max-width: 280px; height: auto; }
.euler-diagram__circle--a { fill: var(--accent-text); fill-opacity: 0.15; stroke: var(--accent-text); stroke-width: 2; }
.euler-diagram__circle--b { fill: var(--ok); fill-opacity: 0.3; stroke: var(--ok); stroke-width: 2; }
.euler-diagram__circle--c { fill: var(--danger); fill-opacity: 0.2; stroke: var(--danger); stroke-width: 2; }
.euler-diagram__legend {
    display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
    margin: 8px 0 0; padding: 0; font-size: 0.8125rem; color: var(--dim);
}
.euler-diagram__item { display: inline-flex; align-items: center; gap: 5px; }
.euler-diagram__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.euler-diagram__dot--a { background: var(--accent); }
.euler-diagram__dot--b { background: var(--ok); }
.euler-diagram__dot--c { background: var(--danger); }

.rel-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin: 4px 0 20px; }
.rel { flex: 0 0 auto; width: 124px; margin: 0; text-align: center; }
.rel__svg { width: 100%; height: auto; }
.rel__cap { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--dim); }
.rel__c { stroke-width: 2; }
.rel__c--a { fill: var(--accent-text); fill-opacity: 0.16; stroke: var(--accent-text); }
.rel__c--b { fill: var(--ok); fill-opacity: 0.28; stroke: var(--ok); }

/* --- Плавающая точка на кругах Эйлера (w2d3: «Сократ») --- */
.euler-diagram__point { fill: var(--text); stroke: var(--bg); stroke-width: 1.5; }
.euler-diagram__point--ghost { fill: none; stroke: var(--dim); stroke-width: 1.6; stroke-dasharray: 3 3; }
/* Подписи внутри SVG (здесь и ниже в схемах .dg-, .tl-) остаются в px: внутри
   viewBox это user units, а не текст страницы — rem бы их разорвал. */
.euler-diagram__ptlabel { fill: var(--text); font-family: inherit; font-size: 13px; }
.euler-diagram__dot--point { background: var(--text); }
.euler-diagram__note { margin: 6px 0 0; font-size: 0.75rem; color: var(--dim); }

/* --- Матрица примет (w1d2: перья vs полёт) --- */
.trait-grid-wrap { margin: 10px 0 20px; text-align: center; }
.trait-grid { width: 100%; border-collapse: collapse; font-size: 0.8125rem; color: var(--text); }
.trait-grid th, .trait-grid td { border: 1px solid var(--border-soft); padding: 6px 8px; text-align: center; }
.trait-grid thead th { color: var(--dim); font-weight: 600; }
.trait-grid tbody th { text-align: left; font-weight: 600; color: var(--text); }
.trait-grid .col-key { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.trait-grid .yes { color: var(--ok); font-weight: 700; }
.trait-grid .no { color: var(--danger); font-weight: 700; }
.trait-grid__cap { margin: 8px 0 0; font-size: 0.75rem; color: var(--dim); }

/* --- Обобщённые схемы «узлы и стрелки» (деревья, блок-схемы, причинные двери) --- */
.dg-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; margin: 6px 0 20px; }
.dg { flex: 0 0 auto; margin: 0; text-align: center; }
.dg-grid .dg { width: 140px; }
.dg__svg { width: 100%; height: auto; display: block; }
.dg__cap { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--dim); }
.dg--wide { display: block; width: 100%; max-width: 360px; margin: 10px auto 20px; }
.dg--wide .dg__cap { text-align: center; }
.dg-box { fill: var(--surface); stroke-width: 1.6; }
.dg-box--dim { stroke: var(--card-dim); }
.dg-box--accent { stroke: var(--accent-text); }
.dg-box--ok { stroke: var(--ok); }
.dg-box--no { stroke: var(--danger); }
.dg-txt { fill: var(--text); font-family: inherit; font-size: 13px; }
.dg-txt--sm { font-size: 11px; fill: var(--dim); }
.dg-line { stroke: var(--diagram-line); stroke-width: 2; fill: none; }
.dg-line--ok { stroke: var(--ok); }
.dg-line--no { stroke: var(--danger); }
.dg-head { fill: var(--diagram-line); }
.dg-head--ok { fill: var(--ok); }
.dg-head--no { fill: var(--danger); }
.dg-elbl { fill: var(--dim); font-family: inherit; font-size: 11px; }
.dg-mark--ok { fill: var(--ok); font-family: inherit; font-size: 16px; font-weight: 700; }
.dg-mark--no { fill: var(--danger); font-family: inherit; font-size: 16px; font-weight: 700; }

/* --- Временная шкала: интервалы присутствия, точки событий, конфликтующие пары --- */
.tl { display: block; width: 100%; max-width: 380px; margin: 10px auto 20px; text-align: center; }
.tl__svg { width: 100%; height: auto; display: block; }
.tl__cap { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--dim); }
.tl-axis { stroke: var(--diagram-line); stroke-width: 2; }
.tl-tick { stroke: var(--diagram-line); stroke-width: 1.5; }
.tl-bar { fill-opacity: 0.35; stroke-width: 2; }
.tl-bar--a { fill: var(--accent-text); stroke: var(--accent-text); }
.tl-bar--b { fill: var(--ok); stroke: var(--ok); }
.tl-bar--c { fill: var(--danger); stroke: var(--danger); }
.tl-chip { fill: var(--surface); stroke: var(--card-dim); stroke-width: 1.6; }
.tl-chip--no { stroke: var(--danger); }
.tl-txt { fill: var(--text); font-family: inherit; font-size: 11px; }
.tl-txt--dim { fill: var(--dim); }
.tl-txt--xs { font-size: 9px; }
.tl-arc { stroke: var(--danger); stroke-width: 1.6; fill: none; }
.tl-mark--no { fill: var(--danger); font-family: inherit; font-size: 13px; font-weight: 700; }
.tl-window { fill: var(--danger); fill-opacity: 0.08; stroke: none; }

/* --- Ряд из именованных примеров-иконок (без схемы отношений, просто витрина) --- */
.icon-trio { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin: 6px 0 20px; }
.icon-trio__item { flex: 0 0 auto; width: 92px; text-align: center; }
.icon-trio__glyph { font-size: 1.75rem; line-height: 1; }
.icon-trio__cap { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--dim); }

.map-card { background: var(--card); color: var(--card-text); border-radius: 10px; margin-bottom: 16px; padding: 14px; }
.map-card p { margin: 0 0 10px; }
.map-card p:last-of-type { margin-bottom: 0; }
.map-card .task__explain { margin-top: 10px; }

.task { background: var(--card); color: var(--card-text); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.task__summary {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    cursor: pointer; list-style: none; font-weight: 600;
}
.task__summary::-webkit-details-marker { display: none; }
.task__kind {
    font-family: var(--mono); font-size: 0.625rem; letter-spacing: 1px;
    padding: 3px 6px; border-radius: 4px; background: var(--card-text); color: var(--card);
}
.task--side .task__kind { background: var(--kind-side); }
.task--field .task__kind { background: var(--kind-field); }
/* min-width:0 — тот же приём: без него длинное название задания на крупном
   --text-scale не сжимается и «плашка задания» вылезает за карточку. */
.task__name { flex: 1; min-width: 0; overflow-wrap: break-word; }
.task__points { font-family: var(--mono); font-size: 0.8125rem; white-space: nowrap; }
.task__body { padding: 0 14px 14px; border-top: 1px dashed var(--card-border); }
.task--solved { opacity: 0.75; }
.task__done { color: var(--ok); font-family: var(--mono); font-weight: 700; }
.task__failed { color: var(--danger); font-family: var(--mono); }
.task__attempts { font-size: 0.8125rem; color: var(--card-dim); }
.task__feedback { padding: 10px 12px; border-radius: 8px; font-weight: 600; }
.task__feedback.is-ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.task__feedback.is-bad { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.task__feedback.is-hint { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--hint-text); }

.opt {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
    border: 1px solid var(--card-border); border-radius: 8px; margin-bottom: 8px;
}
.opt input { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin: 2px 0 0; accent-color: var(--accent); }
.answer-input {
    width: 100%; padding: 12px; border: 1px solid var(--card-border); border-radius: 8px;
    font-size: 1.0625rem; background: var(--card); color: var(--card-text); margin-bottom: 10px;
}
.answer-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sort-row {
    display: flex; gap: 10px; align-items: center; justify-content: space-between;
    padding: 10px 12px; border: 1px solid var(--card-border); border-radius: 8px; margin-bottom: 8px;
}
.sort-row__item { flex: 1; }
.sort-row select { padding: 8px; border-radius: 6px; border: 1px solid var(--card-border); font-size: 0.9375rem; }

.game__title { margin: 4px 0 6px; }
.game__start { font-family: var(--mono); font-size: 0.9375rem; opacity: 0.85; margin: 8px 0 14px; }
.game-triple { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.game-triple input {
    width: 4.5rem; padding: 12px; text-align: center; border: 1px solid var(--card-border);
    border-radius: 8px; font-size: 1.0625rem; background: var(--card); color: var(--card-text);
}
.game-triple .btn { margin-left: 10px; }
.game-guess { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.game__log { list-style: none; padding: 0; margin: 0 0 14px; font-family: var(--mono); }
.game__log li { padding: 3px 0; }
.game__reveal {
    margin-top: 14px; padding: 14px 16px; border: 1px solid var(--accent-text);
    border-radius: 10px; background: var(--boss-bg); display: flex; flex-direction: column; gap: 8px;
}
.game__reveal-head { font-size: 1.0625rem; }
.game__reveal-rule strong { color: var(--accent-text); }
.game__reveal-note { opacity: 0.9; }
.game__reveal-item { margin: 0; }
.game__reveal-item b { color: var(--accent-text); }
.game__reveal .btn { align-self: flex-start; margin-top: 4px; }

.game__brief { opacity: 0.9; margin: 4px 0 14px; }
.game__counter { font-family: var(--mono); font-size: 0.9375rem; opacity: 0.85; margin: 6px 0 12px; }
.game__counter span { color: var(--accent-text); }
.annotate { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
/* Вся фраза-улика — один визуально замкнутый «чип» (рамка + фон + паддинг на <li>,
   не на кнопке): и текст, и раскрытая палитра ярлыков, и бейдж живут внутри одной
   границы, поэтому даже в открытом состоянии видно, где кончается один фрагмент
   и начинается следующий. */
.annotate__frag {
    margin: 0; padding: 10px 12px; border: 1px solid var(--card-border); border-radius: 8px;
    background: var(--card); transition: border-color 0.15s, box-shadow 0.15s;
}
.annotate__frag:not(.is-found):hover,
.annotate__frag:not(.is-found):focus-within { border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text); }
.annotate__frag.is-found { border-color: var(--accent-text); }
.annotate__phrase {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 0; border: 0; border-radius: 0;
    background: transparent; color: var(--card-text); font: inherit; line-height: 1.4;
}
.annotate__frag.is-found .annotate__phrase { cursor: default; }
/* [hidden] должен реально скрывать элемент: без :not([hidden]) собственный display
   выше по специфичности, чем UA-правило `[hidden]{display:none}`, и палитра/бейдж
   были видны всегда, даже до клика по фразе — из-за этого границы фрагментов и
   тонули в стене одинаковых кнопок-ярлыков под каждой фразой. */
.annotate__badge:not([hidden]) {
    display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px;
    background: var(--accent-text); color: var(--surface); font-size: 0.8125rem; font-weight: 700;
}
.annotate__palette:not([hidden]) { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.annotate__cat {
    cursor: pointer; padding: 8px 12px; border: 1px solid var(--accent-text); border-radius: 999px;
    background: transparent; color: var(--accent-text); font: inherit; font-size: 0.875rem;
}
.annotate__cat:hover { background: var(--accent-text); color: var(--surface); }

.deduction__claims { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.deduction__claims li {
    padding: 10px 12px; border-left: 3px solid var(--accent-text); border-radius: 4px;
    background: var(--boss-bg); font-size: 0.9375rem;
}
.deduction__prompt { font-size: 1.0625rem; margin: 6px 0 12px; }
.deduction__options { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.deduction__opt { font-size: 0.9375rem; }
.deduction__note { opacity: 0.9; font-style: italic; margin: 4px 0 0; }
.game__reveal-codeword {
    font-family: var(--mono); letter-spacing: 1px; margin: 4px 0;
}
.game__reveal-codeword b { color: var(--accent-text); letter-spacing: 3px; }

.scripted-opponent__topic { font-size: 1.0625rem; margin: 4px 0 6px; }
.scripted-opponent__opponent { opacity: 0.75; font-style: italic; margin: 0 0 12px; }
.scripted-opponent__lines { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.scripted-opponent__lines li {
    padding: 10px 12px; border-left: 3px solid var(--accent-text); border-radius: 4px;
    background: var(--boss-bg); font-size: 0.9375rem;
}
.scripted-opponent__judge { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.scripted-opponent__palette { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; flex-basis: 100%; }
.scripted-opponent__trick {
    cursor: pointer; padding: 8px 12px; border: 1px solid var(--accent-text); border-radius: 999px;
    background: transparent; color: var(--accent-text); font: inherit; font-size: 0.875rem;
}
.scripted-opponent__trick:hover { background: var(--accent-text); color: var(--surface); }
.scripted-opponent__counter-prompt { font-size: 1.0625rem; margin: 6px 0 12px; }
.scripted-opponent__counter-options { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.scripted-opponent__counter-opt { font-size: 0.9375rem; }

.gallery { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; }
.gallery-card {
    border: 1px solid var(--card-border); border-radius: 10px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.gallery-card--saved { border-color: var(--accent-text); }
.gallery-card__title { margin: 0; font-size: 1.0625rem; }
.gallery-card__field { display: flex; flex-direction: column; gap: 4px; font-size: 0.9375rem; }
.gallery-card__label { opacity: 0.85; }
.gallery-card__field textarea {
    width: 100%; padding: 10px; border: 1px solid var(--card-border); border-radius: 8px;
    font: inherit; background: var(--card); color: var(--card-text); resize: vertical;
}

.boss-note {
    background: var(--boss-bg); border: 1px solid var(--accent-text); border-radius: 10px;
    padding: 14px 16px; font-family: var(--mono); font-size: 0.9375rem;
}

.admin h2 { font-size: 1rem; margin-top: 24px; }
.admin__menu { display: grid; gap: 10px; margin: 20px 0; }
.admin__menu-item { text-align: center; text-decoration: none; }
.chief-welcome { margin: 12px 0 4px; }
.chief-welcome__lead { margin: 0 0 12px; }
.chief-welcome__hints { margin: 0 0 12px; padding-left: 18px; color: var(--dim); }
.chief-welcome__hints li { margin-bottom: 5px; }
.chief-welcome__hints b { color: var(--text); }
.chief-welcome__more { margin: 0; color: var(--dim); font-size: 0.875rem; }
.chief-welcome__more a { color: var(--accent-text); }
.admin__form { display: grid; gap: 8px; margin-bottom: 12px; }
.admin__form input, .admin__form select, .admin__form textarea {
    padding: 10px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font-size: 1rem;
    min-width: 0; width: 100%; box-sizing: border-box; font-family: inherit;
}
.admin__hint { color: var(--dim); font-size: 0.8125rem; margin: 0 0 8px; }
.admin__reg-link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin: 0 0 8px; font-size: 0.8125rem; }
/* Ссылка тянется, кнопка не жмётся: min-width:0 нужен, иначе длинный токен раздувает flex-элемент
   и на телефоне кнопка уезжает за край вместо переноса на строку ниже. */
.admin__reg-link code { flex: 1 1 12rem; min-width: 0; word-break: break-all; }
.admin__copy { flex: 0 0 auto; padding: 8px 14px; font-size: 0.8125rem; white-space: nowrap; }
.admin__copy.is-done { border-color: var(--ok); color: var(--ok); }
.admin__copy.is-fail { border-color: var(--danger); color: var(--danger); }
.admin__players { list-style: none; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.admin__players a { color: var(--accent-text); }
.admin__overview { color: var(--dim); font-size: 0.875rem; margin-top: 10px; }

.admin__curators { list-style: none; padding: 0; display: grid; gap: 10px; margin: 0 0 20px; }
.admin__curator-row { background: var(--surface); border-radius: 8px; padding: 12px 14px; }
.admin__curator-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.admin__curator-meta { color: var(--dim); font-size: 0.75rem; margin-top: 2px; }
.label { color: var(--accent-text); font-size: 0.6875rem; border: 1px solid var(--accent-text); border-radius: 4px; padding: 1px 6px; margin-left: 4px; }
.ban-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; background: var(--danger); color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.5px; }
.ban-badge--expired { background: var(--border-soft); color: var(--dim); }
.boss-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.5px; }
.boss-alert { background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 10px 14px; margin-top: 12px; font-size: 0.875rem; }
.boss-alert a { color: inherit; font-weight: 700; }

.admin__trail { max-height: 480px; overflow-y: auto; }
.admin__day-summary { cursor: pointer; }
.admin__day-summary::-webkit-details-marker { display: none; }
.admin__day-body { background: var(--card); color: var(--card-text); padding: 10px 14px 14px; border-radius: 0 0 10px 10px; margin-top: -10px; }
.admin__tasks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.admin__task { border: 1px solid var(--card-border); border-radius: 8px; padding: 8px 10px; font-size: 0.8125rem; min-width: 0; }
.admin__task--solved { border-color: var(--ok); }
.admin__task--failed { border-color: var(--danger); }
.admin__task-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin__task-kind { font-family: var(--mono); font-size: 0.625rem; color: var(--card-dim); }
.admin__task-title { flex: 1; min-width: 0; overflow-wrap: break-word; font-weight: 600; }
.admin__task-status { font-size: 0.75rem; white-space: nowrap; }
.admin__task-answer { margin: 6px 0 0; color: var(--card-dim); font-size: 0.75rem; }

.case-day { border: 0; margin: 0; padding: 0; }
.case-day > summary.trail__card { cursor: pointer; list-style: none; }
.case-day > summary.trail__card::-webkit-details-marker { display: none; }
.case-day__body { padding: 12px 14px 4px; }
.trail__counts { color: var(--dim); font-family: var(--mono); font-size: 0.75rem; flex: 0 0 auto; }
.task-day__empty { color: var(--dim); font-size: 0.875rem; }

.opt-list { list-style: none; padding: 0; margin: 8px 0; }
.opt-list .opt { display: block; }
.opt-list .opt--correct { background: color-mix(in srgb, var(--ok) 18%, transparent); border-color: var(--ok); color: var(--ok); font-weight: 700; }
.task__answer strong { color: var(--ok); }
.task__accept { color: var(--card-dim); font-weight: 400; font-size: 0.8125rem; }
.task__hint { color: var(--hint-text); font-size: 0.8125rem; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 6px; padding: 6px 10px; }
.task__dispute { margin-top: 10px; }
.task__dispute > summary { display: inline-block; list-style: none; }
.task__dispute > summary::-webkit-details-marker { display: none; }
.dispute-form { margin-top: 8px; display: grid; gap: 8px; justify-items: start; }
.dispute-form textarea { font-family: inherit; padding: 6px 8px; min-height: 60px; width: 100%; }
.dispute-form__feedback { padding: 10px 12px; border-radius: 8px; font-weight: 600; }
.dispute-form__feedback.is-bad { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.dispute-form__feedback.is-hint { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--hint-text); }

.task__explain { margin-top: 8px; }
.task__explain-text { color: var(--card-text); font-size: 0.8125rem; background: color-mix(in srgb, var(--ok) 12%, transparent); border-radius: 6px; padding: 6px 10px; margin-top: 6px; }
.task__reveal { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.task__bar { width: 100%; height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; display: flex; justify-content: flex-end; }
.task__bar-fill { width: 100%; height: 100%; background: var(--accent); transition-property: width; transition-timing-function: linear; }

/* Вкладки: на мобильном — гибкая сетка в две колонки, устойчивая к любому числу
   кнопок (в кабинете агента их шесть, у карточки игрока три, у day.twig две) —
   одинокая кнопка в последнем ряду растягивается на всю ширину, а не съезжает
   в свою половину. На десктопе ряд один — правило в @media ниже. */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tab-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    flex: 1 1 calc(50% - 4px);
    min-height: 2.875rem; padding: 10px 8px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--dim); font-size: 0.9375rem; font-weight: 700;
    text-align: center; cursor: pointer; touch-action: manipulation;
}
.tab-btn.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* На узких экранах (iPhone SE) «Сообщения» вместе с бейджем не влезали в колонку
   и рвались на две строки, задирая высоту первого ряда. */
@media (max-width: 360px) {
    .tab-btn { font-size: 0.875rem; padding: 10px 6px; }
}
.tab-jump { margin-top: 14px; }
a.tab-jump.back { display: block; margin: 0 0 16px; background: none; border: 0; padding: 0; font-size: 0.9375rem; cursor: pointer; }

/* --- Профиль: выбор аватарки, кнопка выхода --- */
.profile-logout { margin-top: 20px; }
.profile-actions { display: grid; gap: 14px; min-width: 0; }
.profile-card {
    min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); box-shadow: var(--shadow);
}
.profile-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.profile-card__head h2 { margin: 6px 0 0; color: var(--text); font-size: 1.2rem; line-height: 1.2; }
.profile-card__kicker { color: var(--accent-text); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.profile-card__mark { color: var(--accent-text); font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.profile-card__hint { margin: 10px 0 16px; color: var(--dim); font-size: 0.875rem; }
.profile-card .admin__form { margin-bottom: 0; }
.profile-card .skin-link { margin: 0 0 10px; }
.profile-card .skin-list { margin-top: 10px; }
.skin-picker > summary { list-style: none; }
.skin-picker > summary::-webkit-details-marker { display: none; }
.skin-picker > summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.skin-picker > summary .skin-link__arr { transition: transform 120ms ease; }
.skin-picker[open] > summary .skin-link__arr { transform: rotate(90deg); }
.skin-picker .skin-list { margin-bottom: 0; }
.profile-card .text-scale { margin-bottom: 0; }
.profile-card .btn { max-width: 100%; white-space: normal; }
.profile-feedback { padding: 10px 12px; border-radius: 8px; font-weight: 600; }
.profile-feedback--error { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.profile-feedback--success { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
/* max-width держит ряды ровными (7 иконок в ряд что на мобиле, что на десктопе —
   2.75rem-квадрат + 8px зазор пропорционально следуют за --text-scale) вместо
   одной длинной полосы на широком экране при 20 аватарках. */
.avatar-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; max-width: 24rem; }
.avatar-pick {
    position: relative; display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem; border: 1px solid var(--border); border-radius: 8px;
    font-size: 1.25rem; cursor: pointer;
}
.avatar-pick input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.avatar-pick:has(input:checked) { border-color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* --- Ссылка «Оформление» в форме профиля --- */
.skin-link {
    display: flex; align-items: center; gap: 10px; margin: 10px 0;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text); text-decoration: none; font: inherit; width: 100%; text-align: left; cursor: pointer;
}
.skin-link__label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.skin-link__value { min-width: 0; color: var(--accent-text); font-weight: 700; overflow-wrap: anywhere; }
.skin-link__arr { color: var(--dim); flex: 0 0 auto; }

/* --- Страница /skins: одна строка-превью на скин --- */
.skins__hint { color: var(--dim); font-size: 0.875rem; margin: 4px 0 16px; }
.skins__title { font-size: 1rem; margin: 24px 0 0; }

/* Ползунок размера текста: своя дорожка и свой шарик — иначе браузер рисует системный,
   мимо палитры скина. Дорожку задаём отдельно для WebKit и Firefox: общего селектора нет. */
.text-scale { margin: 0 0 20px; }
.text-scale__row { display: flex; align-items: center; gap: 12px; }
.text-scale__mark { color: var(--dim); font-size: 0.875rem; flex: 0 0 auto; }
.text-scale__mark--big { font-size: 1.5rem; }
.text-scale__range {
    flex: 1 1 auto; width: 100%; height: 1.5rem; margin: 0; background: transparent;
    -webkit-appearance: none; appearance: none; cursor: pointer;
}
.text-scale__range:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 4px; }
.text-scale__range::-webkit-slider-runnable-track {
    height: 4px; border-radius: 2px; background: var(--border);
}
.text-scale__range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border); }
.text-scale__range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; margin-top: -9px;
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--card-border); background: var(--accent); box-shadow: var(--shadow);
}
.text-scale__range::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--card-border); background: var(--accent); box-shadow: var(--shadow);
}
.text-scale__value { color: var(--dim); font-size: 0.875rem; margin: 8px 0 12px; }
.text-scale__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.skin-list { display: flex; flex-direction: column; gap: 10px; }
.skin-list form { display: contents; }
.skin-row {
    width: 100%; display: flex; align-items: center; gap: 14px; margin: 0;
    padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text);
    font: inherit; text-align: left; cursor: pointer;
    -webkit-appearance: none; appearance: none; touch-action: manipulation;
}
.skin-row:hover { border-color: var(--accent-text); }
.skin-row:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.skin-row.is-current { border-color: var(--accent-text); outline: 2px solid var(--accent-text); outline-offset: 1px; }
/* Микро-превью скина: коробка жёстко 118×78px, поэтому и подписи внутри — в px,
   иначе на крупном масштабе текст вылезет за её край. */
.skin-demo {
    flex: 0 0 118px; height: 78px; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    padding: 9px 10px; border-radius: 8px; overflow: hidden; background: var(--bg);
}
.skin-demo__card {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--card); border: 1px solid var(--card-border);
    border-radius: 5px; padding: 5px 7px;
}
.skin-demo__title { color: var(--card-text); font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 0.5px; }
.skin-demo__line { height: 3px; border-radius: 2px; background: var(--card-dim); }
.skin-demo__line--short { width: 55%; }
.skin-demo__btn {
    align-self: flex-start; background: var(--accent); color: var(--accent-ink);
    border-radius: 4px; padding: 3px 8px; font-size: 8px; font-weight: 700;
}
.skin-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.skin-row__name { font-size: 1rem; font-weight: 700; }
.skin-row__hint { color: var(--dim); font-size: 0.8125rem; }
.skin-row__check { flex: 0 0 auto; visibility: hidden; color: var(--accent-text); font-weight: 700; font-size: 1.125rem; }
.skin-row.is-current .skin-row__check { visibility: visible; }

/* Ссылка на соседнюю страницу оформления (/skins ↔ /text-size) — прямо под подсказкой. */
.skins__switch { margin: 4px 0 20px; }

/* Витрина примеров UI на /skins и /text-size (partials/ui-preview.twig): держим её в ширине
   «экрана чтения» (640px), даже когда сама страница на десктопе шире (см. .page:has(.skins)
   ниже) — иначе примеры растянутся на всю широкую сетку скинов. */
.ui-preview { max-width: 640px; margin: 28px auto 0; }
.ui-preview > * + * { margin-top: 14px; }
.ui-preview__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.track__title { display: none; }
/* Заголовок скрыт, но раньше именно его отступ (margin: 22px 0 8px) отделял
   группу «Главные/Побочные/Полевая» от предыдущего блока — без него соседние
   маржины схлопываются почти в 0, и группы визуально слипаются. Компенсируем
   на первый видимый элемент группы (он разный в зависимости от состояния:
   обычно .task, у «Главные» — .track-dots, у заблокированных «Побочные» —
   .track__hint). */
.track__title + .task,
.track__title + .track-dots,
.track__title + .track__hint { margin-top: 22px; }
.track__count { font-family: var(--mono); font-size: 0.8125rem; color: var(--dim); font-weight: 400; }
.track__hint { color: var(--dim); font-size: 0.875rem; background: var(--surface); border-radius: 8px; padding: 12px 14px; }
.track-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.track-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.track-dot.is-solved { background: var(--ok); }
.track-dot.is-current { background: var(--accent); }

.task--current .task__summary--static, .task--locked .task__summary--static {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 600;
}
.task--locked { opacity: 0.55; }
.task--locked .task__name { color: var(--card-dim); }

.guide__hero { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.guide__badge { color: var(--accent-text); flex: 0 0 auto; }
.guide__title { font-size: 1.25rem; margin: 4px 0 0; }
.guide__part-title {
    font-size: 1.375rem; margin: 34px 0 4px; padding-top: 20px;
    border-top: 2px solid var(--accent-text); color: var(--accent-text);
}
.guide__part-title:first-of-type { margin-top: 26px; }
.guide__part { margin-top: 26px; border-top: 2px solid var(--accent-text); }
.guide__part > .guide__part-title {
    display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 0 14px;
    border-top: none; font-size: 1.25rem; font-weight: 700; cursor: pointer; list-style: none;
}
.guide__part > .guide__part-title::-webkit-details-marker { display: none; }
.guide__part > .guide__part-title::after { content: '▸'; margin-left: auto; transition: transform 0.15s; }
.guide__part[open] > .guide__part-title::after { transform: rotate(90deg); }
.guide__part > .guide__section:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }
.guide__part > .guide__section:last-of-type { padding-bottom: 14px; }
.guide__section { margin-top: 26px; border-top: 1px dashed var(--border-soft); padding-top: 14px; }
.guide__section h2 { font-size: 1rem; margin: 0 0 8px; color: var(--accent-text); }
.guide__list { padding-left: 20px; }
.guide__list li { margin-bottom: 8px; }
.guide__example { display: grid; gap: 10px; margin-top: 12px; }
.guide__card { display: flex; }
.guide__stars-demo p { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 0.875rem; }
.guide__stars { font-size: 1.125rem; white-space: nowrap; }
.guide__stars .star { font-style: normal; color: var(--card-dim); }
.guide__stars .star.on { color: var(--accent-text); }
.guide__note { color: var(--dim); font-size: 0.8125rem; }
.guide__link {
    display: inline-block; padding: 1px 8px; margin: 0 1px;
    border: 1px solid var(--accent-text); border-radius: 5px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-text); text-decoration: none; font-weight: 700;
}
.guide__link:active { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.guide__cta { margin-top: 26px; text-align: center; }
.guide__mark {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 3px; padding: 0 2px;
}
.guide__example--unclear .unclear-btn,
.guide__example--unclear .unclear-panel {
    position: static; left: auto; right: auto; top: auto; bottom: auto;
    transform: none; width: 100%; max-width: 420px; margin: 0 auto;
}
.guide-course { margin-top: 28px; border-top: 1px dashed var(--border); padding-top: 14px; }
.guide-course__title { font-size: 0.9375rem; font-family: var(--mono); color: var(--accent-text); cursor: pointer; }
.guide-course__title::-webkit-details-marker { display: none; }

.tab-badge {
    display: inline-block; min-width: 1.125rem; padding: 1px 5px; border-radius: 999px;
    background: var(--danger); color: #fff; font-size: 0.6875rem; font-weight: 700; text-align: center;
}
.letter--system { opacity: 0.85; }
.letter--person.is-unread .letter__title { font-weight: 700; }

.mailbox { display: flex; gap: 14px; }
.mailbox__contacts { list-style: none; padding: 0; margin: 0; flex: 0 0 auto; min-width: 140px; display: grid; gap: 4px; }
.mailbox__contact a { display: block; padding: 6px 8px; border-radius: 6px; color: inherit; text-decoration: none; }
.mailbox__contact.is-active a { background: var(--accent-wash); color: var(--accent-text); }
.mailbox__preview { margin: -2px 8px 0; color: var(--dim); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox__thread { flex: 1; min-width: 0; }
.mailbox__empty { color: var(--dim); font-size: 0.8125rem; }
.bubble { max-width: 85%; padding: 6px 10px; border-radius: 10px; margin-bottom: 6px; background: var(--surface); overflow-wrap: break-word; }
.bubble--mine { margin-left: auto; background: var(--accent-wash); }
.bubble--unclear { border: 1px dashed var(--accent-text); }
.bubble__tag { margin: 0 0 4px; color: var(--accent-text); font-family: var(--mono); font-size: 0.6875rem; }
.bubble__context { color: var(--dim); font-size: 0.75rem; }
.bubble--unclear .mailbox__compose { margin-top: 6px; }
.bubble__meta { display: block; color: var(--dim); font-size: 0.625rem; margin-top: 2px; }
.mailbox__compose { display: grid; gap: 6px; margin-top: 10px; }
.mailbox__compose textarea { font-family: inherit; padding: 6px 8px; min-height: 60px; width: 100%; }

.mailbox__search { display: flex; gap: 6px; margin-bottom: 10px; }
.mailbox__search input[type=search] { flex: 1; font-family: inherit; padding: 4px 8px; }
mark { background: var(--accent); color: var(--accent-ink); padding: 0 2px; border-radius: 2px; }

/* Смартфоны (в т.ч. OnePlus Nord, ~412px CSS-ширины): колонка контактов
   рядом с перепиской слишком тесна — переносим контакты в горизонтальный
   ряд над перепиской. */
@media (max-width: 480px) {
    .mailbox { flex-direction: column; gap: 10px; }
    .mailbox__contacts { display: flex; flex-wrap: wrap; min-width: 0; }
}

.hub__stamp {
    display: inline-block; margin: 4px 0 2px; padding: 7px 16px;
    border: 2px solid var(--accent-text); border-radius: 4px;
    background: color-mix(in srgb, var(--accent-text) 12%, transparent);
    color: var(--accent-text); font-family: var(--mono); font-weight: 700;
    letter-spacing: 2px; transform: rotate(-1.5deg);
}
.hub__hint { color: var(--dim); font-size: 0.875rem; margin: 14px 0 18px; }
.dossier {
    display: block; position: relative; text-decoration: none;
    background: var(--card); color: var(--card-text);
    border: 1px solid var(--card-border); border-radius: 10px;
    box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 14px;
}
.dossier__status {
    position: absolute; top: 10px; right: 10px; padding: 2px 8px;
    border: 2px solid currentColor; font-family: var(--mono); font-size: 0.625rem;
    letter-spacing: 2px; transform: rotate(3deg);
}
.dossier__status--active { color: var(--hint-text); }
.dossier__status--done { color: var(--ok); }
.dossier__status--idle { color: var(--card-dim); }
.dossier__status--locked { color: var(--danger); }
.dossier__title { display: block; font-weight: 700; font-size: 1.0625rem; }
.dossier__meta { display: block; font-size: 0.8125rem; color: var(--card-dim); margin-top: 2px; }
.dossier__tagline { display: block; font-size: 0.8125rem; color: var(--card-dim); margin-top: 4px; font-style: italic; }
.dossier__about { display: block; font-size: 0.875rem; color: var(--card-text); margin-top: 8px; }
.dossier__summary { display: block; font-size: 0.875rem; color: var(--card-text); margin-top: 6px; line-height: 1.45; }
.dossier__open { display: inline-block; margin-top: 12px; }
.dossier__bar {
    display: block; height: 6px; border-radius: 3px; overflow: hidden;
    background: color-mix(in srgb, var(--card-text) 16%, var(--card)); margin-top: 10px;
}
.dossier__fill { display: block; height: 100%; background: var(--accent); }
.dossier.is-done .dossier__fill { background: var(--ok); }
.dossier__foot {
    display: flex; justify-content: space-between; gap: 8px;
    font-family: var(--mono); font-size: 0.75rem; margin-top: 7px; color: var(--card-dim);
}
.dossier--locked { background: var(--surface-2); color: var(--card-dim); border: 1px dashed var(--border-soft); box-shadow: none; }

.course-bar {
    display: block; padding: 8px 14px 7px; text-decoration: none;
    background: var(--topbar-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    font-family: var(--mono); font-size: 0.8125rem;
}
.course-bar__row { display: flex; align-items: center; gap: 8px; }
.course-bar__name { color: var(--accent-text); font-weight: 700; }
.course-bar__meta { color: var(--dim); font-size: 0.6875rem; }
.course-bar__action { margin-left: auto; color: var(--dim); font-size: 0.6875rem; }
.course-bar__arr { color: var(--accent-text); font-weight: 700; }
.course-bar__bar { display: block; height: 3px; border-radius: 2px; background: var(--border-soft); margin-top: 6px; overflow: hidden; }
.course-bar__fill { display: block; height: 100%; background: var(--accent); }
.course-bar__fill.is-done { background: var(--ok); }

/* «Не понимаю»: кнопка при выделении, панель расшифровки, словарик, карточки у Шефа */
.unclear-btn { position: fixed; z-index: 40; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 612px; background: var(--accent); color: var(--accent-ink); border: none; border-radius: 14px; padding: 16px 18px; font-weight: 700; font-size: 1.125rem; box-shadow: var(--shadow); cursor: pointer; }
/* Фиксированный цвет (не переменная темы): кнопка не должна сливаться с акцентным
   цветом активного скина — она перекрывает страницу поверх любого фона (см. /skins,
   --bg от почти чёрного #060d08 до бледно-пастельного #fbf0ee). Оранжевый не входит
   ни в один --accent скина и даёт контраст ~3.2:1+ к самым светлым фонам и ~4.6:1+
   к самым тёмным — переопределяем только цвета, геометрию оставляем от .unclear-btn. */
.unclear-btn--attention { background: #e8590c; color: #1a0f06; }
.unclear-btn--attention:hover { background: #c94c09; }
.unclear-panel { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100% - 24px); max-width: 612px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 42px 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.unclear-panel[hidden] { display: none; }
.unclear-panel__close { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; background: transparent; border: none; color: var(--dim); font-size: 1rem; cursor: pointer; }
.unclear-panel__title { margin: 0; }
.unclear-panel__entry { margin: 0; border-left: 3px solid var(--accent); padding-left: 10px; }
.unclear-panel__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.unclear-chip { background: transparent; border: 1px solid var(--accent-text); color: var(--accent-text); border-radius: 999px; padding: 5px 12px; font-size: 0.875rem; cursor: pointer; }
.unclear-panel__comment { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; }
.unclear-panel__error { margin: 0; color: var(--danger); font-size: 0.875rem; }
.unclear-panel__ask { align-self: flex-start; }
.dict-entry { border-left: 3px solid var(--accent); padding-left: 10px; margin-bottom: 14px; }
.dict-entry__term { margin: 0 0 4px; font-weight: 700; }
.dict-entry__source { color: var(--accent-text); font-size: 0.75rem; font-family: var(--mono); margin-left: 6px; }
.dict-entry__text { margin: 0; color: var(--dim); }
.unclear-card__meta { color: var(--card-dim); font-size: 0.8125rem; margin-bottom: 4px; }
.unclear-card__fragment { font-weight: 700; margin: 0 0 6px; }
.unclear-card__context { color: var(--card-dim); font-size: 0.875rem; }
.unclear-card__comment { font-size: 0.875rem; }
.unclear-card textarea { width: 100%; }

/* Боковое меню «Пульта агента» скрыто в мобильной базе (это новый элемент;
   на десктопе @media ниже показывает его flex-колонкой). Правило стоит ДО
   @media, чтобы десктопный display:flex его перекрывал. Мобильную вёрстку
   не затрагивает. */
.sidebar { display: none; }

/* Заголовки, дублирующие соседний контекст (пункт меню/вкладку/бейдж на
   карточке) — не привязано к брейкпоинту, скрыто и на мобильном, и на
   десктопе. */
.is-context-obvious { display: none; }

/* ============================================================
   ДЕСКТОП (≥900px). Ниже — только переопределения для широкого
   экрана. Мобильная база выше НЕ изменяется. Ширина включается
   по-экранно через :has() на .page; экраны чтения остаются 640px.
   ============================================================ */
@media (min-width: 900px) {

    /* На широком экране возвращаем базу rem к 16px: телефонные 18px здесь ни к чему —
       строка длинная, экран дальше от глаз, а базовый текст и так крупнее (1.25rem ниже). */
    html { font-size: calc(16px * var(--text-scale)); }

    /* Штаб / курсы куратора: карточки-досье в сетку. Минимум колонки — в rem
       (280px при базовых 16px), а не в px: иначе на крупном --text-scale текст
       в карточке растёт, а колонка — нет, и содержимое раздувает сетку вширь. */
    .page:has(.hub) { max-width: 940px; }
    .hub {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
        gap: 14px;
        align-items: stretch;
    }
    .hub__stamp,
    .hub__hint,
    .hub > .guide__cta { grid-column: 1 / -1; align-self: start; }
    /* Досье-карточки равной высоты: содержимое сверху, кнопка «Открыть» прижата к низу */
    .hub .dossier { margin-bottom: 0; display: flex; flex-direction: column; }
    .hub .dossier .dossier__open { margin-top: auto; align-self: flex-start; }

    /* Карта дел (игрок): «дела» в несколько колонок */
    .page:has(> .sector) { max-width: 960px; }
    .page > .sector .trail {
        grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
    }

    /* Скины: образцы в сетку */
    .page:has(.skins) { max-width: 880px; }
    .skin-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
        gap: 10px;
    }

    .page:has(.profile-actions) { max-width: 940px; }
    .profile-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Админка: меню, список игроков, кураторы — в сетку */
    .page:has(.admin__menu),
    .page:has(.admin__player-list),
    .page:has(.admin__curators),
    .page:has(.admin__trail) { max-width: 940px; }
    .admin__menu        { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
    .admin__player-list { grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); }
    .admin__curators    { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }

    /* Список игроков: каждая карточка самодостаточна (рамка + одинаковый отступ).
       Мобильная база разделяет карточки верхней чертой у второй и далее — в
       многоколоночной сетке это давало «неровную» верхнюю границу (у карточек
       2-й колонки черта есть, у 1-й нет). Здесь выравниваем: рамка у всех, а
       черту-разделитель приводим к той же рамке и отступу. */
    .admin__player-card {
        border: 1px solid var(--card-border); border-radius: 10px;
        background: var(--card); box-shadow: var(--shadow); padding: 14px;
    }
    .admin__player-card + .admin__player-card { border-top: 1px solid var(--card-border); padding-top: 14px; }
    /* Карточка на светлом var(--card): имя игрока и подпись «Раскрыто дел»
       наследовали бы светлый var(--text) и пропадали. Красим в карточные цвета.
       Плашки ⭐/💎 держат свой тёмный var(--surface-2) — их не трогаем. */
    .admin__player-card .journal__progress-head strong { color: var(--card-text); }
    .admin__player-card .journal__progress-caption { color: var(--card-dim); }

    /* Стартовая страница кабинета: боковое меню уже содержит всю навигацию,
       поэтому дублирующую сетку кнопок на десктопе прячем — остаётся приветствие. */
    body.is-chief .admin__menu { display: none; }

    /* Почта куратора: шире поле; колонка контактов чуть шире (везде) */
    .page:has(.admin .mailbox) { max-width: 1000px; }
    .mailbox__contacts { min-width: 220px; }

    /* Пульт агента: десктопная оболочка */
    /* Сетка «боковое меню + рабочая область». Включается только при роли —
       на login/register класса is-agent/is-chief нет, и оболочки нет. */
    body.is-agent,
    body.is-chief {
        display: grid;
        grid-template-columns: 15.5rem minmax(0, 1fr);
        /* Строки задаём явно: без этого grid-row:1/-1 у .sidebar вырождается
           (нет явных строк → -1 == линия 1), меню падает в строку 1, а его
           height:100vh раздувает строку 1 на весь экран и толкает рабочую
           область на 100vh вниз. С auto 1fr меню корректно тянется на обе
           строки, а шапка (auto) остаётся своей высоты. */
        grid-template-rows: auto 1fr;
        align-items: start;
        min-height: 100vh;
        font-size: 1.25rem;
    }
    .sidebar {
        display: flex; flex-direction: column;
        grid-column: 1; grid-row: 1 / -1;
        position: sticky; top: 0; align-self: start;
        height: 100vh; overflow-y: auto;
        background: var(--surface-2);
        border-right: 1px solid var(--border);
        padding: 16px 14px;
    }
    .app-header { grid-column: 2; grid-row: 1; }
    main.page {
        grid-column: 2; grid-row: 2;
        max-width: 940px;
        padding: 28px 34px 60px;
    }

    /* Дубли навигации из шапки прячем — всё это уже в боковом меню. */
    .topbar { display: none; }
    body.is-agent .course-bar { display: none; }
    [data-tab-btn="messages"] { display: none; }
    /* Вкладки — в один ряд равными долями: колонок ровно столько, сколько
       видимых кнопок (скрытые «Сообщения» ячейку не занимают). */
    .tabs { flex-wrap: nowrap; }
    .tab-btn { flex: 1 1 0; }
    /* Вкладки Содержимое/Прогресс/Настройки у куратора дублируют пункты
       бокового меню — на десктопе прячем, оставляя выбор операции и
       (где есть) селектор игрока. */
    body.is-chief .course-tabs:not(.course-tabs--select) { display: none; }

    /* Куратор: рабочая область во всю ширину рабочей колонки, прижата влево
       под меню (а не узкой полосой по центру). Сетки-досье/списки при этом
       добирают колонки. Формы держим уже — широкие поля ввода читаются плохо. */
    body.is-chief main.page { max-width: 1180px; margin: 0; }
    body.is-chief .admin__form { max-width: 620px; }

    /* Оставшуюся контекст-полосу (выбор операции / селектор игрока)
       выравниваем горизонтальными отступами под контент. */
    body.is-chief .course-bar,
    body.is-chief .course-tabs--select { padding-left: 34px; padding-right: 34px; }
    /* Выбор операции — теперь главный элемент верхней полосы, делаем крупнее
       (в базе .course-bar 13px, .course-bar__action 11px — для десктопа мелко). */
    body.is-chief .course-bar { font-size: 1rem; padding-top: 13px; padding-bottom: 12px; }
    body.is-chief .course-bar__name { font-size: 1rem; }
    body.is-chief .course-bar__action { font-size: 1rem; }

    /* Внутренности бокового меню */
    .sidebar__head {
        display: flex; flex-direction: column; gap: 2px;
        padding: 4px 8px 14px; margin-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }
    .sidebar__brand {
        font-family: var(--mono); font-weight: 700; letter-spacing: 3px;
        font-size: 1.25rem; color: var(--accent-text); text-decoration: none;
    }
    .sidebar__op { font-family: var(--mono); font-size: 0.75rem; color: var(--card-dim); }
    .sidebar__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
    .sidebar__link {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px; border-radius: 8px;
        color: var(--text); text-decoration: none; font-weight: 600;
        font-size: 1rem;
    }
    .sidebar__link:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
    .sidebar__link.is-active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
    /* Иконка держит ту же пропорцию 1.125:1 к тексту пункта меню (при
       базовых 1rem текста — 1.125rem), иначе выглядит вдвое крупнее подписи. */
    .sidebar__ic { flex: 0 0 1.125rem; width: 1.125rem; text-align: center; }
    .sidebar__badge {
        margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px;
        background: var(--danger); color: #fff; font-size: 0.75rem; font-weight: 700; text-align: center;
    }
    .sidebar__foot {
        margin-top: auto; padding-top: 12px;
        border-top: 1px solid var(--border);
        font-family: var(--mono); font-size: 0.75rem;
    }
    .sidebar__me { color: var(--dim); text-decoration: none; }
    .sidebar__me:hover { color: var(--accent-text); }
    .sidebar__form { margin: 0; }
    button.sidebar__link {
        width: 100%; border: 0; background: none;
        font-family: inherit; font-size: 1rem; font-weight: 600;
        text-align: left; cursor: pointer;
    }

    /* Крупнее заголовки в оболочке — умеренно, без ломки макета. */
    body.is-agent h1, body.is-chief h1,
    body.is-agent .journal h1, body.is-chief .journal h1 { font-size: 1.75rem; }
    body.is-agent .case__title, body.is-chief .case__title { font-size: 1.625rem; }

    /* Режим игрока: topbar на десктопе скрыт, плашка — единственный путь
       назад в кабинет куратора, поэтому крупнее и с отступами под контент. */
    .play-banner { font-size: 1.0625rem; padding: 12px 34px; }
    .play-banner__btn { font-size: 0.9375rem; }

    /* end desktop overrides */
}

/* ============================================================
   Вводный экран /intro + дашборд куратора (плитки / быстрые
   действия / карточка «С чего начать»). База — на всех ширинах;
   десктоп-твики — в @media в самом низу. Отдельным блоком, чтобы
   не пересекаться с правками выше по файлу.
   ============================================================ */

/* --- Вводный экран /intro --- */
.intro { max-width: 640px; }
.intro__stamp {
    display: inline-block; padding: 5px 14px; border: 2px solid var(--accent-text); border-radius: 4px;
    color: var(--accent-text); font-family: var(--mono); letter-spacing: 3px; font-size: 0.75rem; font-weight: 700;
    transform: rotate(-1.5deg);
}
.intro__title { margin: 16px 0 10px; }
.intro__story p { margin: 0 0 12px; line-height: 1.55; }
.intro__memo-title { font-size: 1rem; margin: 22px 0 10px; }
.intro__memo { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.intro__memo-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--card-border); background: var(--card);
    color: var(--card-text); text-decoration: none; font-weight: 600;
}
a.intro__memo-row:hover { border-color: var(--accent-text); }
.intro__memo-row.is-static { color: var(--card-dim); font-weight: 500; }
.intro__memo-ic { flex: 0 0 1.375rem; width: 1.375rem; text-align: center; font-size: 1.125rem; }
.intro__memo-note { color: var(--card-dim); font-weight: 400; }
.intro__cta { margin: 2px 0 18px; }
.intro__more { color: var(--dim); font-size: 0.8125rem; }

/* --- Дашборд куратора: плитки-статус --- */
/* Заголовок кабинета на мобилке компактнее (у h1 нет базового размера — иначе
   UA-дефолт слишком крупный). Десктопное правило body.is-chief h1 (28px) выше
   по специфичности — там размер не меняется. */
.chief-menu__title { font-size: 1.375rem; margin: 0 0 14px; }
.chief-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 18px; }
.chief-stat {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 16px 10px; border-radius: 12px; text-align: center;
    border: 1px solid var(--card-border); background: var(--card);
    color: var(--card-text); text-decoration: none;
}
.chief-stat:hover { border-color: var(--accent-text); }
.chief-stat.is-alert { border-color: var(--danger); }
.chief-stat__ic { font-size: 1.25rem; }
.chief-stat__num { font-size: 1.875rem; font-weight: 800; line-height: 1.1; }
.chief-stat.is-alert .chief-stat__num { color: var(--danger); }
.chief-stat__label { font-size: 0.75rem; color: var(--card-dim); }

/* --- Дашборд куратора: быстрые действия --- */
.chief-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.chief-quick__link {
    padding: 9px 14px; border-radius: 999px; font-size: 0.875rem; font-weight: 600;
    border: 1px solid var(--card-border); background: var(--surface-2);
    color: var(--text); text-decoration: none;
}
.chief-quick__link:hover { border-color: var(--accent-text); }

/* --- Карточка «С чего начать» (дашборд куратора и хаб игрока) --- */
.chief-start, .hub__intro {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 18px; border-radius: 14px; margin: 0 0 20px;
    border: 1px solid var(--accent-text);
    background: color-mix(in srgb, var(--accent-text) 8%, transparent);
    color: var(--text); text-decoration: none; font-weight: 600;
}
.chief-start:hover, .hub__intro:hover { background: color-mix(in srgb, var(--accent-text) 15%, transparent); }
.chief-start__ic { font-size: 1.625rem; flex: 0 0 auto; }
.chief-start__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.chief-start__title { font-weight: 700; }
.chief-start__text { font-size: 0.8125rem; color: var(--dim); font-weight: 400; }
.chief-start__arr { color: var(--accent-text); font-size: 1.25rem; flex: 0 0 auto; margin-left: auto; }

@media (min-width: 900px) {
    /* Дашборд не растягиваем на всю широкую рабочую колонку куратора. */
    body.is-chief .chief-stats,
    body.is-chief .chief-quick,
    body.is-chief .chief-start { max-width: 760px; }
    /* На хабе десктопа ссылка «С чего начать» уже есть в боковом меню —
       мобильную карточку прячем, чтобы не дублировать. */
    .hub__intro { display: none; }
}