/* EPAM Prep — дизайн по мотивам epam.com:
   чёрные секции, cyan #00f6ff, градиент cyan→violet, Museo Sans (фолбэк Source Sans 3),
   body 300 с letter-spacing, кнопки-пилюли UPPERCASE 900, тонкие линии вместо теней. */
:root {
  /* Colors (сняты с epam.com) */
  --epam-black: #1b1b1b;
  --epam-ink: #231f20;          /* rgb(35,31,32) — основной текст */
  --epam-white: #ffffff;
  --epam-cyan: #00f6ff;         /* фирменный акцент */
  --epam-violet: #a06af9;       /* второй конец градиента цифр */
  --epam-gray: #6b6b6b;         /* вторичный текст */
  --epam-light-gray: #f5f5f5;   /* светлые подложки */
  --epam-line: #e3e3e3;         /* тонкие линии на светлом */
  --epam-line-dark: #3a3a3a;    /* тонкие линии на тёмном */
  --epam-green: #27ad75;
  --epam-red: #f0616d;
  --gradient: linear-gradient(90deg, var(--epam-cyan), var(--epam-violet));

  /* Typography */
  --font-main: 'Source Sans 3', museo-sans, 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ls-body: 0.04em;            /* 0.72px @18px */
  --ls-cta: 0.21em;             /* 3.36px @16px */
  --ls-label: 0.1em;

  /* Spacing (8px base) */
  --sp-8: 8px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px;
  --sp-48: 48px; --sp-64: 64px; --sp-80: 80px;

  --page-max-width: 1200px;
  --radius-pill: 40px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

::selection { background: var(--epam-cyan); color: var(--epam-black); }
:focus-visible { outline: 2px solid var(--epam-cyan); outline-offset: 2px; }

body {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: var(--ls-body);
  color: var(--epam-ink);
  background: var(--epam-white);
}

.container { max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--sp-24); }

/* ---------- Header: чёрный, лого в угловых скобках ---------- */
.site-header { background: var(--epam-black); color: var(--epam-white); border-bottom: 1px solid var(--epam-line-dark); }
.site-header .container {
  display: flex; align-items: center; gap: var(--sp-32);
  min-height: 72px; flex-wrap: wrap; padding-top: var(--sp-8); padding-bottom: var(--sp-8);
}
.brand {
  font-family: var(--font-main); font-weight: 700; font-size: 22px;
  color: var(--epam-white); text-decoration: none; letter-spacing: 0.01em;
}
.brand::before { content: '<'; color: var(--epam-cyan); font-weight: 300; margin-right: 1px; }
.brand::after  { content: '>'; color: var(--epam-cyan); font-weight: 300; margin-left: 1px; }
.brand b { font-weight: 300; color: var(--epam-cyan); }
.nav { display: flex; gap: var(--sp-24); flex-wrap: wrap; }
.nav a {
  color: var(--epam-white); text-decoration: none;
  font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: var(--ls-label);
  padding-bottom: 4px; border-bottom: 2px solid transparent; opacity: .8;
}
.nav a:hover { opacity: 1; }
.nav a.active { opacity: 1; border-bottom-color: var(--epam-cyan); }
.header-user { margin-left: auto; display: flex; align-items: center; gap: var(--sp-16); }
.header-user span { color: var(--epam-gray); font-size: 13px; }
.header-user a { color: var(--epam-cyan); text-decoration: none; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: var(--ls-label); }

/* ---------- Typography ---------- */
h1.page-title {
  font-weight: 300; font-size: 44px; line-height: 1.1; letter-spacing: 0.01em;
  margin: var(--sp-48) 0 var(--sp-16);
}
.page-sub { color: var(--epam-gray); font-size: 18px; margin-bottom: var(--sp-32); max-width: 720px; }
h2.section-title {
  font-weight: 300; font-size: 28px; line-height: 1.2;
  margin: var(--sp-64) 0 var(--sp-24);
  padding-top: var(--sp-24); border-top: 1px solid var(--epam-line);
}

/* ---------- Buttons: пилюли, UPPERCASE 900, letter-spacing ---------- */
.btn {
  display: inline-block; border: none; cursor: pointer; text-decoration: none;
  font-family: var(--font-main); font-weight: 900; font-size: 13px;
  text-transform: uppercase; letter-spacing: var(--ls-cta);
  border-radius: var(--radius-pill);
  transition: all .15s ease;
}
.btn-primary {
  background: var(--epam-black); color: var(--epam-white);
  padding: 16px 36px;
}
.btn-primary:hover { background: #000; }
/* на тёмной секции — прозрачная с градиентной обводкой, как ACCEPT ALL */
.dark-section .btn-primary {
  background: linear-gradient(var(--epam-black), var(--epam-black)) padding-box,
              var(--gradient) border-box;
  border: 1px solid transparent; color: var(--epam-white);
}
.dark-section .btn-primary:hover {
  background: linear-gradient(#000, #000) padding-box, var(--gradient) border-box;
}
.btn-secondary {
  background: transparent; color: var(--epam-ink);
  padding: 12px 28px; border: 1px solid var(--epam-ink);
}
.btn-secondary:hover { background: var(--epam-light-gray); }
.btn-secondary.on-dark { border-color: var(--epam-white); color: var(--epam-white); }
.btn-sm { padding: 9px 20px; font-size: 11px; letter-spacing: var(--ls-label); }
.btn-ghost {
  background: transparent; color: var(--epam-ink); padding: 0; border: none;
  font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: var(--ls-label);
}
.btn-ghost::after { content: ' →'; }

/* grade buttons */
.btn-grade { padding: 10px 24px; border: 1px solid var(--epam-line); background: transparent; color: var(--epam-ink); }
.btn-grade:hover { background: var(--epam-light-gray); }
.btn-grade.known { border-color: var(--epam-green); color: var(--epam-green); }
.btn-grade.review { border-color: var(--epam-violet); color: var(--epam-violet); }
.btn-grade.unknown { border-color: var(--epam-red); color: var(--epam-red); }

/* ---------- Cards: тонкая линия сверху, без теней и почти без скруглений ---------- */
.card {
  background: var(--epam-white);
  border: 1px solid var(--epam-line);
  border-top: 2px solid var(--epam-ink);
  border-radius: 0;
  padding: var(--sp-24);
}
.card + .card { margin-top: var(--sp-16); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-16); }
/* в гриде выравнивание задаёт gap, а не стопочный маргин */
.card-grid .card { margin-top: 0; }
.card-grid .card {
  display: flex; flex-direction: column;
  border: 1px solid var(--epam-line); border-top: none;
  /* градиентная линия сверху — фоном, чтобы не убивать остальные рамки border-image'ом */
  background-image: var(--gradient);
  background-size: 100% 2px; background-repeat: no-repeat; background-position: top left;
}
.card-grid .card:hover { background-color: var(--epam-light-gray); }
/* теги прижаты к низу — ровная нижняя кромка у всего ряда */
.card-grid .card .q-meta { margin-top: auto; margin-bottom: 0; padding-top: var(--sp-16); }

/* ---------- Tags ---------- */
.tag {
  display: inline-block; padding: 4px 14px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--epam-gray); border: 1px solid var(--epam-line); background: transparent;
  text-decoration: none;
}
.tag.active { background: var(--epam-black); color: var(--epam-cyan); border-color: var(--epam-black); }
.tag.epam { color: var(--epam-green); border-color: var(--epam-green); }
.tag.status-known { color: var(--epam-green); border-color: var(--epam-green); }
.tag.status-review { color: var(--epam-violet); border-color: var(--epam-violet); }
.tag.status-unknown { color: var(--epam-red); border-color: var(--epam-red); }
.tag.status-new { color: var(--epam-gray); }

/* ---------- Progress bars: градиент cyan→violet ---------- */
.progress-row { display: flex; align-items: center; gap: var(--sp-16); margin-bottom: var(--sp-16); }
.progress-row .label { width: 190px; font-weight: 600; font-size: 14px; letter-spacing: var(--ls-label); text-transform: uppercase; }
.progress-row .nums { width: 70px; text-align: right; color: var(--epam-gray); font-size: 14px; }
.bar { flex: 1; height: 4px; background: var(--epam-light-gray); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--gradient); }
.bar > i.green { background: var(--epam-green); }

/* ---------- Dark hero: чистый чёрный, градиентные цифры ---------- */
.dark-section {
  background: var(--epam-black); color: var(--epam-white);
  border-radius: 0; padding: var(--sp-64) var(--sp-48);
  margin: var(--sp-32) 0 var(--sp-48);
}
.dark-section h1 {
  font-weight: 300; font-size: 52px; line-height: 1.08; letter-spacing: 0.01em;
  margin-bottom: var(--sp-16);
}
.dark-section p { color: #b9b9b9; font-size: 18px; margin-bottom: var(--sp-32); max-width: 640px; }
.dark-section .stat-row { display: flex; gap: var(--sp-64); flex-wrap: wrap; margin-top: var(--sp-48); }
.stat { padding-top: var(--sp-16); border-top: 1px solid var(--epam-line-dark); min-width: 120px; }
.stat .num {
  font-weight: 200; font-size: 56px; line-height: 1;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.stat .cap { color: #8a8a8a; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-label); margin-top: var(--sp-8); }

/* ---------- Forms ---------- */
.auth-wrap { max-width: 460px; margin: var(--sp-80) auto; }
.field { margin-bottom: var(--sp-16); }
.field label { display: block; font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: var(--ls-label); margin-bottom: var(--sp-8); }
input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: 14px 16px; font-size: 16px; font-family: var(--font-main); font-weight: 300;
  border: 1px solid var(--epam-line); border-radius: 0;
  background: var(--epam-white); color: var(--epam-ink);
}
input { caret-color: var(--epam-cyan); }
input:focus { outline: none; border-color: var(--epam-ink); border-bottom: 2px solid var(--epam-cyan); }
.form-error { color: var(--epam-red); font-size: 14px; margin-bottom: var(--sp-16); }

/* ---------- Question / practice cards ---------- */
.q-title { font-weight: 600; font-size: 19px; line-height: 1.35; letter-spacing: 0.01em; }
.q-meta { display: flex; gap: var(--sp-8); flex-wrap: wrap; margin: var(--sp-8) 0 var(--sp-16); }
.answer { color: var(--epam-gray); font-size: 16px; white-space: pre-wrap; border-top: 1px solid var(--epam-line); padding-top: var(--sp-16); margin-top: var(--sp-8); }
.hidden { display: none !important; }
.grade-row { display: flex; gap: var(--sp-8); margin-top: var(--sp-16); flex-wrap: wrap; }

.filters { display: flex; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: var(--sp-24); align-items: center; }
.filters .sep { color: var(--epam-line); margin: 0 var(--sp-8); }

/* ---------- Practice mode ---------- */
.practice-card { max-width: 760px; margin: 0 auto; }
.practice-q { font-weight: 300; font-size: 30px; line-height: 1.25; margin-bottom: var(--sp-24); }
.practice-progress { color: var(--epam-gray); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: var(--ls-label); margin-bottom: var(--sp-16); }

/* ---------- Task page ---------- */
.timer {
  font-weight: 200; font-size: 44px; min-width: 130px; text-align: center; line-height: 1;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.timer.warn { background: none; color: var(--epam-red); }
.timer-row { display: flex; align-items: center; gap: var(--sp-24); flex-wrap: wrap; }
pre {
  background: var(--epam-black); color: #e8e8e8;
  border-radius: 0; padding: var(--sp-16); overflow-x: auto;
  font-size: 14px; line-height: 1.5; letter-spacing: 0;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.prose code, p code { background: var(--epam-light-gray); color: var(--epam-ink); padding: 1px 5px; }
pre code { background: none; color: inherit; padding: 0; }
.statement { white-space: pre-wrap; font-size: 17px; }
.solution-block { border-top: 1px solid var(--epam-line); margin-top: var(--sp-24); padding-top: var(--sp-24); }

/* ---------- Materials (vault) ---------- */
.folder-title { font-weight: 300; font-size: 24px; margin: var(--sp-48) 0 var(--sp-16); padding-top: var(--sp-16); border-top: 1px solid var(--epam-line); }
.note-list { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.note-list a { text-decoration: none; }
.note-list a:hover { background: var(--epam-black); color: var(--epam-cyan); border-color: var(--epam-black); }
.prose { max-width: 800px; font-size: 17px; }
.prose h1, .prose h2, .prose h3 { font-weight: 300; margin: var(--sp-32) 0 var(--sp-16); line-height: 1.2; }
.prose h1 { font-size: 36px; }
.prose h2 { font-size: 26px; padding-top: var(--sp-16); border-top: 1px solid var(--epam-line); }
.prose h3 { font-size: 20px; font-weight: 600; }
.prose p, .prose li { margin-bottom: var(--sp-8); }
.prose ul, .prose ol { padding-left: var(--sp-24); margin-bottom: var(--sp-16); }
.prose a { color: var(--epam-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--epam-cyan); text-decoration-thickness: 2px; }
.prose a:hover { color: var(--epam-violet); }
.prose blockquote { border-left: 2px solid; border-image: var(--gradient) 1; padding-left: var(--sp-16); color: var(--epam-gray); margin: var(--sp-16) 0; }
.prose table { border-collapse: collapse; margin: var(--sp-16) 0; width: 100%; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--epam-line); padding: 8px 12px; text-align: left; font-size: 15px; }
.prose th { background: var(--epam-light-gray); font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: var(--ls-label); }
.prose strong { font-weight: 700; }

/* ---------- Theory ---------- */
.theory-row { display: block; text-decoration: none; color: inherit; }
.theory-row:hover { background: var(--epam-light-gray); }
.theory-row > div { display: flex; gap: var(--sp-24); align-items: flex-start; }
.theory-num {
  font-weight: 200; font-size: 40px; line-height: 1; min-width: 64px;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theory-prose { margin-top: var(--sp-32); }
.theory-prose svg { max-width: 100%; height: auto; margin: var(--sp-16) 0; }

/* quiz */
.quiz-block { max-width: 800px; margin: var(--sp-64) 0; }
.quiz-options { display: flex; flex-direction: column; gap: var(--sp-8); }
.quiz-option {
  text-align: left; padding: 14px 18px; font-family: var(--font-main); font-weight: 400;
  font-size: 16px; letter-spacing: var(--ls-body); cursor: pointer;
  background: var(--epam-white); color: var(--epam-ink);
  border: 1px solid var(--epam-line); border-radius: 0;
  transition: background .12s ease;
}
.quiz-option:hover:not(:disabled) { background: var(--epam-light-gray); }
.quiz-option:disabled { cursor: default; opacity: .75; }
.quiz-option.correct { border-color: var(--epam-green); background: #f0faf6; opacity: 1; }
.quiz-option.wrong { border-color: var(--epam-red); background: #fdf1f2; opacity: 1; }
.quiz-explain { margin-top: var(--sp-16); font-size: 15px; padding: 12px 16px; }
.quiz-explain.ok { border-left: 2px solid var(--epam-green); color: var(--epam-ink); background: #f0faf6; }
.quiz-explain.bad { border-left: 2px solid var(--epam-red); color: var(--epam-ink); background: #fdf1f2; }

/* ---------- AI-тьютор ---------- */
.ai-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  background: var(--epam-black); color: var(--epam-cyan);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 14px 22px; cursor: pointer;
  font-family: var(--font-main); font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
  background-image: linear-gradient(var(--epam-black), var(--epam-black)), var(--gradient);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.ai-fab:hover { color: var(--epam-white); }
.ai-panel {
  position: fixed; right: 24px; bottom: 88px; z-index: 60;
  width: min(420px, calc(100vw - 32px)); height: min(560px, calc(100vh - 130px));
  background: var(--epam-white); border: 1px solid var(--epam-line);
  display: flex; flex-direction: column;
}
.ai-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 16px; background: var(--epam-black); color: var(--epam-white);
}
.ai-title { font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: var(--ls-label); }
.ai-ctx { color: var(--epam-cyan); font-size: 12px; margin-top: 2px; }
.ai-close { background: none; border: none; color: var(--epam-white); font-size: 22px; cursor: pointer; line-height: 1; }
.ai-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg {
  max-width: 92%; padding: 10px 14px; font-size: 14px; line-height: 1.5;
  letter-spacing: 0.01em; white-space: pre-wrap; word-wrap: break-word;
}
.ai-msg.user { align-self: flex-end; background: var(--epam-black); color: var(--epam-white); }
.ai-msg.model { align-self: flex-start; background: var(--epam-light-gray); color: var(--epam-ink); }
.ai-msg.err { color: var(--epam-red); }
.ai-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--epam-line); }
.ai-input textarea {
  flex: 1; resize: none; padding: 10px 12px; font-family: var(--font-main); font-size: 14px;
  border: 1px solid var(--epam-line); border-radius: 0; color: var(--epam-ink);
}
.ai-input textarea:focus { outline: none; border-color: var(--epam-ink); }
@media (max-width: 640px) {
  .ai-panel { right: 8px; bottom: 76px; width: calc(100vw - 16px); height: min(70vh, calc(100vh - 120px)); }
  .ai-fab { right: 16px; bottom: 16px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--epam-black); margin-top: var(--sp-80); }
.site-footer .container { padding-top: var(--sp-32); padding-bottom: var(--sp-32); }
.site-footer a, .site-footer span { color: #8a8a8a; font-size: 13px; text-decoration: none; }

@media (max-width: 640px) {
  .site-header .container { gap: var(--sp-8) var(--sp-16); min-height: 56px; }
  .brand { font-size: 18px; }
  .nav { gap: var(--sp-8) var(--sp-16); }
  .nav a { font-size: 11px; }
  h1.page-title { font-size: 32px; }
  .dark-section { padding: var(--sp-32) var(--sp-24); }
  .dark-section h1 { font-size: 34px; }
  .stat .num { font-size: 40px; }
  .dark-section .stat-row { gap: var(--sp-24); }
  .progress-row .label { width: 110px; font-size: 11px; }
  .practice-q { font-size: 24px; }
}

/* ============================================================
   ТЁМНАЯ ТЕМА В СТИЛЕ CLAUDE
   Тёплый графит + терракота, серифные заголовки.
   Блок переопределяет палитру EPAM-темы через те же переменные.
   ============================================================ */
:root {
  --epam-black: #1f1e1d;        /* хедер, код, тёмные секции */
  --epam-ink: #eceae4;          /* основной текст */
  --epam-white: #262624;        /* фон страницы */
  --epam-cyan: #d97757;         /* акцент → терракота Claude */
  --epam-violet: #e0a171;       /* второй конец градиента */
  --epam-gray: #b3aea2;         /* вторичный текст */
  --epam-light-gray: #30302e;   /* поверхности, ховеры */
  --epam-line: #3e3d39;         /* границы */
  --epam-line-dark: #3a3a37;
  --epam-green: #4caf82;
  --epam-red: #e5695f;
  --gradient: linear-gradient(90deg, #d97757, #e0a171);
  --font-serif: 'Georgia', 'Iowan Old Style', 'Times New Roman', serif;
  --ai-w: 420px;
}

::selection { background: #d97757; color: #fff; }
input { caret-color: #d97757; }

/* серифные заголовки — почерк Claude */
h1.page-title, .dark-section h1, .practice-q, .folder-title,
.prose h1, .prose h2, h2.section-title, .ai-msg.model, .quiz-explain {
  font-family: inherit;
}
h1.page-title, .dark-section h1, .prose h1, .practice-q, .folder-title, h2.section-title, .prose h2 {
  font-family: var(--font-serif); font-weight: 400; letter-spacing: 0;
}

/* кнопки: primary — терракота */
.btn-primary { background: #d97757; color: #fff; }
.btn-primary:hover { background: #c96442; }
.dark-section .btn-primary {
  background: #d97757; border: none; color: #fff;
}
.dark-section .btn-primary:hover { background: #c96442; }
.nav a.active { border-bottom-color: #d97757; }
.header-user a { color: #d97757; }
.tag.active { background: #393937; color: #d97757; border-color: #393937; }

/* карточки: мягче верхняя линия */
.card { border-top-color: var(--epam-line); background: var(--epam-light-gray); }
.card-grid .card { background-color: var(--epam-light-gray); }
.card-grid .card:hover { background-color: #393937; }
.theory-row:hover { background: #393937; }

/* квиз на тёмном */
.quiz-option { background: var(--epam-light-gray); }
.quiz-option:hover:not(:disabled) { background: #393937; }
.quiz-option.correct { background: rgba(76, 175, 130, 0.14); }
.quiz-option.wrong { background: rgba(229, 105, 95, 0.14); }
.quiz-explain.ok { background: rgba(76, 175, 130, 0.14); }
.quiz-explain.bad { background: rgba(229, 105, 95, 0.14); }

/* код */
pre { background: #1f1e1d; border: 1px solid var(--epam-line); color: #e8e6e0; }
.prose code, p code { background: #393937; color: var(--epam-ink); }
.prose th { background: var(--epam-light-gray); }
.prose a { color: #d97757; text-decoration-color: #d97757; }
.prose a:hover { color: #e0a171; }
.note-list a:hover { background: #393937; color: #d97757; border-color: #393937; }

/* формы */
input[type=text], input[type=email], input[type=password], .ai-input textarea {
  background: var(--epam-light-gray); color: var(--epam-ink); border-color: var(--epam-line);
}
input:focus { border-color: var(--epam-gray); border-bottom: 2px solid #d97757; }

/* ============================================================
   ЧАТ: открытый док справа
   ============================================================ */
.ai-panel {
  top: 0; right: 0; bottom: 0; height: 100vh; width: var(--ai-w);
  border: none; border-left: 1px solid var(--epam-line);
  background: #2b2a28; z-index: 55;
}
body.ai-open { padding-right: var(--ai-w); }
body.ai-open .ai-fab { display: none; }
.ai-head { background: #1f1e1d; padding: 16px; }
.ai-ctx { color: #d97757; }
.ai-fab {
  background: #d97757; color: #fff; background-image: none; border: none;
}
.ai-fab:hover { background: #c96442; }
.ai-msg { border-radius: 10px; }
.ai-msg.user { background: #393937; color: var(--epam-ink); }
.ai-msg.model { background: #30302e; color: var(--epam-ink); }
.ai-input { border-top-color: var(--epam-line); }
.ai-input textarea { border-radius: 8px; }

@media (max-width: 1100px) {
  body.ai-open { padding-right: 0; }
  .ai-panel { width: min(var(--ai-w), 100vw); }
  body.ai-open .ai-fab { display: block; }
}

/* фиксы форграундов: «белый текст на тёмном» после инверсии переменных */
.site-header, .brand, .nav a, .dark-section, .ai-head, .ai-close {
  color: #eceae4;
}
.btn-secondary.on-dark { border-color: #eceae4; color: #eceae4; }
.dark-section p { color: var(--epam-gray); }
.stat .cap { color: #8f8b81; }

/* ============================================================
   ТЕМА v2 — своя, «для глаз»: тёплый графит со сливовым подтоном,
   абрикосовый акцент, мягкие радиусы. Не клон Claude.
   ============================================================ */
:root {
  --epam-white: #232129;        /* фон */
  --epam-black: #1c1b21;        /* хедер, код, hero */
  --epam-light-gray: #2b2933;   /* поверхности */
  --epam-line: #3a3742;         /* границы */
  --epam-line-dark: #34313c;
  --epam-ink: #e4e1da;          /* текст */
  --epam-gray: #a39f99;         /* вторичный */
  --epam-cyan: #e0956b;         /* акцент: абрикос */
  --epam-violet: #e6bb8f;
  --gradient: linear-gradient(90deg, #e0956b, #e6bb8f);
  --epam-green: #5fb586;
  --epam-red: #e57373;
  --ai-w: 420px;
}
::selection { background: #e0956b; color: #1c1b21; }
input { caret-color: #e0956b; }
:focus-visible { outline-color: #e0956b; }

.btn-primary, .dark-section .btn-primary, .ai-fab { background: #e0956b; color: #1c1b21; }
.btn-primary:hover, .dark-section .btn-primary:hover, .ai-fab:hover { background: #d3814f; color: #1c1b21; }
.nav a.active { border-bottom-color: #e0956b; }
.header-user a, .ai-ctx { color: #e0956b; }
.tag.active { background: #3a3742; color: #e6bb8f; border-color: #3a3742; }
.prose a { color: #e0956b; text-decoration-color: #e0956b; }
.prose a:hover { color: #e6bb8f; }

/* мягкие радиусы */
.card, .card-grid .card { border-radius: 14px; overflow: hidden; }
.dark-section { border-radius: 18px; }
pre { border-radius: 12px; }
.quiz-option, .quiz-explain { border-radius: 10px; }
input[type=text], input[type=email], input[type=password] { border-radius: 10px; }
.prose table { border-radius: 10px; }

/* SVG-схемы как «бумажные» панели — читаемы на тёмном */
.theory-prose svg, .prose svg {
  background: #f2efe7; border-radius: 12px; padding: 10px;
  box-sizing: border-box;
}

/* чат */
.ai-panel { background: #26242c; }
.ai-msg.user { background: #3a3742; }
.ai-msg.model { background: #2b2933; white-space: normal; }
.ai-msg.model p { margin: 0 0 8px; }
.ai-msg.model p:last-child { margin-bottom: 0; }
.ai-msg.model ul, .ai-msg.model ol { margin: 4px 0 8px; padding-left: 20px; }
.ai-msg.model li { margin-bottom: 3px; }
.ai-msg.model code { background: #1c1b21; padding: 1px 6px; border-radius: 6px; font-size: 13px; }
.ai-msg.model pre { background: #1c1b21; padding: 10px; margin: 6px 0; font-size: 12.5px; }
.ai-msg.model pre code { background: none; padding: 0; }
.ai-msg.model b, .ai-msg.model strong { color: #f0ede6; }
.ai-msg.model h4 { font-size: 14px; margin: 10px 0 6px; color: #f0ede6; }

/* ручка ресайза панели */
.ai-resize {
  position: absolute; left: -3px; top: 0; bottom: 0; width: 8px;
  cursor: col-resize; z-index: 61;
}
.ai-resize:hover, .ai-resize.active { background: rgba(224, 149, 107, 0.35); }

/* ---------- Липкая шапка ---------- */
.site-header { position: sticky; top: 0; z-index: 50; }

/* ---------- Центрирование колонки при открытой панели ---------- */
body.ai-open main.container { max-width: 880px; }
.prose, .theory-prose { margin-left: auto; margin-right: auto; }
/* заголовок и мета на страницах читалки — по той же колонке, что и prose */

/* ================= МОБИЛЬНАЯ АДАПТАЦИЯ (аудит 375px) ================= */
.svg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
  /* шапка: одна строка бренд+юзер, нав — горизонтальная лента со скроллом */
  .site-header .container { flex-wrap: wrap; gap: 0 12px; min-height: 0; padding-top: 10px; padding-bottom: 0; }
  .brand { order: 1; font-size: 18px; }
  .header-user { order: 2; margin-left: auto; }
  .nav {
    order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 20px;
    padding: 10px 0 0;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; font-size: 12px; padding: 4px 0 10px; border-bottom-width: 2px; }

  /* контент шире: меньше боковых полей */
  .container { padding-left: 16px; padding-right: 16px; }
  .card { padding: 16px; }

  /* тап-таргеты ≥40px */
  .tag { padding: 8px 14px; font-size: 11px; }
  .btn-sm { padding: 12px 20px; }
  .btn-grade { padding: 12px 20px; min-height: 44px; }
  .quiz-option { padding: 14px 16px; min-height: 44px; }

  /* SVG-схемы: натуральная ширина + скролл */
  .svg-scroll { margin: 16px -16px; padding: 0 16px; }
  .svg-scroll svg { min-width: 620px; max-width: none; }

  /* панель ИИ: во весь экран, FAB не перекрывает ввод */
  body.ai-open .ai-fab { display: none; }
  .ai-fab { padding: 16px 22px; }
  .ai-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border: none; }
  .ai-input { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ai-input textarea { font-size: 16px; } /* iOS: <16px вызывает автозум при фокусе */
  body.ai-open { padding-right: 0; }

  /* прогресс-ряды дашборда: без тесноты */
  .progress-row { flex-wrap: wrap; gap: 8px 12px; }
  .progress-row .label { width: 100%; }
  .progress-row .bar { flex: 1 1 60%; }

  /* таймер задач */
  .timer { font-size: 36px; min-width: 100px; }
  .timer-row > span { font-size: 12px; }
}

/* ================= AI-чат: удобство (мобильный аудит v2) ================= */
.ai-head-actions { display: flex; align-items: center; gap: 4px; }
.ai-clear, .ai-close {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 10px; min-width: 44px; min-height: 44px;
}
.ai-clear { font-size: 17px; opacity: .7; }
.ai-clear:hover { opacity: 1; }

.ai-msg { font-size: 15px; line-height: 1.55; }
.ai-msg.model { max-width: 100%; }
/* markdown внутри ответа */
.ai-msg p { margin: 0 0 8px; } .ai-msg p:last-child { margin-bottom: 0; }
.ai-msg ul { margin: 4px 0 8px; padding-left: 20px; }
.ai-msg li { margin-bottom: 4px; }
.ai-msg h4 { margin: 10px 0 6px; font-size: 15px; font-weight: 700; }
.ai-msg pre { margin: 8px 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 13px; padding: 12px; }
.ai-msg code { font-size: 13px; word-break: break-word; }
.ai-msg pre code { word-break: normal; }

/* чипы быстрых промптов */
.ai-chips { display: flex; gap: 8px; padding: 0 12px 10px; flex-wrap: wrap; }
.ai-chip {
  border: 1px solid var(--epam-line); background: transparent; color: inherit;
  border-radius: var(--radius-pill); padding: 10px 16px; font-size: 13px;
  font-family: var(--font-main); cursor: pointer; min-height: 40px;
}
.ai-chip:hover { border-color: currentColor; }

/* поле ввода: авто-рост + круглая кнопка отправки */
.ai-input { align-items: flex-end; }
.ai-input textarea { max-height: 120px; border-radius: 12px; }
.ai-send {
  width: 46px; height: 46px; flex: 0 0 46px; border: none; border-radius: 50%;
  background: var(--epam-black); color: var(--epam-white); font-size: 20px; cursor: pointer;
}
.ai-send:disabled { opacity: .4; cursor: default; }

@media (max-width: 640px) {
  .ai-msg { font-size: 16px; }
  .ai-log { padding: 12px; }
}
/* кнопка отправки — в акценте текущей темы (в тёмной = терракота) */
.ai-send { background: var(--epam-cyan); color: #fff; }