/* «Новый дизайн» — включается тумблером в меню ☰ (атрибут data-design="new"
   на <html>, см. appearance.js). Разметка та же, что у классического,
   меняется только оформление:
   — шапка не цветная, а в тон фону, со стеклом при прокрутке;
   — цвет акцента остаётся только на действиях и активных элементах;
   — карточки крупнее и мягче, номер урока — плашка в тон акцента;
   — оценки — залитые плашки цвета оценки везде, а не только в итогах;
   — меню ☰ собрано из сгруппированных карточек, как настройки iOS.
   Все селекторы начинаются с :root[data-design="new"], чтобы перебить
   и тёмную тему из app.css (у неё :root:not([data-theme="light"])). */

/* ─────────────────────────── Палитра ─────────────────────────── */

:root[data-design="new"] {
  --bg: #f3f4f8;
  --card: #fff;
  --card-2: #f0f1f5;
  --text: #14171f;
  --text2: #6c7280;
  --border: #e6e8ee;
  --primary: var(--head);
  --mark-bg: #f0f1f5;
  --g2: #e0383e;
  --g3: #e8770c;
  --g4: #7aa315;
  --g5: #22a04b;
  --soft: color-mix(in srgb, var(--primary) 13%, transparent);
  --soft-2: color-mix(in srgb, var(--primary) 22%, transparent);
  --lift: 0 1px 2px rgba(16, 24, 40, .04), 0 0 0 1px rgba(16, 24, 40, .045);
  --lift-2: 0 8px 24px rgba(16, 24, 40, .08), 0 0 0 1px rgba(16, 24, 40, .04);
  --glass: rgba(255, 255, 255, .72);
  --glass-2: rgba(255, 255, 255, .55);
  --glass-edge: rgba(255, 255, 255, .8);
  --radius: 20px;
  --sync-color: var(--primary);
}

:root[data-design="new"][data-theme="dark"] {
  --bg: #0f1217;
  --card: #181c23;
  --card-2: #20252e;
  --text: #eceef2;
  --text2: #8b92a0;
  --border: #262b35;
  --primary: color-mix(in srgb, var(--head) 62%, #fff);
  --mark-bg: #20252e;
  --g2: #f26a6e;
  --g3: #f3a046;
  --g4: #b2d04a;
  --g5: #4fcf73;
  --lift: 0 0 0 1px rgba(255, 255, 255, .05);
  --lift-2: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
  --glass: rgba(32, 37, 46, .7);
  --glass-2: rgba(24, 28, 35, .55);
  --glass-edge: rgba(255, 255, 255, .1);
}

@media (prefers-color-scheme: dark) {
  :root[data-design="new"]:not([data-theme="light"]) {
    --bg: #0f1217;
    --card: #181c23;
    --card-2: #20252e;
    --text: #eceef2;
    --text2: #8b92a0;
    --border: #262b35;
    --primary: color-mix(in srgb, var(--head) 62%, #fff);
    --mark-bg: #20252e;
    --g2: #f26a6e;
    --g3: #f3a046;
    --g4: #b2d04a;
    --g5: #4fcf73;
    --lift: 0 0 0 1px rgba(255, 255, 255, .05);
    --lift-2: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
    --glass: rgba(32, 37, 46, .7);
    --glass-2: rgba(24, 28, 35, .55);
    --glass-edge: rgba(255, 255, 255, .1);
  }
}

:root[data-design="new"] body {
  font-size: 15px;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}

/* ──────────────────────────── Шапка ──────────────────────────── */

:root[data-design="new"] .app-header,
:root[data-design="new"] .screen-head {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  color: var(--text);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border) 80%, transparent);
}
:root[data-design="new"] .topbar { padding-left: 10px; padding-right: 10px; }
:root[data-design="new"] .topbar-title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
:root[data-design="new"] .topbar-btn,
:root[data-design="new"] .screen-back {
  width: 40px;
  height: 40px;
  color: var(--text);
  background: var(--card);
  box-shadow: var(--lift);
}
:root[data-design="new"] .screen-back { color: var(--primary); margin-left: 4px; }
:root[data-design="new"] .topbar-btn:active,
:root[data-design="new"] .screen-back:active { background: var(--card-2); box-shadow: var(--lift); }

/* Полоса дня и недели — карточка-«пилюля» внутри шапки. */
:root[data-design="new"] .date-bar {
  margin: 2px 12px 10px;
  padding: 4px;
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  box-shadow: var(--lift);
}
:root[data-design="new"] .date-arrow {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--primary);
  background: var(--soft);
}
:root[data-design="new"] .date-arrow:active { background: var(--soft-2); box-shadow: none; }
:root[data-design="new"] .date-title { color: var(--text); }
:root[data-design="new"] .date-label { font-size: 16px; font-weight: 700; }
:root[data-design="new"] .date-sub { color: var(--text2); opacity: 1; }

:root[data-design="new"] .filter-bar {
  background: none;
  color: var(--text);
  padding: 2px 12px 10px;
}
:root[data-design="new"] .segment-title {
  text-align: left;
  padding-left: 4px;
  font-size: 13px;
  color: var(--text2);
}
:root[data-design="new"] .search {
  border: 0;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--lift);
  color: var(--text2);
}
:root[data-design="new"] .search input { color: var(--text); }
:root[data-design="new"] .search input::placeholder { color: var(--text2); }

/* ───────────────────────── Общие элементы ───────────────────────── */

:root[data-design="new"] .panel { padding: 14px 14px 24px; }

:root[data-design="new"] .card,
:root[data-design="new"] .lesson-card,
:root[data-design="new"] .task-block,
:root[data-design="new"] .info-card,
:root[data-design="new"] .history-item {
  border: 0;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--lift);
}
:root[data-design="new"] .card { padding: 16px; margin-bottom: 12px; }
:root[data-design="new"] .card-title { font-size: 16px; font-weight: 700; }

:root[data-design="new"] .btn {
  padding: 13px;
  border-radius: 14px;
  background: var(--head);
  letter-spacing: -.01em;
}
:root[data-design="new"] .btn.outline { border: 0; background: var(--soft); color: var(--primary); }

:root[data-design="new"] .chip {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--lift);
  font-weight: 500;
}
/* Залитые акцентом элементы с белым текстом — на --head, а не на --primary:
   в тёмной теме --primary осветлён, и белый текст на нём не читался. */
:root[data-design="new"] .chip.active { background: var(--head); color: #fff; box-shadow: none; }

:root[data-design="new"] .field,
:root[data-design="new"] .to-field,
:root[data-design="new"] .calc-input {
  border-color: transparent;
  border-radius: 12px;
  background: var(--card-2);
}
:root[data-design="new"] .field:focus { border-color: var(--primary); }

:root[data-design="new"] .switch:checked { background: var(--primary); }
:root[data-design="new"] .skeleton { border-radius: 8px; }

:root[data-design="new"] .banner { border-radius: 16px; font-weight: 500; }

:root[data-design="new"] .fab {
  border-radius: 20px;
  background: var(--head);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--head) 45%, transparent);
  border: 0;
}

/* ───────────────────────── Карточка урока ───────────────────────── */

:root[data-design="new"] .lesson-card { padding: 14px 16px; margin-bottom: 10px; }
:root[data-design="new"] .lc-top { align-items: center; gap: 12px; }
:root[data-design="new"] .lc-num {
  min-width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--soft);
  box-shadow: none;
  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
}
:root[data-design="new"] .lc-subject { font-size: 16px; font-weight: 600; line-height: 1.25; }
/* Всё под названием выровнено по его левому краю, а не по номеру. */
:root[data-design="new"] .lc-badges,
:root[data-design="new"] .lc-bottom { margin-left: 46px; }
:root[data-design="new"] .lesson-card:has(.lc-num:empty) :is(.lc-badges, .lc-bottom) { margin-left: 0; }
/* Шапка экрана урока: всё под названием — по его левому краю, как в
   карточке (номер 34px + зазор 12px). Без номера — от края карточки. */
:root[data-design="new"] .lesson-head .lesson-title { gap: 12px; }
:root[data-design="new"] .lesson-head > :not(.lesson-title) { margin-left: 46px; }
:root[data-design="new"] .lesson-head:has(.lc-num:empty) > :not(.lesson-title) { margin-left: 0; }
:root[data-design="new"] .lc-bottom {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
/* Одной строкой «08:00–08:40 · Пропуск по болезни»: длинный статус
 * переносится как обычный текст, а не столбиком рядом со временем. */
:root[data-design="new"] .lc-bottom { display: block; line-height: 1.4; }
:root[data-design="new"] .lc-bottom > span:last-child { text-align: left; }
:root[data-design="new"] .lc-bottom > span:last-child:not(:empty)::before { content: ' · '; }
:root[data-design="new"] .hw-badge {
  padding: 3px 9px;
  border: 0;
  border-radius: 8px;
  background: var(--soft);
  color: var(--primary);
}
:root[data-design="new"] .hw-badge.clip { padding: 3px 6px; }
/* Начало задания вместо бейджа «Д/З»: одна строка, нажатие открывает его. */
:root[data-design="new"] .lc-hw {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0 46px;
  color: var(--text2);
  font-size: 14px;
  line-height: 1.35;
}
:root[data-design="new"] .lc-hw span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-design="new"] .lc-hw .icon { flex: none; width: 15px; height: 15px; color: var(--primary); }
:root[data-design="new"] .lesson-card:has(.lc-num:empty) .lc-hw { margin-left: 0; }

/* ─────────────────────────── Оценки ─────────────────────────── */

:root[data-design="new"] .mark-box {
  min-width: 34px;
  height: 34px;
  border: 0;
  border-radius: 11px;
  background: var(--card-2);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
:root[data-design="new"] .mark-box.big { min-width: 48px; height: 48px; border-radius: 14px; font-size: 22px; }
:root[data-design="new"] .mark-box.m2 { --c: var(--g2); }
:root[data-design="new"] .mark-box.m3 { --c: var(--g3); }
:root[data-design="new"] .mark-box.m4 { --c: var(--g4); }
:root[data-design="new"] .mark-box.m5 { --c: var(--g5); }
:root[data-design="new"] .mark-box:is(.m2, .m3, .m4, .m5),
:root[data-design="new"] .tile .mark-box:is(.m2, .m3, .m4, .m5),
:root[data-design="new"] .grade-row .mark-box:is(.m2, .m3, .m4, .m5),
:root[data-design="new"] .whatif .mark-box:is(.m2, .m3, .m4, .m5) {
  border: 0;
  background: color-mix(in srgb, var(--c) 15%, var(--card));
  color: var(--c);
}
:root[data-design="new"] .tile .mark-box { border: 0; background: var(--card-2); }
:root[data-design="new"] .whatif-item .mark-box,
:root[data-design="new"] .whatif-item .mark-box:is(.m2, .m3, .m4, .m5) {
  border: 1.5px dashed var(--c, var(--text2));
}
:root[data-design="new"] .whatif-item.real .mark-box,
:root[data-design="new"] .whatif-item.real .mark-box:is(.m2, .m3, .m4, .m5) { border: 0; }
:root[data-design="new"] .whatif-add .mark-box { height: 44px; border-radius: 14px; }

:root[data-design="new"] .avg { border-radius: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
:root[data-design="new"] .avg-line strong,
:root[data-design="new"] .whatif-result strong { font-size: 30px; letter-spacing: -.03em; }

:root[data-design="new"] .grade-row {
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--g5) 12%, var(--card));
}
:root[data-design="new"] .grade-row.absence { background: var(--card-2); }

/* ───────────────────────── Экраны поверх ───────────────────────── */

:root[data-design="new"] .screen { box-shadow: -10px 0 30px rgba(0, 0, 0, .12); }
:root[data-design="new"] .screen-body { padding: 14px; }
:root[data-design="new"] .screen-title { font-weight: 700; }
:root[data-design="new"] .screen-subtitle { color: var(--text2); opacity: 1; }
:root[data-design="new"] .detail h2 { font-size: 26px; letter-spacing: -.03em; }

:root[data-design="new"] .task-block {
  border-left: 0;
  box-shadow: var(--lift), inset 4px 0 0 var(--yellow);
}
:root[data-design="new"] .task-block.task-mark { box-shadow: var(--lift), inset 4px 0 0 var(--green); }
:root[data-design="new"] .attach { border-radius: 12px; background: var(--soft); }

/* ─────────────────────────── Расписание ─────────────────────────── */

:root[data-design="new"] .sched-card.current {
  outline: 0;
  background: var(--card);
  box-shadow: 0 0 0 2px var(--primary), 0 10px 28px color-mix(in srgb, var(--primary) 16%, transparent);
}
:root[data-design="new"] .sched-top { border-bottom: 0; padding-bottom: 4px; }
:root[data-design="new"] .sched-day { font-size: 18px; font-weight: 700; }
:root[data-design="new"] .sched-lesson { padding: 9px 0; font-size: 15px; gap: 12px; }
:root[data-design="new"] .sched-lesson:last-child { border-bottom: 0; }
:root[data-design="new"] .sched-lesson .lc-num { min-width: 28px; height: 28px; border-radius: 9px; font-size: 13px; }
:root[data-design="new"] .sched-toggle { font-weight: 600; }

/* ───────────────────────────── Д/З ───────────────────────────── */

:root[data-design="new"] .hw-subject { font-size: 17px; font-weight: 700; }
:root[data-design="new"] .hw-check { width: 30px; height: 30px; border-width: 2px; }

/* ───────────────────────────── Итоги ───────────────────────────── */

:root[data-design="new"] .totals-table {
  margin: 0;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--lift);
}
:root[data-design="new"] .tt-row { min-height: 50px; }
:root[data-design="new"] .tt-row:last-child { border-bottom: 0; }
:root[data-design="new"] .tt-head { background: var(--card); color: var(--text2); }
:root[data-design="new"] .tt-subject { padding-left: 14px; font-weight: 500; }
:root[data-design="new"] .tt-cell { font-variant-numeric: tabular-nums; }
:root[data-design="new"] .subject-title { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
:root[data-design="new"] .seg { height: 8px; border-radius: 4px; background: var(--card-2); }
:root[data-design="new"] .seg.done { background: var(--primary); }
:root[data-design="new"] .dist { border-radius: 12px; }
:root[data-design="new"] .year-pill { border-radius: 8px; }

/* ──────────────────────────── Почта ──────────────────────────── */

:root[data-design="new"] .mail-card { gap: 14px; }
:root[data-design="new"] .avatar { border-radius: 16px; }
:root[data-design="new"] .avatar.small { border-radius: 11px; }
:root[data-design="new"] .unread-dot { background: var(--primary); }
:root[data-design="new"] .ann-title { font-weight: 700; }
:root[data-design="new"] .ann-foot { border-top: 0; padding-top: 0; }

/* ──────────────────────── Нижняя навигация ──────────────────────── */

:root[data-design="new"] .bottom-nav { box-shadow: var(--lift-2), inset 0 1px 0 var(--glass-edge); }
:root[data-design="new"] .nav-glider { background: var(--soft); box-shadow: none; }
:root[data-design="new"] .nav-item { opacity: .6; }
:root[data-design="new"] .nav-item.active { opacity: 1; }

/* ──────────────────────────── Меню ☰ ──────────────────────────── */

/* Разделы — сгруппированные карточки на сером фоне, как настройки iOS. */
:root[data-design="new"] .drawer-panel {
  width: min(88vw, 360px);
  padding-left: 12px;
  padding-right: 12px;
  background: var(--bg);
  border-radius: 0 28px 28px 0;
}
:root[data-design="new"] .drawer-section {
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--lift);
}
:root[data-design="new"] .drawer-heading {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Первый раздел — ученик: имя крупно, как карточка профиля. */
:root[data-design="new"] .drawer-section:first-child .drawer-name,
:root[data-design="new"] .demo-badge + .drawer-section .drawer-name { font-size: 19px; font-weight: 700; }
:root[data-design="new"] .drawer-link {
  width: 100%;
  gap: 12px;
  padding: 11px 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
:root[data-design="new"] .drawer-link:last-child,
:root[data-design="new"] .drawer-link:has(+ .muted) { border-bottom: 0; }
/* «Защита входа» и «Вход по почте» стоят в ряд — разделитель снизу не нужен. */
:root[data-design="new"] .account-links .drawer-link { width: auto; border-bottom: 0; }
:root[data-design="new"] .drawer-link .icon { color: var(--primary); }
:root[data-design="new"] .drawer-option { color: var(--text); padding: 9px 0; }
:root[data-design="new"] .drawer-option input { accent-color: var(--primary); }
:root[data-design="new"] .switch-row { padding: 9px 0; }
:root[data-design="new"] .drawer-foot { padding: 4px 16px 0; }
:root[data-design="new"] .demo-badge { border-radius: 14px; }

/* ─────────────────────── Нижняя шторка ─────────────────────── */

:root[data-design="new"] .sheet-head h3 { font-size: 17px; font-weight: 700; }
:root[data-design="new"] .cal-day.selected { background: var(--head); color: #fff; }
:root[data-design="new"] .cal-day.today { background: var(--soft); box-shadow: none; color: var(--primary); font-weight: 700; }

/* ─────────────────── Полоса недели и сводка дня ─────────────────── */

:root[data-design="new"] .week-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: -2px 4px 10px;
}
/* Полоса уезжает за край при листании — обрезаем её между стрелками. */
:root[data-design="new"] .week-clip { flex: 1; min-width: 0; overflow: hidden; border-radius: 14px; }
:root[data-design="new"] .week-arrow {
  flex: none;
  width: 26px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--text2);
  transition: background-color .2s, transform .15s var(--ease);
}
:root[data-design="new"] .week-arrow svg { width: 18px; height: 18px; }
:root[data-design="new"] .week-arrow:active { background: var(--soft); transform: scale(.9); }
:root[data-design="new"] .week-strip {
  display: flex;
  gap: 4px;
  /* Горизонтальный свайп по числам листает недели (day.js), вертикальный — прокрутка. */
  touch-action: pan-y;
  will-change: transform;
}
:root[data-design="new"] .week-day {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 0;
  border-radius: 14px;
  color: var(--text);
  transition: background-color .2s, color .2s, transform .15s var(--ease);
}
:root[data-design="new"] .week-day:active { transform: scale(.92); }
:root[data-design="new"] .wd-name { font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; }
:root[data-design="new"] .wd-num { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
:root[data-design="new"] .week-day.free { opacity: .45; }
:root[data-design="new"] .week-day.today .wd-num { color: var(--primary); }
:root[data-design="new"] .week-day.on { background: var(--head); color: #fff; opacity: 1; }
:root[data-design="new"] .week-day.on :is(.wd-name, .wd-num) { color: #fff; }

:root[data-design="new"] .day-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 12px 10px 16px;
  border-radius: 16px;
  background: var(--soft);
  color: var(--text);
  text-align: left;
}
:root[data-design="new"] .ds-main { flex: 1; min-width: 0; }
:root[data-design="new"] .ds-title { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
:root[data-design="new"] .ds-sub { margin-top: 1px; font-size: 13px; color: var(--text2); }
:root[data-design="new"] .ds-marks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 40%; }
:root[data-design="new"] .ds-marks .mark-box { min-width: 28px; height: 28px; border-radius: 9px; font-size: 14px; }
:root[data-design="new"] .ds-mark { display: flex; padding: 0; }


/* Вкладки подписаны короче: «Неделя», «Задания», «Оценки», «Почта». */
:root[data-design="new"] .lbl-old { display: none; }
:root[data-design="new"] .lbl-new { display: inline; }

/* ────────────────── «Задания»: заголовки дней ────────────────── */

:root[data-design="new"] .hw-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 4px 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}
:root[data-design="new"] .hw-day:first-child { margin-top: 2px; }
:root[data-design="new"] .hw-day-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--primary);
  font-size: 12px;
  text-align: center;
}
/* Дата уже в заголовке — в карточке её не повторяем. */
:root[data-design="new"] .hw-foot > .muted { display: none; }
/* Во вкладке «Задания» всё — домашка: ни заголовка со счётчиком, ни бейджа
   «Д/З». Скрепка остаётся, если есть файлы. */
:root[data-design="new"] #hwCount { display: none; }
:root[data-design="new"] .hw-foot .hw-badge:not(.clip) { display: none; }
:root[data-design="new"] .hw-foot:not(:has(.clip)) { display: none; }
:root[data-design="new"] .hw-card { margin-bottom: 8px; }

/* ───────────────── «Неделя»: дни целиком ───────────────── */

:root[data-design="new"] .week-card { display: block; width: 100%; text-align: left; padding-bottom: 20px; }
:root[data-design="new"] .week-card .sched-list { margin-top: 4px; }
:root[data-design="new"] .week-card .sched-lesson { padding: 7px 0; border-bottom: 0; }
:root[data-design="new"] .sl-subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-design="new"] .sl-time { flex: none; color: var(--text2); font-size: 13px; font-variant-numeric: tabular-nums; }
:root[data-design="new"] .sched-range { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
:root[data-design="new"] .sched-empty { padding-top: 6px; }
:root[data-design="new"] .week-card:not(:has(.sched-list)) { opacity: .6; }

/* ─────────────── «Оценки»: Liquid Glass ─────────────── */

/* За стеклом — мягкие цветные пятна: без них размытию нечего преломлять. */
:root[data-design="new"] #panel-totals,
:root[data-design="new"] .screen.glassy { isolation: isolate; }
:root[data-design="new"] #panel-totals { position: relative; }
:root[data-design="new"] .screen.glassy::before,
:root[data-design="new"] #panel-totals::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 26% at 12% 18%, color-mix(in srgb, var(--primary) 38%, transparent), transparent 70%),
    radial-gradient(38% 24% at 92% 34%, color-mix(in srgb, var(--g5) 30%, transparent), transparent 70%),
    radial-gradient(46% 26% at 22% 62%, color-mix(in srgb, var(--g3) 22%, transparent), transparent 70%),
    radial-gradient(40% 24% at 88% 86%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 70%);
}

/* Стекло: полупрозрачная заливка, размытие, светлая кромка и блик сверху. */
:root[data-design="new"] .glass {
  background: color-mix(in srgb, var(--card) 58%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .08), inset 0 1px 0 var(--glass-shine);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-design="new"] .glass { background: var(--card); }
}

:root[data-design="new"] .totals-cards { display: block; }
:root[data-design="new"] .totals-year { padding-bottom: 12px; }
:root[data-design="new"] .totals-year .year-pill {
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 58%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--glass-edge);
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--glass-shine);
  font-weight: 600;
}

:root[data-design="new"] .totals-hero { margin-bottom: 12px; padding: 18px; border-radius: 26px; }
:root[data-design="new"] .th-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
:root[data-design="new"] .th-label { font-size: 13px; color: var(--text2); }
:root[data-design="new"] .th-caption { margin-top: 2px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
/* Переключатель «Итоговые / Все» — маленькая капсула с линзой. */
:root[data-design="new"] .th-head > div:first-child { flex: 1; min-width: 0; }
:root[data-design="new"] .seg-glass.th-mode { flex: none; width: 164px; padding: 3px; background: color-mix(in srgb, var(--text2) 12%, transparent); }
/* Вес у настоящей оценки — цифрой в углу, как в списке выше; в подписи не дублируется. */
:root[data-design="new"] .whatif-w { display: none; }
:root[data-design="new"] .seg-glass.whatif-mode { padding: 3px; }
:root[data-design="new"] .whatif-mode .seg-lens { display: block; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); }
:root[data-design="new"] .whatif-mode button.on { background: none; box-shadow: none; }
:root[data-design="new"] .seg-glass.bells-shift { flex: none; padding: 3px; }
:root[data-design="new"] .bells-shift .seg-lens { display: block; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 2)); }
:root[data-design="new"] .bells-shift button { padding: 6px 0; font-size: 13px; }
:root[data-design="new"] .bells-shift button.on { background: none; box-shadow: none; }
:root[data-design="new"] .th-mode .seg-lens { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); }
:root[data-design="new"] .th-mode button { padding: 6px 0; font-size: 13px; }
:root[data-design="new"] .th-bar { display: flex; gap: 3px; height: 10px; margin-bottom: 10px; }
:root[data-design="new"] .th-bar span { border-radius: 5px; animation: grow .7s var(--ease) both; transform-origin: left; }
:root[data-design="new"] .th-bar .d5 { background: var(--g5); }
:root[data-design="new"] .th-bar .d4 { background: var(--g4); }
:root[data-design="new"] .th-bar .d3 { background: var(--g3); }
:root[data-design="new"] .th-bar .d2 { background: var(--g2); }
:root[data-design="new"] .th-counts { display: flex; gap: 6px; font-variant-numeric: tabular-nums; }
:root[data-design="new"] .th-counts > button {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 0 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}
:root[data-design="new"] .th-counts b { color: var(--c); font-size: 20px; line-height: 1.1; }
:root[data-design="new"] .th-counts small { display: block; color: var(--text2); font-size: 10.5px; font-weight: 500; text-align: center; }
:root[data-design="new"] .th-counts > button > span { display: flex; flex-direction: column; align-items: center; }
:root[data-design="new"] .th-counts > button:not(:disabled):active { transform: scale(.96); }
:root[data-design="new"] .th-counts > button { transition: transform .15s; }
:root[data-design="new"] .th-counts .c5 { --c: var(--g5); }
:root[data-design="new"] .th-counts .c4 { --c: var(--g4); }
:root[data-design="new"] .th-counts .c3 { --c: var(--g3); }
:root[data-design="new"] .th-counts .c2 { --c: var(--g2); }

/* Переключатель периода — стеклянная капсула с линзой, как нижняя панель. */
:root[data-design="new"] .period-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
:root[data-design="new"] .seg-glass {
  position: relative;
  flex: 1;
  display: flex;
  padding: 4px;
  border-radius: 999px;
}
:root[data-design="new"] .seg-lens {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--n, 4));
  translate: calc(var(--i, 0) * 100%) 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 85%, transparent);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .12), inset 0 1px 0 var(--glass-shine), 0 0 0 .5px var(--glass-edge);
  transition: translate .5s cubic-bezier(.34, 1.4, .5, 1);
}
:root[data-design="new"] .seg-glass button {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 8px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text2);
  transition: color .25s;
}
:root[data-design="new"] .seg-glass button.on { color: var(--primary); }
:root[data-design="new"] .period-row.tools { margin-bottom: 12px; }
:root[data-design="new"] .glass-pill { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text); }
:root[data-design="new"] .glass-pill.on { color: var(--primary); }
:root[data-design="new"] .glass-pill::before { content: '⇅ '; color: var(--text2); }
:root[data-design="new"] .view-toggle { flex: none; margin-left: auto; padding: 7px 12px; border-radius: 999px; color: var(--primary); font-size: 13px; font-weight: 600; }
:root[data-design="new"] .view-toggle:active { background: var(--soft); }

/* Карточки предметов — тоже стекло. */
:root[data-design="new"] .subject-card { display: block; width: 100%; padding: 14px 16px; margin-bottom: 10px; text-align: left; border-radius: 22px; }
:root[data-design="new"] .sc-top { display: flex; align-items: center; gap: 8px; }
:root[data-design="new"] .sc-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-design="new"] .sc-trend { flex: none; padding: 2px 7px; border-radius: 8px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
:root[data-design="new"] .sc-trend.up { color: var(--g5); background: color-mix(in srgb, var(--g5) 14%, transparent); }
:root[data-design="new"] .sc-trend.down { color: var(--g2); background: color-mix(in srgb, var(--g2) 14%, transparent); }
:root[data-design="new"] .sc-avg { flex: none; font-size: 24px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
:root[data-design="new"] .sc-avg.g5, :root[data-design="new"] .sc-bar.g5 { --c: var(--g5); color: var(--g5); }
:root[data-design="new"] .sc-avg.g4, :root[data-design="new"] .sc-bar.g4 { --c: var(--g4); color: var(--g4); }
:root[data-design="new"] .sc-avg.g3, :root[data-design="new"] .sc-bar.g3 { --c: var(--g3); color: var(--g3); }
:root[data-design="new"] .sc-avg.g2, :root[data-design="new"] .sc-bar.g2 { --c: var(--g2); color: var(--g2); }
:root[data-design="new"] .sc-bar { height: 6px; margin: 8px 0 10px; border-radius: 3px; background: color-mix(in srgb, var(--text2) 14%, transparent); overflow: hidden; }
:root[data-design="new"] .sc-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--text2)) 60%, transparent), var(--c, var(--text2)));
  animation: grow .6s var(--ease) both;
  transform-origin: left;
}
:root[data-design="new"] .sc-marks { display: flex; gap: 5px; flex-wrap: wrap; }
:root[data-design="new"] .sc-marks .mark-box { min-width: 28px; height: 28px; padding: 0 5px; border-radius: 9px; font-size: 14px; }
:root[data-design="new"] .grade-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; padding: 12px 16px; border-radius: 18px; color: var(--text2); font-variant-numeric: tabular-nums; }
:root[data-design="new"] .grade-sum b { color: var(--text); font-size: 18px; }
:root[data-design="new"] .grade-sum span { margin-left: auto; }
:root[data-design="new"] .sc-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: 12px; color: var(--text2); }
/* «5 оценок · с учётом веса 8» не рвётся; длинный список дат переносится справа. */
:root[data-design="new"] .sc-foot > span:first-child { flex: none; white-space: nowrap; }
:root[data-design="new"] .sc-foot > span:last-child { text-align: right; }
:root[data-design="new"] .subject-card:active { transform: scale(.98); }

:root[data-design="new"] .totals-cards > * { animation: rise-in .35s var(--ease) both; }
:root[data-design="new"] .totals-cards > :nth-child(n+2) { animation-delay: .05s; }
:root[data-design="new"] .totals-cards > :nth-child(n+4) { animation-delay: .1s; }
:root[data-design="new"] [data-list].rise > * { animation: rise-in .35s var(--ease) both; }
:root[data-design="new"] [data-list].rise > :nth-child(2) { animation-delay: .04s; }
:root[data-design="new"] [data-list].rise > :nth-child(3) { animation-delay: .08s; }
:root[data-design="new"] [data-list].rise > :nth-child(n+4) { animation-delay: .12s; }

/* Коэффициент оценки — маленькой цифрой рядом с ней. */
:root[data-design="new"] .mark-box .mw {
  display: inline;
  margin-left: 1px;
  font-size: .5em;
  font-weight: 700;
  line-height: 0;
  vertical-align: .9em;
  opacity: .75;
}
:root[data-design="new"] .tile-weight { display: none; }

/* Экран предмета из «Оценок»: карточки — стекло над теми же пятнами. */
:root[data-design="new"] .screen.glassy .screen-body > .card {
  background: color-mix(in srgb, var(--card) 58%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .08), inset 0 1px 0 var(--glass-shine);
}
:root[data-design="new"] .screen.glassy .dist { border-radius: 14px; }

/* ─────────────────── Вкладка «Настройки» и панель ─────────────────── */

/* Меню ☰ в новом дизайне нет — настройки во вкладке. Кнопка остаётся
   пустым местом, чтобы имя ученика стояло по центру. */
:root[data-design="new"] #menuBtn { visibility: hidden; pointer-events: none; }
/* Пустое место слева нужно только под луну Хеллоуина. Без праздника его
   нет: стрелка обновления у края, а имя по центру между ней и колокольчиком. */
:root[data-design="new"]:not([data-holiday="halloween"]) #menuBtn { display: none; }
:root[data-design="new"] #bellBtn { margin-left: 40px; }
:root[data-design="new"]:not([data-holiday="halloween"]) #bellBtn { margin-left: 0; }
.settings-page .drawer-section:first-child { margin-top: 0; }

.tab-list { display: grid; margin: 2px 0 8px; }
.tab-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  border-radius: 10px;
}
.tab-row:last-child { border-bottom: 0; }
.tab-row-name { flex: 1; min-width: 0; }
.tab-row.off .tab-row-name { color: var(--text2); }
.tab-move {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--soft, var(--card-2));
  color: var(--primary);
  transition: transform .15s var(--ease), opacity .2s;
}
.tab-move.down svg { rotate: 180deg; }
.tab-move:active { transform: scale(.88); }
.tab-move:disabled { opacity: .3; }
.tab-row.moved { animation: tab-moved .6s var(--ease); }
@keyframes tab-moved {
  from { background: color-mix(in srgb, var(--primary) 18%, transparent); transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .tab-row.moved { animation: none; } }

/* Тема в настройках — капсула с линзой (стили .seg-glass выше). */
:root[data-design="new"] .theme-seg { background: var(--card-2); margin-bottom: 4px; }

/* Экран урока: домашнее задание целиком, а не кнопка «Перейти». */
:root[data-design="new"] :is(.hw-inline, .mark-inline) { cursor: auto; user-select: text; -webkit-user-select: text; }
:root[data-design="new"] :is(.hw-inline, .mark-inline):active { transform: none; }
:root[data-design="new"] .mark-inline .detail-text { margin-top: 8px; }
:root[data-design="new"] .mark-comment { margin-top: 8px; font-size: 15px; }
:root[data-design="new"] .mark-comment .detail-label { display: block; margin-bottom: 2px; }
:root[data-design="new"] .hw-inline .detail-text { margin-top: 10px; font-size: 16px; line-height: 1.45; }
:root[data-design="new"] .hw-inline .attach { margin-top: 10px; }
:root[data-design="new"] .hw-weight { padding: 2px 8px; border-radius: 8px; background: var(--soft); color: var(--primary); font-size: 12px; font-weight: 600; }
:root[data-design="new"] .hw-times { margin-top: 10px; color: var(--text2); font-size: 12px; }

/* «Звонки»: пометка вместо стрелок недель. */
:root[data-design="new"] .bells-note {
  margin: 2px 12px 10px;
  padding: 9px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--g3) 14%, var(--card));
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

/* Скрепка «закрепить предмет» на карточке в «Оценках». */
:root[data-design="new"] .sc-pin {
  position: relative;
  z-index: 4;
  flex: none;
  display: grid;
  place-items: center;
  /* Палец, а не курсор: 40px, лишнее съедают отрицательные отступы. */
  width: 40px;
  height: 40px;
  margin: -10px -6px -10px -12px;
  border-radius: 50%;
  color: var(--text2);
  opacity: .5;
  transition: opacity .2s, color .2s, transform .15s var(--ease);
}
:root[data-design="new"] .sc-pin .icon { width: 20px; height: 20px; }
:root[data-design="new"] .sc-pin.on { color: var(--primary); opacity: 1; }
:root[data-design="new"] .sc-pin.on .icon { fill: currentColor; }
:root[data-design="new"] .sc-pin:active { transform: scale(.85); }
:root[data-design="new"] .archive-loading { margin: 0 4px 10px; }

/* Помощник: те же 12px сверху и без отступа снизу, что и в app.css — иначе
   страница выше экрана и съезжает. */
:root[data-design="new"] #panel-assistant { padding-top: 12px; padding-bottom: 0; }

/* Оценки прошлого года ещё грузятся: сводка приглушена, карточки — заготовки. */
:root[data-design="new"] .totals-hero.is-loading { opacity: .55; }
:root[data-design="new"] .sc-skeleton { display: grid; gap: 10px; }
:root[data-design="new"] .sc-skeleton .skeleton { margin: 0; }

/* «День»: кнопка «Звонки и неделя» в полосе даты, за разделителем. */
:root[data-design="new"] .day-bells { display: flex; margin-right: 4px; background: var(--card-2); color: var(--text); }
:root[data-design="new"] .day-bells { margin-right: 0; }
:root[data-design="new"] .date-today { background: var(--soft); color: var(--primary); }
:root[data-design="new"] .day-bells .icon { width: 21px; height: 21px; }
:root[data-design="new"] .week-seg { margin-bottom: 12px; background: var(--card-2); }
:root[data-design="new"] .sheet-body .bells-note { margin: 0 0 12px; }
:root[data-design="new"] .week-sheet .card { margin: 0 0 8px; padding: 6px 2px 10px; box-shadow: none; background: none; }
:root[data-design="new"] .week-sheet .week-card { padding: 8px 2px 12px; border-bottom: 1px solid var(--border); border-radius: 0; }
/* ИИ-помощник — кнопкой ✨ над панелью вкладок. */
:root[data-design="new"] .ai-fab:not([hidden]) { display: flex; }
/* «Почта»: письма и объявления — разделами; колокольчика в шапке больше нет
   (место остаётся пустым, чтобы имя стояло по центру). */
:root[data-design="new"] .mail-seg { display: flex; background: var(--card); box-shadow: var(--lift); }
:root[data-design="new"] .subbar[data-for="mail"] .segment-title { display: none; }
:root[data-design="new"] #bellBtn { visibility: hidden; pointer-events: none; }

/* Экраны поверх: заголовок ниже статус-бара — iOS 26 размывает верхний край,
   и «Помощник» с подписью попадали под это размытие. */
:root[data-design="new"] .screen-head { padding-top: calc(var(--bar-top) + 8px); }
:root[data-design="new"] .ai-fab .icon { width: 28px; height: 28px; fill: currentColor; }
:root[data-design="new"] .history-item { box-shadow: var(--lift), inset 4px 0 0 var(--k); }
:root[data-design="new"] .hw-inline .hw-comment .detail-label { margin-top: 10px; }
:root[data-design="new"] .hw-inline .hw-comment .detail-text { margin-top: 2px; }

/* Д/З на главной: строка задания красным — не сделано, зелёным — сделано. */
:root[data-design="new"] .lc-hw.hw-todo,
:root[data-design="new"] .lc-hw.hw-todo .icon { color: var(--g2); }
:root[data-design="new"] .lc-hw.hw-done,
:root[data-design="new"] .lc-hw.hw-done .icon { color: var(--g5); }

/* Разделы «Сообщений» в новом дизайне — стеклянная капсула. */
:root[data-design="new"] .mail-seg { margin-top: 0; gap: 0; }
:root[data-design="new"] .mail-seg .seg-lens { display: block; }
:root[data-design="new"] .mail-seg button { border: 0; border-radius: 999px; color: var(--text2); }
:root[data-design="new"] .mail-seg button.on { background: none; color: var(--primary); }