/**
 * Оформление Майнскилл — слой дизайна.
 *
 * ВАЖНО для синхронизации: этот файл целиком принадлежит дизайн-задаче.
 * `styles.css` и `index.html` — ваши, я их больше не трогаю.
 *
 * Подключать ПОСЛЕ styles.css и ПЕРЕД themes.css:
 *   <link rel="stylesheet" href="styles.css">
 *   <link rel="stylesheet" href="design.css">
 *   <link rel="stylesheet" href="themes.css">
 *
 * Файл самодостаточный: переопределяет переменные и правила поверх базовых,
 * поэтому работает независимо от того, что лежит в styles.css.
 *
 * Чего менять НЕЛЬЗЯ (механика, а не композиция, portal-tz.md 10.5):
 *   — карта миров остаётся первым экраном;
 *   — в Портале порядок блоков: бюджет → экранные → неэкранные → косметика → цели;
 *   — «Твои 30 минут» набраны крупнее купленного времени;
 *   — баланс и прогресс одного визуального веса;
 *   — родитель не выставляет ставки вручную, только цели;
 *   — ставки применяются с понедельника и только по решению родителя;
 *   — школа в расписании показана, но не оплачивается;
 *   — первым входом к Профессору по новой теме идёт разбор.
 *
 * Размеры — design-system.md, разделы 2 и 3: дети 9–12 читают ещё плохо,
 * навык сканирования появляется к 13–14 годам, поэтому ничего мельче 16px
 * в основном тексте и одна главная кнопка на экран.
 */
/* Шрифты. Локальные файлы кладутся в fonts/ — Google Fonts из России
   открывается нестабильно. Пока их нет, работает системный запас. */
@font-face { font-family:'Nunito'; src:url('fonts/nunito-800.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('fonts/nunito-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Onest';  src:url('fonts/onest-400.woff2')  format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Onest';  src:url('fonts/onest-500.woff2')  format('woff2'); font-weight:500; font-display:swap; }

:root {
  /* Палитра снята пипеткой с логотипа. */
  --ink-900: #0A0300;
  --ink-800: #140600;
  --ink-700: #241000;
  --ink-600: #3A1C04;

  --amber-700: #8A4B0A;
  --amber-600: #B4630F;
  --amber-500: #E08A1E;
  --amber-400: #F5A623;
  --gold-300: #F1CE70;
  --gold-100: #FDF19A;

  --paper: #FFFBF4;
  --card-light: #FFFFFF;
  --border-light: #EADFCF;

  /* Роли. Внутри светлого контура переопределяются ниже. */
  --bg: var(--ink-900);
  --surface: var(--ink-800);
  --surface-2: var(--ink-700);
  --text: var(--gold-100);
  --text-dim: #B9946A;
  --line: var(--ink-700);
  --accent: var(--gold-300);
  --accent-dim: var(--amber-500);

  --emerald: #3FBF52;   /* только изумруды — единственный яркий зелёный */
  --danger: #E4572E;    /* «смотри сюда», не «ошибка». Чистый красный запрещён */
  --parent: #3A76C8;    /* только родительский контур */

  --radius: 18px;
  --radius-sm: 14px;
  --gap: 10px;
  --pad: 16px;

  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Светлый учебный контур. Включается классом на body при входе к Профессору:
   там читают длинный текст, а тёмный фон под него работает хуже. */
body.light {
  --bg: var(--paper);
  --surface: var(--card-light);
  --surface-2: #F4EADB;
  --text: #241000;
  --text-dim: #6B5443;
  --line: var(--border-light);
  --accent: var(--amber-600);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 84px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 250ms ease-in-out, color 250ms ease-in-out;
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: var(--pad);
}

h2 {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 22px var(--pad) 9px;
  color: #7A5A38;
  font-weight: 700;
}

body.light h2 { color: #A79683; }

.view { padding-bottom: 16px; }

/* --- шапка --------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--pad) var(--pad) 12px;
  flex-wrap: wrap;
}

.who {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.meters { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; justify-content: flex-end; }

/* Баланс и серия одного размера — прогресс не весит меньше валюты. */
.meter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px 5px 8px;
}

body.light .meter { background: var(--card-light); }

/* Значки перед числами: изумруд у баланса, тотем у серии. */
.meter::before {
  content: '';
  width: 15px;
  height: 15px;
  flex: none;
  background: center / contain no-repeat;
}

#m-balance::before {
  background-image: url('assets/picks/pick-emerald-128.png');
  border-radius: 3px;
}

#m-streak::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1CE70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 19.6 5.6v5.8c0 4.5-3.2 8.2-7.6 9.8-4.4-1.6-7.6-5.3-7.6-9.8V5.6Z'/%3E%3Cpath d='M12 9.1v5.4M9.3 11.8h5.4'/%3E%3C/svg%3E");
}

/* Колокольчик «Сегодня» — сводка дня. Приглушённый: это справка,
   а не действие, конкурировать с картой миров он не должен. */
.bell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 7px 13px 7px 10px;
  min-height: 36px;
  cursor: pointer;
}

.bell::before {
  content: '';
  width: 15px;
  height: 15px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9946A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 10a6 6 0 0 0-12 0v4.2L4.4 17h15.2L18 14.2z'/%3E%3Cpath d='M9.9 19.6a2.4 2.4 0 0 0 4.2 0'/%3E%3C/svg%3E");
}

.parent-entry {
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
}

.pending-note, .bag-note {
  margin: 0 var(--pad) 8px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* --- расписание дня ------------------------------------------------------ */
/* Школа показана наравне с занятиями, но приглушённо: ребёнок видит день
   целиком, а не огрызок из оплачиваемого. */

.today { margin-top: 4px; }
.today ul { list-style: none; margin: 0; padding: 0 var(--pad); display: grid; gap: 2px; }

.today-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.88rem;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.today-time {
  min-width: 88px;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.today-title { flex: 1; }

/* Школа и прочее: в дне есть, отмечать не нужно — поэтому без рамки и тише. */
.today-item.is-plain {
  background: none;
  border-color: transparent;
}

.today-item.is-plain .today-title,
.today-item.is-plain .today-time { color: var(--text-dim); font-weight: 400; }

/* --- миры ---------------------------------------------------------------- */

.worlds {
  display: grid;
  gap: var(--gap);
  padding: 0 var(--pad);
}

.world {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 2px 12px;
  text-align: left;
  background: linear-gradient(150deg, #1A0A02, var(--ink-800));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 13px 14px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  min-height: 72px;
  box-shadow: inset 0 1px 0 rgba(255, 214, 150, 0.05);
  transition: transform 100ms ease-out, background 100ms ease-out;
}

body.light .world { background: var(--card-light); }
.world:active { transform: scale(0.985); background: var(--surface-2); }

/* Иконка мира приходит из разметки <img class="world-icon">. */
.world-icon {
  grid-row: 1 / span 3;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  margin: 0;
}

.world-title {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--gold-100);
}

body.light .world-title { color: var(--text); }

.world-role {
  grid-column: 2;
  font-size: 0.69rem;
  color: var(--amber-400);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  margin-top: -3px;
}

.world-note {
  grid-column: 2;
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* --- цель дня ------------------------------------------------------------ */

.daily-goal {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 var(--pad) var(--gap);
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--text-dim);
}

.daily-goal .bar { flex-basis: 100%; }

/* --- ранг кирки ---------------------------------------------------------- */
/* Единственная видимая шкала уровня. XP числом не показывается нигде. */

.rank-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 var(--pad) 10px;
}

.rank-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 14px;
  flex: none;
}

.rank {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  margin: 0;
}

/* --- вход к Профессору --------------------------------------------------- */

.topic-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  margin: 0 var(--pad) 4px;
}

.entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: calc(100% - 32px);
  margin: var(--gap) var(--pad) 0;
  padding: 15px var(--pad);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  min-height: 56px;
}

/* Порядок входов меняется по состоянию темы, но главный всегда один. */
.entry:first-of-type {
  border: 2px solid var(--amber-500);
  box-shadow: 0 4px 14px rgba(224, 138, 30, 0.16);
}

.entry:active { background: var(--surface-2); }
.entry .card-note { width: auto; font-family: var(--font); font-weight: 400; }

/* --- карточки ------------------------------------------------------------ */

.cards { list-style: none; margin: 0; padding: 0 var(--pad); display: grid; gap: var(--gap); }

.card {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
}

.card-title {
  flex: 1;
  min-width: 140px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
}

/* Цена всегда с изумрудом. Рублей в детском контуре нет, но цены
   в изумрудах обязаны быть: без них у ребёнка нет выбора. */
.card-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.card-price::before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: center / contain no-repeat url('assets/picks/pick-emerald-128.png');
}

.card-status { color: var(--accent); font-size: 0.82rem; }
.card-note { width: 100%; font-size: 0.78rem; color: var(--text-dim); }

/* Цель-копилка: цена справа — это «сколько накоплено из нужного»,
   а не ценник. Поэтому изумруд перед числом здесь не нужен. */
.card.goal .card-price::before { content: none; }
.card.goal .card-price { color: var(--text-dim); font-weight: 700; }
.card.goal .bar { margin-top: 8px; }

/* --- кнопки -------------------------------------------------------------- */
/* Главная кнопка 56px, зона тапа больше кнопки: детской руке на телефоне
   нужно больше, чем минимальные 30px для планшета. */

.action {
  background: linear-gradient(180deg, var(--amber-400), var(--amber-500));
  color: #2B1400;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--amber-700);
  transition: transform 100ms ease-out;
}

.action:active { transform: translateY(2px); box-shadow: none; }
.action:disabled { opacity: 0.35; cursor: default; box-shadow: none; }

.action.ghost {
  background: none;
  box-shadow: none;
  border: 2px solid var(--line);
  color: var(--text-dim);
}

.primary {
  background: linear-gradient(180deg, var(--amber-400), var(--amber-500));
  color: #2B1400;
  border: 0;
  border-radius: 16px;
  padding: 16px;
  margin: 0 var(--pad) var(--gap);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  width: calc(100% - 32px);
  min-height: 56px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--amber-700);
  transition: transform 100ms ease-out;
}

.primary:active { transform: translateY(3px); box-shadow: none; }

/* --- Портал -------------------------------------------------------------- */

.screen-budget {
  margin: 0 var(--pad);
  padding: var(--pad);
  background: linear-gradient(160deg, #20100A, var(--ink-800));
  border: 1px solid #43230A;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 214, 150, 0.07);
}

body.light .screen-budget { background: var(--card-light); border-color: var(--line); box-shadow: none; }

/* «Твои 30 минут» крупнее купленного: база принадлежит ребёнку
   по умолчанию, её не надо зарабатывать. */
.budget-base {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--gold-100);
}

body.light .budget-base { color: var(--text); }

.budget-bought, .budget-left { margin: 2px 0; font-size: 0.82rem; color: var(--text-dim); }

/* Потолок объясняется сном, а не лимитом: «лимит исчерпан» звучит
   как «денег не хватило» и провоцирует зарабатывать больше. */
.budget-cap {
  margin: 11px 0 0;
  font-size: 0.82rem;
  color: var(--danger);
  background: rgba(228, 87, 46, 0.09);
  border: 1px solid rgba(228, 87, 46, 0.25);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
}

.bar {
  width: 100%;
  height: 10px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--amber-600), var(--amber-400));
  transition: width 300ms ease-out;
}

/* --- лента --------------------------------------------------------------- */

.feed { margin-top: 22px; }
.feed ul { list-style: none; margin: 0; padding: 0 var(--pad); display: grid; gap: 2px; }
.feed-item { font-size: 0.8rem; color: var(--text-dim); padding: 5px 0; }

.empty { color: var(--text-dim); padding: 0 var(--pad); font-size: 0.9rem; }

/* --- шторка колокольчика ------------------------------------------------- */

.sheet {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  z-index: 30;
}

.sheet-body {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  padding: 8px var(--pad) calc(24px + env(safe-area-inset-bottom));
  animation: sheet-up 250ms ease-out;
}

/* Ручка сверху: показывает, что это шторка, а не новый экран. */
.sheet-body::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  margin: 4px auto 14px;
}

.sheet-body h2 { margin: 0 0 12px; }
.sheet-body .action { width: 100%; margin-top: 6px; }

.bell-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; font-size: 0.9rem; }

@keyframes sheet-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet-body { animation: none; }
  * { transition: none !important; }
}

/* --- вкладки ------------------------------------------------------------- */

.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 5;
}

.tab {
  flex: 1;
  background: none;
  border: 0;
  color: #7A5A38;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  padding: 10px 4px 12px;
  min-height: 56px;
  cursor: pointer;
}

body.light .tab { color: #A79683; }

/* Неактивный — контур, активный — заливка: так же устроены системные табы
   iOS, плотный знак читается как выбранный даже боковым зрением. */
.tab::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto 4px;
  background: center / contain no-repeat;
}

.tab[data-view='worlds']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5A38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 20.6 7.6 12 12.4 3.4 7.6z'/%3E%3Cpath d='M3.4 7.6v8.8L12 21.2l8.6-4.8V7.6'/%3E%3Cpath d='M12 12.4v8.8'/%3E%3C/svg%3E");
}
.tab[data-view='professor']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5A38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 11.2a7.4 7.4 0 0 1 14.8 0'/%3E%3Cpath d='M2.8 11.2h18.4'/%3E%3Ccircle cx='12' cy='7.4' r='1.5'/%3E%3Ccircle cx='9.2' cy='15.4' r='2'/%3E%3Ccircle cx='14.8' cy='15.4' r='2'/%3E%3Cpath d='M11.2 15.4h1.6'/%3E%3C/svg%3E");
}
.tab[data-view='portal']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5A38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 20.8V11.6a7.6 7.6 0 0 1 15.2 0v9.2'/%3E%3Cpath d='M9.4 20.8v-9.2a2.6 2.6 0 0 1 5.2 0v9.2'/%3E%3Cpath d='M2.6 20.8h18.8'/%3E%3C/svg%3E");
}
.tab[data-view='progress']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5A38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 9.4Q12 3.2 20.4 9.4Q12 7.4 3.6 9.4Z'/%3E%3Cpath d='M4.2 9.3 3.4 12M19.8 9.3l.8 2.7'/%3E%3Cpath d='M12 8.2V21'/%3E%3C/svg%3E");
}

.tab.is-active { color: var(--amber-400); }

.tab.is-active[data-view='worlds']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5A623'%3E%3Cpath d='M12 2.4 20.9 7.4 12 12.4 3.1 7.4z' opacity='.95'/%3E%3Cpath d='M2.9 9.1v7.5L11 21.2v-7.6z' opacity='.55'/%3E%3Cpath d='M21.1 9.1v7.5L13 21.2v-7.6z' opacity='.8'/%3E%3C/svg%3E");
}
.tab.is-active[data-view='professor']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5A623'%3E%3Cpath fill-rule='evenodd' d='M12 3a8.4 8.4 0 0 0-8.4 8.4h16.8A8.4 8.4 0 0 0 12 3Zm0 3.1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3Crect x='2.4' y='11.9' width='19.2' height='1.9' rx='.95'/%3E%3Cpath fill-rule='evenodd' d='M9.2 12.9a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4Zm0 1.7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3Cpath fill-rule='evenodd' d='M14.8 12.9a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4Zm0 1.7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3C/svg%3E");
}
.tab.is-active[data-view='portal']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5A623'%3E%3Cpath fill-rule='evenodd' d='M12 3a8.6 8.6 0 0 0-8.6 8.6V21h5.2v-9.4a3.4 3.4 0 0 1 6.8 0V21h5.2v-9.4A8.6 8.6 0 0 0 12 3Z'/%3E%3Cpath d='M10.5 21v-9.4a1.5 1.5 0 0 1 3 0V21z' opacity='.45'/%3E%3C/svg%3E");
}
.tab.is-active[data-view='progress']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5A623'%3E%3Cpath d='M3.6 9.4Q12 3 20.4 9.4l.9 3-1.7-.6Q12 7.6 4.4 11.8l-1.7.6z'/%3E%3Crect x='10.9' y='8' width='2.2' height='13' rx='1.1' opacity='.85'/%3E%3C/svg%3E");
}

/* --- родительский раздел ------------------------------------------------- */
/* Холодный контур: тёплое — ребёнку, холодное — родителю.
   Контуры не спутать даже боковым зрением. */

.parent {
  position: fixed;
  inset: 0;
  background: #F6F9FD;
  color: #12243A;
  overflow-y: auto;
  z-index: 10;
  font-size: 15px;
}

.parent h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: #12243A;
}

.parent h2 { color: #7E93AC; }

.parent-top {
  justify-content: space-between;
  border-bottom: 1px solid #DFE9F5;
  background: #fff;
}

.parent-top strong { font-family: var(--font-display); font-size: 1.1rem; }
.parent-top button { background: none; border: 0; color: #7E93AC; font: inherit; cursor: pointer; padding: 8px; }

#pin {
  font-size: 1.4rem;
  padding: 14px;
  width: 170px;
  margin: 0 var(--pad);
  border-radius: 12px;
  border: 1px solid #CFE0F4;
  background: #fff;
  color: #12243A;
  letter-spacing: 6px;
}

#btn-pin {
  margin: var(--gap) var(--pad);
  padding: 15px 22px;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #4C8AD8, var(--parent));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 3px 0 #2A5895;
}

/* Групповое подтверждение. Обязательно: при восьми занятиях в неделю
   очередь набирает до сорока элементов, и без пакетной кнопки систему
   бросают в первый месяц. Поэтому кнопка стоит НАД списком и выделена. */
#btn-confirm-all {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #E8F1FC;
  border: 1px solid #CFE0F4;
  color: #12243A;
  box-shadow: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: var(--radius);
  padding: 15px;
  min-height: 56px;
}

#btn-confirm-all::before {
  content: '';
  width: 22px;
  height: 22px;
  flex: none;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A76C8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.8 9.6 17.4 19 6.9'/%3E%3C/svg%3E");
}

#btn-confirm-all:active { background: #D9E8FA; transform: none; }

.queue { list-style: none; margin: 0; padding: 0 var(--pad) 8px; display: grid; gap: var(--gap); }

.queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #DFE9F5;
  border-radius: var(--radius-sm);
  padding: 14px;
}

.queue-title { flex: 1; min-width: 140px; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }

/* Предложение по ставкам. Ставки не применяются молча: если вчера за гитару
   давали 10, а сегодня 8, ребёнок читает это как обман. Поэтому блок
   заметный, но не тревожный — это предложение, а не авария. */
.proposal {
  margin: var(--gap) var(--pad);
  padding: var(--pad);
  background: #FFF8EC;
  border: 1px solid #F0DCBB;
  border-left: 4px solid var(--amber-500);
  border-radius: var(--radius-sm);
  color: #3A2A14;
}

.proposal h2 {
  margin: 0 0 8px;
  color: #8A6A45;
}

.proposal p { margin: 0 0 8px; font-size: 0.9rem; }
.proposal .action { margin-top: 6px; }
.warn { color: var(--danger); }

.hint { margin: 0 var(--pad) var(--gap); font-size: 0.85rem; color: #5E7593; }

/* Форма целей: родитель задаёт цель, ставки система выводит сама. */
.goals-form {
  display: grid;
  gap: var(--gap);
  margin: 0 var(--pad) var(--gap);
}

.goals-form label {
  display: grid;
  gap: 5px;
  font-size: 0.82rem;
  color: #5E7593;
  font-family: var(--font-display);
  font-weight: 700;
}

.goals-form input {
  padding: 13px;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid #CFE0F4;
  background: #fff;
  color: #12243A;
  font: inherit;
  font-size: 1rem;
}

.goals-form input:focus {
  outline: 2px solid var(--parent);
  outline-offset: 1px;
  border-color: var(--parent);
}

.goals-form .primary { width: 100%; margin: 4px 0 0; }

/* Кнопки внутри родительского контура — холодные. */
.parent .action,
.parent .primary {
  background: linear-gradient(180deg, #4C8AD8, var(--parent));
  color: #fff;
  box-shadow: 0 2px 0 #2A5895;
}

.parent .action.ghost {
  background: none;
  box-shadow: none;
  border: 2px solid #D6E4F5;
  color: var(--parent);
}

.parent .empty { color: #5E7593; }
.error { color: var(--danger); padding: 0 var(--pad); }

/* --- служебное ----------------------------------------------------------- */

.toast {
  position: fixed;
  left: var(--pad); right: var(--pad); bottom: 84px;
  background: var(--surface-2);
  color: var(--text);
  padding: 15px var(--pad);
  border-radius: var(--radius);
  z-index: 20;
  font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.boot { padding: 40px var(--pad); color: var(--text-dim); }

/* =========================================================================
   ЗАДАНИЕ 2 — расписание, цели, сводка дня
   ========================================================================= */

/* --- блок «Сегодня»: школа отличается формой, а не только цветом ---------
   Приглушить цветом мало: разница читается как «выключено» или как ошибка.
   Поэтому оплачиваемое событие получает янтарную метку слева и карточку,
   а школа остаётся строкой без карточки — она в дне есть, но её не отмечают. */

.today-item {
  position: relative;
  padding-left: 26px;
}

/* Метка-точка у оплачиваемых: тот же янтарь, что у изумрудов на карточках. */
.today-item::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--amber-500);
}

/* Школа и прочее: вместо метки — тонкая вертикальная черта, карточки нет.
   Событие видно, но оно явно другой природы. */
.today-item.is-plain::before {
  left: 13px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  height: auto;
  margin: 0;
  border-radius: 999px;
  transform: none;
  background: var(--ink-600);
}

body.light .today-item.is-plain::before { background: var(--border-light); }

/* Уже отмеченное: метка гаснет, текст тише — но строка не исчезает. */
.today-item.is-done::before { background: var(--ink-600); }
.today-item.is-done .today-title { color: var(--text-dim); text-decoration: line-through; }

/* --- экран целей родителя ------------------------------------------------
   Главное правило этого экрана: родитель задаёт цели, ставки система выводит
   сама. Поэтому форма подаётся не как набор полей, а как причина и следствие:
   сверху «что вы задаёте», снизу «что из этого получится». */

.goals-form {
  background: #fff;
  border: 1px solid #DFE9F5;
  border-radius: var(--radius);
  padding: var(--pad);
  margin: 0 var(--pad) var(--gap);
  gap: 14px;
}

/* Подпись над формой объясняет связь до того, как родитель тронет поля. */
.goals-form::before {
  content: 'Вы задаёте цели — ставки за уроки, занятия и дела система посчитает сама';
  display: block;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #5E7593;
  padding-bottom: 12px;
  border-bottom: 1px solid #EEF4FB;
}

/* Поля с единицами измерения: цифра — не абстракция, а минуты и изумруды. */
.goals-form label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  font-size: 0.86rem;
  color: #2A4B71;
  font-family: var(--font-display);
  font-weight: 700;
}

.goals-form input {
  grid-column: 2;
  grid-row: 1;
  width: 104px;
  padding: 12px;
  min-height: 48px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-radius: 12px;
  border: 1px solid #CFE0F4;
  background: #F8FBFF;
  color: #12243A;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
}

.goals-form input:focus {
  outline: 2px solid var(--parent);
  outline-offset: 1px;
  border-color: var(--parent);
  background: #fff;
}

.goals-form .primary { width: 100%; margin: 2px 0 0; }

/* Сноска под формой: что именно посчитается. Держит обещание из заголовка. */
.goals-form::after {
  content: 'Пересчёт покажет новые ставки и спросит подтверждение. Вступят в силу с понедельника.';
  display: block;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #7E93AC;
}

/* --- предложение по пересчёту -------------------------------------------
   Три вещи должны читаться сразу: что изменилось, какие ставки предлагаются
   и что вступит в силу с понедельника. Последнее — принципиально: ставки
   никогда не меняются посреди недели, иначе ребёнок видит, что цена его
   усилия поехала без причины. */

.proposal {
  position: relative;
  padding-top: 42px;
}

/* Ярлык «с понедельника» — первое, что видит глаз. */
.proposal::before {
  content: 'Вступит в силу с понедельника';
  position: absolute;
  top: 14px;
  left: var(--pad);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8A6A45;
  background: #FFF0D6;
  border: 1px solid #F0DCBB;
  border-radius: 999px;
  padding: 5px 12px;
}

/* Строка ставки: было → стало. Числа моноширинные, чтобы колонка не плясала. */
.proposal .rate {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #F2E4CC;
  font-size: 0.9rem;
}

.proposal .rate:last-of-type { border-bottom: 0; }
.proposal .rate .n { flex: 1; }

.proposal .rate .was {
  color: #A08A6A;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.proposal .rate .now {
  font-family: var(--font-display);
  font-weight: 800;
  color: #8A4B0A;
  font-variant-numeric: tabular-nums;
}

.proposal .actions { display: flex; gap: 8px; margin-top: 12px; }
.proposal .actions .action { flex: 1; }

/* Предупреждение о несходящейся экономике: заметное, но не аварийное —
   это подсказка, а не ошибка. Поэтому терракота на светлом, без красного. */
.proposal.is-warning {
  background: #FFF3EE;
  border-color: #F3C9B8;
  border-left-color: var(--danger);
}

.proposal.is-warning::before {
  content: 'Экономика не сходится';
  color: #A33B1C;
  background: #FFE3D8;
  border-color: #F3C9B8;
}

/* --- редактор расписания -------------------------------------------------
   Вместо цепочки prompt() — обычная форма. Дни недели переключателями:
   родитель отмечает их пальцем, а не вводит текстом. */

.sched-form {
  display: grid;
  gap: 12px;
  background: #fff;
  border: 1px solid #DFE9F5;
  border-radius: var(--radius);
  padding: var(--pad);
  margin: 0 var(--pad) var(--gap);
}

.sched-form label {
  display: grid;
  gap: 5px;
  font-size: 0.82rem;
  color: #5E7593;
  font-family: var(--font-display);
  font-weight: 700;
}

.sched-form input[type='text'],
.sched-form input[type='time'],
.sched-form select {
  padding: 12px;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid #CFE0F4;
  background: #F8FBFF;
  color: #12243A;
  font: inherit;
  font-size: 1rem;
}

.sched-form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Дни недели: семь кнопок-переключателей. */
.days { display: flex; gap: 6px; }

.days input { position: absolute; opacity: 0; pointer-events: none; }

.days label {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid #CFE0F4;
  background: #F8FBFF;
  color: #5E7593;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  user-select: none;
}

.days input:checked + label,
.days label.is-on {
  background: var(--parent);
  border-color: var(--parent);
  color: #fff;
}

/* Строка события в списке расписания. */
.sched-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  background: #fff;
  border: 1px solid #DFE9F5;
  border-radius: var(--radius-sm);
  padding: 13px 14px;
}

.sched-item .st { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.sched-item .sm { grid-column: 1; font-size: 0.8rem; color: #5E7593; font-variant-numeric: tabular-nums; }
.sched-item .sx { grid-row: 1 / span 2; align-self: center; }

/* Школа в списке родителя тоже помечена: показываем, но не оплачиваем. */
.sched-item .tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5E7593;
  background: #EEF4FB;
  border-radius: 999px;
  padding: 3px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

.sched-item .tag.is-free { color: #8A6A45; background: #FFF0D6; }

/* --- три входа к Профессору ----------------------------------------------
   Порядок первых двух меняется по состоянию темы. Ребёнок заранее не знает,
   понял он тему или нет, и если войдёт в задачи по непонятому — упрётся
   на первой же задаче. Поэтому первый вход визуально сильнее второго. */

.entry .ei {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #FDF3E4;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--amber-600);
}

.entry:first-of-type .ei { background: var(--amber-500); color: #fff; }

/* --- дневная цель: выбор ребёнка ----------------------------------------
   Ставит цель ребёнок, не родитель. Поэтому это вопрос с вариантами,
   а не назначенное число. */

.goal-ask { font-size: 0.95rem; color: var(--text); font-family: var(--font-display); font-weight: 700; }

.goal-options { display: flex; gap: 8px; flex-basis: 100%; margin-top: 4px; }

.goal-options .action {
  flex: 1;
  background: none;
  border: 2px solid var(--ink-600);
  color: var(--gold-300);
  box-shadow: none;
  font-size: 1rem;
}

.goal-options .action.is-on,
.goal-options .action:active {
  background: linear-gradient(180deg, var(--amber-400), var(--amber-500));
  border-color: transparent;
  color: #2B1400;
}

/* --- тотем на экране прогресса ------------------------------------------
   Тон ровный: тотем сработал — это рутина, а не потеря. Никакой драмы. */

.totems { display: flex; gap: 8px; margin: 0 var(--pad) var(--gap); }

.totem {
  flex: 1;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.totem::before {
  content: '';
  width: 26px;
  height: 26px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 19.6 5.6v5.8c0 4.5-3.2 8.2-7.6 9.8-4.4-1.6-7.6-5.3-7.6-9.8V5.6Z'/%3E%3Cpath d='M12 9.1v5.4M9.3 11.8h5.4'/%3E%3C/svg%3E");
}

.totem b { font-family: var(--font-display); font-size: 0.88rem; color: var(--text); }

.totem.is-spent::before { opacity: 0.4; }
.totem.is-empty::before { opacity: 0.18; }

/* --- выбор темы после покупки -------------------------------------------
   Купленное не запирается: переключаться между своими темами можно
   свободно и бесплатно. */

.theme-picker { display: flex; gap: 10px; padding: 0 var(--pad); flex-wrap: wrap; }

.theme-chip {
  width: 74px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
}

.theme-chip .sw { height: 44px; display: block; }
.theme-chip .nm {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--text-dim);
  padding: 6px 4px;
}

.theme-chip.is-on { border-color: var(--amber-500); }
.theme-chip.is-on .nm { color: var(--accent); }

/* Некупленная тема: не замок, а цена. Замков в продукте нет. */
.theme-chip.is-locked .sw { opacity: 0.45; }
.theme-chip.is-locked .nm::after {
  content: ' · 60';
  color: var(--amber-400);
}

/* --- лицо Профессора -----------------------------------------------------
   Класс завела логика (.prof-face). Состояния: hello · think · hint · cheer.
   Минимум 72px — мельче теряются очки и фонарь, лицо перестаёт читаться. */

.prof-face {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 22px;
  margin: 0 var(--pad) 10px;
  background: var(--ink-900);
}

body.light .prof-face { background: #F4EADB; }

/* В ленте диалога он же маленьким, рядом с репликой. */
.msg .prof-face,
.prof-face.is-inline {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  margin: 0;
  flex: none;
}

/* --- пустые состояния ----------------------------------------------------
   Пустое состояние не место для подбадривания (app-copy.md, раздел 9).
   День закончился — это нормально, а не повод предлагать «сделать ещё».
   Поэтому: короткая строка, приглушённый знак, никаких кнопок и восклицаний.

   Знак нужен, чтобы пустота читалась как состояние, а не как сбой загрузки:
   голая строка на тёмном фоне выглядит так, будто что-то не догрузилось. */

.empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 36px var(--pad) 30px;
  margin: 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.45;
}

.empty::before {
  content: '';
  width: 40px;
  height: 40px;
  opacity: 0.42;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9946A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.8 9.6 17.4 19 6.9'/%3E%3C/svg%3E");
}

/* Пустое внутри списка карточек: там уже есть отступы, знак не нужен —
   иначе галочка повторяется на каждом блоке подряд. */
.cards .empty,
li.empty {
  padding: 22px var(--pad);
  font-size: 0.88rem;
}

.cards .empty::before,
li.empty::before { content: none; }

/* Расписание на сегодня пусто — выходной или каникулы. Тон нейтральный. */
#today .empty { padding: 20px var(--pad); }
#today .empty::before { content: none; }

/* Профессор ещё не подключён — это не пустота, а ожидание.
   Поэтому не галочка, а его собственное лицо в режиме «думает». */
#professor-body .empty::before {
  width: 72px;
  height: 72px;
  opacity: 1;
  border-radius: 18px;
  background-image: url('assets/prof/prof-think-128.png');
  background-size: cover;
}

/* Родительский контур: свой цвет и своя галочка. */
.parent .empty { color: #5E7593; }

.parent .empty::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A76C8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.8 9.6 17.4 19 6.9'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* «Всё подтверждено» — единственное пустое состояние, которое приятно
   видеть: очередь разобрана. Чуть плотнее остальных, но без праздника. */
#queue-empty {
  background: #fff;
  border: 1px solid #DFE9F5;
  border-radius: var(--radius);
  margin: 0 var(--pad);
  padding: 28px var(--pad);
}

/* --- первый запуск -------------------------------------------------------
   Один шаг — один экран. Классы завела логика (.onboarding, .ob-*).
   Здесь Профессор говорит первым и один: интерфейс на этом экране молчит,
   потому что знакомство идёт с наставником, а не с приложением. */

.onboarding {
  min-height: 100vh;
  min-height: 100dvh;
  gap: 18px;
  padding: 40px var(--pad) calc(32px + env(safe-area-inset-bottom));
}

.ob-face {
  width: 132px;
  height: 132px;
  border-radius: 30px;
  background: var(--ink-800);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.ob-text {
  max-width: 30ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.4;
  color: var(--gold-100);
}

/* Пояснение под вопросом — обычным начертанием и тише. */
.ob-text + .ob-text,
.ob-text.is-note {
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text-dim);
  margin-top: -6px;
}

.ob-field {
  min-height: 56px;
  border-radius: 16px;
  border: 2px solid var(--ink-600);
  background: var(--ink-800);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}

.ob-field::placeholder { color: #6B4A22; font-weight: 400; }

.ob-field:focus {
  outline: none;
  border-color: var(--amber-500);
  background: var(--ink-700);
}

.ob-input { width: 100%; max-width: 340px; }
.onboarding .primary { width: 100%; max-width: 340px; }

/* Пропустить — текстом, без рамки: это выход, а не второе действие. */
.onboarding .action.ghost {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.9rem;
}

/* --- разметка внутри реплик Профессора -----------------------------------
   Профессор отвечает в Markdown. Оформляем минимум: жирный, курсив, списки,
   код. Формул в LaTeX быть не должно — для одиннадцатилетнего `\frac{1}{4}`
   выглядит как поломка, а `1/4` — как в его тетради. Вопрос в ВОПРОСЫ.md.

   Классы разметки задаст логика; здесь стили по тегам внутри пузыря. */

.bub p,
.msg p { margin: 0 0 8px; }
.bub p:last-child,
.msg p:last-child { margin-bottom: 0; }

.bub strong,
.msg strong { font-family: var(--font-display); font-weight: 800; }

.bub em,
.msg em { font-style: normal; color: var(--amber-600); font-weight: 500; }

.bub ul, .bub ol,
.msg ul, .msg ol { margin: 6px 0 8px; padding-left: 20px; display: grid; gap: 4px; }

.bub li,
.msg li { line-height: 1.45; }

/* Число или короткое выражение внутри объяснения: 1/4, 2², 15 %.
   Моноширинный только для цифр — чтобы не выглядело как код в редакторе. */
.bub code,
.msg code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02em;
  font-variant-numeric: tabular-nums;
  background: #FDF3E4;
  color: var(--amber-700);
  border-radius: 6px;
  padding: 1px 6px;
}

/* Ответ, который надо запомнить — Профессор выделяет его отдельной строкой. */
.bub .answer,
.msg .answer {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15em;
  color: var(--correct);
  background: #F1F9F2;
  border: 1px solid #CFE8D4;
  border-radius: 12px;
  padding: 6px 12px;
}

/* ==========================================================================
   ШИРОКИЙ ЭКРАН — от 900 px
   ==========================================================================
   Приложение рисовалось под телефон, и на мониторе это видно: карточки
   миров сплющиваются в тонкую ленту, строка текста едет через весь экран,
   вкладки прижаты к нижнему краю монитора, а половина окна пустая.

   Ниже не «растянутая» версия, а другая раскладка из тех же блоков:
   вкладки уходят в боковую колонку, содержимое встаёт в две колонки,
   лента событий занимает правый край, карточки миров становятся плитками.
   Разметка не меняется — только оформление.
   ========================================================================== */

@media (min-width: 900px) {

  body {
    font-size: 17px;
    padding: 0 0 0 236px;      /* место под боковую колонку */
  }

  /* --- боковая колонка вместо нижних вкладок --- */

  .tabs {
    top: 0; bottom: 0; right: auto;
    width: 236px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    border-top: 0;
    border-right: 1px solid var(--line);
    padding: 84px 14px 20px;
    background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  }

  body.light .tabs { background: var(--paper); }

  /* Логотип в шапке колонки: на телефоне для него нет места,
     на мониторе пустой угол выглядит как недоделка. */
  .tabs::before {
    content: 'Майнскилл';
    position: absolute;
    top: 26px; left: 20px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--gold-300);
  }

  .tab {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    font-size: 0.95rem;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 12px;
    transition: background 120ms ease-out, color 120ms ease-out;
  }

  .tab::before { margin: 0; width: 22px; height: 22px; }

  .tab:hover { background: rgba(255, 214, 150, 0.06); color: var(--gold-300); }
  .tab.is-active { background: rgba(224, 138, 30, 0.14); }
  body.light .tab:hover { background: rgba(0, 0, 0, 0.04); }
  body.light .tab.is-active { background: rgba(224, 138, 30, 0.12); }

  /* --- рабочая область --- */

  .view, .parent > section, .onboarding {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
  }

  h1 { font-size: 1.9rem; }
  h2 { font-size: 0.76rem; margin-top: 30px; }

  /* --- главный экран в две колонки ---
     Лента «Последнее» уходит вправо и держится при прокрутке: на телефоне
     она внизу, потому что там всё внизу, а на мониторе нижний край экрана —
     это место, куда не смотрят. */

  #view-worlds {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 30px;
    align-content: start;
  }

  #view-worlds > .topbar { grid-column: 1 / -1; }
  /* span, а не «до конца»: отрицательный номер линии считается по явной
     сетке, а строк здесь столько, сколько наберётся блоков. */
  #view-worlds > .feed   { grid-column: 2; grid-row: 2 / span 12; margin-top: 0; }
  #view-worlds > :not(.topbar):not(.feed) { grid-column: 1; }

  .feed {
    position: sticky;
    top: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 4px 6px 14px;
    align-self: start;
  }

  body.light .feed { background: var(--card-light); }
  .feed h2 { margin-top: 16px; }
  .feed ul { gap: 0; }
  .feed-item {
    font-size: 0.86rem;
    padding: 9px var(--pad);
    border-radius: 10px;
  }
  .feed-item:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
  body.light .feed-item:nth-child(odd) { background: rgba(0, 0, 0, 0.02); }

  /* --- шапка --- */

  .topbar { padding-top: 26px; gap: 14px; }
  .who { font-size: 1.75rem; }
  .meter { font-size: 0.95rem; padding: 8px 16px 8px 11px; }
  .meter::before { width: 19px; height: 19px; }

  /* --- миры плитками ---
     Пять карточек в ряд на мониторе превращаются в полоски шириной с
     подпись. Плитка с крупной иконкой читается с расстояния и видна
     целиком, не требуя чтения. */

  .worlds {
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 16px;
  }

  .world {
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
    gap: 0;
    padding: 20px 20px 22px;
    border-radius: 24px;
    min-height: 196px;
  }

  .world-icon {
    grid-row: auto;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    margin-bottom: 14px;
  }

  .world-title, .world-role, .world-note { grid-column: 1; }
  .world-title { font-size: 1.22rem; }
  .world-role  { font-size: 0.76rem; margin-top: 0; }
  .world-note  { font-size: 0.88rem; margin-top: 8px; }

  /* На мониторе есть курсор — карточка должна отзываться до нажатия,
     иначе непонятно, что по ней вообще можно кликать. */
  .world:hover {
    transform: translateY(-2px);
    border-color: var(--amber-700);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  }
  .world:active { transform: translateY(0) scale(0.995); }
  body.light .world:hover { box-shadow: 0 10px 24px rgba(90, 60, 20, 0.12); }

  /* --- цель дня и расписание --- */

  .daily-goal { font-size: 0.98rem; padding: 18px 20px; border-radius: 18px; }
  .today-item { padding: 14px 16px; }
  .today-title { font-size: 1rem; }

  /* --- карточки наград, дел и очереди --- */

  .cards, .queue { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .card:hover { border-color: var(--amber-700); }

  /* --- родительский раздел --- */

  .goals-form { grid-template-columns: repeat(3, 1fr); align-items: end; }
  .goals-form .primary { grid-column: 1 / -1; justify-self: start; min-width: 220px; }

  /* --- первый запуск --- */

  .onboarding { padding-top: 8vh; }
  .ob-face { width: 128px; height: 128px; }

  /* Клавиатура: на мониторе по интерфейсу ходят табом, и без видимой
     рамки фокуса непонятно, где ты находишься. */
  .tab:focus-visible, .world:focus-visible, .card:focus-visible,
  .action:focus-visible, .primary:focus-visible {
    outline: 2px solid var(--amber-400);
    outline-offset: 2px;
  }
}

/* Очень широкий монитор: дальше растягивать нечего, но лента событий
   и поля родителя выигрывают от лишнего места. */
@media (min-width: 1500px) {
  .view, .parent > section { max-width: 1340px; }
  #view-worlds { grid-template-columns: minmax(0, 1fr) 380px; }
  .worlds { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}