/* Notebook — стиль «Тетрадь». Все цвета через переменные; акцент меняет репетитор. */
:root {
  /* оттенки акцента пересчитывает app.js (applySettings); здесь — значения для коралла по умолчанию */
  --accent: #F25C3B; --accent-rgb: 242, 92, 59; --accent-2: #BD482E;
  --accent-soft: #FDE7E2; --accent-ink: #AE4229; --on-accent: #fff; --switch-off: #D5D9E4;
  --glass: rgba(255, 255, 255, .9); --hover: #F7F8FB; --glass-soft: rgba(255, 255, 255, .55); --glass-line: rgba(27, 29, 41, .08);

  --bg: #F4F6FB;
  --card: #FFFFFF;
  --card-2: #EEF0F6;
  --ink: #1B1D29;
  --ink-2: #6B6F80;
  --line: #E3E6EF;

  --ok-bg: #E3F4EA;   --ok: #1F6B3F;
  --warn-bg: #FFF1C7; --warn: #7A5600;
  --bad-bg: #FDE4E1;  --bad: #A3271A;
  --info-bg: #E6EEFF; --info: #2747A6;

  --paper: #FBF7EE; --paper-ink: #24221E; --paper-ink-2: #6E685C;

  /* радиусы: мелкие элементы / поля и иконки / кнопки / карточки / всплывающие листы */
  --r-sm: 12px; --r-ctl: 14px; --r-btn: 16px; --r-card: 20px; --r-sheet: 28px; --r-pill: 999px;
  --press: scale(.97);
  --shadow: 0 1px 2px rgba(27, 29, 41, .04), 0 8px 24px rgba(27, 29, 41, .06);
  --ease: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --f-head: "Unbounded", system-ui, sans-serif;
  --f-ui: "Manrope", system-ui, -apple-system, sans-serif;
  --f-read: "Literata", Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161F; --card: #1D2030; --card-2: #262A3D; --ink: #F1F2F8; --ink-2: #AEB4C8; --line: #343954;
    --ok-bg: #173226; --ok: #8FE0B0; --warn-bg: #3A2F12; --warn: #F2CF72; --bad-bg: #3D1C19; --bad: #FF9C8F;
    --info-bg: #1C2747; --info: #A9BEFF;
    --paper: #1E1C18; --paper-ink: #EDE6D6; --paper-ink-2: #A69F8F;
    --glass: rgba(29, 32, 48, .9); --hover: #22263A; --switch-off: #444A68; --glass-soft: rgba(255, 255, 255, .06); --glass-line: rgba(255, 255, 255, .1);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14161F; --card: #1D2030; --card-2: #262A3D; --ink: #F1F2F8; --ink-2: #AEB4C8; --line: #343954;
  --ok-bg: #173226; --ok: #8FE0B0; --warn-bg: #3A2F12; --warn: #F2CF72; --bad-bg: #3D1C19; --bad: #FF9C8F;
  --info-bg: #1C2747; --info: #A9BEFF;
  --paper: #1E1C18; --paper-ink: #EDE6D6; --paper-ink-2: #A69F8F;
  --glass: rgba(29, 32, 48, .9); --hover: #22263A; --switch-off: #444A68; --glass-soft: rgba(255, 255, 255, .06); --glass-line: rgba(255, 255, 255, .1);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
/* против приближения двойным нажатием — на содержимом, не на html: на корне это мешает клавиатуре iPhone */
.app { touch-action: manipulation; }
button, a, .tab, .opt, .choice, .switch, .seg { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; overflow-x: clip;
  overflow-wrap: break-word;
}
h1, h2, h3, p, li, blockquote, .title-line, .bubble, .msg { overflow-wrap: anywhere; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-head); font-weight: 500; letter-spacing: -.01em; }
h1 { font-size: clamp(22px, 5.4vw, 30px); line-height: 1.15; text-wrap: balance; }
h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
h2 { font-size: 18px; line-height: 1.25; }
h3 { font-size: 15px; line-height: 1.3; font-family: var(--f-ui); font-weight: 700; letter-spacing: 0; }
p { margin: 0; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* ---------- каркас ---------- */
.app { min-height: 100dvh; }
.shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.main {
  width: 100%; max-width: 760px; margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}
.main.wide { max-width: 1080px; }
.sidebar { display: none; }
.tab {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; background: none; border-radius: var(--r-ctl); color: var(--ink-2);
  font-size: 11px; font-weight: 600; text-decoration: none; min-height: 48px;
}
.tab svg { width: 22px; height: 22px; }
.tab[aria-current="page"] { color: var(--accent-ink); }
@media (min-width: 1024px) {
  .shell { grid-template-columns: 248px minmax(0, 1fr); }
  .sidebar {
    display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100dvh;
    padding: 24px 16px; border-right: 1px solid var(--line); background: var(--card);
  }
  .sidebar .brand { margin: 0 8px 20px; }
  .sidebar .tab { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px; font-size: 14px; }
  .sidebar .tab[aria-current="page"] { background: var(--accent-soft); }
  .sidebar .spacer { flex: 1; }
  .main { padding: 32px 40px 48px; }
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-head); font-size: 17px; font-weight: 600; text-decoration: none; }
.brand img { width: 30px; height: 30px; }

/* ---------- шапка экрана ---------- */
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; min-height: 44px; }
.topbar .grow { flex: 1; min-width: 0; }
.icon-btn {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: var(--r-ctl); background: var(--card); box-shadow: var(--shadow); color: var(--ink);
}
.icon-btn svg { width: 20px; height: 20px; }
.avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--accent), var(--accent-2)); color: var(--on-accent);
  font-weight: 700; font-size: 14px; letter-spacing: .02em; text-decoration: none;
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px rgba(var(--accent-rgb), .25), 0 8px 20px -4px rgba(var(--accent-rgb), .55);
  transition: transform .2s var(--ease);
}
a.avatar:active { transform: scale(.94); }
.crumb { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- карточки и списки ---------- */
.stack { display: flex; flex-direction: column; gap: 12px; }
.section { margin-top: 24px; }
.section > .head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card {
  background: var(--card); border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow);
}
.card.flat { box-shadow: none; border: 1px solid var(--line); }
a.card, button.card { display: block; width: 100%; text-align: left; text-decoration: none; border: 0; color: inherit; }
.row { display: flex; align-items: center; gap: 12px; }
.row .grow { flex: 1; min-width: 0; }
.ico {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
}
.ico svg { width: 20px; height: 20px; }
.ico.ok { background: var(--ok-bg); color: var(--ok); }
.ico.warn { background: var(--warn-bg); color: var(--warn); }
.ico.info { background: var(--info-bg); color: var(--info); }
.chev { color: var(--ink-2); width: 18px; height: 18px; flex: none; }
.list { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.list > * + * { border-top: 1px solid var(--line); }
.list .item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 64px; text-decoration: none; color: inherit; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; }
.title-line { font-weight: 600; }
.clip { overflow-wrap: anywhere; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }

/* ---------- метки ---------- */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; max-width: 100%; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.neutral { background: var(--card-2); color: var(--ink-2); }
.pill.accent { background: var(--accent-soft); color: var(--accent-ink); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill svg { width: 14px; height: 14px; flex: none; }
.list .item > .pill { flex: none; max-width: 42%; text-align: center; }
.role-pick svg { width: 26px; height: 26px; color: var(--accent-ink); margin-bottom: 6px; }
.norm { white-space: nowrap; }
.reader .text, .answer-text { overflow-wrap: anywhere; }

/* ---------- прогресс ---------- */
.bar { height: 8px; border-radius: 8px; background: var(--card-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 8px; background: var(--accent); transform-origin: left; animation: grow .6s var(--ease) both; }
@keyframes grow { from { transform: scaleX(0); } }

/* ---------- кнопки и поля ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: var(--r-btn); border: 0;
  background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none;
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn.block { width: 100%; }
.btn.ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.soft { background: var(--accent-soft); color: var(--accent-ink); }
.btn.ok { background: var(--ok); color: #fff; }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: var(--r-sm); }
.btn svg { width: 18px; height: 18px; }
.btn[disabled] { opacity: .5; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.05); }
  a.card:hover, button.card:hover, .list .item:hover { background: var(--hover); }
}
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions .btn { flex: 1 1 160px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.input, textarea.input, select.input {
  width: 100%; min-height: 48px; padding: 12px 16px; font-size: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctl); outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
textarea.input { min-height: 140px; resize: vertical; line-height: 1.55; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.error-text { color: var(--bad); font-size: 13px; }

/* ---------- приветствие и талисман ---------- */
.hello { display: flex; gap: 12px; align-items: flex-end; }
.mascot { width: 72px; height: 84px; flex: none; animation: bob 6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-2deg); } }
.bubble {
  position: relative; background: var(--card); border-radius: 18px 18px 18px 6px; padding: 12px 16px;
  box-shadow: var(--shadow); font-size: 14px;
}

/* ---------- живой фон главного экрана: прикреплён к верху страницы ---------- */
.shell { position: relative; }
.home-bg {
  position: absolute; inset: 0 0 auto 0; height: min(900px, 130vh); height: min(900px, 130svh); z-index: -1; overflow: hidden; pointer-events: none;
}
.home-bg i { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; animation: drift 48s ease-in-out infinite alternate; will-change: transform; }
.home-bg i:nth-child(1) { top: -55vmax; right: -40vmax; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), 0)); }
.home-bg i:nth-child(2) { top: -30vmax; left: -55vmax; animation-duration: 60s; background: radial-gradient(closest-side, rgba(91, 140, 255, .11), rgba(91, 140, 255, 0)); }
@keyframes drift { to { transform: translate3d(-5vmax, 4vmax, 0) scale(1.06); } }

/* ---------- режим чтения ---------- */
.reader { background: var(--paper); color: var(--paper-ink); border-radius: var(--r-card); padding: clamp(20px, 5vw, 44px); box-shadow: var(--shadow); }
.reader .meta { font-family: var(--f-ui); font-size: 13px; color: var(--paper-ink-2); margin-bottom: 10px; }
.reader h1 { font-family: var(--f-read); font-weight: 500; letter-spacing: 0; margin-bottom: 20px; }
.reader .text { font-family: var(--f-read); font-size: var(--read-size, 18px); line-height: 1.7; max-width: 66ch; }
.reader .text p + p { margin-top: 1em; }
.reader .text h2 { font-family: var(--f-read); font-size: 1.15em; margin: 1.4em 0 .5em; letter-spacing: 0; }
.reader .text blockquote { margin: 1em 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--accent); color: var(--paper-ink-2); }
.norm { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.ask-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.seg { display: inline-flex; background: var(--card-2); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; min-height: 36px; min-width: 40px; padding: 0 10px; border-radius: 9px; font-weight: 700; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- тест ---------- */
.q { padding: 16px; }
.q .num { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }
.opts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--card); text-align: left; min-height: 48px; transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
.opt .mark { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--line); margin-top: 1px; display: grid; place-items: center; }
.opt[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.opt[aria-checked="true"] .mark { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px var(--card); }
.opt.right { border-color: var(--ok); background: var(--ok-bg); }
.opt.wrong { border-color: var(--bad); background: var(--bad-bg); }

/* ---------- билет и голос ---------- */
.ticket { text-align: center; padding: 28px 20px; }
.ticket .no { font-family: var(--f-head); font-size: 48px; color: var(--accent); line-height: 1; }
.timer { font-family: var(--f-head); font-size: 40px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.rec { width: 88px; height: 88px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; margin: 8px auto; box-shadow: 0 10px 30px rgba(var(--accent-rgb), .35); }
.rec svg { width: 34px; height: 34px; }
.rec { position: relative; }
.rec::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(var(--accent-rgb), .22); opacity: 0; pointer-events: none; }
/* пульс записи — кольцо растёт и гаснет (transform и opacity, без перерисовки тени каждый кадр) */
.rec.on::before { animation: pulse 1.6s var(--ease-in-out) infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.32); opacity: 0; } }
audio { width: 100%; margin-top: 8px; }

/* ---------- проверка с пометками ---------- */
.answer-text { font-family: var(--f-read); font-size: 17px; line-height: 1.7; }
mark.note { background: rgba(240, 180, 30, .28); color: inherit; border-radius: 4px; padding: 0 1px; cursor: pointer; }
mark.note.ai { background: none; box-shadow: inset 0 -2px 0 rgba(91, 140, 255, .8); }
mark.note.bad { background: rgba(229, 72, 61, .22); }
.note-card { border-left: 3px solid var(--warn); border-radius: 0; padding: 4px 0 4px 12px; font-size: 14px; }
.note-card.ai { border-left-color: var(--info); }
.crit { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 8px 0; }
.crit + .crit { border-top: 1px solid var(--line); }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper button { width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); font-weight: 700; }
.stepper b { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.grade { font-family: var(--f-head); font-size: 34px; color: var(--accent); }

/* ---------- палитра акцента ---------- */

.switch { position: relative; width: 50px; height: 30px; flex: none; border-radius: 15px; border: 0; background: var(--switch-off); transition: background .2s var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .25s var(--ease); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--on-accent); }

/* ---------- вход: форма по центру, карточки вокруг ---------- */
.auth { position: relative; min-height: 100dvh; overflow: hidden;
  display: grid; place-items: center; padding: calc(20px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.auth .home-bg { height: 100%; }
.auth-center { position: relative; z-index: 2; width: 100%; max-width: 400px; text-align: center; }
.auth-brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-head); font-size: 28px; font-weight: 600; }
.auth-brand img { width: 52px; height: 52px; border-radius: var(--r-ctl); box-shadow: 0 10px 24px -8px rgba(var(--logo-rgb, 242, 92, 59), .55); }
.auth-sub { margin: 8px 0 20px; }
.auth-card { text-align: left; padding: 16px; }
.auth-tabs { display: flex; width: 100%; margin-bottom: 16px; }
.auth-tabs a { flex: 1; text-align: center; min-height: 40px; line-height: 40px; border-radius: 9px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.auth-tabs a.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.pass { position: relative; }
.pass .input { padding-right: 52px; }
.eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; color: var(--ink-2); display: grid; place-items: center; }
.eye svg { width: 20px; height: 20px; }
.linkish { background: none; border: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; min-height: 40px; }
.consent { align-items: flex-start; gap: 12px; text-align: left; }
.consent input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }

.deco { position: absolute; z-index: 1; width: 300px; pointer-events: none; animation: deco-in .5s var(--ease) both; }
@keyframes deco-in { from { opacity: 0; translate: 0 14px; } }
.deco-ege { top: 7%; left: 4%; rotate: -4deg; }
.deco-session { top: 9%; right: 4%; rotate: 3deg; animation-delay: .1s; }
.deco-norm { bottom: 8%; left: 6%; rotate: 2.5deg; animation-delay: .2s; }
.deco-history { bottom: 9%; right: 6%; rotate: -3deg; width: 260px; animation-delay: .3s; }
.hist-date { font-family: var(--f-head); font-size: 22px; color: var(--accent-ink); margin: 4px 0 6px; }
.ege-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
.ege-grid .cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.c2 { background: var(--ok-bg); color: var(--ok); }
.c1 { background: var(--warn-bg); color: var(--warn); }
.c0 { background: var(--bad-bg); color: var(--bad); }
.tickets { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.tickets i { display: block; height: 16px; border-radius: 5px; }
.tickets .c2 { background: var(--ok); } .tickets .c1 { background: #E0A100; } .tickets .c0 { background: var(--switch-off); opacity: .6; }
.norm-text { font-family: var(--f-read); font-size: 17px; line-height: 1.45; margin-top: 6px; }

/* средние экраны: только две карточки по углам, остальные мешали бы форме */
@media (max-width: 1199px) { .deco-session, .deco-norm { display: none; } .deco-ege { top: 4%; left: 3%; } .deco-history { bottom: 5%; right: 3%; } }
/* узкие экраны: форма по центру, одна карточка сверху и одна снизу, наполовину уходят за край */
@media (max-width: 899px) {
  .auth { align-content: center; gap: 0; }
  .deco { width: min(300px, 78vw); }
  .deco-ege { top: calc(-46px + env(safe-area-inset-top)); left: 50%; translate: -50% 0; rotate: -3deg; opacity: .9; }
  .deco-history { bottom: -52px; right: auto; left: 50%; translate: -50% 0; rotate: 2deg; opacity: .9; }
  @keyframes deco-in { from { opacity: 0; } }
  .auth { padding-top: calc(150px + env(safe-area-inset-top)); padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}
.role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-pick button { padding: 12px; border-radius: var(--r-btn); border: 2px solid var(--line); background: var(--card); text-align: left; min-height: 92px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
.choice-list { display: flex; flex-direction: column; gap: 8px; }
.choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 16px; border-radius: var(--r-ctl); border: 2px solid var(--line); background: var(--card); text-align: left; transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
.choice .dot-r { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--line); }
.choice[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.choice[aria-checked="true"] .dot-r { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px var(--card); }
.role-pick button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- пустые состояния, тост ---------- */
.empty { text-align: center; padding: 32px 16px; }
.empty .mascot { margin: 0 auto 12px; }
.toast {
  position: fixed; left: 50%; bottom: calc(12px + max(env(safe-area-inset-bottom), var(--kb, 0px))); z-index: 80;
  --tx: 0px; --ty: 16px;
  transform: translate3d(calc(-50% + var(--tx)), var(--ty), 0); opacity: 0; pointer-events: none;
  max-width: min(420px, calc(100% - 32px)); padding: 12px 16px; border-radius: var(--r-btn);
  background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px; text-align: center;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, .45);
  touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab;
  transition: opacity .25s var(--ease), transform .3s var(--ease);
}
.toast.show { opacity: 1; pointer-events: auto; }
.toast.dragging { transition: none; cursor: grabbing; }
@media (min-width: 1024px) { .toast { bottom: 24px; } }

/* ---------- появление экрана ---------- */
.view { animation: in .32s var(--ease) both; }
@keyframes in { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
.view .stagger > * { animation: in .4s var(--ease) both; }
.view .stagger > *:nth-child(2) { animation-delay: .04s; }
.view .stagger > *:nth-child(3) { animation-delay: .08s; }
.view .stagger > *:nth-child(4) { animation-delay: .12s; }
.view .stagger > *:nth-child(n+5) { animation-delay: .16s; }

.demo-note { font-size: 12px; color: var(--ink-2); text-align: center; margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Навигация: меню-плитка вместо нижней панели (телефон и планшет)
   ===================================================================== */
.menu-btn { position: relative; margin-left: 4px; }
.menu-btn svg { width: 22px; height: 22px; }
@media (min-width: 1024px) { .menu-btn { display: none; } }
.menu-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--card); }

.badge-n {
  position: absolute; top: -7px; right: -11px; min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-grid; place-items: center; border-radius: 10px;
  background: var(--accent); color: var(--on-accent);
  font: 700 11px/1 var(--f-ui); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--card);
}
.tab .dot { position: relative; display: inline-grid; }

.menu-layer {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background: transparent;
  opacity: 0; transition: opacity .2s var(--ease);
}
.menu-layer.open { opacity: 1; transition-duration: .3s; }
.menu-sheet {
  width: min(420px, 100%); background: var(--card); border-radius: var(--r-sheet); padding: 16px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
  transform: translate3d(0, 12px, 0) scale(.96); transition: transform .2s var(--ease); outline: none;
}
.menu-layer.open .menu-sheet { transform: none; transition-duration: .3s; }
.menu-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.menu-top .mascot { width: 42px; height: 50px; }
.menu-top .icon-btn { box-shadow: none; background: var(--card-2); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 92px; padding: 12px 6px; border-radius: 18px; border: 0; background: var(--card-2);
  color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; text-align: center;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.tile:active { transform: scale(.96); }
.tile-ico { position: relative; width: 44px; height: 44px; border-radius: var(--r-ctl); display: grid; place-items: center; background: var(--card); color: var(--accent-ink); }
.tile-ico svg { width: 22px; height: 22px; }
.tile.on { background: var(--accent-soft); }
.tile.on .tile-ico { background: var(--accent); color: var(--on-accent); }
.tile.soon { color: var(--ink-2); }
.tile.soon .tile-ico { color: var(--ink-2); }
.soon-tag { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--card); color: var(--ink-2); }
body.menu-open { overflow: hidden; }
body.msg-menu-open .shell { filter: brightness(.9); }
/* Размываем само приложение за меню, а не «то, что под слоем» (backdrop-filter):
   обычный фильтр сохраняется во время волны смены темы, а backdrop-filter Safari в этот момент терял. */
.shell { transition: filter .25s var(--ease); background: var(--bg); isolation: isolate; }
body.menu-open .shell { filter: blur(8px) brightness(.8) saturate(.9); }


/* =====================================================================
   Чат в стиле Telegram. Экран закреплён, прокручивается только переписка.
   Панель ввода (.chat-dock) не едет вместе с клавиатурой: app.js прячет её на время выезда клавиатуры
   и показывает уже над ней через transform (--dock-y). --dock-lift — место под панель в переписке.
   ===================================================================== */
/* Отступ под полоску жестов нужен только приложению с экрана «Домой». В Safari внизу и так стоит его строка адреса,
   и отступ поднимал панель ввода выше положенного. */
:root { --sab: 0px; }
html.standalone { --sab: env(safe-area-inset-bottom); }
/* Ошибка iOS 26 (WebKit 301108): на экране «Домой» с прозрачным статус-баром окно страницы короче экрана
   на высоту статус-бара, ниже него iOS ничего не рисует — внизу пустая полоса. Если сам документ высотой с экран,
   iOS отдаёт странице весь экран, и закреплённое приложение доходит до низа. 100lvh не даёт документу стать выше экрана. */
html.standalone { height: auto; min-height: min(100lvh, calc(100% + env(safe-area-inset-top))); }
.main.chat-main { display: flex; flex-direction: column; overflow: hidden; max-width: 760px; padding: 0 0 calc(6px + var(--sab)); }
@media (min-width: 1024px) { .main.chat-main { padding: 16px 24px 20px; } }
.main.chat-main > .view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-head {
  position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  transform: translate3d(0, var(--vv-top, 0px), 0);
}
.chat-head .avatar { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }
.chat-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.chat-head b { font-size: 16px; }
.chat-head .menu-btn { box-shadow: none; background: transparent; }
/* мягкий нижний край переписки — градиент поверх (маска на iPhone перерисовывала ленту каждый кадр) */
.chat-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.chat-wrap::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.chat-wrap::after { bottom: 0; height: var(--list-pad, calc(16px + var(--dock-lift, 0px))); background: linear-gradient(rgba(0, 0, 0, 0), var(--bg) 16px); }
.chat {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  padding: calc(var(--head-h, 64px) + 12px) 12px 0;
}
/* Место под панелью ввода — настоящий блок в конце ленты, а не нижний отступ: Safari не учитывает нижний отступ
   при прокрутке, и переписку нельзя было докрутить — последнее сообщение оставалось под панелью. */
/* Лента всегда на 1 px выше окна переписки: тогда её можно потянуть пальцем и она пружинит, как в мессенджерах,
   даже если сообщений мало. Сообщения при этом прижаты к низу. */
.chat-inner { flex: none; min-height: calc(100% + 1px); display: flex; flex-direction: column; }
.chat-inner::after { content: ""; flex: none; height: var(--list-pad, calc(16px + var(--dock-lift, 0px))); }
/* Шапка как в Telegram: полупрозрачная, с размытием; переписка уезжает под неё, а не обрезается краем */
.main.chat-main > .view { position: relative; }
.chat-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  background: rgba(var(--notch-rgb), .74);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 .5px 0 var(--glass-line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .chat-head { background: rgba(var(--notch-rgb), .94); } }
.chat-list { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.chat-empty { margin: auto; text-align: center; display: grid; justify-items: center; gap: 8px; }
.day-sep { display: flex; justify-content: center; margin: 4px 0 8px; }
.day-sep span { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); background: var(--card-2); padding: 4px 12px; border-radius: var(--r-sm); }

.msg {
  position: relative; max-width: min(78%, 520px); padding: 8px 12px; border-radius: 18px;
  background: var(--card); box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
  font-size: 15.5px; line-height: 21px; overflow-wrap: anywhere;
  cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.msg.them { align-self: flex-start; border-bottom-left-radius: 6px; }
.msg.me { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; }
.msg.them + .msg.me, .msg.me + .msg.them { margin-top: 4px; }
.msg.picked { transform: var(--press); filter: brightness(.96); }
/* пока палец удерживает сообщение, оно плавно поджимается — видно, что нажатие «набирается» */
.msg.holding { transform: scale(.96); filter: brightness(.95); transition-duration: .45s; transition-timing-function: ease-out; }
.chat .msg { cursor: default; touch-action: pan-y; }
/* время — в конце последней строки, по её центру */
.msg .meta {
  float: right; height: 21px; margin-left: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; opacity: .62; white-space: nowrap;
}
.msg .meta svg { width: 15px; height: 15px; }
.msg .quote {
  display: flex; flex-direction: column; margin: 0 0 4px; padding: 4px 8px; border-left: 3px solid currentColor;
  border-radius: 4px 8px 8px 4px; background: rgba(127, 127, 127, .12); font-size: 13.5px; line-height: 18px;
}
.msg.them .quote { border-left-color: var(--accent); }
.msg .quote b { font-size: 13px; }
.msg .quote span { opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.chat-dock {
  position: relative; z-index: 2; flex: none;
  transform: translate3d(0, var(--dock-y, 0px), 0);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.chat-dock.is-hidden { opacity: 0; pointer-events: none; transition-duration: .12s; }
.reply-bar { display: flex; align-items: center; gap: 12px; margin: 0 12px 8px; padding: 4px 4px 4px 12px; border-left: 3px solid var(--accent); background: var(--glass-soft); border-radius: 4px var(--r-ctl) var(--r-ctl) 4px; }
.reply-bar[hidden] { display: none; }
.reply-bar > svg { width: 18px; height: 18px; color: var(--accent-ink); flex: none; }
.reply-bar .icon-btn { width: 36px; height: 36px; box-shadow: none; background: none; }
.composer { display: flex; gap: 8px; align-items: center; padding: 0 12px; }
.composer .input {
  border-radius: 22px; min-height: 44px; padding: 10px 16px;
  background: var(--glass-soft); border: 1px solid var(--glass-line);
  transition: border-color .2s var(--ease);
}
.composer .input:focus, .composer .input:focus-visible { border-color: rgba(127, 127, 127, .35); box-shadow: none; outline: none; }
.send { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); transition: transform .2s var(--ease); }
.send:active { transform: scale(.92); }
.send svg { width: 20px; height: 20px; margin-left: -2px; }

/* меню сообщения: открывается за 0,24 с, закрывается быстрее */
.msg-menu-layer { position: fixed; inset: 0; z-index: 70; background: transparent; opacity: 0; transition: opacity .16s var(--ease); }
.msg-menu-layer.open { opacity: 1; transition-duration: .24s; }
.msg-menu {
  position: fixed; min-width: 200px; padding: 6px; border-radius: var(--r-btn); background: var(--card);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .4);
  transform: translate3d(0, -4px, 0) scale(.95); transform-origin: top; transition: transform .16s var(--ease);
}
.msg-menu-layer.open .msg-menu { transform: none; transition-duration: .24s; }
.msg-menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font-weight: 600; text-align: left; }
.msg-menu button svg { width: 20px; height: 20px; color: var(--ink-2); }
.msg-menu button:active { background: var(--card-2); }
@media (hover: hover) and (pointer: fine) { .msg-menu button:hover { background: var(--card-2); } }

/* =====================================================================
   Талисман: моргает и подпрыгивает от нажатия
   ===================================================================== */
.mascot-eyes { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.mascot { cursor: pointer; }
.mascot.jump { animation: jump .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes jump { 30% { transform: translateY(-12px) rotate(-6deg); } 60% { transform: translateY(0) rotate(3deg); } }

/* =====================================================================
   Экран входа на телефоне: без прокрутки, карточка ЕГЭ целиком, дата строкой
   ===================================================================== */
.hist-line { display: none; }
@media (max-width: 899px) {
  html:has(.auth), body:has(.auth) { overscroll-behavior: none; }
  .auth {
    min-height: 0; height: 100dvh; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px;
    padding: calc(12px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));
  }
  .deco { position: static; translate: none !important; rotate: none !important; opacity: 1; width: 100%; max-width: 400px; }
  .deco-session, .deco-norm, .deco-history { display: none !important; }
  .deco-ege { padding: 12px 14px; }
  .deco-ege .ege-grid { gap: 4px; }
  .deco-ege .ege-grid .cell { font-size: 10px; border-radius: 6px; }
  .auth-center { flex: none; }
  .auth-brand { font-size: 24px; } .auth-brand img { width: 44px; height: 44px; }
  .auth-sub { margin: 4px 0 12px; }
  .hist-line { display: block; font-size: 12px; color: var(--ink-2); text-align: center; flex: none; }
  .auth.signup { height: auto; min-height: 100dvh; overflow: visible; justify-content: flex-start; }
  .auth.signup .deco-ege { display: none; }
}
@media (max-width: 899px) and (max-height: 700px) { .deco-ege { display: none; } }

/* Смена темы: волна от кнопки (основной вариант) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
/* Запасной вариант для старых браузеров: все цвета перетекают одновременно и медленно */
html.theme-fade, html.theme-fade body, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color .8s var(--ease-in-out), color .8s var(--ease-in-out), border-color .8s var(--ease-in-out),
    fill .8s var(--ease-in-out), stroke .8s var(--ease-in-out), box-shadow .8s var(--ease-in-out) !important;
}

/* =====================================================================
   Верх экрана. Зону под «чёлкой» Safari в светлой теме красит в белый сам, и это не изменить.
   Поэтому приложение начинается тем же белым и плавно перетекает в свой фон:
   --top-glow — мягкое свечение фона высотой с шапку (кривая без ступенек, а не прямая линия);
   .status-fill — сплошной цвет под самой «чёлкой» (по нему Safari берёт цвет);
   .top-veil — короткая вуаль у края: прокручиваемое содержимое растворяется в белом, а не обрезается,
   и под открытым меню переход от белой «чёлки» к приглушённому экрану остаётся мягким.
   В тёмной теме --notch равен фону: свечения нет, вуаль лишь мягко прячет край.
   ===================================================================== */
:root { --notch-rgb: 255, 255, 255; }
:root[data-theme="dark"] { --notch-rgb: 20, 22, 31; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --notch-rgb: 20, 22, 31; } }
:root {
  --notch: rgb(var(--notch-rgb));
  --scrim: rgba(var(--notch-rgb), 1) 0%, rgba(var(--notch-rgb), .738) 19%, rgba(var(--notch-rgb), .541) 34%,
    rgba(var(--notch-rgb), .382) 47%, rgba(var(--notch-rgb), .278) 56.5%, rgba(var(--notch-rgb), .194) 65%,
    rgba(var(--notch-rgb), .126) 73%, rgba(var(--notch-rgb), .075) 80.2%, rgba(var(--notch-rgb), .042) 86.1%,
    rgba(var(--notch-rgb), .021) 91%, rgba(var(--notch-rgb), .008) 95.2%, rgba(var(--notch-rgb), .002) 98.2%, rgba(var(--notch-rgb), 0) 100%;
  /* Под «чёлкой» и ещё 24 px ниже — чистый белый, как сама «чёлка». Дальше белый постепенно теплеет до едва
     кремового и одновременно растворяется в фоне по мягкой кривой: чем выше, тем белее, без ступенек и границ.
     --glow-0 — где кончается чистый белый, --glow-h — длина перехода. */
  --glow-0: calc(env(safe-area-inset-top) + 24px);
  --glow-h: 380px;
  --glow-img: linear-gradient(#fff 0, #fff var(--glow-0),
    rgba(255, 252, 246, .738) calc(var(--glow-0) + var(--glow-h) * .19),
    rgba(255, 250, 242, .541) calc(var(--glow-0) + var(--glow-h) * .34),
    rgba(255, 250, 242, .382) calc(var(--glow-0) + var(--glow-h) * .47),
    rgba(255, 250, 242, .278) calc(var(--glow-0) + var(--glow-h) * .565),
    rgba(255, 250, 242, .194) calc(var(--glow-0) + var(--glow-h) * .65),
    rgba(255, 250, 242, .126) calc(var(--glow-0) + var(--glow-h) * .73),
    rgba(255, 250, 242, .075) calc(var(--glow-0) + var(--glow-h) * .802),
    rgba(255, 250, 242, .042) calc(var(--glow-0) + var(--glow-h) * .861),
    rgba(255, 250, 242, .021) calc(var(--glow-0) + var(--glow-h) * .91),
    rgba(255, 250, 242, .008) calc(var(--glow-0) + var(--glow-h) * .952),
    rgba(255, 250, 242, .002) calc(var(--glow-0) + var(--glow-h) * .982),
    rgba(255, 250, 242, 0) calc(var(--glow-0) + var(--glow-h)));
  --top-glow: var(--glow-img) 0 0 / 100% calc(var(--glow-0) + var(--glow-h)) no-repeat;
}
/* В тёмной теме «чёлка» тёмная — свечения нет */
:root[data-theme="dark"] { --glow-img: linear-gradient(transparent, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glow-img: linear-gradient(transparent, transparent); } }
/* Цветные пятна фона (главная, вход) лежат поверх фона и красили верх в розовый. Поверх них — тот же переход,
   поэтому у «чёлки» всё равно чистый белый, а пятна проявляются ниже. */
.home-bg::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: calc(var(--glow-0) + var(--glow-h));
  background: var(--glow-img); pointer-events: none;
}
#app.app, .shell { background: var(--top-glow), var(--bg); }
.status-fill {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; pointer-events: none;
  height: max(1px, env(safe-area-inset-top)); background-color: var(--notch);
  transition: background-color var(--tint-dur, .25s) var(--ease);
}
.top-veil {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55; pointer-events: none;
  height: calc(env(safe-area-inset-top) + 12px); background: linear-gradient(var(--scrim));
}
body.no-filter-anim .shell, body.no-filter-anim .status-fill { transition: none !important; }

/* Палитра репетитора в профиле */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px 6px; }
.swatch {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  font-size: 12px; font-weight: 600; color: var(--ink-2); min-height: 72px;
}
.swatch i {
  position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 25%, color-mix(in srgb, var(--c) 72%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 80%, #000) 100%);
  background-color: var(--c);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(127, 127, 127, .25), 0 6px 14px -6px var(--c);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) { .swatch i { background: var(--c); } }
.swatch i svg { width: 20px; height: 20px; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .25s var(--ease), transform .35s var(--ease); }
.swatch[aria-checked="true"] i { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--c), 0 8px 18px -6px var(--c); }
.swatch[aria-checked="true"] i svg { opacity: 1; transform: none; }
.swatch[aria-checked="true"] span { color: var(--ink); }
.swatch:active i { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .swatch:hover i { transform: translateY(-2px); } }
.accent-preview {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 14px;
  border-radius: var(--r-btn); background: var(--card-2);
}
.accent-preview .msg { cursor: default; box-shadow: none; }
.accent-preview .btn { margin-left: auto; pointer-events: none; }

/* =====================================================================
   Приложение закреплено на экране: страница целиком не листается и не «отскакивает»,
   прокручивается только содержимое экрана. Клавиатура его не сжимает и не двигает:
   под неё внизу прокрутки добавляется место (--kb), чтобы поле ввода можно было докрутить.
   ===================================================================== */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; width: 100%; }
#app.app { position: absolute; inset: 0; min-height: 0; overflow: hidden; }
.shell { height: 100%; min-height: 0; }
.main { height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; position: relative; isolation: isolate; }
.main.chat-main { overflow: hidden; }
#app > .view { height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.main:not(.chat-main)::after, #app > .view::after { content: ""; display: block; height: var(--kb, 0px); }
@media (min-width: 1024px) { .sidebar { height: 100%; position: relative; } }
.auth { min-height: 100%; }
@media (max-width: 899px) { .auth { height: 100%; } .auth.signup { height: auto; min-height: 100%; } }

/* Долгое нажатие: без всплывающего предпросмотра ссылок и меню «Скопировать/Поделиться» у интерфейса */
* { -webkit-touch-callout: none; }
a, img, svg, button { -webkit-user-drag: none; user-drag: none; }
input, textarea { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; }

/* =====================================================================
   Отклик и состояния: нажатие (active) везде, наведение — только для мыши, disabled, зоны нажатия 44 px
   ===================================================================== */
.list .item, a.card, button.card, .icon-btn, .seg button, .auth-tabs a, .stepper button, .tab, .linkish, .eye, .pill[data-add] {
  transition: background-color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.list .item:active, a.card:active, button.card:active { background: var(--hover); }
a.card:active, button.card:active, .opt:active, .choice:active, .role-pick button:active { transform: scale(.985); }
.icon-btn:active, .stepper button:active, .pill[data-add]:active { transform: scale(.94); }
.seg button:active, .auth-tabs a:active { transform: var(--press); }
.linkish:active, .eye:active, .norm:active, .tab:active { opacity: .6; }
.switch:active::after { transform: scale(.92); }
.switch[aria-checked="true"]:active::after { transform: translateX(20px) scale(.92); }
.opt[data-locked], [data-locked] .opt { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover, .stepper button:hover { background: var(--hover); }
  .seg button:hover:not([aria-pressed="true"]), .auth-tabs a:hover:not(.on) { color: var(--ink); }
  .opt:hover, .choice:hover, .role-pick button:hover { border-color: rgba(var(--accent-rgb), .45); }
  .tile:hover { background: var(--hover); }
  .tile.on:hover { background: var(--accent-soft); }
  .sidebar .tab:hover { background: var(--hover); }
  .sidebar .tab[aria-current="page"]:hover { background: var(--accent-soft); }
  .linkish:hover { color: var(--ink); }
  .send:hover { filter: brightness(1.05); }
}
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; pointer-events: none; }
button:disabled { cursor: default; }

/* маленькие элементы: видимый размер прежний, зона нажатия расширена до 44 px */
.btn.small, .seg button, .auth-tabs a, .linkish, .reply-bar .icon-btn, .pill[data-add], .norm { position: relative; }
.btn.small::after, .seg button::after, .auth-tabs a::after, .linkish::after, .reply-bar .icon-btn::after, .pill[data-add]::after {
  content: ""; position: absolute; inset: -6px -2px;
}
.norm::after { content: ""; position: absolute; inset: -10px -4px; }
.seg button { min-height: 40px; }
.swatch { min-width: 44px; }
.switch::before { content: ""; position: absolute; inset: -8px -2px; }
a.avatar { position: relative; }
a.avatar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.section > .head a { position: relative; }
.section > .head a::after { content: ""; position: absolute; inset: -12px -8px; }

/* Выбор цвета значка в профиле */
.logo-pick { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.logo-pick .logo-big { width: 56px; height: 56px; flex: none; border-radius: 13px; box-shadow: 0 10px 24px -8px rgba(var(--logo-rgb, 242, 92, 59), .55); transition: box-shadow .4s var(--ease); }
.logo-big.pop { animation: logo-pop .45s var(--ease); }
@keyframes logo-pop { 40% { transform: scale(.9); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .logo-big.pop { animation: none; } }

/* =====================================================================
   Чтобы ощущалось как приложение, а не как сайт
   ===================================================================== */
/* Текст интерфейса не выделяется долгим нажатием. Выделять можно только поля ввода и текст урока. */
body { -webkit-user-select: none; user-select: none; }
.reader .text { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* Щипок и двойное нажатие не масштабируют экран: разрешена только прокрутка */
.app { touch-action: pan-x pan-y; }
/* Нажатие проявляется с задержкой 70 мс: если палец начал листать, кнопка под ним не мигает.
   Отпускание — сразу. */
:is(.btn, .list .item, a.card, button.card, .icon-btn, .seg button, .auth-tabs a, .stepper button, .tab, .tile,
  .opt, .choice, .role-pick button, .swatch, .send, a.avatar, .pill[data-add]):active { transition-delay: 70ms; }
/* Пока грузятся шрифты, приложение скрыто, затем мягко проявляется */
html.fonts-wait #app { opacity: 0; }
#app { transition: opacity .3s var(--ease); }

/* ИИ-экзаменатор на экране билета */
.exam { text-align: left; display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.exam .actions { margin-top: 2px; }
.exam-alt { text-align: center; }
.exam-mine { padding: 10px 14px; border-radius: var(--r-ctl); background: var(--card-2); }
.exam-mine summary { cursor: pointer; list-style: none; }
.exam-mine summary::-webkit-details-marker { display: none; }
.exam-mine p { margin-top: 8px; white-space: pre-wrap; }
.exam-q { display: flex; gap: 12px; align-items: flex-start; animation: in .32s var(--ease) both; }
.exam-q .mascot { width: 36px; height: 42px; flex: none; animation: none; }
.exam-q > div { padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--card-2); }
.exam-a { align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: var(--accent); color: var(--on-accent); white-space: pre-wrap; animation: in .32s var(--ease) both; }
.exam-reply { display: flex; flex-direction: column; gap: 10px; animation: in .32s var(--ease) both; }
.exam-err { padding: 12px 14px; border-radius: var(--r-ctl); background: var(--bad-bg); color: var(--bad); }
.exam-err .actions { margin-top: 8px; }
.exam-result { animation: in .4s var(--ease) both; box-shadow: none; background: var(--card-2); }
.exam-list { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.exam-list.good li::marker { color: var(--ok); }
.exam-list.missed li::marker { color: var(--bad); }
.dots { display: flex; gap: 5px; height: 21px; align-items: center; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); animation: dot 1.2s var(--ease-in-out) infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* Код доступа к ИИ в профиле */
.ai-status { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* Строки списков: текст занимает всё место, стрелка и метки — у правого края */
.grow, .list .item .grow { flex: 1; min-width: 0; }

/* Компьютер: прокручивается вся область справа от боковой панели, а колонка текста стоит по центру.
   Так цветной фон главного экрана тянется на всю ширину и не обрезается прямоугольником по краям колонки. */
@media (min-width: 1024px) {
  .main:not(.chat-main) { max-width: none; padding: 32px max(40px, calc((100% - 760px) / 2)) 48px; }
  .main.wide:not(.chat-main) { padding-inline: max(40px, calc((100% - 1080px) / 2)); }
  /* низ цветного фона мягко растворяется, без ровной границы */
  .home-bg { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
}