/* Сократ — стили (без сборки, один файл) */
:root {
  --bg: #f4f6fa;
  --card: #ffffff;
  --ink: #1c2733;
  --muted: #64748b;
  --accent: #155e9c;
  --accent-2: #0e8a7d;
  --student: #e8f1fb;
  --assistant: #f0f7f4;
  --border: #dbe3ee;
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}
header.site {
  background: linear-gradient(120deg, #123c63, #155e9c 60%, #0e8a7d);
  color: #fff;
  padding: 22px 18px 26px;
  text-align: center;
}
header.site h1 { margin: 0; font-size: 1.7rem; letter-spacing: 0.5px; }
header.site p { margin: 6px 0 0; opacity: 0.92; font-size: 0.95rem; }
header.site a { color: #cfe6ff; text-decoration: none; }
main { max-width: 860px; margin: 0 auto; padding: 18px 14px 60px; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin: 0 0 18px;
  box-shadow: 0 1px 3px rgba(18, 60, 99, 0.06);
}
.card h2 { margin: 0 0 12px; font-size: 1.15rem; }
label { display: block; font-size: 0.9rem; color: var(--muted); margin: 10px 0 4px; }
textarea, input, select {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfdff;
  color: var(--ink);
}
textarea { resize: vertical; }
textarea:focus, input:focus, select:focus { outline: 2px solid #a9cdef; border-color: #a9cdef; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 150px; }
button {
  font: inherit;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.15s;
}
button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
button.primary:hover:not(:disabled) { background: #124b7d; color: #fff; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.hint-text { color: var(--muted); font-size: 0.88rem; }
.status-ok { color: var(--accent-2); }
.status-err { color: #b3392f; }

/* примеры задач */
.example {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
}
.example b { display: block; margin-bottom: 4px; }
.example .src { color: var(--muted); font-size: 0.82rem; }
.example .actions { margin-top: 8px; }

/* история */
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; }
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: #eef2f7;
  color: var(--muted);
}
.badge.dialog { background: #e8f1fb; color: #155e9c; }
.badge.answering { background: #fdf3e0; color: #a06b00; }
.badge.finished { background: #e6f5f0; color: #0e8a7d; }

/* этапы */
.stages { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.stages span {
  flex: 1 1 90px;
  text-align: center;
  font-size: 0.78rem;
  padding: 6px 4px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted);
}
.stages span.active { background: var(--accent); color: #fff; font-weight: 600; }
.stages span.done { background: #e6f5f0; color: var(--accent-2); }

/* чат */
#chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 16px;
}
.msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; }
.msg.student { align-self: flex-end; background: var(--student); border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--assistant); border-bottom-left-radius: 4px; }
.msg .tag { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 2px; }
.typing { color: var(--muted); font-size: 0.85rem; align-self: flex-start; }

/* финал */
#eval-box { margin-top: 14px; }
.verdict { font-size: 1.05rem; font-weight: 700; margin: 6px 0; }
.verdict.ok { color: var(--accent-2); }
.verdict.partial { color: #a06b00; }
.verdict.off { color: #b3392f; }
.eval-cols { display: flex; gap: 14px; flex-wrap: wrap; }
.eval-cols > div { flex: 1 1 220px; }
.eval-cols ul { margin: 6px 0; padding-left: 18px; font-size: 0.92rem; }
.reference { background: #f7f9fc; border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-top: 12px; font-size: 0.92rem; }
.hidden { display: none; }
button.small { padding: 5px 10px; font-size: 0.85rem; }
.btn-link {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
}
.btn-link:hover { border-color: var(--accent); color: var(--accent); }
footer.site { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 20px; }

/* ---------- кабинет учителя ---------- */
main.narrow { max-width: 420px; }
.mono { font-family: Consolas, Menlo, monospace; font-size: 0.9em; }
.cards-row { display: flex; gap: 12px; flex-wrap: wrap; }
.stat {
  flex: 1 1 150px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.stat-num { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.vbar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; margin-top: 8px; background: #eef2f7; }
.vbar span { height: 100%; }
.vbar .ok { background: #0e8a7d; }
.vbar .partial { background: #e0a800; }
.vbar .off { background: #b3392f; }
table.mini td { padding: 5px 6px; }
table.mini td:first-child { color: var(--muted); }
.td-title { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog.detail-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  max-width: 720px;
  width: calc(100vw - 32px);
  max-height: 85vh;
  overflow-y: auto;
}
dialog.detail-dialog::backdrop { background: rgba(18, 60, 99, 0.35); }
dialog.detail-dialog h3 { margin: 8px 0 6px; }
blockquote {
  margin: 8px 0;
  padding: 8px 14px;
  border-left: 4px solid var(--accent);
  background: #f7f9fc;
  border-radius: 6px;
}

/* ---------- курс: темы и задания ---------- */
.topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.topic-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; text-decoration: none; color: var(--ink); transition: 0.15s;
}
.topic-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(18,60,99,.12); }
.topic-card b { color: var(--accent); }
.topic-card span { font-size: 0.86rem; color: var(--muted); }
.topic-card .src { color: var(--accent-2); font-size: 0.78rem; }
.task-block { margin: 10px 0 16px; }
.task-block .src { color: #e0a800; font-size: 0.85rem; }
.md-content { overflow-x: auto; }
.md-content h1, .md-content h2, .md-content h3 { margin: 14px 0 8px; }
.md-content p { margin: 8px 0; }
.md-content code { background: rgba(125,140,170,.15); border-radius: 5px; padding: 1px 5px; }
.md-content details { margin-top: 8px; }
.md-content details summary { cursor: pointer; color: var(--accent); font-weight: 600; }
[data-theme="dark"] .md-content code { background: #1c2942; }
[data-theme="dark"] .katex { color: #dbe9ff; }


/* ---------- тема и переключатель ---------- */
header.site { position: relative; }
.theme-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 10px;
}
.theme-btn:hover:not(:disabled) { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.22); }

/* ---------- тёмная тема ([data-theme="dark"], автодетект системной в theme.js) ---------- */
[data-theme="dark"] {
  --bg: #0e1626;
  --card: #16202f;
  --ink: #e4ecf7;
  --muted: #8ba0bd;
  --accent: #5aa7ff;
  --accent-2: #2dd4bf;
  --student: #1d3357;
  --assistant: #173430;
  --border: #2b3b55;
}
[data-theme="dark"] header.site {
  background: linear-gradient(120deg, #0b1830, #123c63 55%, #0c5a50);
}
[data-theme="dark"] textarea, [data-theme="dark"] input, [data-theme="dark"] select {
  background: #0f1828;
  color: var(--ink);
}
[data-theme="dark"] button { background: #1a2540; color: var(--ink); }
[data-theme="dark"] button.primary { background: var(--accent); border-color: var(--accent); color: #0b1220; }
[data-theme="dark"] button.primary:hover:not(:disabled) { background: #3f8fe8; color: #0b1220; }
[data-theme="dark"] .btn-link { background: #1a2540; color: var(--ink); }
[data-theme="dark"] .stages span { background: #1c2942; color: #8ba0bd; }
[data-theme="dark"] .stages span.active { background: var(--accent); color: #0b1220; }
[data-theme="dark"] .stages span.done { background: #14332c; color: #43c5a8; }
[data-theme="dark"] .badge { background: #1c2942; color: #a9bede; }
[data-theme="dark"] .badge.dialog { background: #1d3357; color: #7fb4ff; }
[data-theme="dark"] .badge.answering { background: #3a2f14; color: #e0b355; }
[data-theme="dark"] .badge.finished { background: #14332c; color: #43c5a8; }
[data-theme="dark"] .reference,
[data-theme="dark"] blockquote { background: #101a2c; }
[data-theme="dark"] .vbar { background: #1c2942; }
[data-theme="dark"] dialog.detail-dialog { background: var(--card); color: var(--ink); }
[data-theme="dark"] .example { background: #131e30; }
dialog.detail-dialog { background: var(--card); color: var(--ink); }