/* 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; }

/* ---------- 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; }
}