/* ============================================================
   TutorCore — дизайн-система «экзаменационный бланк»
   Единственный источник истины по стилям — прототип
   (TutorCore Сайт.html). Все значения (цвета, размеры,
   letter-spacing) перенесены из него без изменений.

   Подключение шрифтов (на каждой странице, до этого файла):
   Golos Text (400..900) + JetBrains Mono (400,500,700)
   ============================================================ */

:root {
  /* Палитра прототипа */
  --tc-bg: #e8e4da;        /* фон страницы */
  --tc-paper: #f8f5ee;     /* лист-бланк */
  --tc-card: #fdfbf5;      /* внутренние карточки */
  --tc-ink: #17150f;       /* основной «чернильный» */
  --tc-muted: #55503f;     /* второстепенный текст */
  --tc-dim: #6e6a5e;       /* ссылки, подписи */
  --tc-faded: #8a8474;     /* кикеры, подсказки */
  --tc-pale: #b3ac9c;      /* самый бледный */
  --tc-line: #cfc9bb;      /* линии, пунктир */
  --tc-mint: #e0eee2;      /* зелёные ячейки */
  --tc-cream: #f1ede2;     /* бежевые вставки */
  --tc-accent: #c03b2b;    /* акцент (штамп, hover) */
  --tc-ok: #2f7d4f;
  --tc-ok-bg: #e9f3ea;
  --tc-warn: #9a6b13;
  --tc-warn-bg: #fdf3e4;
  --tc-err: #b8321f;
  --tc-err-bg: #fbebe8;

  /* Панели (админ/кабинет) */
  --tc-panel-bg: #f2f1ec;
  --tc-panel-border: #dcd8cd;
  --tc-panel-line: #eceadf;
  --tc-panel-head: #f8f6f0;
  --tc-bar: #c9c4b6;

  --tc-mono: 'JetBrains Mono', monospace;
  --tc-sans: 'Golos Text', sans-serif;
}

/* ── База (из прототипа) ───────────────────────────────────── */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--tc-bg);
  font-family: var(--tc-mono);
  color: var(--tc-ink);
  min-height: 100vh;
}
input, textarea, button, select { font-family: inherit; }
textarea:focus, input:focus, select:focus {
  outline: 2px solid var(--tc-ink);
  outline-offset: -1px;
}
a { text-decoration: none; color: inherit; }

@keyframes stampIn {
  0%   { transform: rotate(-8deg) scale(2.4); opacity: 0; }
  60%  { transform: rotate(-8deg) scale(0.94); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); opacity: 1; }
}
@keyframes fadeUp {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Каркас публичного «бланка» ────────────────────────────── */
.tc-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}
.tc-sheet {
  background: var(--tc-paper);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(23, 21, 15, 0.07);
  overflow: hidden;
}

/* Шапка бланка */
.tc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 40px;
  border-bottom: 3px solid var(--tc-ink);
  flex-wrap: wrap;
}
.tc-logo {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.24em;
  cursor: pointer;
}
.tc-logo:hover { color: var(--tc-accent); }
.tc-head-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.tc-head-link {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--tc-dim);
  cursor: pointer;
}
.tc-head-link:hover { color: var(--tc-ink); }

/* Переключатель языка сайта. Стоит на месте надписи «Бланк ответов № 1»
   из прототипа (сама надпись по требованию заказчика не используется);
   типографика повторяет её: 10.5px / letter-spacing .16em / бледный цвет. */
.tc-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--tc-pale);
}
.tc-lang b { color: var(--tc-ink); font-weight: 700; }
.tc-lang a { color: var(--tc-pale); cursor: pointer; }
.tc-lang a:hover { color: var(--tc-ink); }

/* Кнопки */
.tc-btn {
  background: var(--tc-ink);
  color: var(--tc-paper);
  border: none;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 17px 30px;
  cursor: pointer;
  white-space: nowrap;
}
.tc-btn:hover { background: var(--tc-accent); }
.tc-btn-outline {
  background: none;
  border: 1.5px solid var(--tc-ink);
  color: var(--tc-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
}
.tc-btn-outline:hover { background: var(--tc-ink); color: var(--tc-paper); }
.tc-btn-ghost {
  background: none;
  border: 1px solid var(--tc-ink);
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 0.12em;
  cursor: pointer;
  color: var(--tc-ink);
}

/* ── Типографика ───────────────────────────────────────────── */
.tc-kicker {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--tc-faded);
  margin-bottom: 8px;
}
.tc-kicker-lg {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--tc-faded);
  margin-bottom: 22px;
}
.tc-h1 {
  font-family: var(--tc-sans);
  font-weight: 900;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.08;
  margin: 0 0 30px;
  letter-spacing: -0.01em;
}
.tc-h2 {
  font-family: var(--tc-sans);
  font-weight: 800;
  font-size: 30px;
  margin: 0 0 34px;
  letter-spacing: -0.01em;
}
.tc-text {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--tc-muted);
}

/* ── Секции бланка ─────────────────────────────────────────── */
.tc-section {
  padding: 56px 40px;
  border-top: 1px dashed var(--tc-line);
}
.tc-hero { padding: 64px 40px 56px; }

/* Ячейки бланка (буквы) */
.tc-cells { display: flex; gap: 8px; margin-bottom: 28px; }
.tc-cell {
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--tc-ink);
  background: var(--tc-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

/* Штрих-код */
.tc-barcode { display: flex; gap: 3px; align-items: center; }
.tc-barcode span {
  height: 26px;
  background: var(--tc-ink);
  border: 1px solid var(--tc-ink);
  display: block;
}
.tc-barcode span.lite { background: var(--tc-paper); }

/* Сетка шагов и карточки-«задания» */
.tc-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border: 1.5px solid var(--tc-ink);
}
.tc-step {
  padding: 26px 24px 30px;
  border-right: 1px solid var(--tc-line);
  background: var(--tc-card);
}
.tc-step-num {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--tc-ink);
  background: var(--tc-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}
.tc-step-title {
  font-family: var(--tc-sans);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 8px;
}
.tc-step-desc { font-size: 12px; line-height: 1.75; color: var(--tc-muted); }

.tc-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.tc-feature {
  border: 1.5px solid var(--tc-ink);
  background: var(--tc-card);
  padding: 22px 22px 24px;
}
.tc-feature-num {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--tc-faded);
  margin-bottom: 14px;
}
.tc-feature-title {
  font-family: var(--tc-sans);
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 8px;
}
.tc-feature-desc { font-size: 12px; line-height: 1.75; color: var(--tc-muted); }

/* Чипы предметов */
.tc-chip {
  border: 1px solid var(--tc-ink);
  background: var(--tc-mint);
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--tc-ink);
  cursor: default;
}
button.tc-chip { cursor: pointer; }
.tc-chip.active { background: var(--tc-ink); color: var(--tc-paper); }

/* ── Чат «проверка работы» ─────────────────────────────────── */
.tc-chat { border: 1.5px solid var(--tc-ink); background: var(--tc-card); }
.tc-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--tc-ink);
}
.tc-chat-title { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; }
.tc-chat-note { font-size: 10px; color: var(--tc-faded); letter-spacing: 0.08em; }
.tc-chat-msgs {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden; /* широкая формула не должна тянуть весь чат по горизонтали */
}
.tc-msg {
  max-width: 88%;
  min-width: 0;
  border: 1px solid var(--tc-ink);
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-line;
  animation: fadeUp 0.25s ease;
  overflow-wrap: break-word;
  /* Пузырь НЕ скролл-контейнер: overflow-x:auto здесь делал и overflow-y:auto,
     а инлайн-KaTeX выше строки на пару px — Windows рисовал скроллбар на каждом
     сообщении. Прокрутка широкого содержимого — на .katex-display и pre ниже. */
}
.tc-msg pre {
  max-width: 100%;
  overflow-x: auto; /* код/пре-текст прокручиваем внутри блока, а не за края пузыря */
}
/* Блочные формулы KaTeX (\dfrac, структурные и пр.) не переносятся по ширине —
   держим их в границах пузыря с горизонтальной прокруткой, а не за края чата. */
.tc-msg .katex-display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 6px 0;
  padding-bottom: 2px;
}
.tc-msg .katex { white-space: normal; }
.tc-msg.user {
  align-self: flex-end;
  background: var(--tc-ink);
  color: var(--tc-paper);
}
.tc-msg.ai {
  align-self: flex-start;
  background: var(--tc-mint);
  color: var(--tc-ink);
}
.tc-msg img { max-width: 100%; }
.tc-msg p { margin: 0 0 8px; }
.tc-msg p:last-child { margin-bottom: 0; }
.tc-chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1.5px solid var(--tc-ink);
}
.tc-chat-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--tc-line);
  background: var(--tc-paper);
  padding: 10px 12px;
  font-size: 12px;
}
.tc-chat-send {
  background: var(--tc-ink);
  color: var(--tc-paper);
  border: none;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.tc-chat-send:hover { background: var(--tc-accent); }
.tc-chat-attach {
  background: none;
  border: 1px solid var(--tc-line);
  color: var(--tc-muted);
  padding: 10px 12px;
  font-size: 12px;
  cursor: pointer;
}
.tc-chat-attach:hover { border-color: var(--tc-ink); color: var(--tc-ink); }

/* ── FAQ ───────────────────────────────────────────────────── */
.tc-faq { display: flex; flex-direction: column; border: 1.5px solid var(--tc-ink); }
.tc-faq-item { border-bottom: 1px solid var(--tc-line); background: var(--tc-card); }
.tc-faq-item:last-child { border-bottom: none; }
.tc-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 18px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  gap: 16px;
  color: var(--tc-ink);
}
.tc-faq-icon { color: var(--tc-faded); }
.tc-faq-a {
  display: none;
  padding: 0 22px 20px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--tc-muted);
  max-width: 720px;
}
.tc-faq-item.open .tc-faq-a { display: block; }

/* ── Формы бланка ──────────────────────────────────────────── */
.tc-formcard {
  border: 1.5px solid var(--tc-ink);
  background: var(--tc-card);
  padding: 30px 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tc-field { display: flex; flex-direction: column; gap: 6px; }
.tc-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--tc-faded);
}
.tc-input {
  border: 1px solid var(--tc-ink);
  background: var(--tc-paper);
  padding: 12px 14px;
  font-size: 13px;
}
.tc-form-error {
  font-size: 11.5px;
  color: var(--tc-accent);
  letter-spacing: 0.06em;
}
.tc-btn-block {
  background: var(--tc-ink);
  color: var(--tc-paper);
  border: none;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 16px;
  cursor: pointer;
}
.tc-btn-block:hover { background: var(--tc-accent); }

/* Штамп «ПРИНЯТО» */
.tc-stamp {
  border: 4px solid var(--tc-accent);
  color: var(--tc-accent);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.24em;
  padding: 14px 26px;
  transform: rotate(-8deg);
  border-radius: 6px;
  animation: stampIn 0.4s ease;
}

/* ── Документы (privacy / terms) ───────────────────────────── */
.tc-doc { padding: 64px 40px 72px; max-width: 760px; }
.tc-doc-h1 {
  font-family: var(--tc-sans);
  font-weight: 900;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.12;
  margin: 0 0 12px;
}
.tc-doc-edition {
  font-size: 11px;
  color: var(--tc-faded);
  letter-spacing: 0.1em;
  margin-bottom: 36px;
}
.tc-doc-sections { display: flex; flex-direction: column; gap: 26px; }
.tc-doc-section { border-left: 3px solid var(--tc-ink); padding-left: 20px; }
.tc-doc-section-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.tc-doc-section-t { font-size: 12.5px; line-height: 1.9; color: var(--tc-muted); }

@media (max-width: 767px) {
  .tc-doc { padding: 44px 20px 52px; }
}

/* ── Подвал бланка ─────────────────────────────────────────── */
.tc-foot {
  padding: 36px 40px;
  border-top: 3px solid var(--tc-ink);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.tc-foot-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--tc-faded);
  margin-bottom: 8px;
}
.tc-foot-mail {
  font-family: var(--tc-sans);
  font-weight: 800;
  font-size: 18px;
  color: var(--tc-ink);
}
.tc-foot-nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
}
.tc-foot-link {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--tc-dim);
  cursor: pointer;
}
.tc-foot-link:hover { color: var(--tc-ink); }
.tc-foot-copy { font-size: 11px; color: var(--tc-faded); }

/* ── Панели: кабинет школы и админ (утилитарная часть прототипа) ── */
.tc-panel-body { background: var(--tc-panel-bg); font-family: var(--tc-sans); }
.tc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 28px;
  min-height: 56px;
  background: #ffffff;
  border-bottom: 1px solid var(--tc-panel-border);
  flex-wrap: wrap;
}
.tc-topbar.dark { background: var(--tc-ink); color: var(--tc-paper); border-bottom: none; }
.tc-topbar-left { display: flex; align-items: center; gap: 14px; }
.tc-topbar-right { display: flex; align-items: center; gap: 18px; }
.tc-topbar-logo {
  width: 30px;
  height: 30px;
  background: var(--tc-ink);
  color: var(--tc-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  font-family: var(--tc-sans);
  flex-shrink: 0;
}
.tc-topbar-title { font-family: var(--tc-sans); font-weight: 700; font-size: 14px; }
.tc-topbar-sub { font-size: 10px; color: var(--tc-faded); letter-spacing: 0.08em; font-family: var(--tc-mono); }
.tc-topbar-note { font-size: 11px; color: var(--tc-dim); }
.tc-topbar-link { font-size: 10.5px; letter-spacing: 0.1em; color: var(--tc-dim); cursor: pointer; font-family: var(--tc-mono); }
.tc-topbar-link:hover { color: var(--tc-ink); }
.tc-topbar.dark .tc-topbar-link { color: rgba(248, 245, 238, 0.7); }
.tc-topbar.dark .tc-topbar-link:hover { color: var(--tc-paper); }

.tc-panel-wrap { max-width: 1120px; margin: 0 auto; padding: 28px 24px 72px; font-family: var(--tc-sans); }

.tc-card {
  background: #ffffff;
  border: 1px solid var(--tc-panel-border);
  border-radius: 10px;
  padding: 22px;
}
.tc-card-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--tc-faded);
  font-family: var(--tc-mono);
  margin-bottom: 14px;
}
.tc-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.tc-metric { background: #ffffff; border: 1px solid var(--tc-panel-border); border-radius: 10px; padding: 18px 20px; }
.tc-metric-label {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--tc-faded);
  font-family: var(--tc-mono);
  margin-bottom: 10px;
}
.tc-metric-val { font-weight: 800; font-size: 26px; line-height: 1; }
.tc-metric-sub { font-size: 11.5px; color: var(--tc-dim); margin-top: 7px; }

/* Столбики активности (CSS-бары, как в прототипе) */
.tc-bars { display: flex; align-items: flex-end; gap: 5px; height: 120px; }
.tc-bars-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  height: 100%;
  justify-content: flex-end;
  min-width: 0;
}
.tc-bars-bar { width: 100%; background: var(--tc-bar); border-radius: 3px 3px 0 0; min-height: 3px; }
.tc-bars-bar.hot { background: var(--tc-ink); }
.tc-bars-label { font-size: 9px; color: var(--tc-faded); font-family: var(--tc-mono); }

/* Кнопки панелей */
.tc-pbtn {
  background: var(--tc-ink);
  color: var(--tc-paper);
  border: none;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--tc-sans);
}
.tc-pbtn:hover { background: var(--tc-accent); }
.tc-pbtn-ghost {
  background: none;
  border: 1px solid var(--tc-panel-border);
  font-size: 12.5px;
  padding: 11px 16px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--tc-muted);
  font-family: var(--tc-sans);
}
.tc-pbtn-ghost:hover { background: var(--tc-panel-head); }

/* Строки «ключ: значение» в карточках */
.tc-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.tc-kv .k { color: var(--tc-dim); }
.tc-kv .v { font-family: var(--tc-mono); }

/* Статус-бейджи (оплата, состояние ученика) */
.tc-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 4px;
  width: fit-content;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tc-badge.ok { color: var(--tc-ok); background: var(--tc-ok-bg); }
.tc-badge.warn { color: var(--tc-warn); background: var(--tc-warn-bg); }
.tc-badge.err { color: var(--tc-err); background: var(--tc-err-bg); }
.tc-badge.err-solid { color: #ffffff; background: var(--tc-err); }

/* Прогресс-полоска */
.tc-track { height: 7px; background: var(--tc-panel-line); border-radius: 4px; overflow: hidden; }
.tc-track > div { height: 100%; background: var(--tc-ink); }

@media (max-width: 767px) {
  .tc-topbar { padding: 10px 16px; }
  .tc-panel-wrap { padding: 20px 12px 56px; }
}

/* ── Адаптивность ──────────────────────────────────────────── */
/* Планшеты и меньше: сетки в одну колонку задаются на страницах
   через .tc-cols (двухколоночные блоки прототипа). */
.tc-cols {
  display: grid;
  gap: 44px;
  align-items: start;
}

@media (max-width: 900px) {
  /* minmax(0,1fr) + min-width:0 — иначе колонка не сжимается ниже
     min-content содержимого и «бланк» обрезает её по overflow:hidden */
  .tc-cols { grid-template-columns: minmax(0, 1fr) !important; }
  .tc-cols > * { min-width: 0; }
}

@media (max-width: 767px) {
  .tc-wrap { padding: 16px 12px 40px; }
  .tc-head { padding: 18px 20px; }
  .tc-hero { padding: 44px 20px 40px; }
  .tc-section { padding: 40px 20px; }
  .tc-foot { padding: 28px 20px; }
  .tc-h2 { font-size: 26px; }
  .tc-step { border-right: none; border-bottom: 1px solid var(--tc-line); }
  .tc-step:last-child { border-bottom: none; }
}

@media (max-width: 480px) {
  /* auto-fit-сетки упираются в минимум 260/280px — на самых узких
     экранах переводим их в одну сжимаемую колонку */
  .tc-steps, .tc-features { grid-template-columns: minmax(0, 1fr); }
  .tc-cell { width: 44px; height: 44px; font-size: 17px; }
  .tc-head-nav { gap: 16px; }
  .tc-btn { padding: 15px 22px; }
  .tc-formcard { padding: 22px 18px 26px; }
}