/* Бумага и чернила: читаем текст лекций, а не рассматриваем интерфейс.
   Ни градиентов, ни скруглений, ни теней — рубленые линии и типографика. */
:root {
  --paper: #faf7f1;
  --paper-2: #f2ede3;
  --ink: #1b1813;
  --muted: #6d655a;
  --rule: #d8d0c0;
  --accent: #8c2f1c;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --paper:#13120f; --paper-2:#1b1915; --ink:#e9e3d6; --muted:#9a9184; --rule:#332f27; --accent:#d46a4f; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.65 var(--serif);
}
.wrap { max-width: 50rem; margin: 0 auto; padding: 0 16px; }

/* шапка — одна линия, без логотипа-кружочка */
header.top { border-bottom: 1px solid var(--rule); }
header.top .wrap { display: flex; align-items: baseline; gap: 20px; padding: 18px 16px; }
.brand { font-size: 20px; letter-spacing: .02em; font-weight: 600; text-decoration: none; color: var(--ink); }
.brand sup { font: 400 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-left: 6px; }
header.top nav { margin-left: auto; display: flex; gap: 18px; }
header.top nav a, .lnk {
  font: 400 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px;
}
header.top nav a:hover, .lnk:hover { color: var(--ink); border-bottom-color: var(--accent); }

h1 { font: 400 clamp(32px, 6vw, 52px)/1.1 var(--serif); margin: 48px 0 12px; letter-spacing: -.01em; }
h2 { font: 400 26px/1.2 var(--serif); margin: 44px 0 14px; }
h3 { font: 600 17px/1.3 var(--serif); margin: 0 0 6px; }
.lead { font-size: 20px; color: var(--muted); margin: 0 0 28px; max-width: 34em; }
p { margin: 0 0 14px; }
small, .small { font: 400 13px/1.5 var(--sans); color: var(--muted); }

/* нумерованные разделы как в конспекте */
.steps { counter-reset: s; border-top: 1px solid var(--rule); margin: 24px 0; }
.steps > div { counter-increment: s; border-bottom: 1px solid var(--rule); padding: 16px 0 16px 56px; position: relative; }
.steps > div::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 18px;
  font: 400 13px/1 var(--mono); color: var(--accent); letter-spacing: .08em;
}
.cols { display: grid; gap: 0 32px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); border-top: 1px solid var(--rule); }
.cols > div { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.cols p { margin: 0; color: var(--muted); font-size: 15px; }

/* кнопки — прямоугольные, с чернильной заливкой на hover */
.btn {
  display: inline-block; font: 400 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: 13px 22px; border: 1px solid var(--ink); color: var(--ink); background: none;
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.go { border-color: var(--accent); background: var(--accent); color: #fff; }
.btn.go:hover { background: #71240f; border-color: #71240f; }
.btn[disabled] { opacity: .4; cursor: default; }
.btn.small { padding: 8px 14px; font-size: 12px; }

/* таблица лекций */
table.list { width: 100%; border-collapse: collapse; margin: 18px 0 40px; }
table.list th {
  text-align: left; font: 400 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--ink); padding: 0 8px 8px 0;
}
table.list td { border-bottom: 1px solid var(--rule); padding: 12px 8px 12px 0; vertical-align: baseline; }
table.list td a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
table.list td a:hover { border-bottom-color: var(--accent); }
.when, .dur { font: 400 13px/1.4 var(--mono); color: var(--muted); white-space: nowrap; }
.state { font: 400 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.state.done { color: var(--accent); }

/* запись */
.rec { border: 1px solid var(--ink); padding: 20px; margin: 28px 0; background: var(--paper-2); }
.rec .time { font: 400 40px/1 var(--mono); letter-spacing: -.02em; }
.level { height: 2px; background: var(--rule); margin: 14px 0; }
.level i { display: block; height: 2px; background: var(--accent); width: 0; transition: width .1s linear; }

/* текст лекции */
.text { font-size: 18px; line-height: 1.75; }
.text p { margin: 0 0 1em; }
.text p.draft { color: var(--muted); }

/* уголок с ботом — сноска, а не баннер */
aside.corner {
  float: right; width: 15rem; margin: 6px 0 20px 28px; padding: 0 0 0 14px;
  border-left: 2px solid var(--accent); font: 400 14px/1.5 var(--sans); color: var(--muted);
}
aside.corner b { display: block; font: 600 14px/1.4 var(--sans); color: var(--ink); margin-bottom: 4px; }
aside.corner .btn { margin-top: 10px; }
@media (max-width: 42rem) { aside.corner { float: none; width: auto; margin: 20px 0; } }

.tariffs { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); border-top: 1px solid var(--ink); }
.tariffs > div { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: 16px; }
.tariffs .price { font: 400 24px/1 var(--mono); }
.tariffs .per { font: 400 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

footer.bot { border-top: 1px solid var(--rule); margin-top: 64px; padding: 24px 0 48px; }
footer.bot .wrap { display: flex; flex-wrap: wrap; gap: 18px; }
.note { border-left: 2px solid var(--rule); padding-left: 14px; color: var(--muted); font-size: 15px; }
.err { color: var(--accent); font: 400 14px/1.5 var(--sans); }

/* Внутри Telegram: своя шапка у приложения уже есть, наша — лишняя */
body.in-telegram header.top nav,
body.in-telegram footer.bot { display: none; }
body.in-telegram header.top .wrap { padding: 12px 16px; }

.lnk-inline { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.lnk-inline:hover { text-decoration-color: var(--accent); }
.legal-line { flex-basis: 100%; margin: 4px 0 0; }
input { font: 400 15px/1.2 var(--sans); padding: 8px 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
/* юридические страницы */
.doc { font-size: 16px; line-height: 1.6; }
.doc h2 { font-size: 21px; margin-top: 36px; }
.doc table.list td, .doc table.list th { font-size: 14px; }
.doc ol, .doc ul { padding-left: 1.2em; }