/* Дополнения к app/styles.css для кабинета и админки: формы, таблицы,
   статусы. Всё, что уже есть в основном файле (карточки, модалка, чипсы,
   тост), переиспользуется как есть — иначе разъедется при первой же правке. */

/* ---------------- формы ---------------- */
.auth-wrap{ max-width:420px; margin:56px auto; }
.auth-wrap h1{ font-size:26px; margin:0 0 6px; }
.auth-wrap .lead{ color:var(--muted); font-size:13px; margin:0 0 22px; }

.f{ margin-bottom:14px; }
.f > label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.f input, .f select, .f textarea{
  width:100%; height:38px; padding:0 12px; font:inherit; font-size:13px;
  border:1px solid var(--line-2); border-radius:8px; background:#fff; color:var(--ink);
  transition:border-color .12s;
}
.f textarea{ height:auto; min-height:110px; padding:10px 12px; line-height:1.5; resize:vertical; }
.f input:focus, .f select:focus, .f textarea:focus{ outline:none; border-color:var(--accent); }
.f-row{ display:flex; gap:14px; } .f-row > *{ flex:1; }
.f-check{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.f-check input{ width:auto; height:auto; margin-top:3px; flex:0 0 auto; }

.btn{
  height:38px; padding:0 18px; border-radius:8px; background:var(--accent); color:#fff;
  font-size:14px; font-weight:500; transition:background .12s, opacity .12s;
}
.btn:hover{ background:#3512cc; }
.btn[disabled]{ opacity:.4; cursor:default; }
.btn-sec{ height:34px; padding:0 14px; border-radius:8px; border:1px solid var(--line-2);
          font-size:13px; color:var(--ink); background:#fff; }
.btn-sec:hover{ background:var(--line); }
.btn-danger{ color:#a92c2c; }
.btn-sm{ height:30px; padding:0 12px; font-size:12px; border-radius:7px; }

/* ---------------- таблицы ---------------- */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ text-align:left; font-size:11px; font-weight:500; color:var(--muted-2);
         text-transform:uppercase; letter-spacing:.04em; padding:0 10px 10px; }
.tbl td{ padding:11px 10px; border-top:1px solid var(--line); font-size:13px; vertical-align:middle; }
.tbl tr:hover td{ background:#fafafb; }

/* ---------------- панель ---------------- */
.panel{ border:1px solid var(--line-2); border-radius:var(--r-card); padding:20px; margin-bottom:20px; background:#fff; }
.panel h2{ font-size:17px; font-weight:600; margin:0 0 14px; letter-spacing:-.01em; }
.panel h3{ font-size:13px; font-weight:500; color:var(--muted); margin:22px 0 10px; }

/* статусы аватара */
.st{ font-size:10px; padding:4px 9px; border-radius:5px; font-weight:500; }
.st.published{ background:#e7f6ec; color:#1b7a3e; }
.st.sandbox{ background:#fdf1dd; color:#9a6412; }
.st.dev{ background:#efeaff; color:var(--accent); }

.balance-big{ font-size:32px; font-weight:600; letter-spacing:-.02em; }
.muted{ color:var(--muted); }
.right{ margin-left:auto; }
.empty-note{ color:var(--muted); font-size:13px; padding:22px 0; }

/* ── история сессий ───────────────────────────────────────────────
   Лицо рядом с именем: через неделю студент помнит, с кем говорил, но не как
   её звали — «Ольга» и «Наталья» в столбик не различаются. */
.h-face{ width:30px; height:30px; border-radius:50%; object-fit:cover; display:block;
         background:#f2f3f7; border:1px solid var(--line-2); }
.h-face-no{ display:block; }
.debrief{ font-size:13.5px; line-height:1.65; white-space:pre-wrap; }
.debrief h3{ font-size:12px; font-weight:600; color:var(--accent); margin:16px 0 4px;
             text-transform:uppercase; letter-spacing:.03em; }

/* ── раздел «Деньги» ──────────────────────────────────────────────
   Четыре числа крупно и полоска долей: за чем следят каждый день — это
   «сколько всего» и «сколько за минуту», остальное по запросу. */
.mn-row{ display:flex; flex-wrap:wrap; gap:28px; margin-bottom:20px; }
.mn{ display:flex; flex-direction:column; gap:2px; }
.mn-v{ font-size:26px; font-weight:600; letter-spacing:-.02em; }
.mn-k{ font-size:12px; color:var(--muted); }
.mn-bar{ display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--line); }
.mn-bar span{ display:block; }
.mn-bar .s1, .mn-leg i.s1{ background:var(--accent); }
.mn-bar .s2, .mn-leg i.s2{ background:#1d9e75; }
.mn-bar .s3, .mn-leg i.s3{ background:#e0a63a; }
.mn-leg{ display:flex; flex-wrap:wrap; gap:18px; margin-top:10px; font-size:12.5px; color:var(--ink-2); }
.mn-leg span{ display:inline-flex; align-items:center; gap:7px; }
.mn-leg i{ width:9px; height:9px; border-radius:2px; display:block; }
.btn-sec.is-on{ border-color:var(--accent); color:var(--accent); }

/* ── выбор сложности перед стартом ────────────────────────────────
   Был выпадающий список — его на тестировании просто не замечали и уходили
   в разговор с настройкой по умолчанию. Раскрываем все варианты сразу:
   выбор из трёх строк читается за секунду, а список надо сначала открыть. */
.st-pick{ display:flex; flex-direction:column; gap:8px; }
.st-opt{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  border:1px solid var(--line-2); border-radius:10px; padding:10px 12px;
  transition:border-color .12s, background .12s;
}
.st-opt:hover{ border-color:var(--muted-2); }
.st-opt.on{ border-color:var(--accent); background:rgba(67,24,255,.05); }
.st-opt input{ position:absolute; opacity:0; pointer-events:none; }
.st-dot{
  flex:none; width:16px; height:16px; margin-top:1px; border-radius:50%;
  border:2px solid var(--line-2); transition:border-color .12s;
}
.st-opt.on .st-dot{ border-color:var(--accent); border-width:5px; }
.st-txt{ display:flex; flex-direction:column; gap:2px; line-height:1.35; }
.st-txt b{ font-size:13px; font-weight:500; }
.st-txt i{ font-style:normal; font-size:11.5px; color:var(--muted); }

/* карточка навыка в редакторе */
.sk-card{ border:1px solid var(--line-2); border-radius:10px; padding:14px; margin-bottom:12px; }
.sk-card.is-off{ background:#fafafb; }
.sk-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:13px; }
.sk-head input{ width:auto; height:auto; }
.sk-head b{ font-weight:500; }

/* сетка карточек в админке */
.a-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.a-card{ border:1px solid var(--line-2); border-radius:12px; padding:15px; cursor:pointer; transition:border-color .12s; }
.a-card:hover{ border-color:var(--accent); }
.a-card h4{ margin:0 0 3px; font-size:15px; font-weight:600; }
.a-card .sub{ font-size:12px; color:var(--muted); margin-bottom:10px; }
/* Лицо в карточке админки. Студент выбирает по фотографии, методист до сих пор
   искал по имени — и путал Ирину-упражнение с Ириной-полной-сессией. Те же
   миниатюры уже стоят в истории у студента, размер и скругление оттуда. */
.a-card .a-head{ display:flex; gap:11px; align-items:flex-start; margin-bottom:10px; }
.a-card .a-head .sub{ margin-bottom:0; }
.a-card .a-head > div{ min-width:0; }
.a-face{ width:46px; height:46px; border-radius:10px; flex:none; object-fit:cover;
         background:var(--line-2); }
.a-face.ph{ display:grid; place-items:center; font-size:17px; font-weight:600; color:#fff;
            background:linear-gradient(140deg,#7b6cf6,#a58bd8); }
/* Заголовок категории в админке мельче студенческого: здесь это навигация по
   длинному списку, а не витрина. */
.a-sec h2{ font-size:16px; }
.a-sec{ margin-bottom:26px; }
.a-card .meta{ font-size:11.5px; color:var(--muted-2); margin-top:8px; }

/* ── экран дозвона в модалке каталога ─────────────────────────────
   Тренажёр — отдельная страница, и её загрузка это несколько секунд пустоты
   между нажатием кнопки и лицом на экране. Закрываем их звонком: то же, что
   происходит, когда набираешь кому-то видеовызов. */
.dlg-call{
  position:absolute; inset:0; z-index:5; border-radius:14px;
  background:#12141c; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  animation:ovlIn .16s ease;
}
.dlg-call[hidden]{ display:none; }
.dlg-call .call-av{ position:relative; width:104px; height:104px; }
.dlg-call .call-av img{
  width:104px; height:104px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.2);
}
.dlg-call .ring{
  position:absolute; inset:-10px; border-radius:50%;
  border:2px solid rgba(255,255,255,.55); animation:callring 1.6s ease-out infinite;
}
@keyframes callring{ 0%{ transform:scale(.9); opacity:.7 } 100%{ transform:scale(1.25); opacity:0 } }
.dlg-call .call-name{ font-size:17px; font-weight:600; letter-spacing:-.01em; }
.dlg-call .call-state{ font-size:12.5px; color:#b9bdc9; }
.dlg-call .call-state::after{ content:""; animation:calldots 1.4s steps(4,end) infinite; }
@keyframes calldots{ 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }

/* ── библиотека фото и теги в карточке клиента ────────────────────
   Раньше фото задавалось строкой с адресом, а теги — строкой через запятую.
   И то и другое требовало знать, что уже есть в системе, — а этого нигде
   не было видно. */
.photo-row{ display:flex; gap:18px; align-items:flex-start; margin-top:6px; }
.photo-cur{
  width:96px; height:96px; flex:none; border-radius:12px; overflow:hidden;
  background:#f2f3f7; border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
}
.photo-cur img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-cur span{ font-size:11.5px; color:var(--muted-2); }

.tag-pick{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
.tag-chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--line-2); border-radius:999px; padding:5px 12px;
  font-size:12.5px; user-select:none; transition:border-color .12s, background .12s;
}
.tag-chip.on{ border-color:var(--accent); background:rgba(67,24,255,.06); color:var(--accent); }
.tag-chip input{ width:13px; height:13px; margin:0; }
.tag-add{ display:flex; gap:8px; align-items:center; }
.tag-add input{ max-width:220px; }

.lib-ovl{
  position:fixed; inset:0; z-index:80; background:rgba(16,20,45,.45);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.lib{
  width:100%; max-width:760px; max-height:80vh; overflow:auto;
  background:#fff; border-radius:14px; padding:20px 22px;
  box-shadow:0 24px 64px rgba(0,0,0,.28);
}
.lib-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.lib-head b{ font-size:16px; font-weight:600; }
.lib-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; }
.lib-grid figure{
  margin:0; cursor:pointer; position:relative; border:1px solid var(--line-2);
  border-radius:10px; overflow:hidden; transition:border-color .12s;
}
.lib-grid figure:hover{ border-color:var(--accent); }
.lib-grid img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#f2f3f7; }
.lib-grid figcaption{
  font-size:11px; color:var(--muted); padding:6px 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lib-del{
  position:absolute; right:5px; top:5px; width:22px; height:22px; border:0; cursor:pointer;
  border-radius:50%; background:rgba(16,20,45,.55); color:#fff; font-size:15px; line-height:20px;
}

/* ── предпросмотр системного промпта ──────────────────────────────
   Показывать одну простыню мало: методологу нужно видеть, какой абзац откуда
   взялся, иначе непонятно, что именно править. */
.i-btn{
  width:20px; height:20px; flex:none; border:1px solid var(--line-2); border-radius:50%;
  background:#fff; color:var(--muted); cursor:pointer;
  font:600 12px/18px Geist,system-ui,sans-serif; padding:0;
  transition:border-color .12s, color .12s;
}
.i-btn:hover{ border-color:var(--accent); color:var(--accent); }
.prompt-view{ max-width:840px; }
.pp{ margin-bottom:18px; }
.pp-h{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.pp-h b{ font-size:13px; font-weight:600; }
.pp-h span{ font-size:11.5px; color:var(--muted-2); }
.pp pre{
  margin:0; padding:12px 14px; border-radius:9px; background:#f7f8fb;
  border:1px solid var(--line-2); white-space:pre-wrap; word-break:break-word;
  font:12.5px/1.65 Geist,system-ui,sans-serif; color:var(--ink);
}
.pp-empty{ margin:0; font-size:12.5px; color:#b4451f; }

/* ── повторяющиеся строки как поля ────────────────────────────────
   Списки одинаковых записей — настрои, типы реплик, уровни раскрытости —
   правились одной простынёй с колонками через палку. Формат для программиста:
   забытая палка молча съедала поле. */
.rs{
  display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap;
  padding:12px 14px; margin-bottom:10px;
  border:1px solid var(--line-2); border-radius:10px; background:#fcfcfd;
}
.rs-f{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.rs-f > span{ font-size:11px; color:var(--muted-2); letter-spacing:.01em; }
.rs-f input, .rs-f textarea{ width:100%; font-size:12.5px; }
.rs-f textarea{ min-height:52px; resize:vertical; }
.rs-del{
  align-self:center; width:26px; height:26px; flex:none; border:0; cursor:pointer;
  border-radius:7px; background:#f2f3f7; color:var(--muted); font-size:17px; line-height:24px;
}
.rs-del:hover{ background:#fde8e2; color:#b4451f; }

/* Подписи к подстановкам: что берётся из карточки, а что считает тренажёр. */
.subs{ margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.subs > div{ display:flex; gap:10px; align-items:baseline; font-size:11.5px; }
.subs code{
  flex:none; background:#eef0f6; border-radius:5px; padding:1px 6px;
  font:12px ui-monospace,Menlo,monospace; color:var(--accent);
}
.subs span{ color:var(--muted); }
.subs span.calc{ color:var(--muted-2); font-style:italic; }
.subs i{ font-style:italic; }
.rs-f.rs-r{ align-items:center; }
.rs-f.rs-r input{ width:16px; height:16px; margin:4px 0 0; cursor:pointer; }

/* Два действия у карточки клиента: настроить и послушать. Раньше клик вёл
   только в форму — и неопубликованного клиента проверить было нечем. */
.a-act{ display:flex; gap:8px; margin-top:12px; }
.a-act .btn-sm[disabled]{ opacity:.45; cursor:not-allowed; }

/* Перестановка строк вместо поля «Порядок»: число вроде «100» ничего не
   говорит тому, кто заводит навык, — оно про сортировку, а не про навык. */
.ord{ display:inline-flex; gap:3px; }
.ord button{
  width:24px; height:24px; padding:0; cursor:pointer; line-height:22px;
  border:1px solid var(--line-2); border-radius:6px; background:#fff;
  color:var(--muted); font-size:12px;
}
.ord button:hover:not([disabled]){ border-color:var(--accent); color:var(--accent); }
.ord button[disabled]{ opacity:.3; cursor:default; }

/* Лесенка исходов: попадание и тип — две ветки одного решения, а не
   слагаемые. Из отдельных полей это не читалось. */
.ladder{ border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; background:#fcfcfd; }
.lad{ display:flex; align-items:center; gap:12px; padding:4px 0; font-size:12.5px; }
.lad.is-hit{ font-weight:600; }
.lad-w{
  flex:none; min-width:44px; text-align:right;
  font:600 12.5px ui-monospace,Menlo,monospace;
}
.lad-w.p{ color:#1b7a3e; }
.lad-w.m{ color:#b4451f; }
.lad-w.z{ color:var(--muted-2); }

/* Что читает студент, а не модель. Разделение неочевидное: примеры и
   подсказки заполняются в той же карточке, но в промпты не идут. */
.stu{ display:flex; flex-direction:column; gap:8px; }
.stu > div{ display:flex; gap:10px; align-items:baseline; font-size:12px; }
.stu b{ flex:0 0 210px; font-weight:600; }
.stu span{ color:var(--muted); }

/* Вкладки внутри карточки клиента: четыре раздела одной простынёй мотать
   неудобно, а панели должны остаться в DOM — форма сохраняется целиком. */
.ed-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line-2); margin:-6px 0 22px; }
.ed-tabs button{
  border:0; background:none; cursor:pointer; padding:9px 16px;
  font:inherit; font-size:13px; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.ed-tabs button:hover{ color:var(--ink); }
.ed-tabs button.is-active{ color:var(--ink); border-bottom-color:var(--accent); font-weight:500; }

/* Подпись над вкладкой: в какой момент разговора работает то, что внутри. */
.step-note{ font-size:12.5px; color:var(--muted); margin:0 0 16px; }
/* Фон комнаты шире портрета — показываем его горизонтальным прямоугольником,
   иначе в квадратной рамке не понять, что выбрал. */
.photo-cur.wide{ width:170px; height:96px; }

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

/* Кто прочитает то, что тут написано. */
.aud{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  padding:3px 10px; border-radius:999px; margin:0 0 12px; font-weight:500;
}
.aud.eye{ background:#e1f5ee; color:#0f6e56; }
.aud.bot{ background:#eeedfe; color:#3c3489; }
.aud.eye::before{ content:'●'; font-size:8px; }
.aud.bot::before{ content:'■'; font-size:8px; }

/* Схема экрана: где именно всплывёт этот текст. Рисуем серыми блоками —
   узнаваемо, но не притворяется настоящим интерфейсом. */
.split{ display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:20px; align-items:start; }
@media (max-width:1040px){ .split{ grid-template-columns:1fr; } }
.prev{ background:#f6f5f2; border-radius:10px; padding:10px; position:sticky; top:16px; }
.prev-scr{ background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:8px; }
.prev-b{ background:#eeece7; border-radius:4px; height:10px; margin-bottom:5px; }
.prev-hi{ background:#e1f5ee; border:1px dashed #1d9e75; border-radius:4px;
          padding:5px 6px; font-size:10.5px; color:#0f6e56; line-height:1.35; margin-bottom:5px; }
.prev-hi.bot{ background:#eeedfe; border-color:#7f77dd; color:#3c3489; }
.prev-cap{ font-size:11.5px; color:var(--muted); margin:9px 2px 0; line-height:1.45; }
.prev-row{ display:flex; gap:5px; align-items:center; margin-bottom:5px; }
.prev-dot{ width:22px; height:22px; border-radius:50%; background:#eeece7; flex:none; }
.prev-me{ margin-left:auto; background:#4b3ec7; color:#fff; font-size:10px;
          padding:3px 7px; border-radius:7px; }

/* Заполненность навыка: в списке уже видно «не настроена», но внутри было
   непонятно, чего именно не хватает. */
.fill{ display:flex; align-items:center; gap:10px; font-size:12.5px;
       color:var(--muted); margin:-4px 0 18px; }
.fill-bar{ flex:0 0 150px; height:6px; background:var(--line-2); border-radius:3px; overflow:hidden; }
.fill-bar > i{ display:block; height:6px; background:var(--accent); }
.warn{ font-size:12.5px; background:#fdf3e7; color:#8a4b12;
       border-radius:8px; padding:9px 12px; margin:0 0 14px; line-height:1.5; }

/* ---------------- живой предпросмотр ----------------
   Серые прямоугольники показывали, КУДА попадёт текст, но не то, как он
   читается. Для карточки навыка это бесполезно: там текст и есть весь экран.
   Поэтому рисуем уменьшенную копию настоящих экранов с настоящими словами. */
.lp{ background:#f6f5f2; border-radius:12px; padding:12px; position:sticky; top:16px; }
.lp-t{ font-size:11px; color:var(--muted); text-transform:lowercase; margin:0 0 8px 2px; }
.lp-scr{ background:#fff; border:1px solid var(--line-2); border-radius:10px; padding:12px; }
.lp-av{ width:44px; height:44px; border-radius:50%; background:#eeece7; margin:0 auto 8px;
        overflow:hidden; }
.lp-av img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.lp-name{ font-size:13px; font-weight:600; text-align:center; }
.lp-sub{ font-size:11px; color:var(--muted); text-align:center; margin-top:2px; }
.lp-box{ background:#f7f6f3; border-radius:8px; padding:9px 10px; margin-top:10px; }
.lp-skill{ font-size:11.5px; font-weight:600; margin-bottom:4px; }
.lp-p{ font-size:11px; line-height:1.5; color:var(--ink-2); margin:0; }
.lp-p + .lp-p{ margin-top:6px; padding-top:6px; border-top:1px solid var(--line-2); }
.lp-btn{ background:var(--accent); color:#fff; font-size:11px; text-align:center;
         border-radius:8px; padding:7px; margin-top:10px; }
.lp-empty{ color:var(--muted-2); font-style:italic; }
/* полоска подсказок и панель «?» — то же, но своими чипсами */
.lp-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.lp-chip{ background:#eef0ff; color:#4b3ec7; border-radius:999px; padding:3px 8px; font-size:10px; }
.lp-tip{ border:1px solid var(--line-2); border-radius:7px; padding:7px 8px; margin-top:6px; }
.lp-tip b{ font-size:11px; display:block; margin-bottom:2px; }
.lp-tip span{ font-size:10.5px; color:var(--muted); line-height:1.45; }
.lp-cap{ font-size:11px; color:var(--muted); margin:10px 2px 0; line-height:1.45; }