/* ============================================================
   Memorizun UI-kit — единый источник правды для UI.
   Токены (CSS-переменные) + компоненты (.ui-*). Тёмная тема — через токены.
   Подключать ПЕРЕД auth-styles.css. Новый UI пишем только из .ui-*.
   ============================================================ */

:root {
  /* Шрифты (GolosUI — реальное имя из @font-face, без пробела) */
  --ui-font: 'GolosUI', system-ui, -apple-system, sans-serif;
  --ui-font-mono: 'JetBrains Mono', 'Roboto Mono', monospace;
  /* Типографика: шкала размеров / весов / межстрочного */
  --ui-fs-xs: 12px; --ui-fs-sm: 13px; --ui-fs-md: 14px; --ui-fs-lg: 16px; --ui-fs-xl: 20px; --ui-fs-2xl: 24px;
  --ui-fw-regular: 400; --ui-fw-medium: 500; --ui-fw-semibold: 600; --ui-fw-bold: 700;
  --ui-lh-tight: 1.2; --ui-lh-normal: 1.5;

  /* Поверхности / текст */
  --ui-bg: #ffffff;
  --ui-surface: #f2f2ee;     /* тёплый фон карточек */
  --ui-surface-2: #ececec;   /* контейнер сегмента */
  --ui-elevated: #ffffff;    /* приподнятая поверхность (активная пилюля) */
  --ui-hover: #f5f5f5;
  --ui-text: #1a1a1a;
  --ui-text-muted: #777777;
  --ui-border: #e0e0e0;
  --ui-border-soft: #eeeeee;

  /* Акцент (монохром) */
  --ui-primary: #1a1a1a;
  --ui-on-primary: #ffffff;
  --ui-danger: #c0392b;

  /* Статусы (чипы) */
  --ui-chip-done-bg: #d8f5dd;   --ui-chip-done-fg: #1a7f37;
  --ui-chip-learn-bg: #fff3cd;  --ui-chip-learn-fg: #8a6d00;
  --ui-chip-idle-bg: #ececec;   --ui-chip-idle-fg: #777777;
  --ui-chip-over-bg: #fde2e1;   --ui-chip-over-fg: #c0392b;
  --ui-chip-strong-bg: #bbf7d0; --ui-chip-strong-fg: #15803d;

  /* Радиусы / тени */
  --ui-r-sm: 6px; --ui-r-md: 8px; --ui-r-lg: 12px; --ui-r-pill: 999px;
  --ui-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  --ui-shadow-pop: 0 8px 24px rgba(0, 0, 0, .12);

  /* Отступы (spacing scale) */
  --ui-sp-1: 4px; --ui-sp-2: 8px; --ui-sp-3: 12px; --ui-sp-4: 16px; --ui-sp-5: 20px; --ui-sp-6: 24px; --ui-sp-8: 32px;

  /* Слои (z-index) */
  --ui-z-overlay: 4000; --ui-z-modal: 4100; --ui-z-toast: 4200;

  /* Движение / фокус */
  --ui-transition: .15s ease;
  --ui-focus: #2563eb;
}

:root[data-theme-resolved="dark"] {
  --ui-bg: #111827;
  --ui-surface: #1f2937;
  --ui-surface-2: #374151;
  --ui-hover: #374151;
  --ui-text: #f9fafb;
  --ui-text-muted: #9ca3af;
  --ui-border: #374151;
  --ui-border-soft: #2d3748;
  --ui-elevated: #4b5563;    /* в тёмной — светлее контейнера → «приподнято» */
  --ui-primary: #f9fafb;
  --ui-on-primary: #111827;
  --ui-danger: #ef6b62;
  --ui-chip-idle-bg: #374151;   --ui-chip-idle-fg: #9ca3af;
  --ui-chip-strong-bg: #14532d; --ui-chip-strong-fg: #86efac;
  /* done/learn/overdue bg оставляем светлыми — читабельны на тёмном */
}

/* ── Кнопки ─────────────────────────────────────────────── */
.ui-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--ui-font); font-weight: 600; font-size: var(--ui-fs-md, 14px); line-height: 1.2;
  border-radius: var(--ui-r-md); padding: 8px 14px;
  border: 1px solid transparent; background: transparent; color: var(--ui-text);
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.ui-btn i { width: 16px; height: 16px; }
.ui-btn--primary { background: var(--ui-primary); color: var(--ui-on-primary); border-color: var(--ui-primary); }
.ui-btn--primary:hover { opacity: .9; }
.ui-btn--ghost { background: transparent; border-color: var(--ui-border); color: var(--ui-text); }
.ui-btn--ghost:hover { background: var(--ui-hover); }
.ui-btn--danger { color: var(--ui-danger); }
.ui-btn--primary.ui-btn--danger { background: var(--ui-danger); border-color: var(--ui-danger); color: #fff; }
.ui-btn--sm { padding: 4px 10px; font-size: var(--ui-fs-sm, 13px); }

.ui-link {
  border: 0; background: transparent; color: var(--ui-text-muted); cursor: pointer;
  font: inherit; font-size: var(--ui-fs-sm, 13px); text-decoration: underline; padding: 4px;
}

.ui-iconbtn {
  border: 0; background: transparent; cursor: pointer; color: var(--ui-text-muted);
  padding: 6px; line-height: 0; border-radius: var(--ui-r-md);
}
.ui-iconbtn:hover { background: var(--ui-surface-2); color: var(--ui-text); }
.ui-iconbtn i { width: 18px; height: 18px; }

/* ── Сегмент (как «Мои тексты / Библиотека») ────────────── */
.ui-segment { display: inline-flex; gap: 2px; background: var(--ui-surface-2); border-radius: 9px; padding: 2px; }
.ui-segment__btn {
  flex: 1; margin: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--ui-text-muted); font-family: var(--ui-font); font-size: var(--ui-fs-sm, 13px); font-weight: 600;
  line-height: 1.2; padding: 5px 8px; border-radius: 7px; transition: background .15s, color .15s; white-space: nowrap;
}
.ui-segment__btn.is-active, .ui-segment__btn.active { background: var(--ui-elevated); color: var(--ui-text); box-shadow: var(--ui-shadow); }

/* ── Пилюля-переключатель (язык кита: подложка → приподнятая плашка, как сегмент) ── */
.ui-pill {
  border: 0; background: var(--ui-surface-2); color: var(--ui-text-muted);
  border-radius: var(--ui-r-pill); padding: 5px 12px; font-size: var(--ui-fs-sm, 13px); font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
}
.ui-pill:hover { color: var(--ui-text); }
.ui-pill.is-active, .ui-pill.is-on { background: var(--ui-elevated); color: var(--ui-text); box-shadow: var(--ui-shadow); }

/* ── Поля ввода ─────────────────────────────────────────── */
.ui-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-size: var(--ui-fs-md, 14px); }
.ui-field > span { color: var(--ui-text-muted); }
.ui-input, .ui-select, .ui-textarea {
  padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: 9px;
  font-size: var(--ui-fs-md, 14px); font-family: var(--ui-font); background: var(--ui-bg); color: var(--ui-text);
  box-sizing: border-box;
}
.ui-textarea { min-height: 120px; resize: vertical; width: 100%; }
.ui-textarea--mono { font-family: var(--ui-font-mono); }

/* ── Чипы статусов ──────────────────────────────────────── */
.ui-chip { display: inline-block; padding: 2px 8px; border-radius: var(--ui-r-sm); font-size: var(--ui-fs-xs, 12px); font-weight: 600; }
.ui-chip--not-started { background: var(--ui-chip-idle-bg); color: var(--ui-chip-idle-fg); }
.ui-chip--learning { background: var(--ui-chip-learn-bg); color: var(--ui-chip-learn-fg); }
.ui-chip--done { background: var(--ui-chip-done-bg); color: var(--ui-chip-done-fg); }
.ui-chip--overdue { background: var(--ui-chip-over-bg); color: var(--ui-chip-over-fg); }
.ui-chip--reinforced { background: var(--ui-chip-strong-bg); color: var(--ui-chip-strong-fg); font-weight: 700; }

/* ── Прогресс-бар ───────────────────────────────────────── */
.ui-bar { height: 6px; border-radius: var(--ui-r-pill); background: var(--ui-surface-2); overflow: hidden; }
.ui-bar__fill { height: 100%; background: var(--ui-primary); }

/* ── Модалка ────────────────────────────────────────────── */
.ui-modal-backdrop { position: fixed; inset: 0; z-index: var(--ui-z-modal); background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ui-modal { background: var(--ui-bg); color: var(--ui-text); border-radius: 16px; padding: 20px; width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; }
.ui-modal--lg { max-width: 640px; }
.ui-modal--wide { max-width: 860px; }
.ui-modal__head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 17px; margin-bottom: 16px; }
.ui-modal__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.ui-modal__close { border: 0; background: transparent; cursor: pointer; color: var(--ui-text); padding: 6px; line-height: 0; }

/* ── Дропдаун (мультиселект) ────────────────────────────── */
.ui-dd { position: relative; }
.ui-dd__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--ui-border); border-radius: 9px;
  background: var(--ui-bg); color: var(--ui-text); font: inherit; font-size: var(--ui-fs-md, 14px); cursor: pointer; text-align: left;
}
.ui-dd__trigger i { width: 16px; height: 16px; opacity: .6; transition: transform .15s ease; flex: 0 0 auto; }
.ui-dd__trigger.is-open i { transform: rotate(180deg); }
.ui-dd__panel { margin-top: 4px; max-height: 220px; overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); padding: 4px; background: var(--ui-bg); }
.ui-dd__panel[hidden] { display: none; }
.ui-dd__opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: var(--ui-fs-md, 14px); }
.ui-dd__opt:hover { background: var(--ui-hover); }
.ui-dd__opt--all { font-weight: 600; }
.ui-dd__divider { height: 1px; background: var(--ui-border-soft); margin: 4px 6px; }

/* ── Тост ───────────────────────────────────────────────── */
.ui-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: var(--ui-z-toast);
  background: #222; color: #fff; padding: 10px 18px; border-radius: var(--ui-r-lg); font-size: var(--ui-fs-md, 14px);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.ui-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Типографика: текст-классы ──────────────────────────── */
.ui-h1 { font-family: var(--ui-font); font-size: var(--ui-fs-2xl); font-weight: var(--ui-fw-bold); line-height: var(--ui-lh-tight); }
.ui-h2 { font-family: var(--ui-font); font-size: var(--ui-fs-lg); font-weight: var(--ui-fw-semibold); }
.ui-body { font-family: var(--ui-font); font-size: var(--ui-fs-md); line-height: var(--ui-lh-normal); }
.ui-muted { color: var(--ui-text-muted); font-size: var(--ui-fs-sm); }
.ui-mono { font-family: var(--ui-font-mono); }

/* ── Фокус (a11y) + reduced-motion ──────────────────────── */
.ui-btn:focus-visible, .ui-segment__btn:focus-visible, .ui-pill:focus-visible,
.ui-input:focus-visible, .ui-select:focus-visible, .ui-textarea:focus-visible,
.ui-dd__trigger:focus-visible, .ui-iconbtn:focus-visible, .ui-modal__close:focus-visible, .ui-link:focus-visible {
  outline: 2px solid var(--ui-focus); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .ui-btn, .ui-segment__btn, .ui-dd__trigger i, .ui-toast { transition: none; }
}

/* ============================================================
   Landing pages (SEO) — моно-editorial (Бюро Горбунова).
   Самодостаточно: лендинг грузит ТОЛЬКО ui-kit.css (не style.css —
   там app-body c flex/padding под сайдбар). Классы .lp-*.
   Эталон: /ru/vyuchit-rol.html.
   ============================================================ */
@font-face { font-family: 'JetBrains Mono'; font-weight: 300; font-style: normal; src: url('/JetBrainsMono-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; src: url('/JetBrainsMono-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-style: normal; src: url('/JetBrainsMono-Bold.ttf') format('truetype'); font-display: swap; }

body.lp { --lp-ink:#14130f; --lp-muted:#76736b; --lp-faint:#a8a59c;
  --lp-paper:#f3f2ec; --lp-line:#d9d7cd; --lp-accent:#ff5816; --lp-card:#fbfbf7;
  margin: 0; background: var(--lp-paper); color: var(--lp-ink);
  font-family: var(--ui-font-mono); font-weight: 300; line-height: 1.65;
  -webkit-font-smoothing: antialiased; }
body.lp * { box-sizing: border-box; }
.lp-wrap { max-width: 660px; margin: 0 auto; padding: 56px 24px 96px; }

.lp-meta { font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lp-faint); display: flex; gap: 10px; align-items: center; margin: 0 0 40px; }
.lp-meta::after { content: ""; flex: 1; height: 1px; background: var(--lp-line); }
.lp-h1 { font-size: clamp(34px, 7vw, 56px); font-weight: 700; line-height: 1.04;
  letter-spacing: -.02em; margin: 0 0 22px; }
.lp-lead { font-size: clamp(17px, 2.6vw, 20px); font-weight: 300; line-height: 1.55;
  max-width: 30em; margin: 0 0 34px; }
.lp-lead b, .lp-p b { font-weight: 500; }

.lp-cta { display: inline-flex; align-items: baseline; gap: .5em; text-decoration: none;
  color: var(--lp-accent); font-weight: 500; font-size: 17px;
  border-bottom: 2px solid var(--lp-accent); padding-bottom: 3px; transition: gap .15s ease; }
.lp-cta:hover { gap: .9em; }
.lp-cta .arr { font-weight: 700; }

.lp-sec { margin-top: 72px; }
.lp-sec > h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 18px;
  display: flex; gap: 14px; align-items: baseline; }
.lp-sec > h2 .n { font-size: 13px; font-weight: 500; color: var(--lp-accent);
  letter-spacing: .1em; transform: translateY(-1px); }
.lp-p { font-size: 16px; font-weight: 300; max-width: 34em; margin: 0 0 16px; }

.lp-demo { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 14px;
  padding: 18px 20px; margin: 18px 0 8px; font-size: 15px; line-height: 1.85; }
.lp-demo .cue { color: var(--lp-faint); }
.lp-demo .me { color: var(--lp-ink); font-weight: 500; }
.lp-cap { font-size: 13px; color: var(--lp-muted); margin: 0; }

.lp-cards { display: grid; gap: 1px; background: var(--lp-line); border: 1px solid var(--lp-line);
  border-radius: 14px; overflow: hidden; margin: 4px 0 0; }
.lp-cards a { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--lp-card); padding: 16px 18px; text-decoration: none; color: var(--lp-ink);
  transition: background .12s ease; }
.lp-cards a:hover { background: #fff; }
.lp-cards b { font-weight: 500; }
.lp-cards .who { color: var(--lp-muted); font-size: 13px; }
.lp-cards .go { color: var(--lp-accent); font-weight: 700; }

.lp-steps { list-style: none; padding: 0; margin: 6px 0 0; border-top: 1px solid var(--lp-line); }
.lp-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--lp-line); font-size: 16px; font-weight: 300; }
.lp-steps .i { font-weight: 700; color: var(--lp-accent); font-size: 15px; }
.lp-steps b { font-weight: 500; }

.lp-q { margin-top: 26px; }
.lp-q h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.lp-q p { font-size: 15px; font-weight: 300; color: var(--lp-muted); margin: 0; max-width: 36em; }

.lp-foot { margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--lp-line); }
.lp-foot .more { font-size: 14px; color: var(--lp-muted); margin: 18px 0 0; }
.lp-foot .more a { color: var(--lp-ink); text-decoration: none; border-bottom: 1px solid var(--lp-line); }
.lp-foot .more a:hover { border-color: var(--lp-accent); }
.lp-foot .sep { color: var(--lp-faint); margin: 0 6px; }

/* анимированный мини-интерфейс «как это делается» (вместо гифки) */
.lp-howto { border: 1px solid var(--lp-line); border-radius: 14px; background: var(--lp-card);
  overflow: hidden; margin: 18px 0 8px; }
.lp-howto .stage { position: relative; height: 200px; }
.lp-howto .hs { position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 12px; padding: 18px;
  opacity: 0; transition: opacity .55s ease; pointer-events: none; }
.lp-howto[data-step="1"] .hs-1, .lp-howto[data-step="2"] .hs-2, .lp-howto[data-step="3"] .hs-3 { opacity: 1; }
.lp-howto .bar { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--lp-faint); }
.lp-howto .bar .scope { color: var(--lp-ink); font-weight: 500; padding: 4px 9px; border-radius: 8px; }
.lp-howto[data-step="1"] .bar .scope { animation: lp-pulse 1.7s ease infinite; }
@keyframes lp-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,88,22,0); } 50% { box-shadow: 0 0 0 4px rgba(255,88,22,.22); } }
.lp-howto .menu { border: 1px solid var(--lp-line); border-radius: 10px; background: #fff; padding: 4px;
  font-size: 13px; box-shadow: 0 10px 26px rgba(0,0,0,.10); }
.lp-howto .menu .mm { padding: 7px 14px; border-radius: 7px; color: var(--lp-ink); white-space: nowrap; }
.lp-howto .menu .mm.hot { color: var(--lp-accent); font-weight: 500; background: #fff4ef; }
.lp-howto .modal { width: 100%; max-width: 330px; border: 1px solid var(--lp-line); border-radius: 12px;
  background: #fff; font-size: 12.5px; overflow: hidden; }
.lp-howto .modal .head { display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid var(--lp-line); }
.lp-howto .modal .head b { font-weight: 700; }
.lp-howto .modal .head .done { color: var(--lp-accent); font-weight: 500; }
.lp-howto .modal .head span:first-child { color: var(--lp-faint); }
.lp-howto .row { display: flex; gap: 9px; align-items: center; padding: 6px 12px; color: var(--lp-faint); }
.lp-howto .row.on { color: var(--lp-ink); }
.lp-howto .cb { width: 13px; height: 13px; border: 1.5px solid #c8c6bd; border-radius: 3px; flex: none; }
.lp-howto .cb.ck { background: var(--lp-ink); border-color: var(--lp-ink); }
.lp-howto[data-step="2"] .row.on .cb.ck { animation: lp-pop .45s ease both; }
@keyframes lp-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.lp-howto .res { font-size: 14px; line-height: 1.95; }
.lp-howto .res .cue { color: var(--lp-faint); }
.lp-howto .res .me { color: var(--lp-ink); font-weight: 500; }
.lp-howto .legend { display: flex; border-top: 1px solid var(--lp-line); font-size: 12px; }
.lp-howto .legend .ix { flex: 1; padding: 10px 8px; color: var(--lp-faint); text-align: center;
  border-right: 1px solid var(--lp-line); transition: color .35s; }
.lp-howto .legend .ix:last-child { border-right: 0; }
.lp-howto[data-step="1"] .ix:nth-child(1), .lp-howto[data-step="2"] .ix:nth-child(2),
.lp-howto[data-step="3"] .ix:nth-child(3) { color: var(--lp-accent); font-weight: 500; }

@media (max-width: 560px) {
  .lp-wrap { padding: 40px 18px 72px; }
  .lp-sec { margin-top: 56px; }
  .lp-cards a { flex-wrap: wrap; }
}

/* галерея скриншотов приложения для лендингов */
.lp-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin: 16px 0 6px; }
.lp-shots figure { margin: 0; }
.lp-shots img { width: 100%; height: auto; display: block; border: 1px solid var(--lp-line);
  border-radius: 12px; background: #fff; }
.lp-shots figcaption { font-size: 12px; color: var(--lp-muted); margin-top: 7px; line-height: 1.4; }

/* простой список (советы и т.п.) для лендингов */
.lp-list { list-style: none; padding: 0; margin: 6px 0 0; border-top: 1px solid var(--lp-line); }
.lp-list li { padding: 11px 0; border-bottom: 1px solid var(--lp-line); font-size: 16px; font-weight: 300; }
.lp-list b { font-weight: 500; }

/* статистика (большие цифры) для лендингов */
.lp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 18px; }
.lp-stats .st { border: 1px solid var(--lp-line); border-radius: 12px; background: var(--lp-card); padding: 16px 18px; }
.lp-stats .num { font-size: 30px; font-weight: 700; color: var(--lp-accent); line-height: 1; }
.lp-stats .lbl { font-size: 13px; color: var(--lp-muted); margin-top: 8px; }

/* «книжный индекс» для каталогов: автор/группа → строки-ссылки (хайрлайны) */
.lp-index { margin-top: 30px; }
.lp-index > h2 { font-size: 17px; font-weight: 700; margin: 0; }
.lp-index > h2 a { color: var(--lp-ink); text-decoration: none; }
.lp-index > h2 a:hover { color: var(--lp-accent); }
.lp-index ul { list-style: none; padding: 0; margin: 8px 0 0; border-top: 1px solid var(--lp-line); }
.lp-index li { border-bottom: 1px solid var(--lp-line); }
.lp-index li a { display: block; padding: 11px 2px; color: var(--lp-ink); text-decoration: none;
  font-weight: 300; font-size: 15px; transition: color .12s ease, padding-left .12s ease; }
.lp-index li a:hover { color: var(--lp-accent); padding-left: 8px; }
.lp-index li .who { color: var(--lp-muted); }