/* Раскладка кабинета ученика.
 *
 * Взять из прототипа docs/freelance-shtab/freelance-shtab.html, а не писать
 * заново: прототип и есть источник правды по внешнему виду кабинета. База -
 * дизайн-система школы (tokens.css, подключается ссылкой), этот файл - только
 * раскладка приложения поверх неё.
 *
 * Правки ниже помечены словом «кабинет» и объясняют, почему они нужны; всё
 * остальное перенесено без изменений.
 */
/* Страница «Фриланс-штаб»: только токены дизайн-системы, без новых цветов */
/* Точки откликов по дням недели. Активный день - с откликом, и он же темнее: по
   неделе видно ритм, а не только сумму. Точка это не кнопка, поэтому курсора
   нет. */
.week-dots{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 10px}
.week-dot{display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:38px;padding:6px 4px;border:1px solid var(--rule);border-radius:var(--r-s);
  background:var(--surface-2);color:var(--ink-2)}
.week-dot i{font-family:var(--font-num);font-style:normal;font-size:12px;letter-spacing:.04em}
.week-dot b{font-family:var(--font-num);font-size:16px;color:var(--ink)}
.week-dot.on{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.week-dot.on b{color:var(--ok)}

/* Перекладка этапов сделки. Пять ступеней в ряд: пройденные зелёные с галочкой,
   текущая - янтарная и подписана, будущие серые. Один и тот же макрос рисует её
   и в карточке списка, и в шапке страницы сделки. */
.ladder{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  margin:14px 0 0;padding:0}
.ladder-i{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;min-width:0;color:var(--ink-3);font-size:14px}
/* Ступенька соединяет кружок с предыдущим: рисует половину шага, поэтому цвет
   сегмента зависит от ступени, в которую он ведёт. */
.ladder-i::after{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;
  background:var(--rule)}
.ladder-i:first-child::after{display:none}
.ladder-i.is-done::after{background:var(--ok)}
.ladder-n{position:relative;width:28px;height:28px;flex:none;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);
  color:var(--ink-2);font-family:var(--font-num);font-weight:700;font-size:14px;
  z-index:1}
.ladder-i.is-done .ladder-n{background:var(--ok-bg);color:var(--ok)}
.ladder-i.is-lost .ladder-n{background:var(--surface-2);color:var(--ink-3)}
.is-lost{color:var(--ink-3)}
.ladder-i.is-now .ladder-n{background:var(--accent);color:#17181B;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.ladder-t{line-height:1.25}
.ladder-i.is-now .ladder-t{color:var(--ink);font-weight:600}
.ladder-lost .ladder-n{background:var(--surface-2);color:var(--ink-3)}
.ladder-lost .ladder-t{color:var(--ink-3)}
.ladder-sm{margin-top:10px}
.ladder-sm .ladder-n{width:24px;height:24px;font-size:13px}
.ladder-sm .ladder-i::after{top:12px}
.ladder-sm .ladder-t{font-size:13px}
/* На телефоне пять названий в строку не читаются: ступеньки в столбик. */
@media(max-width:560px){.ladder{grid-template-columns:1fr;gap:8px}
  .ladder-i{flex-direction:row;justify-content:flex-start;gap:10px;text-align:left}
  .ladder-i::after{top:calc(-50% - 8px);left:11px;right:auto;width:2px;
    height:calc(100% + 8px);bottom:auto}
  .ladder-i:last-child::after{display:none}
  .ladder-i.is-done::after{background:var(--ok)}}

/* Шаги сделки. Раскрыт только текущий: сделанные и будущие - строки в одну
   строку, иначе пять одинаковых блоков превращают страницу в простыню. */
.steps{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.step{border:1px solid var(--rule);border-left:4px solid var(--rule-2);
  border-radius:var(--r-m);padding:12px 16px;background:var(--surface)}
.step.done{border-left-color:var(--ok)}
.step.now{border-left-color:var(--accent);background:var(--surface);
  box-shadow:var(--shadow-card);padding:18px 20px;margin-top:6px}
.step.muted-step{opacity:.6}
.step.is-next{opacity:.72}
.step-h{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.step:not(.now) .step-h{margin-bottom:2px}
.step-n{width:26px;height:26px;flex:none;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-family:var(--font-num);font-weight:700;
  font-size:14px;background:var(--surface-2);color:var(--ink-2)}
.step.done .step-n{background:var(--ok-bg);color:var(--ok)}
.step.now .step-n{background:var(--accent);color:#17181B;width:28px;height:28px;font-size:15px}
.step-h b{font-family:var(--font-ui);font-size:16px}
.step.now .step-h b{font-size:18px}
.step-s{margin-left:auto;font-size:14px;color:var(--ink-2)}
.step-note{margin:0;font-size:15px;color:var(--ink-2)}
.step .btn-row{margin-top:10px}
.step-submit{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}
/* Форма с одним полем: подпись, поле и кнопка в строку. */
.row-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.row-form .lbl{flex:none}
.row-form .input{flex:1 1 200px;min-width:0}
.row-form textarea.input{flex:1 1 100%}
.deal-customer-msg{margin-bottom:12px;padding:12px 14px;border:1px solid var(--rule);
  border-radius:var(--r-s);background:var(--surface-2)}
/* Подсказка «что делать сейчас»: одна строка под перекладкой. */
.deal-now{margin:12px 0 0;font-size:15px}
.deal-head-card{padding-bottom:18px}
.deal-head-card .ladder{margin-top:14px}
/* Кнопки «застряли» внизу шагов: отказ от заказа, отказ заказчика, помощь. */
.deal-stuck{margin-top:16px}
/* Подвал карточки в списке: дата слева, раскрытие справа. */
.deal-foot{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.deal-foot .muted{margin-right:auto}
/* Факты сделки в шапке - в строку, а не колонкой: они и подпись к перекладке. */
.kv-inline{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px}
.kv-inline dt{font-size:14px;color:var(--ink-3)}
.kv-inline dd{margin:0 12px 0 0;font-size:15px}

/* Ответ агента внутри шага: появляется на месте кнопки, чтобы не искать глазами. */
.agent-out{margin-top:12px;padding:12px 14px;border-radius:var(--r-s);
  background:var(--surface-2);border:1px solid var(--rule)}
.agent-out .out{white-space:pre-wrap}

/* Переписка по сделке. Свои реплики - вправо и светлее, ответы агента - влево. */
.chat{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.msg{border:1px solid var(--rule);border-radius:var(--r-s);padding:10px 12px;
  background:var(--ground);max-width:92%}
.msg.me{align-self:flex-end;background:var(--ok-bg);border-color:transparent}
.msg b{display:block;font-family:var(--font-ui);font-size:13px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-2);margin-bottom:4px}
.msg .out{white-space:pre-wrap}

[hidden]{display:none!important}
.app{padding:18px 0 70px}
.topbar .ai{margin-left:auto}

/* Плавная прокрутка. Объявлена здесь, а не в tokens.css: дизайн-система общая для
   школы, и менять её поведение на всех страницах из одного приложения нельзя.
   scroll-padding-top - высота липкой шапки .topbar плюс зазор, иначе переход к
   якорю или к началу раздела прятал заголовок под шапкой. */
html{scroll-behavior:smooth;scroll-padding-top:76px}
/* У человека, попросившего не двигать картинки, плавная прокрутка тоже лишняя:
   длинный ролик скролла укачивает и мешает. Дизайн-система глушит переходы и
   анимации, но scroll-behavior она не трогает - отключаем здесь. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.topbar .ai .b{font-size:12px}
.tabs{margin-bottom:18px}
.tab .b{margin-left:4px}
.card.flat:hover,.metric.flat:hover{transform:none;box-shadow:none;border-color:var(--rule)}
.out{background:var(--surface-2);border-radius:var(--r-s);padding:14px 16px;white-space:pre-wrap;line-height:1.55;font-size:17px;margin:10px 0}
.out:empty{display:none}
.copy-btn{margin:-2px 0 10px}
.wait{font-family:var(--font-ui);font-weight:700;color:var(--accent-text);font-size:16px;margin:8px 0}
.chat{display:flex;flex-direction:column;gap:8px;max-height:440px;overflow-y:auto;margin:10px 0;padding:2px}
.msg{border-radius:var(--r-m);padding:12px 14px;white-space:pre-wrap;line-height:1.5;font-size:16px;max-width:90%}
.msg.me{align-self:flex-end;background:var(--accent);color:#17181B}
.msg.ai{align-self:flex-start;background:var(--surface-2);color:var(--ink)}
.msg.cust{align-self:flex-end;background:var(--surface);border:1px solid var(--rule-2);color:var(--ink)}
.msg .who{display:block;font-family:var(--font-ui);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;opacity:.75}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.order .desc{margin:6px 0 12px}
.order .why{font-size:16px;color:var(--accent-text);font-weight:600;margin:0 0 10px}
.deal-body{border-top:1px solid var(--rule);margin-top:14px;padding-top:14px}
.deal .progress{margin-bottom:12px}
.deal-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.deal-head h3{margin:0;flex:1 1 220px}
.field{margin-bottom:12px}
.field textarea{min-height:96px}
.pay{font-family:var(--font-num);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{text-align:center;padding:36px 20px;color:var(--ink-2)}
.tl-row{grid-template-columns:120px 1fr}
/* главная */
.greet{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:4px 0 14px}
.greet h2{flex:1 1 300px}
.metrics{margin:0 0 16px}
.metric{padding:16px 14px;text-align:left}
.metric .v{font-size:28px}
.metric .progress{margin-top:10px}
.home{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin-bottom:16px}
.digest{border:1px solid var(--rule);border-radius:var(--r-s);padding:14px;margin-bottom:10px;background:var(--surface)}
.digest .head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;flex-wrap:wrap}
.digest b.t{font-family:var(--font-ui);font-weight:700;font-size:17px}
.digest .why{color:var(--accent-text);font-weight:600;font-size:16px;margin:6px 0}
.digest details summary{cursor:pointer;color:var(--accent-text);font-weight:600;font-size:16px;margin:6px 0}
.chart{width:100%;height:auto;display:block;margin:6px 0 4px}
.chart text{font-family:var(--font-num);font-size:12px;fill:var(--ink-2)}
.chart .grid{stroke:var(--rule);stroke-width:1}
.chart .base{stroke:var(--rule-2);stroke-width:1}
.chart .bar{fill:var(--accent);rx:3}
.chart .bar.past{fill:var(--accent-lg);opacity:.75}
.chart .lbl{fill:var(--ink);font-weight:600;font-size:13px}
.funnel{display:grid;gap:8px;margin:10px 0}
.fstep{display:grid;grid-template-columns:150px 1fr 60px;gap:10px;align-items:center;font-size:16px}
.fstep .bar{height:22px;border-radius:6px;background:color-mix(in srgb,var(--accent) 22%,var(--surface-2));position:relative;overflow:hidden}
.fstep .bar i{position:absolute;inset:0 auto 0 0;background:var(--grad-btn);border-radius:6px}
.fstep b{font-family:var(--font-num);text-align:right;font-variant-numeric:tabular-nums}
.big{display:grid;gap:8px}
.big .row{display:grid;grid-template-columns:1fr 110px 130px;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-s);background:var(--surface);font-size:16px}
.big .row .progress{margin:0}
.big .row .st{font-size:14px;color:var(--ink-2)}
.community{margin:0 0 16px}
.community .nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:12px}
.community .nums div{background:var(--dark-2);border-radius:var(--r-s);padding:12px 14px}
.community .nums b{display:block;font-family:var(--font-num);font-size:26px;color:var(--accent);font-variant-numeric:tabular-nums}
.community .nums span{font-size:15px;color:var(--on-dark-2)}
.next{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-s);background:var(--est-bg);margin-bottom:8px;font-size:16px}
.next .n{font-family:var(--font-num);font-weight:700;color:var(--est);flex:none}
/* портфолио */
.pf-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ava{width:72px;height:72px;border-radius:50%;background:var(--grad-btn);display:grid;place-items:center;font-family:var(--font-ui);font-weight:800;font-size:26px;color:#17181B;flex:none}
/* Загруженное фото занимает тот же круг: cover обрезает по центру, а не растягивает. */
img.ava{object-fit:cover;object-position:center;background:none}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:12px 0}
.work{border:1px solid var(--rule);border-radius:var(--r-m);overflow:hidden;background:var(--surface)}
.work .thumb{height:140px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-3);font-family:var(--font-ui);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;position:relative;overflow:hidden}
.work .thumb img{width:100%;height:100%;object-fit:cover}
.work .thumb.site{background:var(--dark);color:var(--on-dark-2)}
.work .thumb.site .frame{position:absolute;inset:18px 18px 0;background:var(--surface);border-radius:8px 8px 0 0;padding:10px 12px;color:var(--ink-2);font-size:12px;text-transform:none;letter-spacing:0;font-family:var(--font-body);font-weight:400;text-align:left;line-height:1.4}
.work .thumb.site .frame b{display:block;color:var(--ink);font-family:var(--font-ui);font-size:14px;margin-bottom:4px}
.work .thumb.text{background:color-mix(in srgb,var(--accent) 14%,var(--surface-2))}
.work .thumb.text .q{padding:14px;font-family:var(--font-body);font-weight:400;font-size:14px;text-transform:none;letter-spacing:0;color:var(--ink-2);line-height:1.45;text-align:left;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.work .body{padding:12px 14px}
.work .body h4{color:var(--ink);font-size:16px;margin:0 0 4px}
.work .body p{font-size:15px;color:var(--ink-2);margin:0 0 6px}
/* рейтинг */
.me-row td{background:var(--est-bg)!important;font-weight:600}
.awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:12px 0}
.award{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);padding:16px}
.award .p{font-family:var(--font-num);font-weight:700;font-size:22px;color:var(--accent-lg);margin:4px 0}
.award .h{font-family:var(--font-ui);font-weight:700;font-size:16px}
.award p{font-size:15px;color:var(--ink-2);margin:4px 0 0}
/* защита */
.flags{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:12px 0}
.flag{border-left:4px solid var(--warn);background:var(--surface);border-radius:var(--r-s);padding:12px 14px}
.flag b{display:block;font-family:var(--font-ui);font-size:16px;margin-bottom:4px}
.flag p{font-size:15px;color:var(--ink-2);margin:0}
.flag.ok{border-left-color:var(--ok)}
@media(max-width:900px){.home{grid-template-columns:1fr}}
@media(max-width:780px){.tl-row{grid-template-columns:1fr;gap:4px}.wrap{padding:0 16px}.msg{max-width:100%}.fstep{grid-template-columns:110px 1fr 50px}.big .row{grid-template-columns:1fr 90px}.big .row .progress{grid-column:1/-1}}

/* ============================================================
   ДОБАВЛЕНИЯ КАБИНЕТА
   Ниже - только то, чего в прототипе нет, потому что там демо на живых данных,
   а у нас страницы серверные. Свои цвета не вводим: только токены.
   ============================================================ */

/* Страница входа: карточка по центру, без шапки - вход идёт без сессии. */
.login-box { max-width: 460px; margin: 4vh auto 0; }
.login-box .btn { width: 100%; }
code.key {
  font-family: var(--font-num); letter-spacing: .18em; font-size: 20px;
  background: var(--surface-2); border-radius: var(--r-s); padding: 2px 8px;
}

/* Вкладки - это навигация, а не переключатель: по ним переходят обычной
   перезагрузкой, поэтому это ссылки, а не кнопки. */
.tabs a.tab { text-decoration: none; }

/* На узком экране дизайн-система прячет навигацию: на витрине это меню сайта, и
   там так и надо. В кабинете вкладки - единственный способ перейти между
   экранами, поэтому они остаются и прокручиваются вбок, а не переносятся на
   вторую строку: в шапке тогда не поместились бы логин и кнопка выхода. */
@media (max-width: 780px) {
  .topbar { height: auto; }
  .topbar .wrap { flex-wrap: wrap; row-gap: 8px; column-gap: 12px; padding: 10px 0; }
  .topbar .logo { font-size: 16px; }
  .topbar .logo span { display: none; }
  .topbar .ai { order: 2; margin-left: auto; }
  .topbar .ai .b { font-size: 11px; }
  .topbar form { order: 3; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs .tab { flex: 0 0 auto; }
}

/* Подвал кабинета: откуда данные, куда жаловаться. */
.foot-note { color: var(--ink-2); font-size: 16px; padding: 26px 0 0; }

/* Раскрытие карточки сделки. В прототипе тело открывает кнопка, здесь это
   штатный details, иначе без скрипта раскрыть нечего. Треугольник браузера убираем,
   чтобы подпись вела себя как кнопка, а при открытии подписывалась "Свернуть" -
   для этого текст задаётся двумя span, и виден только нужный. */
.deal-more { margin-top: 12px; }.deal-more > summary { list-style: none; width: fit-content; }
.deal-more > summary::-webkit-details-marker { display: none; }
/* Подписи две, видна нужная: закрыто - «Подробнее», открыто - «Свернуть».
   Раньше правило скрывало обе, и кнопка раскрытия была пустой рамкой без текста:
   на странице сделок «Подробнее» нельзя было ни прочитать, ни нащупать. */
.deal-more[open] > summary .open-lbl { display: none; }
.deal-more[open] > summary .close-lbl { display: inline; }
.deal-more > summary .close-lbl { display: none; }

/* Выбранный фильтр должен быть виден. В прототипе нажатая кнопка выглядела так
   же, как соседние, - было просто aria-pressed без правил, - и ученик не понимал,
   какой список открыт. Поэтому заливаем обводку: заливка и цвет взяты у
   btn-primary, чтобы не вводить своих красок. */
.deal-filters [aria-current="page"] {
  background: var(--grad-btn);
  color: #17181B;
  border-color: #D9962A;
}


/* Подсказки наставника - это отдельные формы, каждая с одной кнопкой.
   display:contents убирает форму из раскладки, и кнопки становятся прямыми
   элементами .quick, как и задумано во flex-раскладке прототипа. */
.quick form { display: contents; }

/* Ожидание ответа агента.
 *
 * В дизайн-системе .wait нет: он есть только в прототипе и без анимации. Здесь
 * ждать нужно 10-40 секунд у Стратега и 5-15 у Наставника, поэтому добавлены три
 * точки, которые поднимаются по очереди. Анимация намеренно скромная: она должна
 * показывать, что агент думает, а не привлекать внимание.
 *
 * Точки скрыты от программ чтения через aria-hidden на разметке, а при
 * prefers-reduced-motion системная гасилка дизайн-системы отключает и их.
 */
.wait {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--accent-text);
  font-size: 16px;
  margin: 12px 0;
}
.wait[hidden] { display: none; }

.wait .dots { display: inline-flex; gap: 4px; align-items: flex-end; }
.wait .dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: wait-dot 1.2s var(--ease) infinite;
}
.wait .dots i:nth-child(2) { animation-delay: 0.15s; }
.wait .dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes wait-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* Жёлтая полоса предупреждения: доступ заканчивается. Цвета - токены школы,
   янтарная пара «оценка, в работе» (--est/--est-bg), она ближе к жёлтому,
   чем красная пара warn. */
.banner.warn {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  border-radius: var(--r-m); padding: 12px 16px; margin: 14px 0;
  font-size: 15px; line-height: 1.45;
  background: var(--est-bg); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--est) 30%, transparent);
}
.banner.warn b { color: var(--est); font-weight: 600; }
.banner.warn a { color: var(--est); font-weight: 600; white-space: nowrap; }
/* ---- Путь ученика: инструктаж из восьми шагов ---- */
.path-hero{position:relative;border-radius:var(--r-l);overflow:hidden;min-height:300px;display:flex;align-items:flex-end;margin:0 0 18px;box-shadow:var(--shadow-card)}
.path-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.path-hero .ph-over{position:relative;padding:34px 36px;width:100%;background:linear-gradient(90deg,var(--ground) 0%,color-mix(in srgb,var(--ground) 90%,transparent) 45%,transparent 100%)}
.path-hero h2{font-size:clamp(26px,3vw,38px);margin:8px 0 10px;max-width:16ch}
.path-hero p{max-width:52ch;font-size:17px;color:var(--ink-2)}
.path-end{margin-top:18px}
.mag{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mag-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column}
.mag-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ground)}
.mag-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.mag-card:hover .mag-img img{transform:scale(1.04)}
.mag-n{position:absolute;left:18px;bottom:-6px;font-family:var(--font-num);font-weight:900;font-size:84px;line-height:1;color:#fff;text-shadow:0 6px 24px rgba(0,0,0,.35);letter-spacing:-.04em}
.mag-time{position:absolute;right:14px;top:14px;background:rgba(255,255,255,.9);border-radius:100px;padding:6px 12px;font-family:var(--font-ui);font-weight:800;font-size:13px;color:var(--ink)}
.mag-body{padding:20px 22px 22px}
.mag-body h3{font-size:22px;margin:0 0 8px}
.mag-body p{font-size:15.5px;color:var(--ink-2);margin:0 0 10px}
.mag-why{color:var(--accent-text)!important;font-weight:700;border-left:3px solid var(--accent);padding-left:12px}
@media(max-width:1100px){.mag{grid-template-columns:1fr}}
@media(max-width:900px){.path-hero{min-height:240px}.path-hero .ph-over{padding:22px 20px;background:linear-gradient(180deg,var(--ground) 20%,var(--ground) 100%)}}
/* ---- Главная: дашборд по прототипу Помощника ---- */
.top2{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin:0 0 16px}
.hero-p{position:relative;border-radius:var(--r-l);overflow:hidden;min-height:300px;display:flex;align-items:flex-end;box-shadow:var(--shadow-card)}
.hero-p.compact{min-height:300px}
.hero-p>.hero-mot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-p .greet2{position:relative;width:100%;padding:28px 30px;background:linear-gradient(90deg,var(--ground) 0%,color-mix(in srgb,var(--ground) 88%,transparent) 50%,transparent 100%)}
.greet2 h2{font-size:clamp(24px,2.6vw,32px);margin:8px 0 10px}
.greet2 .phrase{font-size:16.5px;color:var(--ink-2);line-height:1.5;margin:0;max-width:52ch}
.goal{display:flex;flex-direction:column;gap:12px}
.goal-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.eyebrow{font-family:var(--font-ui);font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.pct{font-family:var(--font-ui);font-weight:800;font-size:14px;color:var(--accent-text)}
.gv{font-family:var(--font-num);font-weight:700;font-size:34px;line-height:1}
.goal .left{font-size:15px;color:var(--ink-2);margin:0}
.goal .lnk,.next-step .lnk{font-weight:700;color:var(--accent-text)}
.ms{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 6px}
.ms-i{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--rule);border-radius:12px;padding:10px 12px;font-size:14px;color:var(--ink-2)}
.ms-i i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:12px;color:var(--ink-3);background:var(--ground)}
.ms-i.on{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ink)}
.ms-i.on i{background:var(--ok);color:#fff}
.ms-i.next{box-shadow:0 0 0 2px var(--accent)}
.next-step{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--rule);padding:12px 0 2px}
.next-step b{display:block;font-size:15px}
.next-step span{font-size:14px;color:var(--ink-2)}
.wk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wk-grid>div{background:var(--surface-2);border-radius:14px;padding:12px 14px}
.wk-grid b{display:block;font-family:var(--font-num);font-weight:700;font-size:26px;line-height:1;color:var(--ink)}
.wk-grid span{font-size:13px;color:var(--ink-3);font-weight:700}
.wk-grid i{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:2px}
.wk-grid i.up{color:var(--ok)} .wk-grid i.down{color:var(--accent-lg)}
.checks{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 16px;padding:18px 22px}
.checks h3{font-size:clamp(18px,1.9vw,22px);margin:0 0 4px}
.checks p{margin:0 0 8px;font-size:15px;color:var(--ink-2)}
.checks p.good{color:var(--ok);font-weight:600}
.checks .note-s{font-size:13px;color:var(--ink-3);margin:8px 0 0}
.checks-l{flex:1;min-width:0}
.resp-bar{display:flex;align-items:center;gap:10px;margin:6px 0}
.resp-bar .progress{flex:1;max-width:320px}
.resp-bar span{font-size:13px;color:var(--ink-3);white-space:nowrap}
.boxes{display:flex;gap:8px;flex-wrap:wrap;flex:none;max-width:360px;justify-content:flex-end}
.box{width:48px;height:48px;border-radius:14px;border:2px dashed var(--rule-2);background:var(--surface);font-family:var(--font-num);font-weight:800;font-size:18px;color:var(--ink-3);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}
.box:hover{border-color:var(--accent);color:var(--accent-text)}
.box.on{background:var(--grad-btn);border:2px solid transparent;color:var(--ink)}
.box.on.auto{background:var(--ink);color:var(--accent)}
.hot h4{margin:8px 0 4px}
.hot p{margin:0 0 12px;color:var(--ink-2);font-size:15.5px}
.sec{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sec h3{margin:0}
.sec-sub{display:block;font-size:14px;color:var(--ink-3)}
.strip{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
  .strip::-webkit-scrollbar{height:8px}.strip::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:8px}
  .orders-carousel{position:relative;padding:0 48px}
  .orders-carousel .strip{scroll-padding-left:2px;scrollbar-width:none;scroll-behavior:smooth;cursor:grab}
  .orders-carousel .strip .pick{flex:0 0 calc((100% - 36px) / 4);min-height:190px}
  .orders-carousel .strip::-webkit-scrollbar{display:none}
  .orders-carousel .strip.dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
  .orders-carousel .carousel-arrow{position:absolute;top:50%;z-index:3;width:42px;height:42px;padding:0;
    transform:translateY(-50%);border:1px solid var(--rule);border-radius:50%;
    background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card);
    display:grid;place-items:center;font:700 27px/1 var(--font-ui);cursor:pointer}
  .orders-carousel .carousel-arrow svg{display:block}
  .orders-carousel .carousel-arrow:hover{border-color:var(--rule-2)}
  .orders-carousel .carousel-arrow:disabled{opacity:.35;cursor:default}
  .orders-carousel .carousel-arrow.prev{left:0}
  .orders-carousel .carousel-arrow.next{right:4px}
  .orders-carousel.is-static{padding:0}
  .orders-carousel.is-static .carousel-arrow,.orders-carousel.is-static .carousel-dots{display:none}
  .carousel-dots{display:flex;justify-content:center;align-items:center;gap:6px;
    min-height:22px;padding-top:8px}
  .carousel-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;
    background:var(--rule-2);cursor:pointer;transition:width .2s var(--ease),background .2s var(--ease)}
  .carousel-dot.is-active{width:22px;border-radius:20px;background:var(--accent)}
  .carousel-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  @media(max-width:1023px){
    .orders-carousel .strip .pick{flex:0 0 calc((100% - 12px) / 2)}
  }
  @media(max-width:600px){
    .orders-carousel{padding:0 48px}
    .orders-carousel .strip .pick{flex:0 0 100%}
    .orders-carousel .carousel-arrow{width:38px;height:38px;font-size:24px}
    .orders-carousel .carousel-arrow.prev{left:2px}
    .orders-carousel .carousel-arrow.next{right:2px}
    .orders-carousel .strip{padding-left:2px;padding-right:2px}
  }
.pick{flex:0 0 24%;scroll-snap-align:start;min-height:190px;background:var(--surface-2);border:1px solid var(--rule);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px}
.pick>b{font-weight:800;font-size:15.5px;line-height:1.3;color:var(--ink)}
.pick .pm{display:flex;flex-direction:column;gap:2px}
.pick .btn{align-self:flex-start;margin-top:auto}
.story{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin:0 0 16px}
.story>img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.story .q{font-size:16px;color:var(--ink);font-weight:600;margin:6px 0}
.story-side{max-width:280px;border-left:1px solid var(--rule);padding-left:18px}
.story-side b{font-size:15px}
.story-side p{font-size:14px;color:var(--ink-2);margin:4px 0 10px}
.tip{display:flex;gap:16px;align-items:flex-start}
.tip-i{flex:none;width:52px;height:52px;border-radius:16px;background:var(--est-bg);display:grid;place-items:center;font-size:26px}
.tip p{font-size:16px;color:var(--ink);font-weight:600;margin:0 0 12px}
.tip>div{flex:1;min-width:0}
.home{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
.home .card.flat{margin:0}
@media(max-width:1100px){.top2{grid-template-columns:1fr}.home{grid-template-columns:1fr}.checks{flex-direction:column;align-items:flex-start}}
@media(max-width:900px){.hero-p.compact{min-height:240px}.hero-p .greet2{padding:20px 18px;background:linear-gradient(180deg,transparent 0%,var(--ground) 40%)}.ms{grid-template-columns:1fr}.boxes{justify-content:flex-start;max-width:none}.story{grid-template-columns:1fr}.story-side{border:0;padding-left:0}.story>img{width:56px;height:56px}.top2,.strip,.checks,.goal,.boxes{min-width:0;max-width:100%}}
.goal.start{align-content:start}
.hot-t{font-size:18px;margin:8px 0 4px}
.b-closed{background:var(--warn-bg, #F7E3E0);color:var(--warn, #B3392B)}
/* ---- Шапка и навигация по прототипу Помощника: плитки-иконки, схлопывание, ---- */
/* ---- на телефоне - нижняя панель. База шапки (тёмная, липкая) в tokens.css. ---- */
.site-header .wrap{display:flex;align-items:center;gap:16px;min-height:72px;transition:min-height .25s var(--ease,ease)}
/* Вкладок девять, и все в ряд: блок пусть сжимается (min-width:0) и при нехватке
   места скроллится по горизонтали, а не выталкивает шапку за край окна. */
.site-header .brand{width:200px;flex:none;margin:0}
.site-header .tabs{display:flex;flex:1 1 auto;min-width:0;gap:4px;margin:0 0 0 auto;padding:0 4px;background:none;box-shadow:none;border-radius:0;position:static;top:auto;overflow-x:auto;scrollbar-width:none}
.site-header .tabs::-webkit-scrollbar{display:none}
.site-header .tab{position:relative;display:inline-flex;flex-direction:row;flex:none;align-items:center;gap:8px;width:auto;min-height:40px;padding:8px 12px 8px 40px;font-size:15px;font-weight:700;color:var(--on-dark-2);border-radius:10px;text-align:left;line-height:1}
.site-header .tab::before{content:"";position:absolute;left:8px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:8px;background:color-mix(in srgb,var(--on-dark) 8%,transparent);transition:all .2s var(--ease,ease)}
.site-header .tab::after{content:"";position:absolute;left:12px;top:50%;width:18px;height:18px;margin:-9px 0 0;background:var(--accent);
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.site-header .tab:hover{background:color-mix(in srgb,var(--on-dark) 8%,transparent);color:#fff}
.site-header .tab:hover::before{background:color-mix(in srgb,var(--on-dark) 16%,transparent)}
.site-header .tab[aria-selected="true"]{color:var(--accent)}
.site-header .tab[aria-selected="true"]::before{background:var(--grad-btn)}
.site-header .tab[aria-selected="true"]::after{background:var(--dark)}
.site-header .tab .b{position:absolute;top:5px;right:9px;background:var(--accent);color:var(--dark);font-size:10px;font-weight:700;padding:1px 6px;border-radius:100px;margin:0}
.site-header .ai{flex:none;display:flex;align-items:center;gap:10px;margin-left:4px}
.site-header.is-compact .wrap{min-height:48px}
.site-header.is-compact .tab{min-height:34px;padding:4px 10px 4px 36px;font-size:14px}
.site-header.is-compact .tab::before{width:22px;height:22px;margin-top:-11px;left:6px;border-radius:6px}
.site-header.is-compact .tab::after{width:14px;height:14px;margin:-7px 0 0;left:10px}
@media(max-width:900px){
  .site-header .wrap{min-height:56px;gap:10px}
  .site-header .brand{width:150px}
  .site-header .ai{display:none}
  .site-header .tabs{position:fixed;left:8px;right:8px;bottom:8px;z-index:50;margin:0;padding:6px;border-radius:22px;background:var(--dark);overflow-x:auto;scrollbar-width:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
  .site-header .tabs::-webkit-scrollbar{display:none}
  .site-header .tab{flex:1 0 64px;flex-direction:column;justify-content:center;gap:4px;min-height:60px;padding:6px 4px;font-size:11px;text-align:center}
  .site-header .tab::before{position:static;margin:0;width:36px;height:36px;border-radius:11px}
  .site-header .tab::after{left:50%;top:12px;margin:0 0 0 -10px;width:20px;height:20px}
  .site-header .tab[aria-selected="true"]{background:color-mix(in srgb,var(--on-dark) 10%,transparent);color:var(--accent);border-radius:14px}
  .site-header.is-compact .tab{min-height:60px;padding:6px 4px;font-size:11px}
  .site-header.is-compact .tab::before{width:36px;height:36px;margin:0}
  .site-header.is-compact .tab::after{width:20px;height:20px;margin:0 0 0 -10px;left:50%;top:12px}
}
.wrap.app{padding-bottom:84px}
.tab[data-tab="home"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}
.tab[data-tab="feed"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.5-4.5'/%3E%3C/svg%3E")}
.tab[data-tab="deals"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2M2 13h20'/%3E%3C/svg%3E")}
.tab[data-tab="pf"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E")}
.tab[data-tab="rating"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0zM7 6H4v2a3 3 0 0 0 3 3M17 6h3v2a3 3 0 0 1-3 3'/%3E%3C/svg%3E")}
.tab[data-tab="safe"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.tab[data-tab="mentor"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
.tab[data-tab="plan"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
.
.tab[data-tab="path"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V4M4 4h12l-2 4 2 4H4'/%3E%3C/svg%3E")}

/* Лента заказов: три карточки в ряд, как в прототипе (#feed.cards). На узком
   экране колонок меньше, чтобы карточки не сжимались в нечитаемые. */
.cards.orders-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:1100px){.cards.orders-feed{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.cards.orders-feed{grid-template-columns:1fr}}

/* Карточка заказа в ленте. Картинка вида - справа сверху с обтеканием, как в
   прототипе: поток с обтеканием лежит в .o-flow (flow-root), а футер с кнопками -
   отдельный элемент и прижимается к низу. Напрямую обтекание и flex несовместимы,
   поэтому футер вынесен из потока с картинкой. Кнопки в .order-actions не
   переносятся: в узкой колонке иначе расходятся по строкам. */
.cards.orders-feed .card.order{display:flex;gap:0}
.cards.orders-feed .card.order::after{content:none}
.cards.orders-feed .card.order .o-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.cards.orders-feed .card.order .o-flow{display:flow-root}
.cards.orders-feed .card.order .o-flow>.ti{float:right;margin:0 0 12px 16px}
.cards.orders-feed .card.order .order-foot{margin-top:auto}
.cards.orders-feed .card.order .order-actions{display:flex;flex-wrap:nowrap;gap:8px}
/* Бриф партнера на странице заказа и сделки: разделы из анкеты партнера. */
.partner-brief h3{margin:18px 0 8px;font-size:19px}
.partner-brief h4{margin:16px 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.partner-brief .kv{margin:0 0 8px}
.partner-brief .hint{margin:10px 0 0}

/* Метка времени в чате помощи. */
.help-chat .msg .meta{margin-left:8px;font-weight:400;opacity:.65;text-transform:none;letter-spacing:0}

.inline{display:inline}


/* Кнопка «Помогли» рядом с отправкой: закрывает запрос, заметная и не мешает форме. */
.help-composer{display:block}
.help-composer form[data-help-form]{width:100%}
.help-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:8px}
.help-close-form{margin:0}
.help-close{font-weight:800}




/* Системная строка в чате: «Куратор закрыл обращение». */
.chat-event{align-self:center;margin:4px 0;padding:5px 12px;border-radius:20px;
  background:var(--surface-2);color:var(--ink-2);font-size:13px;font-weight:600;text-align:center}

.help-closed-actions{margin-top:8px}











@media(max-width:600px){.pick{flex:0 0 48%}}






.receipt-box{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}


.receipt-preview{display:block;width:100%;max-width:220px;max-height:220px;margin-top:0;border:1px solid var(--rule);border-radius:12px;object-fit:contain;background:var(--surface-2)}


/* Просмотр чека: картинка открывается поверх страницы, без новой вкладки. */
.receipt-open{display:inline-block;line-height:0;border-radius:12px}
.receipt-preview{cursor:zoom-in}
.lightbox{position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content;padding:0;border:0;background:transparent;overflow:visible}
.lightbox::backdrop{background:rgba(10,12,16,.78)}
.lightbox img{display:block;max-width:90vw;max-height:86vh;margin:0 auto;border-radius:12px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);background:#fff}
.lightbox-close{position:absolute;top:-14px;right:-14px;width:36px;height:36px;padding:0;
  border:0;border-radius:50%;background:#fff;color:var(--ink);font:700 24px/1 var(--font-ui);
  box-shadow:0 4px 16px rgba(0,0,0,.25);cursor:pointer}
.lightbox-close:hover{background:var(--surface-2)}

.receipt-list{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.receipt-item{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:220px;max-width:100%;font-size:13px}
.receipt-caption{color:var(--ink-2);text-decoration:none;font-size:12px}
.receipt-caption:hover{text-decoration:underline}