/* Академия ИИ. Токены Cardbox UI (палитра, типографика, отступы, радиусы, тени). Название и знак — свои. */
:root {
  /* Цвет */
  --color-white: #ffffff;
  --color-gosblue: #0d4cd3;
  --color-gosred: #ee3f58;
  --color-summer-night: #0b1f33;
  --color-input: #f5f7fa;
  --color-divider: #99b1e6;
  --color-background: #fafcff;
  --color-bg-disabled: #d1d5df;
  --color-text-helper: #66727f;
  --color-active-item: #1d5deb;
  --color-pervinca: #e5eaf5;
  --color-caso: #d2dffb;
  --color-tagline: #e4ecfd;
  --color-azzurro-alice: #edf2fe;
  --color-osso-grigio: #ecf0f8;
  --color-telegrey-scuro: #86909c;
  --color-mandorle-pelate: #fef0cc;
  --color-petalo-rosa: #fcd9de;
  --color-blu-digitale: #4d83fa;
  --color-pulsante-premuto: #0b40b3;
  --color-blu-selvaggio: #9dacce;
  --color-pino-verde: #12826e;
  --color-tela-rossa: #e11432;
  --color-granito-fresco: #eff5f9;
  --color-a11y-border-color: #9b3be5;
  --color-a11y-bg-color: #fef0cc;
  --color-segale: #fff7e1;
  --color-input-label: #515a63;
  /* Тени */
  --shadow-main: 0px 1px 4px #e3ebfc, 0px 24px 48px rgba(230, 235, 245, 0.4);
  --shadow-mobile: 0px 1px 4px #e3ebfc, 0px 6px 16px rgba(230, 235, 245, 0.8);
  --shadow-popup: 0px 12px 32px rgba(11, 31, 51, 0.18);
  --shadow-head: 0px 2px 2px rgba(157, 172, 207, 0.08);
  /* Радиусы */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-full: 9999px;
  /* Отступы */
  --spacing-sm: 4px; --spacing-md: 8px; --spacing-lg: 12px; --spacing-xl: 16px; --spacing-2xl: 20px;
  --spacing-3xl: 24px; --spacing-4xl: 28px; --spacing-5xl: 32px; --spacing-6xl: 40px; --spacing-7xl: 48px;
  --font: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 16px/24px var(--font); color: var(--color-summer-night); background: var(--color-background); -webkit-font-smoothing: antialiased; }
a { color: var(--color-gosblue); text-decoration: none; }
a:hover, a:active { color: var(--color-active-item); }
:focus-visible { outline: 2px solid var(--color-a11y-border-color); outline-offset: 2px; }
a:focus-visible, .linkbtn:focus-visible { background: var(--color-a11y-bg-color); color: var(--color-summer-night); font-weight: 700; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; }
h1 { font-size: 36px; line-height: 40px; }
h2 { font-size: 32px; line-height: 40px; }
h3 { font-size: 24px; line-height: 32px; }
h4 { font-size: 20px; line-height: 28px; }
h5 { font-size: 18px; line-height: 24px; }
h6 { font-size: 16px; line-height: 24px; }
code { font: inherit; font-weight: 700; color: var(--color-summer-night); background: var(--color-osso-grigio); padding: 0 var(--spacing-sm); border-radius: var(--radius-xs); word-break: break-word; }
mark { background: var(--color-segale); color: inherit; padding: 0 var(--spacing-sm); }
.helper { color: var(--color-text-helper); }
.small { font-size: 14px; line-height: 20px; }
.small-bold { font-size: 14px; line-height: 20px; font-weight: 700; }
.tiny { font-size: 12px; line-height: 16px; }
.lead { font-size: 18px; line-height: 24px; }
.mt8 { margin-top: var(--spacing-md); } .mt16 { margin-top: var(--spacing-xl); } .mt24 { margin-top: var(--spacing-3xl); }
.mt32 { margin-top: var(--spacing-5xl); } .mt48 { margin-top: var(--spacing-7xl); } .mt64 { margin-top: 64px; }
.row { display: flex; gap: var(--spacing-xl); align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.nowrap { white-space: nowrap; }

/* Шапка и подвал */
.header { background: var(--color-white); box-shadow: var(--shadow-head); border-bottom: 1px solid var(--color-tagline); position: sticky; top: 0; z-index: 10; }
.header-in { max-width: 1216px; margin: 0 auto; padding: 0 var(--spacing-3xl); height: 72px; display: flex; align-items: center; gap: var(--spacing-5xl); }
.brand { display: flex; align-items: center; gap: var(--spacing-lg); color: var(--color-summer-night); font-weight: 900; font-size: 18px; line-height: 24px; }
.brand:hover { color: var(--color-summer-night); }
.brand-mark { width: 32px; height: 32px; flex: none; }
.brand small { display: block; font-weight: 400; font-size: 12px; line-height: 16px; color: var(--color-text-helper); }
.nav { display: flex; gap: var(--spacing-3xl); flex: 1; align-self: stretch; }
.nav a { color: var(--color-summer-night); display: flex; align-items: center; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--color-active-item); }
.nav a.active { color: var(--color-gosblue); border-bottom-color: var(--color-gosblue); }
.user-chip { display: flex; align-items: center; gap: var(--spacing-lg); }
.avatar { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-azzurro-alice); color: var(--color-gosblue); display: grid; place-items: center; font-weight: 700; font-size: 14px; line-height: 20px; }
.linkbtn { background: none; border: 0; color: var(--color-gosblue); font: inherit; cursor: pointer; padding: 0; min-height: 44px; }
.linkbtn:hover { color: var(--color-active-item); }
.footer { background: var(--color-granito-fresco); margin-top: 64px; }
.footer-in { max-width: 1216px; margin: 0 auto; padding: var(--spacing-3xl); color: var(--color-text-helper); font-size: 14px; line-height: 20px; }

.page { max-width: 1216px; margin: 0 auto; padding: var(--spacing-5xl) var(--spacing-3xl) 64px; }
.narrow { max-width: 792px; }
.crumbs { font-size: 14px; line-height: 20px; color: var(--color-text-helper); margin-bottom: var(--spacing-xl); }

/* Card */
.card { background: var(--color-white); border-radius: var(--radius-md); padding: var(--spacing-3xl); box-shadow: var(--shadow-mobile); }
.card + .card { margin-top: var(--spacing-3xl); }
.grid > .card + .card { margin-top: 0; }
.grid { display: grid; gap: var(--spacing-3xl); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-side { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.big-num { font-size: 36px; line-height: 40px; font-weight: 900; }
.big-num .of { font-size: 18px; line-height: 24px; font-weight: 400; color: var(--color-text-helper); }
@media (min-width: 1140px) { .card { box-shadow: var(--shadow-main); } }
@media (max-width: 1139px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-side { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .nav { display: none; } .header-in { gap: var(--spacing-xl); padding: 0 var(--spacing-xl); }
  .page { padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-6xl); }
  .user-chip .uname { display: none; }
  .footer { margin-top: var(--spacing-6xl); }
}

/* Button */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 12px 38px; border-radius: var(--radius-sm);
  font: 400 16px/24px var(--font); cursor: pointer; border: 2px solid var(--color-gosblue); background: var(--color-gosblue); color: var(--color-white); white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--color-active-item); border-color: var(--color-active-item); color: var(--color-white); }
.btn:active { background: var(--color-pulsante-premuto); border-color: var(--color-pulsante-premuto); }
.btn.secondary { background: var(--color-white); color: var(--color-gosblue); }
.btn.secondary:hover { background: var(--color-input); border-color: var(--color-active-item); color: var(--color-active-item); }
.btn.alpha { background: var(--color-azzurro-alice); border-color: var(--color-azzurro-alice); color: var(--color-gosblue); }
.btn.alpha:hover { background: var(--color-gosblue); border-color: var(--color-gosblue); color: var(--color-white); }
.btn.small { padding: 12px 22px; }
.btn:disabled, .btn.disabled { background: var(--color-pervinca); border-color: var(--color-pervinca); color: var(--color-telegrey-scuro); cursor: default; }
.btns { display: flex; gap: var(--spacing-xl); flex-wrap: wrap; }
@media (max-width: 767px) { .btn { width: 100%; } .btns { flex-direction: column; } }

/* Input */
.field { margin-top: var(--spacing-3xl); }
.field > label, .field > .label { display: block; font-size: 16px; line-height: 24px; color: var(--color-input-label); }
.field .sub-label { font-size: 12px; line-height: 16px; color: var(--color-input-label); margin-top: var(--spacing-sm); }
.field .control { margin-top: var(--spacing-md); }
.input, select.input, textarea.input { width: 100%; height: 52px; padding: 0 var(--spacing-xl); background: var(--color-input); border: 0; border-radius: var(--radius-xs);
  font: 400 16px/24px var(--font); color: var(--color-summer-night); outline: none; }
textarea.input { height: auto; min-height: 120px; padding: var(--spacing-lg) var(--spacing-xl); resize: vertical; }
.input::placeholder { color: var(--color-blu-selvaggio); }
.input:focus { background: transparent; box-shadow: inset 0 0 0 2px var(--color-divider); }
.input:focus-visible { outline: none; }
.field.err .input { background: var(--color-petalo-rosa); }
.field.err .input:focus { background: var(--color-input); }
.err-text { color: var(--color-tela-rossa); font-size: 14px; line-height: 20px; margin-top: var(--spacing-md); }
@media (max-width: 767px) { .field > label, .field > .label { font-size: 14px; line-height: 20px; } }

/* Radio */
fieldset.group { border: 0; padding: 0; margin: var(--spacing-3xl) 0 0; min-width: 0; }
fieldset.group legend { padding: 0; font-weight: 700; font-size: 16px; line-height: 24px; }
.radio { display: flex; gap: var(--spacing-xl); align-items: flex-start; padding: var(--spacing-md) 0; cursor: pointer; }
.radio input { appearance: none; width: 24px; height: 24px; border: 2px solid var(--color-gosblue); border-radius: var(--radius-full); margin: 0; flex: none; cursor: pointer; background: var(--color-white); }
.radio input:hover { border-color: var(--color-active-item); background: var(--color-pervinca); }
.radio input:checked { background: var(--color-gosblue); box-shadow: inset 0 0 0 3px var(--color-white); }
.radio input:disabled { border-color: var(--color-telegrey-scuro); background: var(--color-bg-disabled); cursor: default; }
.radio input:disabled:checked { background: var(--color-telegrey-scuro); box-shadow: inset 0 0 0 3px var(--color-bg-disabled); }
.radio input:focus-visible + span { background: var(--color-a11y-bg-color); font-weight: 700; }

/* Explanation */
.explanation { background: var(--color-azzurro-alice); border-radius: var(--radius-md); padding: var(--spacing-xl) var(--spacing-3xl); }
.explanation.line { border-left: 6px solid var(--color-blu-digitale); }
.explanation.warn { background: var(--color-mandorle-pelate); }
.explanation.grey { background: var(--color-osso-grigio); }
.explanation .ex-title { font-weight: 700; }
.explanation .ex-title + * { margin-top: var(--spacing-md); }
.explanation > p { margin: var(--spacing-md) 0 0; }
.explanation > p:first-child { margin-top: 0; }
.explanation > ul { margin: var(--spacing-md) 0 0; }

/* Сообщение в потоке (как Notifier warning/error) */
.notice { border-radius: var(--radius-sm); padding: var(--spacing-xl); display: flex; gap: var(--spacing-lg); align-items: flex-start; background: var(--color-mandorle-pelate); }
.notice.info { background: var(--color-azzurro-alice); }
.notice svg { flex: none; width: 24px; height: 24px; }

/* Статус: линейная иконка + слово */
.status { display: inline-flex; align-items: center; gap: var(--spacing-md); font-size: 14px; line-height: 20px; white-space: nowrap; color: var(--color-summer-night); }
.status svg { width: 20px; height: 20px; flex: none; }
.status.done svg { color: var(--color-pino-verde); }
.status.progress svg { color: var(--color-gosblue); }
.status.locked, .status.locked svg { color: var(--color-telegrey-scuro); }
.status.fail svg { color: var(--color-tela-rossa); }
.status.review svg { color: var(--color-summer-night); }

/* Тег */
.tag { display: inline-flex; align-items: center; gap: var(--spacing-sm); font-size: 14px; line-height: 20px; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); background: var(--color-tagline); color: var(--color-summer-night); }
.tag.hit { background: var(--color-caso); }
.tag svg { width: 16px; height: 16px; color: var(--color-pino-verde); }
.tags { display: flex; gap: var(--spacing-md); flex-wrap: wrap; }

/* Прогресс */
.bar { height: 8px; background: var(--color-tagline); border-radius: var(--radius-xs); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--color-gosblue); }

/* Список уроков */
.module-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-xl); }
.lesson-list { list-style: none; padding: 0; margin: var(--spacing-xl) 0 0; }
.lesson-row { display: flex; align-items: center; gap: var(--spacing-xl); padding: var(--spacing-xl) 0; border-top: 1px solid var(--color-tagline); }
.lesson-row:first-child { border-top: 0; }
.lesson-num { width: 48px; color: var(--color-text-helper); font-weight: 700; flex: none; }
.lesson-row .t { flex: 1; min-width: 0; }
.lesson-row.locked .t { color: var(--color-telegrey-scuro); }
.lesson-row .tags { margin-top: var(--spacing-md); }
@media (max-width: 767px) {
  .lesson-row { flex-wrap: wrap; align-items: flex-start; gap: var(--spacing-md) var(--spacing-xl); }
  .lesson-num { width: 40px; } .lesson-row .t { flex: 1 1 calc(100% - 56px); }
  .lesson-row > .status, .lesson-row > .small { margin-left: 56px; }
}

/* Контент урока: plain-text 16/24, списки портала */
.lesson-body :where(p, ul, ol) { margin: 0; }
.lesson-body > * + * { margin-top: var(--spacing-xl); }
.lesson-body > h3 { margin-top: var(--spacing-6xl); }
.meta-line { display: flex; gap: var(--spacing-3xl); flex-wrap: wrap; color: var(--color-text-helper); font-size: 14px; line-height: 20px; margin-top: var(--spacing-lg); }
.list-dotted, .list-decimal { list-style: none; padding: 0; }
.list-dotted > li, .list-decimal > li { position: relative; padding-left: var(--spacing-2xl); }
.list-dotted > li + li, .list-decimal > li + li { margin-top: var(--spacing-lg); }
.list-dotted > li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-blu-digitale); }
.list-decimal { counter-reset: n; }
.list-decimal > li { padding-left: var(--spacing-4xl); counter-increment: n; }
.list-decimal > li::before { content: counter(n) "."; position: absolute; left: 0; font-weight: 700; color: var(--color-pulsante-premuto); }
.figure { margin: var(--spacing-5xl) 0 0; text-align: center; }
.figure img { max-width: 100%; border-radius: var(--radius-md); }
.figure figcaption { font-size: 14px; line-height: 20px; color: var(--color-text-helper); margin-top: var(--spacing-md); }
.tbl-wrap { overflow-x: auto; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-mobile); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.tbl th { text-align: left; font-weight: 700; padding: var(--spacing-lg) var(--spacing-xl); }
.tbl td { padding: var(--spacing-lg) var(--spacing-xl); border-top: 1px solid var(--color-tagline); vertical-align: top; }
.prompt-line { white-space: pre-wrap; }

.side-sticky { position: sticky; top: 96px; }
.steps { list-style: none; margin: var(--spacing-xl) 0 0; padding: 0; }
.steps li { padding: var(--spacing-md) 0; }

/* Поле только для чтения с копированием (команды, адреса, токен) */
.copy-field { display: flex; align-items: center; gap: var(--spacing-md); min-height: 52px; padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-xl);
  background: var(--color-input); border-radius: var(--radius-xs); }
.copy-field .val { flex: 1; min-width: 0; font-weight: 700; word-break: break-all; white-space: pre-wrap; padding: var(--spacing-md) 0; }
.copy-field .btn { height: 44px; padding: 8px 22px; flex: none; width: auto; }
@media (max-width: 767px) { .copy-field { flex-wrap: wrap; padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl); } .copy-field .btn { width: 100%; } }

/* Практика */
.ai-live { display: flex; gap: var(--spacing-lg); align-items: center; }
.pulse { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-gosblue); flex: none; animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(13, 76, 211, .5); } 70% { box-shadow: 0 0 0 8px rgba(13, 76, 211, 0); } 100% { box-shadow: 0 0 0 0 rgba(13, 76, 211, 0); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
.attempt { border-top: 1px solid var(--color-tagline); padding: var(--spacing-lg) 0; }
.attempt:first-child { border-top: 0; }

/* Вкладки */
.tabs { display: flex; gap: var(--spacing-3xl); flex-wrap: wrap; border-bottom: 1px solid var(--color-tagline); }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--spacing-lg) 0; min-height: 44px; font: 400 16px/24px var(--font); color: var(--color-summer-night); cursor: pointer; }
.tabs button:hover { color: var(--color-active-item); }
.tabs button[aria-selected="true"] { color: var(--color-gosblue); border-bottom-color: var(--color-gosblue); }

/* Таблицы администратора */
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.admin-table th { text-align: left; color: var(--color-text-helper); font-weight: 400; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-tagline); white-space: nowrap; }
.admin-table td { padding: var(--spacing-lg); border-bottom: 1px solid var(--color-tagline); vertical-align: middle; }
.scroll-x { overflow-x: auto; }
.matrix { border-collapse: separate; border-spacing: var(--spacing-sm); font-size: 12px; line-height: 16px; }
.matrix th { font-weight: 400; color: var(--color-text-helper); writing-mode: vertical-rl; transform: rotate(180deg); padding: var(--spacing-sm) 0; }
.matrix td.cell { width: 20px; height: 20px; border-radius: var(--radius-xs); background: var(--color-osso-grigio); text-align: center; color: var(--color-summer-night); }
.matrix td.cell.open { background: var(--color-caso); }
.matrix td.cell.done { background: var(--color-pino-verde); color: var(--color-white); }
.matrix td.nm { white-space: nowrap; padding-right: var(--spacing-lg); font-size: 14px; line-height: 20px; }
.legend { display: flex; gap: var(--spacing-xl); font-size: 12px; line-height: 16px; color: var(--color-text-helper); flex-wrap: wrap; }
.legend i { display: inline-block; width: 16px; height: 16px; border-radius: var(--radius-xs); vertical-align: -4px; margin-right: var(--spacing-sm); font-style: normal; text-align: center; }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(11, 31, 51, .45); display: grid; place-items: center; z-index: 50; padding: var(--spacing-xl); }
.modal { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-popup); padding: var(--spacing-5xl); width: min(634px, 100%); max-height: 90vh; overflow: auto; }
.modal-head { display: flex; gap: var(--spacing-xl); align-items: flex-start; justify-content: space-between; padding-bottom: var(--spacing-3xl); border-bottom: 1px solid var(--color-divider); }
.modal-close { background: none; border: 0; cursor: pointer; width: 44px; height: 44px; margin: -10px -10px 0 0; color: var(--color-gosblue); display: grid; place-items: center; flex: none; }
.modal-close svg { width: 24px; height: 24px; }
.modal-body { padding-top: var(--spacing-3xl); }
.modal-foot { padding-top: var(--spacing-3xl); }
@media (max-width: 1215px) { .modal { padding: var(--spacing-3xl); } }

pre.answer { background: var(--color-input); border-radius: var(--radius-xs); padding: var(--spacing-xl); font: 400 14px/20px var(--font); white-space: pre-wrap; word-break: break-word; max-height: 480px; overflow: auto; margin: 0; }
iframe.preview { width: 100%; height: 520px; border: 1px solid var(--color-tagline); border-radius: var(--radius-md); background: var(--color-white); }

/* Вход и регистрация */
.auth-wrap { padding: var(--spacing-7xl) var(--spacing-xl) 64px; display: grid; place-items: center; }
.auth { width: min(504px, 100%); }
.auth .card { padding: var(--spacing-6xl); }
@media (max-width: 767px) { .auth .card { padding: var(--spacing-3xl); } }

/* Экран результата */
.facts { list-style: none; padding: 0; margin: var(--spacing-3xl) 0 0; }
.facts li { display: flex; gap: var(--spacing-lg); align-items: flex-start; }
.facts li + li { margin-top: var(--spacing-lg); }
.facts svg { width: 24px; height: 24px; flex: none; color: var(--color-text-helper); }

/* Notifier: всплывает слева внизу */
.notifier { position: fixed; left: var(--spacing-5xl); bottom: var(--spacing-3xl); width: min(500px, calc(100% - 32px)); padding: var(--spacing-xl); border-radius: var(--radius-sm);
  background: var(--color-blu-digitale); color: var(--color-white); box-shadow: var(--shadow-popup); z-index: 60; }
.notifier.warning { background: var(--color-mandorle-pelate); color: var(--color-summer-night); }
@media (max-width: 767px) { .notifier { left: var(--spacing-xl); } }
.empty { text-align: center; padding: var(--spacing-7xl) var(--spacing-xl); color: var(--color-text-helper); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Маршрут курса: 9 модулей на одной линии, шлагбаум ИИ между 0 и 1 ---------- */
.hero-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--spacing-3xl); flex-wrap: wrap; }
.route { list-style: none; margin: var(--spacing-6xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.stop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--spacing-sm); }
/* Перегон до следующей остановки */
.stop:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: calc(50% + 24px); right: calc(-50% + 24px); height: 2px;
  background: var(--color-tagline); border-radius: var(--radius-xs); }
.stop.done:not(:last-child)::after { background: var(--color-pino-verde); transform-origin: left; animation: route-grow .45s ease-out both; animation-delay: calc(var(--i) * 90ms); }
@keyframes route-grow { from { transform: scaleX(0); } }
.stop-dot { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: var(--radius-full); display: grid; place-items: center;
  font-size: 16px; line-height: 24px; font-weight: 900; background: var(--color-white); color: var(--color-telegrey-scuro); box-shadow: inset 0 0 0 2px var(--color-pervinca); }
.stop-dot svg { width: 24px; height: 24px; }
.stop.done .stop-dot { background: var(--color-pino-verde); color: var(--color-white); box-shadow: none; }
.stop.here .stop-dot { background: var(--color-gosblue); color: var(--color-white); box-shadow: 0 0 0 6px var(--color-azzurro-alice); }
.stop.open .stop-dot { color: var(--color-gosblue); box-shadow: inset 0 0 0 2px var(--color-gosblue); }
.stop-link { display: flex; flex-direction: column; align-items: center; color: inherit; }
.stop-link:hover { color: var(--color-active-item); }
.stop-label { display: block; margin-top: var(--spacing-lg); font-size: 14px; line-height: 20px; color: var(--color-summer-night); }
.stop.here .stop-label { font-weight: 700; }
.stop.locked .stop-label { color: var(--color-text-helper); }
.stop-meta { display: block; font-size: 12px; line-height: 16px; color: var(--color-text-helper); margin-top: var(--spacing-sm); }
.stop.here .stop-meta { color: var(--color-gosblue); font-weight: 700; }

/* Шлагбаум ИИ: плашка прямо на перегоне 0 → 1 */
.gate { position: absolute; z-index: 2; top: 20px; left: 100%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: var(--spacing-sm); height: 32px; padding: 0 var(--spacing-lg) 0 var(--spacing-md);
  border-radius: var(--radius-full); background: var(--color-white); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--color-summer-night); white-space: nowrap; }
.gate svg { width: 32px; height: 20px; }
.gate.waiting { border: 2px dashed var(--color-telegrey-scuro); }
.gate.waiting .ring-ai, .route-note.waiting .ring-ai { stroke: var(--color-telegrey-scuro); stroke-dasharray: 2.6 2.6; }
.gate.open { border: 2px solid var(--color-pino-verde); }
.gate:hover { color: var(--color-active-item); }
.ring-human { stroke: var(--color-gosblue); }
.ring-ai { stroke: var(--color-blu-digitale); }
.route-note { margin: var(--spacing-3xl) 0 0; display: flex; gap: var(--spacing-md); align-items: center; font-size: 14px; line-height: 20px; color: var(--color-text-helper); }
.route-note svg { width: 32px; height: 20px; flex: none; }

@media (prefers-reduced-motion: reduce) { .stop.done:not(:last-child)::after { animation: none; } }

/* До 1140px — вертикальный маршрут */
@media (max-width: 1139px) {
  .route { grid-template-columns: 1fr; row-gap: var(--spacing-3xl); margin-top: var(--spacing-5xl); }
  .stop { flex-direction: row; align-items: center; text-align: left; padding: 0; gap: var(--spacing-xl); }
  .stop-link { flex-direction: row; align-items: center; gap: var(--spacing-xl); }
  .stop-link > div { display: flex; flex-direction: column; }
  .stop-label { margin-top: 0; }
  .stop:not(:last-child)::after { top: 44px; bottom: -20px; left: 19px; right: auto; width: 2px; height: auto; }
  .stop.done:not(:last-child)::after { transform-origin: top; animation-name: route-grow-v; }
  /* Под шлагбаум — дополнительный зазор между «Стартом» и модулем 1 */
  .stop:first-child { margin-bottom: var(--spacing-5xl); }
  .stop:first-child::after { bottom: -52px; }
  .gate { top: auto; bottom: -28px; left: 20px; transform: translate(-50%, 50%); }
}
@keyframes route-grow-v { from { transform: scaleY(0); } }

/* ---------- История практики, как история заявления ---------- */
.history { list-style: none; margin: var(--spacing-3xl) 0 0; padding: 0; }
.history li { position: relative; padding: 0 0 var(--spacing-3xl) var(--spacing-6xl); }
.history li:last-child { padding-bottom: 0; }
.history li::before { content: ""; position: absolute; left: 11px; top: 28px; bottom: 4px; width: 2px; background: var(--color-tagline); }
.history li:last-child::before { display: none; }
.history li.past::before { background: var(--color-pino-verde); }
.history .dot { position: absolute; left: 0; top: 0; width: 24px; height: 24px; }
.history .dot svg { width: 24px; height: 24px; }
.history li.past .dot { color: var(--color-pino-verde); }
.history li.now .dot { color: var(--color-gosblue); }
.history li.todo .dot { color: var(--color-telegrey-scuro); }
.history li.fail .dot { color: var(--color-tela-rossa); }
.history li.todo .h-title { color: var(--color-text-helper); }
.history .h-title { font-weight: 700; }
.history .h-meta { font-size: 14px; line-height: 20px; color: var(--color-text-helper); }
@media (max-width: 767px) { .hero-head > div, .hero-head .btns { width: 100%; } }