/* Дизайн-система Timora — те же токены, что в iOS-приложении. */
:root {
  --bg: #F6F6F7;
  --surface: #FFFFFF;
  --surface-muted: #F2F2F3;
  --ink: #141414;
  --ink-secondary: #808080;
  --ink-tertiary: #A0A0A4;
  --border: #E2E2E4;
  --positive: #2E7D5B;
  --warning: #B07B26;
  --critical: #B3261E;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-card: 24px;
  --radius-hero: 28px;
  --on-ink: #FFFFFF;
  /* Приглушённый текст НА акцентной подложке (--ink). В тёмной теме --ink светлый,
     поэтому белый здесь стал бы невидимым. */
  --on-ink-muted: rgba(255, 255, 255, 0.7);
  /* Полупрозрачные панели поверх контента: таббар и элементы карты. */
  --panel-bg: rgba(255, 255, 255, 0.94);
  --skeleton-highlight: #E8E8EC;
  --shadow-card: 0 9px 14px rgba(0, 0, 0, 0.085);
  --tabbar-height: 68px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + 12px);
}

.screen { display: none; padding: 12px 20px 24px; }
.screen.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: .4 } to { opacity: 1 } }

.wordmark { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; margin: 8px 0 0; }
h1.title { font-size: 30px; font-weight: 700; letter-spacing: -0.6px; margin: 14px 0 2px; }
p.subtitle { color: var(--ink-secondary); margin: 0 0 4px; font-size: 15px; }
h2.section { font-size: 21px; font-weight: 700; margin: 30px 0 12px; letter-spacing: -0.3px; }
.overline { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-secondary); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-bottom: 12px;
}
.card.shadow { box-shadow: var(--shadow-card); }
.card.ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.card.ink .overline, .card.ink .muted { color: var(--on-ink-muted); }
.card.compact { padding: 14px 16px; border-radius: var(--radius-md); }

.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--ink-secondary); font-size: 12px; }
.tertiary { color: var(--ink-tertiary); font-size: 11px; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.metric { font-size: 37px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.metric-lg { font-size: 44px; font-weight: 700; letter-spacing: -1.2px; line-height: 1; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 12px;
  border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  background: var(--surface); border: 1px solid var(--border); color: var(--ink-secondary);
}
.badge.ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.badge.warn { background: rgba(176,123,38,.14); color: var(--warning); border-color: transparent; }
.badge.ok { background: rgba(46,125,91,.12); color: var(--positive); border-color: transparent; }

button, .btn {
  font: inherit; cursor: pointer; border: none;
  border-radius: 17px; height: 52px; padding: 0 20px;
  background: var(--ink); color: var(--on-ink); font-weight: 700; font-size: 16px;
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
button:disabled { background: var(--ink-tertiary); cursor: default; }
button.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--border); font-weight: 600; }
button.danger { background: var(--surface); color: var(--critical); border: 1px solid var(--border); font-weight: 600; }
button.small { height: 40px; font-size: 14px; width: auto; padding: 0 16px; border-radius: 13px; }

input, textarea {
  font: inherit; width: 100%; height: 52px; padding: 0 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--ink); outline: none;
}
input:focus, textarea:focus { border-color: var(--ink); }
label.field { display: block; font-size: 12px; font-weight: 600; color: var(--ink-secondary); margin: 0 0 7px 2px; }

/* Полоса дней недели */
.weekstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 20px; }
.day {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.day .dow { font-size: 10px; font-weight: 600; color: var(--ink-secondary); text-transform: uppercase; }
.day .num { font-size: 18px; font-weight: 700; }
.day.selected { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.day.selected .dow { color: var(--on-ink-muted); }
.weeknav { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.weeknav button { background: none; color: inherit; width: auto; height: auto; padding: 4px; font-size: 12px; font-weight: 600; }

/* Пары */
.lesson { display: flex; gap: 16px; align-items: flex-start; }
.lesson .time { width: 52px; flex: none; }
.lesson .time .start { font-weight: 600; font-size: 14px; }
.lesson .time .end { color: var(--ink-tertiary); font-size: 12px; }
.lesson .name { font-weight: 600; font-size: 16px; }

/* Состояния */
.state { text-align: center; padding: 28px 20px; }
.state .glyph { font-size: 26px; margin-bottom: 12px; }
.state .head { font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.skeleton { background: var(--surface-muted); border-radius: 8px; height: 14px; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

/* Чат */
.bubble { max-width: 86%; padding: 12px 15px; border-radius: var(--radius-md); margin-bottom: 10px; font-size: 14px; white-space: pre-wrap; }
.bubble.me { background: var(--ink); color: var(--on-ink); margin-left: auto; }
.bubble.ai { background: var(--surface); border: 1px solid var(--border); }
.composer { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 10px 0; background: var(--bg); }
.composer input { height: 52px; }
.composer button { width: 52px; height: 52px; flex: none; border-radius: 15px; padding: 0; font-size: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips button { width: auto; height: 40px; font-size: 13px; font-weight: 600; border-radius: 13px; background: var(--surface); color: var(--ink); border: 1px solid var(--border); }

/* Карта */
.map { position: relative; height: 240px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface-muted); overflow: hidden; }
.pin { position: absolute; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; transform: translate(-50%, -50%); }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; font-size: 13px; }
.legend .k { display: inline-flex; width: 18px; font-weight: 700; }

/* Таб-бар */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--panel-bg); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar button {
  background: none; color: var(--ink-tertiary); height: var(--tabbar-height);
  border-radius: 0; font-size: 10px; font-weight: 600; flex-direction: column; gap: 4px; padding: 0;
}
.tabbar button .ic { font-size: 19px; line-height: 1; }
.tabbar button.active { color: var(--ink); }

.code {
  font-size: 30px; font-weight: 700; letter-spacing: 6px;
  background: var(--surface-muted); border-radius: var(--radius-md);
  padding: 16px; text-align: center; user-select: all;
}
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-height) + 24px); transform: translateX(-50%);
  background: var(--ink); color: var(--on-ink); padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.toast.show { opacity: 1; }
.hidden { display: none !important; }

/* Карта студента */
.mapwrap {
  position: relative; margin-top: 12px; height: 58vh; min-height: 320px;
  border-radius: var(--radius-card); border: 1px solid var(--border);
  overflow: hidden; background: var(--bg); touch-action: none;
}
.mapwrap canvas { width: 100%; height: 100%; display: block; }
.mapzoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.mapzoom button {
  width: 40px; height: 40px; padding: 0; border-radius: 12px; font-size: 20px; font-weight: 600;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
}
.mapattr {
  position: absolute; left: 12px; bottom: 12px; font-size: 10px; color: var(--ink-tertiary);
  background: rgba(255,255,255,.8); padding: 4px 8px; border-radius: 8px;
}
select {
  font: inherit; width: 100%; height: 46px; padding: 0 12px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  appearance: none; -webkit-appearance: none;
}
.chips button.mode { height: 36px; }
.chips button.mode.active { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.routeline { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; }
.routeline .big { font-size: 24px; font-weight: 700; }
.applinks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.applinks a {
  display: flex; align-items: center; justify-content: center; height: 44px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  color: var(--ink); font-size: 13px; font-weight: 600;
}

/* Фрагмент карты в профиле */
.mapwrap.preview { height: 190px; min-height: 0; margin-top: 12px; }
.mapexpand {
  position: absolute; right: 10px; top: 10px; width: auto; height: 34px; padding: 0 14px;
  border-radius: 12px; font-size: 12px; font-weight: 600;
  background: var(--panel-bg); color: var(--ink); border: 1px solid var(--border);
}
.screen.fullmap { padding-top: 0; }

/* Вложения и режим разбора в чате */
.filestrip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.chipfile {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.chipfile span { color: var(--ink-tertiary); }
.attach {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 52px; font-size: 18px; cursor: pointer; flex: none;
}
#ai-reasoning.active { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.bubble { animation: bubbleIn .25s ease; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* ── Иконки таб-бара ─────────────────────────────────────────────────────── */
.tabbar button .ic { width: 22px; height: 22px; display: block; }
.tabbar button .ic svg { width: 100%; height: 100%; display: block; }
.tabbar button { transition: color .18s ease; }
.tabbar button .ic { transition: transform .22s cubic-bezier(.2,.9,.3,1.2); }
.tabbar button.active .ic { transform: translateY(-2px) scale(1.06); }

/* ── Тумблер режима ассистента ───────────────────────────────────────────── */
.switchrow { cursor: pointer; user-select: none; }
.switch {
  width: 50px; height: 30px; border-radius: 999px; background: var(--surface-muted);
  border: 1px solid var(--border); position: relative; flex: none;
  transition: background .22s ease, border-color .22s ease;
}
.switch i {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .24s cubic-bezier(.2,.9,.3,1.2);
}
.switch.on { background: var(--ink); border-color: var(--ink); }
.switch.on i { transform: translateX(20px); }
.modeicon {
  width: 38px; height: 38px; border-radius: 12px; background: var(--surface-muted);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  transition: background .22s ease, transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.switchrow.on .modeicon { background: var(--ink); transform: rotate(-8deg) scale(1.05); }

/* ── Анимации появления ──────────────────────────────────────────────────── */
.screen.active { animation: screenIn .26s cubic-bezier(.2,.8,.3,1); }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* Карточки въезжают по очереди — экран собирается, а не появляется рывком. */
/* Только при открытии вкладки (класс entering): обновление данных карточки не «перезапускает». */
.screen.entering .card, .screen.entering .day, .screen.entering .mapwrap {
  animation: cardIn .32s cubic-bezier(.2,.8,.3,1) backwards;
}
.screen.entering .card:nth-child(1) { animation-delay: .02s }
.screen.entering .card:nth-child(2) { animation-delay: .05s }
.screen.entering .card:nth-child(3) { animation-delay: .08s }
.screen.entering .card:nth-child(4) { animation-delay: .11s }
.screen.entering .card:nth-child(n+5) { animation-delay: .14s }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(.99) } to { opacity: 1; transform: none } }

/* Нажатия: лёгкое сжатие вместо мгновенной смены цвета. */
button, .card.compact[data-place], .card.compact[data-group], .switchrow, .day {
  transition: transform .12s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
button:active, .card.compact[data-place]:active, .card.compact[data-group]:active,
.switchrow:active, .day:active { transform: scale(.97); }

/* Метрики «набегают» при появлении. */
.screen.entering .metric, .screen.entering .metric-lg { animation: metricIn .45s cubic-bezier(.2,.8,.3,1) backwards; animation-delay: .1s; }
@keyframes metricIn { from { opacity: 0; transform: translateY(6px) scale(.96) } to { opacity: 1; transform: none } }

/* Скелетоны переливаются, а не просто мигают. */
.skeleton {
  background: linear-gradient(90deg, var(--surface-muted) 25%, var(--skeleton-highlight) 37%, var(--surface-muted) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }

/* Тост выезжает снизу. */
.toast { transform: translateX(-50%) translateY(12px); transition: opacity .22s ease, transform .28s cubic-bezier(.2,.9,.3,1.2); }
.toast.show { transform: translateX(-50%) translateY(0); }

/* Выбранный день недели «подпрыгивает». */
.day.selected { animation: dayPop .28s cubic-bezier(.2,.9,.3,1.3); }
@keyframes dayPop { 0% { transform: scale(.94) } 60% { transform: scale(1.04) } 100% { transform: scale(1) } }

/* Уважение к системной настройке «уменьшить движение». */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* «Окно» — свободный промежуток между парами. Оформлено легче карточки пары:
   это отсутствие занятия, оно не должно спорить по весу с реальными парами. */
.window {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin-bottom: 10px;
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
  background: transparent;
}
.window .glyph { font-size: 18px; opacity: .75; }
.window .ttl { font-weight: 600; font-size: 15px; }

/* Экран выбора вуза занимает всё окно: пока вуз не выбран, вкладки бессмысленны —
   расписание и оценки без него загрузить всё равно нельзя. */
body.choosing-institution .tabbar { display: none; }
body.choosing-institution { padding-bottom: 24px; }

/* ── Тёмная тема ────────────────────────────────────────────────────────────
   Два источника: настройка системы (prefers-color-scheme) и тема мессенджера —
   Telegram и ВК сообщают её через SDK, и app.js проставляет data-theme на <html>.
   Явный data-theme всегда важнее системного: внутри мессенджера студент видит
   ровно ту тему, что и в самом мессенджере. */
:root[data-theme="dark"] {
  --bg: #101012;
  --surface: #17171A;
  --surface-muted: #212127;
  --ink: #F2F2F4;
  --ink-secondary: #9A9AA2;
  --ink-tertiary: #6E6E78;
  --border: #2B2B32;
  --on-ink: #101012;
  --on-ink-muted: rgba(16, 16, 18, 0.66);
  --panel-bg: rgba(23, 23, 26, 0.94);
  --positive: #4FB088;
  --warning: #D9A441;
  --critical: #E5645C;
  --skeleton-highlight: #2A2A31;
  --shadow-card: 0 9px 18px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101012;
    --surface: #17171A;
    --surface-muted: #212127;
    --ink: #F2F2F4;
    --ink-secondary: #9A9AA2;
    --ink-tertiary: #6E6E78;
    --border: #2B2B32;
    --on-ink: #101012;
    --positive: #4FB088;
    --warning: #D9A441;
    --critical: #E5645C;
    --skeleton-highlight: #2A2A31;
    --shadow-card: 0 9px 18px rgba(0, 0, 0, 0.5);
  }
}


/* Баннер технических работ — над содержимым, не поверх него. */
/* Оформлен как обычная карточка Timora: та же подложка, радиус и обводка —
   сообщение не должно выглядеть чужеродной наклейкой поверх интерфейса. */
.maintenance {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 8px 20px 0; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}
.maintenance-icon {
  flex: none; width: 28px; height: 28px; display: flex;
  align-items: center; justify-content: center; font-size: 14px;
  background: var(--surface-muted); border-radius: var(--radius-sm);
}
.maintenance .muted { margin-top: 2px; }
.maintenance-close {
  flex: none; width: 28px; height: 28px; padding: 0; border: 0;
  background: none; color: var(--ink-tertiary); font-size: 13px; line-height: 1;
  border-radius: var(--radius-sm); cursor: pointer;
}

/* ═══ Timora AI — как в iOS (AIAssistantView) ═══════════════════════════════ */
:root {
  --glass-stroke: rgba(255, 255, 255, 0.55);
  --tab-pill: rgba(20, 20, 20, 0.07);
}
:root[data-theme="dark"] {
  --glass-stroke: rgba(255, 255, 255, 0.08);
  --tab-pill: rgba(255, 255, 255, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Этих двух не было в системной тёмной теме: подпись на светлой ink-карточке
       выходила белой по светлому, а панели — белыми. */
    --on-ink-muted: rgba(16, 16, 18, 0.66);
    --panel-bg: rgba(23, 23, 26, 0.94);
    --glass-stroke: rgba(255, 255, 255, 0.08);
    --tab-pill: rgba(255, 255, 255, 0.12);
  }
}

.ai-head { display: flex; align-items: flex-start; gap: 12px; }
.ai-head-text { flex: 1; min-width: 0; }
.icon-circle {
  width: 38px; height: 38px; flex: none; padding: 0; margin-top: 16px; border-radius: 50%;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
}
.icon-circle svg { width: 16px; height: 16px; }

.ai-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ai-pills:empty { display: none; }
.pill {
  position: relative; display: inline-flex; align-items: center; gap: 5px; width: auto;
  height: 32px; padding: 0 12px; border: 0; border-radius: 16px;
  background: var(--surface-muted); color: var(--ink); font-size: 12px; font-weight: 600;
}
.pill svg { width: 13px; height: 13px; flex: none; }
.pill svg.chev { width: 10px; height: 10px; }
.pill #ai-limits-icon, .pill #ai-limits-gift { display: inline-flex; }
.pill #ai-limits-gift svg { width: 11px; height: 11px; }
.pill em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--ink-secondary); }
/* Нативный список моделей поверх чипа: в мессенджере он надёжнее самодельного меню. */
.pill select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; border: 0; cursor: pointer; }
.pill.empty { color: var(--critical); }

#ai-reasoning { margin-top: 16px; margin-bottom: 0; }
/* Иконка режима Timora AI — SVG; у тумблеров профиля остаются эмодзи, их не трогаем. */
#ai-reasoning .modeicon { width: 34px; height: 34px; color: var(--ink); font-size: 0; }
#ai-reasoning .modeicon svg { width: 16px; height: 16px; }
#ai-reasoning.on .modeicon { color: var(--on-ink); transform: none; }

.ai-welcome { margin: 20px 0 0; padding: 20px; border-radius: var(--radius-hero); }
.ai-welcome > svg { width: 26px; height: 26px; display: block; }
.ai-welcome-title { font-size: 23px; font-weight: 700; margin-top: 16px; letter-spacing: -0.3px; }
.ai-welcome-note { margin-top: 8px; }

.ai-suggestions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.ai-suggestions:empty { display: none; }
.ai-suggestions button {
  justify-content: space-between; height: 52px; padding: 0 16px; gap: 12px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
  border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-align: left;
}
.ai-suggestions button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-suggestions button svg { width: 12px; height: 12px; flex: none; color: var(--ink-tertiary); }

#ai-messages { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
#ai-messages:empty { display: none; }
#ai-messages .bubble {
  max-width: 86%; margin: 0; padding: 12px 16px; font-size: 14px; line-height: 1.42;
  white-space: normal; overflow-wrap: anywhere;
}
#ai-messages .bubble.me { align-self: flex-end; white-space: pre-wrap; }
#ai-messages .bubble.ai { align-self: flex-start; }
.bubble p { margin: 0 0 8px; }
.bubble p:last-child, .bubble ul:last-child, .bubble ol:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 2px 0 8px; padding-left: 20px; }
.bubble li + li { margin-top: 3px; }
.bubble code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px;
  padding: 1px 5px; border-radius: 6px; background: var(--surface-muted);
}
.bubble .cursor { margin-left: 1px; animation: caret 1s steps(2, start) infinite; }
@keyframes caret { to { visibility: hidden; } }

.ai-thinking { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--ink-secondary); }
.spinner {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--ink-secondary); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ai-error { margin: 16px 0 0; }

/* Поле ввода — одна карточка, как в iOS: скрепка, текст, квадратная кнопка отправки. */
.ai-composer {
  position: sticky; bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 5; margin-top: 16px; padding-top: 8px;
}
.ai-composer .filestrip { margin-bottom: 8px; }
.ai-composer .filestrip:empty { display: none; }
.composer-card {
  display: flex; align-items: flex-end; gap: 10px; min-height: 58px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.composer-card .attach { width: 34px; height: 40px; flex: none; color: var(--ink-secondary); font-size: 0; }
.composer-card .attach svg { width: 18px; height: 18px; }
.composer-card textarea {
  flex: 1; height: 40px; min-height: 40px; max-height: 108px; padding: 10px 0; border: 0; border-radius: 0;
  background: transparent; resize: none; font-size: 14px; line-height: 20px;
}
.composer-card textarea:focus { border: 0; }
#ai-send { width: 40px; height: 40px; flex: none; padding: 0; border-radius: 12px; }
#ai-send svg { width: 16px; height: 16px; }

/* Лист лимитов */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end;
  background: rgba(0, 0, 0, 0.36); animation: fade .18s ease;
}
.sheet {
  width: 100%; max-height: 90vh; overflow-y: auto; background: var(--bg);
  border-radius: 24px 24px 0 0; padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  animation: sheetUp .26s cubic-bezier(.2, .9, .3, 1);
}
@keyframes sheetUp { from { transform: translateY(48px); opacity: .5 } to { transform: none; opacity: 1 } }
.sheet-grabber { width: 36px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: var(--border); }
.sheet-head { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; margin-bottom: 16px; text-align: center; }
.sheet-done { width: auto; height: 36px; padding: 0; justify-self: end; background: none; color: var(--ink); font-size: 15px; font-weight: 600; }
.ai-limit-metric { display: flex; align-items: baseline; gap: 8px; margin: 8px 0; }
.ai-limit-metric span { font-size: 44px; font-weight: 700; letter-spacing: -1.2px; line-height: 1; }
.ai-limit-metric small { font-size: 14px; color: var(--on-ink-muted); }
.ai-limit-bonus { margin-top: 8px; font-size: 12px; }
.section-label { margin: 24px 0 12px; font-size: 16px; font-weight: 600; color: var(--ink-secondary); }
.sheet-note { margin: 0 0 12px; }
.promo-row { display: flex; gap: 12px; }
.promo-row input { flex: 1; height: 58px; border-radius: 17px; text-transform: uppercase; }
.promo-row button { width: 64px; height: 58px; flex: none; padding: 0; }
.promo-result { margin-top: 12px; font-size: 12px; }
.promo-result.ok { color: var(--positive); }
.promo-result.bad { color: var(--critical); }
.sheet-foot { margin: 24px 0 0; font-size: 12px; line-height: 1.4; }

/* ═══ Таб-бар Liquid Glass — плавающая панель со «стеклом» и таблеткой активной вкладки ═══ */
.tabbar {
  left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  height: 62px; padding: 0 6px; align-items: center;
  border: 1px solid var(--glass-stroke); border-radius: 28px;
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}
.tabbar button { height: 46px; border-radius: 20px; gap: 3px; }
.tabbar button.active { background: var(--tab-pill); }
.tabbar button.active .ic { transform: none; }

/* Атрибут hidden должен побеждать display из классов: плашка техработ с display:flex
   висела пустой у всех студентов, хотя скрипт честно ставил ей hidden. */
[hidden] { display: none !important; }
/* Бегунок переключателя всегда белый — как в iOS; в тёмной теме он был тёмным и терялся. */
.switch i { background: #FFFFFF; }
/* Под полем ввода — сплошной фон до самого низа, чтобы подсказки не просвечивали между ним и таб-баром. */
.ai-composer { background: linear-gradient(to bottom, transparent, var(--bg) 18px); }
.ai-composer::after {
  content: ""; position: absolute; left: -20px; right: -20px; top: 100%; pointer-events: none;
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + 12px); background: var(--bg);
}
/* Поле ввода прижато к низу экрана и при коротком чате — как в iOS, а не висит под сообщениями. */
#screen-ai.active {
  display: flex; flex-direction: column;
  min-height: calc(100dvh - var(--tabbar-height) - env(safe-area-inset-bottom, 0px) - 12px);
}
#screen-ai .ai-composer { margin-top: auto; }
#ai-messages + .ai-thinking, #ai-error { flex: none; }

/* ── Профиль: блок «Аккаунты» ────────────────────────────────────────────── */
.card.accounts { padding: 0; overflow: hidden; }
.acc-row { padding: 14px 16px; }
.acc-row + .acc-row { border-top: 1px solid var(--border); }
.acc-head { display: flex; align-items: center; gap: 12px; }
.acc-head .grow { min-width: 0; }
.acc-head .muted { margin-top: 2px; overflow-wrap: anywhere; }
.acc-icon { width: 34px; height: 34px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; color: #FFF; }
.acc-icon svg { width: 18px; height: 18px; }
.acc-telegram { background: #2AABEE; }
.acc-vk { background: #0077FF; }
.acc-eios { background: var(--surface-muted); color: var(--ink); }
.acc-body { margin-top: 12px; }
.acc-code { font-size: 28px; font-weight: 700; letter-spacing: 5px; margin: 0 0 12px; }
.switchrow.busy { opacity: .6; pointer-events: none; }
/* Длинное описание не должно сжимать иконку тумблера. */
.switchrow .modeicon { flex: none; }

/* ── Реклама на главной ─────────────────────────────────────────────────── */
#home-promo:empty, #home-promo-top:empty { display: none; }
.ad-top, .ad-slide {
  display: block; width: 100%; height: auto; padding: 0; margin: 0; border: 0; cursor: pointer;
  background: transparent; font: inherit; color: inherit;
}
.ad-top {
  position: relative; aspect-ratio: 6 / 1; margin: 0 0 14px; overflow: hidden;
  border-radius: 14px; background: var(--surface-muted); border: 1px solid var(--border);
  animation: adIn .32s cubic-bezier(.2,.8,.3,1);
}
.ad-card {
  position: relative; margin-top: 12px; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--surface-muted); border: 1px solid var(--border); box-shadow: var(--shadow-card);
  animation: adIn .32s cubic-bezier(.2,.8,.3,1);
}
@keyframes adIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.ad-top:active, .ad-slide:active { transform: none; opacity: .92; }
.ad-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ad-track::-webkit-scrollbar { display: none; }
.ad-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 2 / 1; border-radius: 0; }
.ad-top img, .ad-slide img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.ad-top img.ready, .ad-slide img.ready { opacity: 1; }
.ad-tag {
  position: absolute; right: 8px; top: 8px; padding: 2px 7px; border-radius: 999px;
  font-size: 9px; font-weight: 600; letter-spacing: .2px; line-height: 1.4; color: #FFF;
  background: rgba(0,0,0,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none;
}
.ad-top .ad-tag { top: auto; bottom: 5px; right: 6px; font-size: 8px; padding: 1px 6px; }
.ad-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.ad-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); transition: width .2s ease, background .2s ease; }
.ad-dots i.on { width: 16px; border-radius: 3px; background: #FFF; }

/* Подтверждение отключения рекламы */
.ads-sheet { text-align: center; }
.ads-sheet-icon { font-size: 40px; margin: 12px 0 6px; }
.ads-sheet-title { font-size: 21px; font-weight: 700; letter-spacing: -.3px; }
.ads-sheet-text { margin: 10px 4px 20px; font-size: 14px; line-height: 1.45; }

/* ── Быстрее и плавнее ───────────────────────────────────────────────────── */
/* Нажатие срабатывает сразу, без ожидания двойного тапа. */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Картинки рекламы и таб-бар — на своих слоях: прокрутка не перерисовывает их заново. */
.tabbar { transform: translateZ(0); }
.lowfx .tabbar, .lowfx .ad-tag, .lowfx .panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
.lowfx .tabbar { background: var(--surface); }
.lowfx .skeleton { animation: pulse 1.2s ease-in-out infinite; background: var(--surface-muted); }
@media (prefers-reduced-motion: reduce) {
  .screen.entering .card, .screen.entering .day, .screen.entering .metric, .screen.active, .ad-top, .ad-card { animation: none !important; }
}

/* ── Экран «Бот в чате»: спокойный, без анимаций и сжатий при нажатии ────── */
.static-screen.entering .card, .static-screen.entering .metric { animation: none !important; }
#screen-chats.active { animation: none; }
#screen-chats .card, #screen-chats button, #screen-chats .switchrow { transition: background .15s ease, border-color .15s ease, color .15s ease; }
#screen-chats button:active, #screen-chats .switchrow:active, #screen-chats .card:active { transform: none; opacity: .85; }
#screen-chats .switch, #screen-chats .switch i { transition: none; }
.chats-top { margin-top: 4px; }
.chats-back { width: auto; height: 36px; padding: 0; background: none; color: var(--ink-secondary); font-size: 15px; font-weight: 600; }
/* Поля и карточки идут одной лесенкой: раньше подпись «прилипала» к полю сверху
   из-за отрицательного отступа, и блоки стояли неровно. */
.chats-form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding-bottom: 8px; }
.chats-form .field-group { display: flex; flex-direction: column; }
.chats-form label.field { margin: 0 0 7px 2px; }
.chats-form .field-group .chats-note { margin-top: 7px; }
.chats-form .card { margin: 0; }
.chats-form .switchrow { gap: 12px; }
.chats-form .switchrow .grow { min-width: 0; }
.chats-form .switch { flex: none; }
.chats-note { margin: 0 2px; line-height: 1.4; }
/* Нативные поля iOS шире, чем кажется: не даём им вылезать за экран. */
.chats-form select, .chats-form input {
  display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  -webkit-appearance: none; appearance: none; text-align: left; font-size: 16px;
}
.chats-form input[type="time"]::-webkit-date-and-time-value { text-align: left; }
.chats-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-secondary) 50%), linear-gradient(135deg, var(--ink-secondary) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px;
}
#chat-save { margin-top: 6px; }
/* Подсказка снизу не должна уезжать под нижнюю панель. */
#screen-chats, #screen-teachers { padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + 20px); }
#screen-chats { overflow-x: hidden; }
.chats-form select { height: 52px; border-radius: var(--radius-md); padding-left: 18px; }

/* ── Расписание преподавателя ────────────────────────────────────────────── */
.teacher-day { margin-top: 18px; }
.teacher-day:first-child { margin-top: 4px; }
.teacher-day-title { font-size: 15px; font-weight: 700; margin: 0 2px 8px; }
.teacher-day-title.today::after { content: " · сегодня"; color: var(--ink-secondary); font-weight: 600; }
.lesson-mini { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.lesson-mini .time { width: 46px; flex: none; }
.lesson-mini .time .strong { font-size: 13px; }
.lesson-mini .grow { min-width: 0; }
.teacher-groups { margin-top: 4px; overflow-wrap: anywhere; }
#screen-teachers .weeknav button { transition: none; }
#screen-teachers button:active, #screen-teachers .card:active { transform: none; opacity: .85; }
#screen-teachers.active { animation: none; }

/* ── ЭИОС: курсы, материалы и тесты ──────────────────────────────────────── */
.study-tools { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.study-tools .card { margin: 0; }
#screen-eios { padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + 24px); overflow-x: hidden; }
#screen-eios.active { animation: none; }
#screen-eios button:active, #screen-eios .card:active { transform: none; opacity: .88; }
.eios-overline { margin-top: 14px; }
.eios-title { margin-top: 4px; overflow-wrap: anywhere; }
.eios-overline + .eios-title { margin-top: 4px; }
.eios-head { align-items: flex-start; }
.eios-head > button { margin-top: 20px; flex: none; }
.eios-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* Вход */
.eios-login { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 0; }
.eios-login .field-group { display: flex; flex-direction: column; }
.eios-login input { font-size: 16px; }
.eios-login-head { display: flex; gap: 12px; align-items: center; }
.eios-inst-logo {
  width: 42px; height: 42px; flex: none; border-radius: 13px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-muted); font-weight: 700; font-size: 13px; color: var(--ink-secondary);
}
.eios-inst-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.eios-pass { position: relative; }
.eios-pass input { padding-right: 54px; }
.eios-eye {
  position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; padding: 0;
  border-radius: 12px; background: none; color: var(--ink-tertiary);
}
.eios-eye svg { width: 20px; height: 20px; }
.eios-eye.on { color: var(--ink); }
.eios-login-error { color: var(--critical); font-size: 13px; line-height: 1.4; }
.eios-login-error:empty { display: none; }
.eios-link { background: none; color: var(--ink-secondary); height: 40px; font-size: 14px; font-weight: 600; }
.eios-privacy { margin: 12px 4px 0; line-height: 1.45; }
.eios-insts { display: flex; flex-direction: column; gap: 8px; }
.eios-inst { margin: 0; gap: 12px; }
.eios-inst.selected { border-color: var(--ink); }
.eios-inst.soon { opacity: .55; }
.eios-check {
  width: 24px; height: 24px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 700;
}

/* Курсы */
.eios-search { margin: 16px 0 0; }
.eios-courses { margin-top: 14px; }
.eios-course { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; cursor: pointer; }
.eios-thumb {
  width: 56px; height: 56px; flex: none; border-radius: 16px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #FFF; font-weight: 700; font-size: 18px;
  background: linear-gradient(135deg, hsl(var(--hue) 60% 58%), hsl(calc(var(--hue) + 40) 56% 44%));
}
.eios-thumb img { width: 100%; height: 100%; object-fit: cover; }
.eios-progress { height: 5px; border-radius: 3px; background: var(--surface-muted); margin: 8px 0 4px; overflow: hidden; }
.eios-progress i { display: block; height: 100%; border-radius: 3px; background: var(--ink); }
.eios-empty { margin-top: 12px; }

/* Разделы курса и материалы */
.eios-section { padding: 0; overflow: hidden; margin: 12px 0 0; }
.eios-section-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; }
.eios-chev { color: var(--ink-tertiary); font-size: 22px; line-height: 1; transition: transform .2s ease; }
.eios-section.open .eios-chev { transform: rotate(90deg); }
.eios-section-body { border-top: 1px solid var(--border); padding: 6px 8px 8px; }
.eios-module { display: flex; gap: 12px; align-items: center; padding: 10px 10px; border-radius: 14px; cursor: pointer; }
.eios-module:active { background: var(--surface-muted); }
.eios-module.locked { opacity: .5; }
.eios-module .grow { min-width: 0; }
.eios-module .modeicon { width: 40px; height: 40px; flex: none; }
.eios-lock { margin-top: 3px; }
.eios-done {
  width: 22px; height: 22px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(46,125,91,.14); color: var(--positive); font-size: 12px; font-weight: 700;
}
.eios-label { padding: 8px 10px; }
.eios-warn {
  margin: 8px 0; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.4;
  background: rgba(176,123,38,.12); color: var(--warning);
}

/* Файлы, ссылки, сведения */
.eios-file { margin-bottom: 10px; }
.eios-file .row { gap: 12px; }
.eios-file .grow { min-width: 0; }
.eios-file-preview {
  display: block; width: 100%; max-height: 260px; object-fit: contain; margin-bottom: 12px;
  border-radius: 12px; background: var(--surface-muted); cursor: zoom-in;
}
.eios-file-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.eios-file-actions button { width: 100%; }
.eios-folder { margin: 16px 2px 8px; }
.eios-sitecard { display: flex; flex-direction: column; gap: 12px; }
.eios-url { overflow-wrap: anywhere; }
.eios-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-top: 16px; }
.eios-fact .strong { margin-top: 3px; font-size: 14px; overflow-wrap: anywhere; }
.eios-good { color: var(--positive); }
.eios-bad { color: var(--critical); }
.eios-h { margin: 6px 0 10px; font-size: 18px; }
.eios-rules { display: grid; gap: 4px; margin: 4px 2px 10px; }
.eios-quiz-action { margin: 16px 0 6px; }
.eios-quiz-pass { display: flex; flex-direction: column; margin-top: 12px; }
.eios-best { margin-top: 12px; }
.eios-attempt-row { margin-bottom: 8px; }
.eios-attempt-row .strong + .tertiary { margin-left: 2px; }
.badge.bad { background: rgba(179,38,30,.12); color: var(--critical); border-color: transparent; }

/* Идущая попытка */
.eios-attempt-bar {
  position: sticky; top: 0; z-index: 5; margin: 0 -20px 12px; padding: 10px 20px 12px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.eios-attempt-bar .grow { min-width: 0; }
.eios-timer { flex: none; font-variant-numeric: tabular-nums; }
.eios-timer.low { color: var(--critical); }
.eios-qnavs { display: flex; gap: 6px; margin-top: 10px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.eios-qnavs::-webkit-scrollbar { display: none; }
.eios-qnav {
  width: 36px; height: 36px; flex: none; padding: 0; border-radius: 11px; font-size: 13px; font-weight: 600;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
}
.eios-qnav.answered { background: var(--surface-muted); border-color: var(--ink-tertiary); }
.eios-qnav.current { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.eios-qnav:disabled { background: var(--surface); color: var(--ink-tertiary); opacity: .6; }
.eios-question { margin-bottom: 12px; }
.eios-question-head { margin-bottom: 10px; }
.eios-attempt-actions { display: flex; gap: 10px; margin-top: 8px; }
.eios-attempt-actions button { flex: 1; }

/* Материалы преподавателя */
.rich { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.rich > :first-child { margin-top: 0; }
.rich > :last-child { margin-bottom: 0; }
.rich p { margin: 0 0 10px; }
.rich h1, .rich h2, .rich h3, .rich h4, .rich h5, .rich h6 { font-size: 17px; line-height: 1.3; margin: 16px 0 8px; }
.rich h1, .rich h2 { font-size: 19px; }
.rich ul, .rich ol { margin: 0 0 10px; padding-left: 22px; }
.rich li { margin: 3px 0; }
.rich a { color: inherit; text-decoration: underline; text-decoration-color: var(--ink-tertiary); text-underline-offset: 2px; }
.rich a[data-file]::before { content: "📎 "; }
.rich img { max-width: 100%; height: auto; border-radius: 10px; vertical-align: middle; cursor: zoom-in; }
.rich pre, .rich code, .rich kbd, .rich samp { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; background: var(--surface-muted); border-radius: 6px; }
.rich code { padding: 1px 5px; }
.rich pre { padding: 12px; overflow-x: auto; white-space: pre; }
.rich blockquote { margin: 0 0 10px; padding: 6px 14px; border-left: 3px solid var(--border); color: var(--ink-secondary); }
.rich hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.rich-table { overflow-x: auto; margin: 0 0 10px; -webkit-overflow-scrolling: touch; }
.rich table { border-collapse: collapse; min-width: 100%; font-size: 14px; }
.rich th, .rich td { border: 1px solid var(--border); padding: 7px 9px; text-align: left; vertical-align: top; }
.rich th { background: var(--surface-muted); font-weight: 600; }
.rich video, .rich audio { display: block; width: 100%; margin: 6px 0; border-radius: 12px; }
.rich .m-embed {
  display: inline-flex; align-items: center; height: 40px; padding: 0 14px; margin: 4px 0; border-radius: 13px;
  background: var(--surface-muted); text-decoration: none; font-weight: 600; font-size: 14px;
}
.rich .m-embed::before { content: "▶︎ "; margin-right: 4px; }
.rich .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.rich .katex { font-size: 1.08em; }
.rich .m-sr-only, .rich .m-accesshide {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Вопросы теста */
.quiz-q .m-qtext { margin-bottom: 14px; font-weight: 500; }
.quiz-q fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.quiz-q legend, .quiz-q .m-prompt { padding: 0; margin-bottom: 8px; font-size: 12px; color: var(--ink-secondary); }
.quiz-q div.m-answer { display: flex; flex-direction: column; gap: 8px; }
.quiz-q .m-answernumber { color: var(--ink-secondary); font-weight: 600; margin-right: 4px; }
.quiz-q .m-d-flex { display: flex; gap: 2px; }
.eios-choice {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
.eios-choice:has(input:checked) { border-color: var(--ink); background: var(--surface-muted); }
.eios-choice > div, .eios-choice > label { flex: 1; min-width: 0; }
.quiz-q input[type=radio], .quiz-q input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; min-width: 22px; padding: 0;
  margin: 1px 0 0; border: 2px solid var(--ink-tertiary); border-radius: 50%; background: var(--surface); vertical-align: middle;
}
.quiz-q input[type=checkbox] { border-radius: 7px; }
.quiz-q input[type=radio]:checked, .quiz-q input[type=checkbox]:checked {
  border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 4px var(--surface);
}
.quiz-q input[type=text], .quiz-q input[type=number] { height: 46px; width: 100%; padding: 0 14px; border-radius: 13px; font-size: 16px; }
.quiz-q .m-qtext input[type=text], .quiz-q .m-subquestion input[type=text], .quiz-q .m-formulation p input[type=text] {
  display: inline-block; width: auto; min-width: 110px; max-width: 100%; height: 38px; margin: 2px 0;
}
.quiz-q select {
  display: inline-block; width: auto; max-width: 100%; height: 40px; margin: 2px 0; padding: 0 34px 0 12px;
  border-radius: 12px; font-size: 15px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-secondary) 50%), linear-gradient(135deg, var(--ink-secondary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
}
.quiz-q select:focus, .quiz-q input:focus, .quiz-q textarea:focus { outline: none; border-color: var(--ink); }
.quiz-q textarea { display: block; height: auto; min-height: 140px; padding: 12px 14px; line-height: 1.45; resize: vertical; font-size: 16px; }
.quiz-q table.m-answer { border-collapse: separate; border-spacing: 0 8px; }
.quiz-q table.m-answer td { border: 0; padding: 0 8px 0 0; vertical-align: middle; }
.quiz-q table.m-answer select { width: 100%; min-width: 120px; }
.quiz-q .m-quiz-check {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; margin-top: 12px; border-radius: 13px;
  background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 600; cursor: pointer;
}
.quiz-q .m-quiz-note, .quiz-q .m-validationerror { margin-top: 8px; font-size: 13px; color: var(--warning); }
.quiz-q .m-validationerror { color: var(--critical); }
.eios-clear { display: none; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink-secondary); cursor: pointer; }
.quiz-q .m-ablock:has(input[type=radio]:checked:not([value="-1"])) > .eios-clear { display: inline-block; }

/* Разбор попытки */
.quiz-q .m-outcome { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-muted); font-size: 14px; }
.quiz-q .m-rightanswer { margin-top: 8px; font-weight: 600; }
.quiz-q .m-specificfeedback, .quiz-q .m-generalfeedback, .quiz-q .m-feedback { margin-top: 6px; }
/* Вес выше, чем у «выбранной строки»: в разборе цвет показывает верность, а не выбор. */
.quiz-q .eios-choice.m-correct { border-color: var(--positive); background: rgba(46,125,91,.08); }
.quiz-q .eios-choice.m-incorrect { border-color: var(--critical); background: rgba(179,38,30,.07); }
.quiz-q .eios-choice.m-partiallycorrect { border-color: var(--warning); background: rgba(176,123,38,.08); }
.quiz-q i.m-icon { font-style: normal; }
.quiz-q .m-fa-check::before { content: "✓"; color: var(--positive); font-weight: 700; margin-left: 6px; }
.quiz-q .m-fa-remove::before, .quiz-q .m-fa-times::before, .quiz-q .m-fa-xmark::before { content: "✗"; color: var(--critical); font-weight: 700; margin-left: 6px; }
.review .quiz-q input:disabled, .review .quiz-q select:disabled, .review .quiz-q textarea:disabled { opacity: 1; }

/* Картинка на весь экран */
.eios-viewer { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #0B0B0C; }
.eios-viewer-bar { display: flex; gap: 8px; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px; }
.eios-viewer-bar button { width: auto; height: 38px; padding: 0 14px; border-radius: 12px; font-size: 14px; font-weight: 600; background: rgba(255,255,255,.14); color: #FFF; }
.eios-viewer-body { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 12px; -webkit-overflow-scrolling: touch; }
.eios-viewer-body img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: #FFF; }
.eios-viewer.zoomed .eios-viewer-body { display: block; }
.eios-viewer.zoomed .eios-viewer-body img { max-width: none; max-height: none; width: 220%; }