/* Мини-приложение: расписание, домашка, дедлайны, уведомления.
   Цвета берутся у Telegram (--tg-theme-*), поэтому светлая и тёмная темы работают сами. */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg2: var(--tg-theme-secondary-bg-color, #f1f2f6);
  --card: var(--tg-theme-section-bg-color, var(--bg));
  --text: var(--tg-theme-text-color, #14161a);
  --hint: var(--tg-theme-hint-color, #868c98);
  --link: var(--tg-theme-link-color, #2b7fe0);
  --accent: var(--tg-theme-button-color, #2f8cf0);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --danger: var(--tg-theme-destructive-text-color, #e5484d);
  --line: color-mix(in srgb, var(--text) 9%, transparent);
  --soft: color-mix(in srgb, var(--text) 5%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --lecture: #2fb457;
  --practice: #f59e0b;
  --lab: #a855f7;
  --seminar: #0ea5e9;
  --other: #8a90a0;
  --k: var(--other);
  --green: #2fb457;
  --yellow: #f59e0b;
  --red: #e5484d;
  --radius: 20px;
  --tab-h: 58px;
  --safe-top: var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --content-top: calc(var(--safe-top) + var(--tg-content-safe-area-inset-top, 0px));
  --shadow: 0 1px 2px rgba(20, 22, 30, .04), 0 6px 20px rgba(20, 22, 30, .05);
  /* «чернила» видов занятий: тёмнее на светлой теме, светлее на тёмной — чтобы текст тегов читался */
  --lecture-ink: #178a40; --practice-ink: #a15f00; --lab-ink: #7a3fd6; --seminar-ink: #0a6fa8;
  color-scheme: light dark;
}
:root[data-scheme="dark"] {
  --shadow: 0 0 0 1px rgba(255, 255, 255, .05);
  --lecture-ink: #62d891; --practice-ink: #f5b64e; --lab-ink: #c6a0ff; --seminar-ink: #62c8f7;
}
.k-lecture { --k: var(--lecture); } .k-practice { --k: var(--practice); } .k-lab { --k: var(--lab); } .k-seminar { --k: var(--seminar); }
button, a, [role=button] { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tabular, .ltime, .wd b, .range { font-variant-numeric: tabular-nums; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg2); color: var(--text); }
body {
  font: 400 15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none; overflow: hidden;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
b, strong { font-weight: 650; }
.hidden { display: none !important; }

/* ───────── каркас ───────── */
.app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg2); }
.screen { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: var(--content-top) 0 calc(var(--tab-h) + var(--safe-bottom) + 24px); scroll-behavior: smooth; }
/* backwards, а не both: после показа WebKit оставляет у .page «пустой» transform, и position:fixed внутри (FAB «+») считает страницу, а не экран */
.page { padding: 0 14px; max-width: 640px; margin: 0 auto; animation: rise .22s ease backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.boot { margin: auto; text-align: center; color: var(--hint); }
.boot-logo { font-size: 56px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }

.topbar { display: flex; align-items: center; gap: 8px; padding: 14px 2px 8px; }
.topbar h1 { margin: 0; font-size: 27px; line-height: 1.12; font-weight: 800; letter-spacing: -.6px; flex: 1; min-width: 0; }
.topbar h1 small { display: block; font-size: 13px; font-weight: 550; color: var(--hint); letter-spacing: 0; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar.compact { gap: 6px; padding-top: 12px; }
.topbar.compact h1 { font-size: 21px; letter-spacing: -.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar.compact h1 small { font-size: 12.5px; }
.iconbtn { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--card);
  box-shadow: var(--shadow); color: var(--text); flex: none; transition: transform .12s; }
.topbar.compact .iconbtn { width: 36px; height: 36px; border-radius: 12px; }
.iconbtn:active { transform: scale(.92); }
.iconbtn.on { color: #f5b301; }
.iconbtn svg, .tab svg, .ico svg, .tag svg, .teacher svg, .addhw svg, .hw-ic svg, .art svg { fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.iconbtn svg, .tab svg, .ico svg { width: 22px; height: 22px; }
.iconbtn.on svg { fill: currentColor; }

/* ───────── нижняя панель ───────── */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; padding: 0 6px var(--safe-bottom);
  background: var(--bg); border-top: 1px solid var(--line); }
.tab { flex: 1; height: var(--tab-h); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 8px;
  gap: 4px; color: var(--hint); font-size: 10.5px; font-weight: 650; position: relative; isolation: isolate; transition: color .15s; }
.tab::before { content: ""; position: absolute; left: 50%; top: 5px; width: 54px; height: 30px; margin-left: -27px; border-radius: 15px;
  background: transparent; z-index: -1; transition: background .2s; }
.tab.active { color: var(--accent); }
.tab.active::before { background: var(--accent-soft); }
.tab .badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--red); color: #fff; font-size: 10px; display: grid; place-items: center; }

/* ───────── карточки и списки ───────── */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin: 10px 0; overflow: hidden; }
.card.pad { padding: 14px; }
.card-title { font-size: 13px; font-weight: 650; color: var(--hint); text-transform: uppercase; letter-spacing: .5px; margin: 18px 4px 6px; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 52px; }
.row + .row { border-top: 1px solid var(--line); }
.row .grow { flex: 1; min-width: 0; }
.row .sub { color: var(--hint); font-size: 13px; }
.row .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.row .ico svg { width: 18px; height: 18px; }
.row.tap { width: 100%; text-align: left; transition: background .12s; }
.row.tap:active { background: var(--soft); }
.muted { color: var(--hint); }
.small { font-size: 13px; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ───────── кнопки ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 14px;
  font-weight: 650; background: var(--accent); color: var(--accent-text); transition: transform .12s, opacity .15s; }
.btn:active { transform: scale(.97); }
.btn.block { width: 100%; }
.btn.soft { background: var(--accent-soft); color: var(--accent); }
.btn.ghost { background: var(--soft); color: var(--text); }
.btn.danger { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--danger); }
.btn.small { height: 34px; padding: 0 14px; font-size: 14px; border-radius: 11px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.fab { position: fixed; right: 18px; bottom: calc(var(--tab-h) + var(--safe-bottom) + 16px); z-index: 15; width: 56px; height: 56px;
  border-radius: 20px; background: var(--accent); color: var(--accent-text); display: grid; place-items: center;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent); transition: transform .15s;
  animation: fabin .36s .12s cubic-bezier(.2, .9, .3, 1.25) backwards; }
.fab:active { transform: scale(.92); }
.fab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@keyframes fabin { from { opacity: 0; transform: scale(.55) translateY(12px); } }
@media (min-width: 700px) { .fab { right: max(18px, calc(50% - 320px + 20px)); } }

/* ───────── переключатели, чипы ───────── */
.seg { display: flex; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--text) 8%, transparent); gap: 2px; }
.seg button { flex: 1; height: 34px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--hint); transition: all .15s; }
.seg button.active { background: var(--card); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px; border-radius: 17px; background: var(--soft);
  font-weight: 600; font-size: 14px; white-space: nowrap; flex: none; transition: all .15s; }
.chip.active { background: var(--accent); color: var(--accent-text); }
.chip.tiny { height: 22px; padding: 0 8px; font-size: 12px; border-radius: 11px; font-weight: 600; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--soft);
  color: var(--hint); font-size: 12px; font-weight: 600; white-space: nowrap; max-width: 100%; }
.tag.k-lecture { background: color-mix(in srgb, var(--lecture) 16%, transparent); color: var(--lecture-ink); }
.tag.k-practice { background: color-mix(in srgb, var(--practice) 18%, transparent); color: var(--practice-ink); }
.tag.k-lab { background: color-mix(in srgb, var(--lab) 16%, transparent); color: var(--lab-ink); }
.tag.k-seminar { background: color-mix(in srgb, var(--seminar) 18%, transparent); color: var(--seminar-ink); }
.tag.accent { background: var(--accent-soft); color: var(--accent); }
.tag.red { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }

.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; z-index: 1; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 16px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3); transition: transform .2s cubic-bezier(.3, .8, .4, 1); }
.switch input:checked + i { background: var(--green); }
.switch input:checked + i::after { transform: translateX(20px); }

/* ───────── расписание ───────── */
.weekbar { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; }
.weekbar .range { flex: 1; text-align: center; font-weight: 700; font-size: 14px; }
.weekbar .range small { display: block; color: var(--hint); font-weight: 500; font-size: 12px; min-height: 15px; }
.weekbar .iconbtn { width: 34px; height: 34px; border-radius: 11px; box-shadow: none; background: var(--soft); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 4px 0 2px; padding: 5px; border-radius: 22px;
  background: var(--card); box-shadow: var(--shadow); }
.wd { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; border-radius: 17px; background: transparent;
  transition: background .18s, transform .12s; position: relative; }
.wd:active { transform: scale(.94); }
.wd span { font-size: 10.5px; color: var(--hint); font-weight: 650; text-transform: uppercase; letter-spacing: .3px; }
.wd b { font-size: 17px; line-height: 1.15; }
.wd.sat span, .wd.sun span { color: var(--red); opacity: .8; }
.wd.today b { color: var(--accent); }
.wd.active { background: var(--accent); }
.wd.active span, .wd.active b { color: var(--accent-text); opacity: 1; }
.dots { display: flex; gap: 3px; height: 5px; align-items: center; justify-content: center; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--hint); opacity: .5; }
.dots i.dh { background: var(--accent); opacity: 1; }
.dots i.dd { background: var(--red); opacity: 1; }
.wd.active .dots i { background: var(--accent-text); opacity: .9; }

.dayhead { display: flex; align-items: flex-start; gap: 8px; margin: 16px 2px 10px; }
.dh-text { flex: 1; min-width: 0; }
.dayhead h2 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -.3px; }
.dh-sum { color: var(--hint); font-size: 13px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dayhead .tag { margin-top: 3px; flex: none; }
.viewing { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); color: var(--accent); border-radius: 14px;
  padding: 9px 12px; margin: 6px 0; font-weight: 600; font-size: 14px; }
.viewing button { margin-left: auto; font-weight: 700; color: var(--accent); }

/* «герой» дня: что идёт сейчас / что дальше */
.hero-card { position: relative; overflow: hidden; border-radius: 24px; padding: 16px 18px 15px; margin: 4px 0 14px; color: var(--accent-text);
  background: var(--accent); box-shadow: var(--shadow); }
.hero-card::after { content: ""; position: absolute; right: -34px; top: -44px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.hero-card > * { position: relative; z-index: 1; }
.hc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 700; }
.hc-label { display: inline-flex; align-items: center; gap: 7px; text-transform: uppercase; letter-spacing: .6px; opacity: .92; }
.hc-sub { opacity: .94; text-align: right; font-variant-numeric: tabular-nums; }
.live { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse2 1.3s infinite; }
.hc-big { font-size: 23px; line-height: 1.18; font-weight: 800; letter-spacing: -.4px; margin: 9px 0 3px; overflow-wrap: anywhere; }
.hc-meta { opacity: .92; font-size: 14px; }
.hc-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .3); margin-top: 13px; overflow: hidden; }
.hc-bar i { display: block; height: 100%; border-radius: 3px; background: currentColor; transition: width .6s ease; }
.hc-foot { margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .24); font-size: 13.5px; font-weight: 600; }
.hero-card.h-done { background: var(--card); color: var(--text); }
.hero-card.h-done::after { display: none; }
.hero-card.h-done .hc-label, .hero-card.h-done .hc-sub { color: var(--hint); }

/* таймлайн дня */
.lesson, .gap { display: grid; grid-template-columns: 42px 16px minmax(0, 1fr); column-gap: 8px; }
.lesson { padding: 5px 0; animation: rise .25s ease both; }
.ltime { text-align: right; padding-top: 14px; line-height: 1.2; }
.ltime b { display: block; font-size: 15px; font-weight: 750; }
.ltime span { color: var(--hint); font-size: 12px; }
.rail { position: relative; }
.rail::before { content: ""; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--line); }
.lesson.is-first .rail::before { top: 20px; }
.lesson.is-last .rail::before { bottom: auto; height: 25px; }
.lesson.is-first.is-last .rail::before { display: none; }
.rail i { position: absolute; left: 50%; top: 14px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--k, var(--other)); box-shadow: 0 0 0 4px var(--bg2); }
.lesson.now .rail i { box-shadow: 0 0 0 4px var(--bg2), 0 0 0 7px var(--accent-soft); }
.lesson.past .ltime b, .lesson.past .ltime span { color: var(--hint); }
.lesson.past .lcard { opacity: .6; }
.gap { align-items: center; min-height: 32px; }
.gap .rail::before { width: 0; background: none; border-left: 2px dashed var(--line); margin-left: -1px; }
.gap-text { color: var(--hint); font-size: 12.5px; font-weight: 600; padding: 4px 0; }

.lcard { position: relative; min-width: 0; padding: 13px 14px; border-radius: 20px; background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.lesson.now .lcard { border-color: var(--k); }
.lcard .num { position: absolute; right: 12px; top: 10px; font-size: 11px; font-weight: 700; color: var(--hint); }
.lcard h3 { margin: 0 52px 7px 0; font-size: 16.5px; line-height: 1.25; font-weight: 700; letter-spacing: -.1px; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag.ic { gap: 4px; padding: 0 9px 0 7px; }
.tag svg { width: 12px; height: 12px; stroke-width: 2.3; }
.teacher { margin-top: 9px; color: var(--hint); font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.teacher svg { width: 15px; height: 15px; flex: none; }
.groups { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.now-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 12px; font-weight: 700; color: var(--k); }
.now-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k); animation: pulse2 1.2s infinite; }
@keyframes pulse2 { 50% { opacity: .25; } }
.progress { height: 4px; border-radius: 2px; background: var(--soft); margin-top: 11px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--k); border-radius: 2px; }
.hw { display: flex; gap: 9px; align-items: flex-start; margin-top: 11px; padding: 10px 8px 10px 10px; border-radius: 15px; background: var(--soft); }
.hw-ic { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.hw-ic svg { width: 15px; height: 15px; }
.hw .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.hw .by { color: var(--hint); font-size: 12px; margin-top: 3px; }
.hw .more { color: var(--hint); width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; margin: -3px -2px 0 0; }
.hw .more svg { width: 18px; height: 18px; }
.addhw { margin-top: 11px; height: 34px; padding: 0 13px 0 10px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 650;
  font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; transition: transform .12s; }
.addhw:active { transform: scale(.96); }
.addhw svg { width: 16px; height: 16px; stroke-width: 2.4; }
.alert-card { display: flex; gap: 10px; align-items: flex-start; border-radius: 16px; padding: 11px 13px; margin: 8px 0; }
.alert-card.red { background: color-mix(in srgb, var(--red) 12%, transparent); }
.alert-card.event { background: color-mix(in srgb, var(--lab) 12%, transparent); }
.alert-card .em { font-size: 20px; line-height: 1.1; }
.empty { text-align: center; padding: 38px 24px; color: var(--hint); }
.empty .big { font-size: 46px; margin-bottom: 8px; }
.empty b { display: block; color: var(--text); font-size: 18px; font-weight: 750; margin-bottom: 5px; }
.art { width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 28px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); }
.art svg { width: 38px; height: 38px; stroke-width: 1.8; }

/* ───────── домашка, дедлайны ───────── */
.item { display: flex; gap: 12px; padding: 13px 14px; position: relative; }
.item + .item { border-top: 1px solid var(--line); }
.item .stripe { width: 4px; border-radius: 2px; align-self: stretch; background: var(--other); flex: none; }
.item .stripe.red { background: var(--red); } .item .stripe.yellow { background: var(--yellow); } .item .stripe.green { background: var(--green); }
.item .body { flex: 1; min-width: 0; }
.item .t { font-weight: 650; overflow-wrap: anywhere; }
.item .d { color: var(--text); margin-top: 2px; overflow-wrap: anywhere; white-space: pre-wrap; }
.item .foot { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--hint); font-size: 12.5px; flex-wrap: wrap; }
.avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex: none; }
.more { color: var(--hint); width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; align-self: flex-start; margin: -4px -6px 0 0; }
.more:active { background: var(--soft); }
.more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ───────── домашка: краски предметов и срочность ─────────
   Предмет красится устойчивым хешем названия в одну из восьми красок (app.js: subjectTone → класс .sub-N задаёт --m).
   Цвет предмета отвечает на «по чему задание»; срочность — чип срока (.due.red / .yellow), вид занятия — теги .k-*. */
:root {
  --sub-0: #4f83f0; --sub-1: #8b6cf2; --sub-2: #c456d8; --sub-3: #e5589a;
  --sub-4: #ee8532; --sub-5: #7aae2a; --sub-6: #19a58f; --sub-7: #1fa3cf;
  --red-ink: #b4232a; --yellow-ink: #8a5700; --green-ink: #167a3a;      /* «чернила» срочности: текст на тонированной плашке */
}
:root[data-scheme="dark"] { --red-ink: #ff8b90; --yellow-ink: #f7c15a; --green-ink: #62d891; }
.sub-0 { --m: var(--sub-0); } .sub-1 { --m: var(--sub-1); } .sub-2 { --m: var(--sub-2); } .sub-3 { --m: var(--sub-3); }
.sub-4 { --m: var(--sub-4); } .sub-5 { --m: var(--sub-5); } .sub-6 { --m: var(--sub-6); } .sub-7 { --m: var(--sub-7); }
/* чип срока: красный — сегодня, янтарный — завтра, дальше нейтральный; смысл дублирует текст («сегодня 12:40»), а не один цвет */
.due { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: 12px; background: var(--soft); color: var(--text);
  font-size: 12.5px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.due svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.due.red { color: var(--red-ink); } .due.yellow { color: var(--yellow-ink); }
.due-left { color: var(--hint); font-size: 12.5px; font-weight: 550; font-variant-numeric: tabular-nums; }

/* ───────── домашка: список ───────── */
.hw-sec { display: flex; align-items: center; gap: 8px; margin: 26px 4px 11px; }
.hw-group:first-child .hw-sec { margin-top: 16px; }
.hw-sec .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hint); opacity: .5; flex: none; }
.hw-sec.today .dot { background: var(--red); opacity: 1; } .hw-sec.tomorrow .dot { background: var(--yellow); opacity: 1; }
.hw-sec h2 { margin: 0; font-size: 19px; line-height: 24px; font-weight: 800; letter-spacing: -.3px; }
.hw-sec .rng { min-width: 0; color: var(--hint); font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-sec .cnt, .pend-hd .cnt { flex: none; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 12px; display: inline-grid; place-items: center;
  background: var(--soft); color: var(--hint); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hw-sec .cnt { margin-left: auto; }
.hwl { display: flex; flex-direction: column; gap: 10px; }
.item.hw { --m: var(--other); --m-ink: var(--text); gap: 12px; padding: 14px 8px 13px 13px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); box-shadow: var(--shadow); animation: rise .3s ease both; animation-delay: calc(var(--i, 0) * 34ms); }
.item.hw .stripe { background: var(--m); }
.item.hw .hd { display: flex; align-items: flex-start; gap: 4px; }
.item.hw .t { flex: 1; min-width: 0; font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -.1px; color: var(--m-ink); }
.item.hw .hd .more { width: 44px; height: 44px; margin: -11px -6px -11px 0; border-radius: 14px; }
.item.hw .meta2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; }
.item.hw .d { margin-top: 9px; font-size: 15px; line-height: 1.42; }
.item.hw .note { display: flex; gap: 8px; align-items: flex-start; margin-top: 9px; padding: 8px 10px; border-radius: 12px; background: var(--soft); color: var(--hint);
  font-size: 13.5px; line-height: 1.38; overflow-wrap: anywhere; white-space: pre-wrap; }
.item.hw .note svg { width: 15px; height: 15px; flex: none; margin-top: 1.5px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.item.hw .foot { margin-top: 11px; }
.foot .who { font-weight: 600; }
.foot .when::before { content: "·"; margin-right: 6px; }
.fab-gap { height: 84px; }
.hw-skel .sk-h { width: 46%; height: 22px; margin: 18px 4px 12px; border-radius: 8px; }
.hw-skel .sk-c { height: 118px; margin: 10px 0; border-radius: 20px; }
.seg button .n { display: inline-block; min-width: 20px; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: 9px; background: var(--soft); color: var(--hint);
  font-size: 12px; font-weight: 700; line-height: 18px; vertical-align: 1px; font-variant-numeric: tabular-nums; }
.seg button.active .n { background: var(--accent-soft); color: var(--accent); }

/* «Ждёт расписания»: запись есть, пары по предмету в расписании пока нет; пунктирная полоска — «ещё не легло на пару» */
.pend { margin-top: 28px; padding: 14px 12px 12px; border-radius: 24px; background: var(--soft); }
.pend-hd { display: flex; align-items: flex-start; gap: 12px; padding: 0 4px 12px; }
.pend-hd .tile { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--card); color: var(--yellow-ink); }
.pend-hd .tile svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pend-hd h2 { margin: 1px 0 0; display: flex; align-items: center; gap: 8px; font-size: 17px; line-height: 22px; font-weight: 800; letter-spacing: -.2px; }
.pend-hd p { margin: 4px 0 0; color: var(--hint); font-size: 13px; line-height: 1.38; }
.pend .item.hw .stripe { background: repeating-linear-gradient(180deg, var(--m) 0 6px, transparent 6px 10px); }

/* ───────── домашка: лента ───────── */
.feed-day { margin: 24px 4px 10px; font-size: 13px; font-weight: 700; color: var(--hint); text-transform: uppercase; letter-spacing: .5px; }
.feed-day:first-child { margin-top: 16px; }
.item.hw.dl { --m: var(--red); --m-ink: var(--red-ink); }
.item.hw .t .kind { width: 16px; height: 16px; margin: -3px 6px -3px 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* тонированные карточки и чипы — только там, где есть color-mix(); в старых WebView остаются простые светлые карточки */
@supports (color: color-mix(in srgb, red, blue)) {
  .item.hw { --m-ink: color-mix(in srgb, var(--m) 70%, var(--text)); background: color-mix(in srgb, var(--m) 6%, var(--card)); border-color: color-mix(in srgb, var(--m) 20%, transparent); }
  :root[data-scheme="dark"] .item.hw { background: color-mix(in srgb, var(--m) 10%, var(--card)); border-color: color-mix(in srgb, var(--m) 28%, transparent); }
  .item.hw.dl { --m-ink: var(--red-ink); }
  .due { color: color-mix(in srgb, var(--text) 78%, var(--bg)); }
  .due.red { background: color-mix(in srgb, var(--red) 14%, transparent); }
  .due.yellow { background: color-mix(in srgb, var(--yellow) 22%, transparent); }
  .pend-hd .tile { background: color-mix(in srgb, var(--yellow) 20%, transparent); }
}

/* ───────── формы ───────── */
.field { margin: 12px 0; }
.field > label, .lbl { display: block; font-size: 13px; font-weight: 650; color: var(--hint); margin: 0 2px 6px; }
.input, .textarea { width: 100%; font-size: 16px; border-radius: 13px; border: 1.5px solid transparent; background: var(--soft); padding: 12px 14px; outline: none; transition: border-color .15s, background .15s; }
.textarea { min-height: 96px; resize: none; line-height: 1.4; }
a.ulink { color: var(--link); text-decoration: underline; overflow-wrap: anywhere; }
.sheet:focus { outline: none; }
.input:focus, .textarea:focus { border-color: var(--accent); background: var(--card); }
.counter { text-align: right; font-size: 12px; color: var(--hint); margin-top: 4px; }
.counter.warn { color: var(--red); }
.hint { font-size: 13px; color: var(--hint); margin: 6px 2px; }
.err { color: var(--danger); font-size: 13.5px; margin: 8px 2px; }

/* ───────── шторка ───────── */
.backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(8, 10, 16, .46); animation: fade .2s ease both; display: flex; align-items: flex-end; justify-content: center; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 640px; max-height: 92%; background: var(--bg); border-radius: 22px 22px 0 0; display: flex; flex-direction: column;
  animation: slide .28s cubic-bezier(.2, .9, .3, 1) both; padding-bottom: var(--safe-bottom); }
@keyframes slide { from { transform: translateY(100%); } }
.backdrop.out { animation: fadeout .18s ease both; } .backdrop.out .sheet { animation: slideout .18s ease both; }
@keyframes fadeout { to { opacity: 0; } } @keyframes slideout { to { transform: translateY(100%); } }
.sheet .grab { width: 38px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 18%, transparent); margin: 8px auto 2px; flex: none; }
.sheet header { display: flex; align-items: center; padding: 6px 16px 10px; gap: 8px; flex: none; }
.sheet header h2 { margin: 0; flex: 1; font-size: 19px; font-weight: 750; letter-spacing: -.2px; }
.sheet header .x { width: 32px; height: 32px; border-radius: 16px; background: var(--soft); display: grid; place-items: center; }
.sheet header .x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sheet .sbody { overflow-y: auto; padding: 0 16px 16px; -webkit-overflow-scrolling: touch; }
.sheet .sfoot { padding: 8px 16px 14px; flex: none; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu button { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 12px; border-radius: 13px; font-weight: 600; text-align: left; }
.menu button:active { background: var(--soft); }
.menu button.danger { color: var(--danger); }

/* ───────── календарь ───────── */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .dow { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--hint); padding: 4px 0; text-transform: uppercase; }
.cal button { aspect-ratio: 1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-weight: 600; background: var(--soft); }
.cal button.out { opacity: .28; pointer-events: none; }
.cal button.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal button.sel { background: var(--accent); color: var(--accent-text); }
.cal button .dots { height: 5px; }
.cal button.sel .dots i { background: var(--accent-text); }
.calhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.calhead b { flex: 1; text-align: center; font-size: 16px; }

/* ───────── профиль ───────── */
.me { display: flex; gap: 14px; align-items: center; padding: 16px; }
.me .big-avatar { width: 62px; height: 62px; border-radius: 22px; display: grid; place-items: center; font-size: 26px; font-weight: 750; color: #fff; flex: none; }
.me h2 { margin: 0; font-size: 19px; line-height: 1.2; }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.stat { background: var(--soft); border-radius: 12px; padding: 10px; text-align: center; }
.stat b { display: block; font-size: 19px; }
.stat span { font-size: 11.5px; color: var(--hint); }
.code { font: 700 34px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 6px; text-align: center; padding: 18px 0; background: var(--soft); border-radius: 16px; margin: 12px 0; }
details.faq { padding: 12px 14px; } details.faq + details.faq { border-top: 1px solid var(--line); }
details.faq summary { font-weight: 650; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 8px; }
details.faq summary::after { content: "›"; color: var(--hint); transition: transform .2s; font-size: 20px; line-height: 1; }
details.faq[open] summary::after { transform: rotate(90deg); }
details.faq p { color: var(--hint); margin: 8px 0 0; }

/* ───────── уведомления ───────── */
.slot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.slot + .slot { border-top: 1px solid var(--line); }
.slot input[type=time] { border: 0; background: var(--soft); border-radius: 11px; padding: 8px 10px; font-weight: 700; font-size: 16px; width: 104px; outline: none; }
.slot .seg { flex: 1; }
.slot .seg button { height: 30px; font-size: 13px; }
.xbtn { width: 32px; height: 32px; border-radius: 10px; color: var(--hint); display: grid; place-items: center; flex: none; }
.xbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; text-align: left; }
.opt + .opt { border-top: 1px solid var(--line); }
.opt .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text) 25%, transparent); flex: none; display: grid; place-items: center; }
.opt.active .radio { border-color: var(--accent); }
.opt.active .radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }

/* ───────── уведомление-тост и загрузка ───────── */
.toasts { position: fixed; left: 0; right: 0; top: calc(var(--content-top) + 10px); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { max-width: calc(100% - 28px); background: color-mix(in srgb, var(--text) 90%, var(--bg)); color: var(--bg); padding: 11px 16px; border-radius: 14px; font-weight: 600;
  font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: toastin .25s ease both; }
.toast.error { background: var(--red); color: #fff; }
.toast.out { animation: toastout .25s ease both; }
@keyframes toastin { from { opacity: 0; transform: translateY(-12px) scale(.96); } }
@keyframes toastout { to { opacity: 0; transform: translateY(-8px); } }
.skel { border-radius: 14px; background: linear-gradient(90deg, var(--soft) 25%, color-mix(in srgb, var(--text) 10%, transparent) 37%, var(--soft) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ───────── первый вход ───────── */
.hero { text-align: center; padding: 34px 16px 14px; }
.hero .em { font-size: 64px; }
.hero h1 { margin: 6px 0 6px; font-size: 26px; letter-spacing: -.5px; }
.hero p { margin: 0 auto; max-width: 320px; color: var(--hint); }
.results .row small { color: var(--hint); display: block; }

@media (min-width: 700px) { .page { padding: 0 20px; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ───────── оформление, которому нужен color-mix(): в старых WebView остаются простые карточки ───────── */
@supports (color: color-mix(in srgb, red, blue)) {
  .hero-card:not(.h-done) { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #7b3fe4)); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 32%, transparent); }
  .lcard { background: color-mix(in srgb, var(--k) 7%, var(--card)); border-color: color-mix(in srgb, var(--k) 22%, transparent); }
  .lesson.now .lcard { border-color: var(--k); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 18%, transparent), var(--shadow); }
  .wd.active { box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 36%, transparent); }
  .art { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 24%, var(--card)), color-mix(in srgb, var(--accent) 8%, var(--card))); }
}

/* ───────── запасные цвета для WebView без color-mix() (iOS до 16.2, Android WebView до 111) ───────── */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root { --line: rgba(128, 128, 128, .22); --soft: rgba(128, 128, 128, .12); --accent-soft: rgba(47, 140, 240, .14); }
  .tabbar { background: var(--bg); }
  .btn.danger { background: rgba(229, 72, 77, .14); }
  .fab { box-shadow: 0 8px 24px rgba(47, 140, 240, .4); }
  .seg { background: rgba(128, 128, 128, .16); }
  .tag.k-lecture { background: rgba(47, 180, 87, .16); }
  .tag.k-practice { background: rgba(245, 158, 11, .18); color: #b06f00; }
  .tag.k-lab { background: rgba(168, 85, 247, .16); }
  .tag.k-seminar { background: rgba(14, 165, 233, .18); }
  .tag.red { background: rgba(229, 72, 77, .15); }
  .switch i { background: rgba(128, 128, 128, .35); }
  .wd.sat span, .wd.sun span { color: var(--red); }
  .alert-card.red { background: rgba(229, 72, 77, .12); }
  .alert-card.event { background: rgba(168, 85, 247, .12); }
  .sheet .grab { background: rgba(128, 128, 128, .4); }
  .opt .radio { border-color: rgba(128, 128, 128, .5); }
  .toast { background: var(--text); }
  .skel { background: linear-gradient(90deg, var(--soft) 25%, rgba(128, 128, 128, .2) 37%, var(--soft) 63%); background-size: 400% 100%; }
}