/* ===========================================================================
   desktop-s1.css — глобальный ДЕСКТОПНЫЙ скин S1 «Система» (Apple/iOS)
   Эталон: scratchpad/out/style-s1.html (CSS-блок .r-style .s1) + шоты
   shots/style-s1-desk*.png. Зона desk-core.

   ВСЁ строго внутри html[data-ui="v2"] и @media (min-width: 900px).
   Без флага ?ui=v2 прод выглядит ровно как раньше — ни одного правила
   наружу этой обёртки выносить нельзя.

   Палитра — ТОЛЬКО переменные платформы (--surface, --ink, --line, …):
   светлая тема html[data-theme="light"] переопределяет их сама.

   Главные экраны ролей и частые внутренние страницы живут в
   desktop-s1-roles.css (подключается третьим link'ом) — этот файл их
   не трогает.
   =========================================================================== */

@media (min-width: 900px) {

/* ---------- 0. Токены скина S1 ---------- */
html[data-ui="v2"] {
  --s1-fd: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
           "SF Pro Display", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --s1-fb: "Inter", -apple-system, BlinkMacSystemFont,
           "SF Pro Text", system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  --s1-r-card: 20px;    /* карточка-группа */
  --s1-r-ctl: 12px;     /* кнопка, поле */
  --s1-r-seg: 10px;     /* сегмент, чип-квадрат */
  --s1-r-ic: 8px;       /* квадрат под эмодзи-иконку */
  --s1-pad: 16px;       /* внутри карточки */
  --s1-pad-lg: 20px;    /* крупная карточка */
  --s1-gap: 12px;       /* между карточками внутри секции */
  --s1-sec: 24px;       /* между секциями */
  --s1-side: 260px;     /* ширина сайдбара по эталону */
  --s1-wrap: 900px;     /* максимальная ширина контента */
  --s1-hdr: 52px;       /* высота компактной шапки */
  --s1-inset: 52px;     /* отступ hairline слева — под иконку 28 + gap 12 */
}

/* ---------- 1. Шрифты ---------- */
/* Google Fonts подключаются скриптом флага в base.html — только под ?ui=v2. */
html[data-ui="v2"] body {
  font-family: var(--s1-fb);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0;
}
/* Display — Inter Tight: заголовки и крупные цифры. */
html[data-ui="v2"] .app-main h1,
html[data-ui="v2"] .app-main h2,
html[data-ui="v2"] .app-main h3,
html[data-ui="v2"] .page-title,
html[data-ui="v2"] .title-lg,
html[data-ui="v2"] .s1-lt,
html[data-ui="v2"] .stat,
html[data-ui="v2"] .stat-card .v,
html[data-ui="v2"] .kpi-v,
html[data-ui="v2"] .brand-text {
  font-family: var(--s1-fd);
  letter-spacing: -.02em;
}

/* Large title 34/700 — заголовок страницы в потоке. */
html[data-ui="v2"] .app-main h1,
html[data-ui="v2"] .page-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 14px;
}
/* Отступ под заголовком (04.09, Амир «везде ровно»): у h1 в потоке — 14px;
   внутри строки-шапки (.row) и с классом .mb-0 — без отступа; подзаголовок
   .muted сразу под h1 подтягивается ближе. */
html[data-ui="v2"] .app-main .row > h1,
html[data-ui="v2"] .app-main h1.mb-0 { margin-bottom: 0; }
html[data-ui="v2"] .app-main h1.mb-2 { margin-bottom: 8px; }
html[data-ui="v2"] .app-main h1 + .muted,
html[data-ui="v2"] .app-main h1 + .page-sub { margin-top: -8px; margin-bottom: 14px; }
html[data-ui="v2"] .app-main h2,
html[data-ui="v2"] .app-main .section-title,
html[data-ui="v2"] .td-section-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0;
}
html[data-ui="v2"] .app-main h3 {
  font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em;
}
html[data-ui="v2"] .app-main h4 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
html[data-ui="v2"] .title-lg { font-size: 34px; font-weight: 700; letter-spacing: -.03em; }
/* Подзаголовок под large title — 15 muted. */
html[data-ui="v2"] .app-main h1 + .muted,
html[data-ui="v2"] .page-title + .muted,
html[data-ui="v2"] .page-sub { font-size: 15px; color: var(--muted); }
/* Цифры — tabular везде, где считаем. */
html[data-ui="v2"] .mono,
html[data-ui="v2"] .stat,
html[data-ui="v2"] .stat-card .v,
html[data-ui="v2"] .grade,
html[data-ui="v2"] .badge,
html[data-ui="v2"] .li-trail { font-variant-numeric: tabular-nums; }

/* ---------- 2. Каркас: сайдбар 260 + контент 900 по центру ---------- */
html[data-ui="v2"] body.has-nav .sidebar {
  width: var(--s1-side);
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 16px 12px calc(12px + var(--safe-bottom));
}
/* Контент 900 по центру ОСТАВШЕЙСЯ ширины (эталон: .dwrap внутри .dmain),
   паддинг 32. margin-left 260 + auto прижимал колонку к сайдбару. */
html[data-ui="v2"] body.has-nav .app-main {
  margin-left: var(--s1-side);
  margin-right: 0;
  max-width: none;
  width: auto;
  padding: 32px calc(50% - var(--s1-side) / 2 - var(--s1-wrap) / 2) 64px;
  padding-left: max(32px, calc(50% - var(--s1-side) / 2 - var(--s1-wrap) / 2));
  padding-right: max(32px, calc(50% - var(--s1-side) / 2 - var(--s1-wrap) / 2));
}
html[data-ui="v2"] body.no-nav .app-main {
  max-width: calc(var(--s1-wrap) + 64px);
  padding: 32px 32px 64px;
}
/* Контент никогда не уезжает вбок. */
html[data-ui="v2"] body { overflow-x: hidden; }
html[data-ui="v2"] .app-main > * { min-width: 0; }

/* ---------- 3. Сайдбар S1 ---------- */
/* Капсула-логотип. */
html[data-ui="v2"] .sidebar-brand { padding: 8px 6px 14px; }
html[data-ui="v2"] .sidebar-brand .brand-cap {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
html[data-ui="v2"] .sidebar-nav { padding: 0 2px; gap: 2px; }
/* Группы — капс 11/600 .12em. */
html[data-ui="v2"] .side-sec,
html[data-ui="v2"] .nav-group > summary.side-sec {
  font-family: var(--s1-fb);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 10px 6px;
}
/* Пункт 40px, радиус 10, 14/500. */
html[data-ui="v2"] .side-link {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--s1-r-seg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink-2);
  gap: 10px;
}
html[data-ui="v2"] .side-link .ic { font-size: 15px; width: 20px; flex: 0 0 20px; }
html[data-ui="v2"] .side-link.active {
  background: var(--side-active-bg);
  color: var(--side-active-ink);
  font-weight: 600;
}
html[data-ui="v2"] .side-link:active { transform: none; background: var(--surface-2); }
html[data-ui="v2"] .nav-badge {
  margin-left: auto;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Юзер-чип внизу — карточка surface-2 радиус 14. */
html[data-ui="v2"] .sidebar-foot { padding: 12px 2px calc(12px + var(--safe-bottom)); }
html[data-ui="v2"] .user-chip {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 10px;
  gap: 10px;
  margin-bottom: 8px;
}
html[data-ui="v2"] .user-chip .ava {
  width: 32px; height: 32px; flex: 0 0 32px;
  background: var(--surface-3);
  color: var(--ink);
  font-family: var(--s1-fd);
  font-weight: 700; font-size: 14px;
}
html[data-ui="v2"] .user-chip .u-meta b { font-size: 13px; font-weight: 600; line-height: 1.2; }
html[data-ui="v2"] .user-chip .u-meta small { font-size: 11px; color: var(--muted); }
/* Сайдбар фейдится в свой фон (--surface), а не в --bg. */
html[data-ui="v2"] .sidebar-foot::before {
  background: linear-gradient(to bottom, transparent, var(--surface) 78%);
}
html[data-ui="v2"] .side-toggles .tgl {
  width: 34px; height: 34px;
  border-radius: var(--s1-r-seg);
  background: var(--surface-2);
  border: 0;
}

/* ---------- 4. Компактная липкая шапка (класс hdr-compact на body) ---------- */
/* Полоса 52px с заголовком 17/600 по центру и hairline снизу. Появляется,
   когда первый h1 ушёл вверх (IntersectionObserver в base.html). */
html[data-ui="v2"] body.has-nav::before {
  content: attr(data-page-title);
  position: fixed;
  top: 0;
  left: var(--s1-side);
  right: 0;
  z-index: 25;
  height: var(--s1-hdr);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--s1-fd);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity .2s ease, transform .2s ease;
}
html[data-ui="v2"] body.has-nav.hdr-compact::before {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="v2"] body.has-nav::before { transition: none; }
}

/* ---------- 5. Карточки: без рамок, радиус 20, hairline-разделители ---------- */
html[data-ui="v2"] .card {
  background: var(--surface);
  border: 0;
  box-shadow: none;
  border-radius: var(--s1-r-card);
  padding: var(--s1-pad);
  margin-bottom: var(--s1-gap);
}
html[data-ui="v2"] .card.pad-lg { padding: var(--s1-pad-lg); }
html[data-ui="v2"] .card.pad-0 { padding: 0; overflow: hidden; }
html[data-ui="v2"] .card.flat { border: 0; box-shadow: none; background: var(--surface); }
html[data-ui="v2"] .card > :last-child { margin-bottom: 0; }
html[data-ui="v2"] a.card:hover,
html[data-ui="v2"] .card.link:hover { background: var(--surface-2); }
/* Вложенная карточка внутри карточки — на второй поверхности, без двойного фона. */
html[data-ui="v2"] .card .card { background: var(--surface-2); box-shadow: none; border: 0; }

/* ---------- 6. Капс-подписи секций (11/600 .12em uppercase muted) ---------- */
html[data-ui="v2"] .card-title,
html[data-ui="v2"] .sec-h,
html[data-ui="v2"] .cu-sec-h,
html[data-ui="v2"] .pick-label,
html[data-ui="v2"] .sec-k,
html[data-ui="v2"] .v2-k,
html[data-ui="v2"] .stat-card .k,
html[data-ui="v2"] .gs-title {
  font-family: var(--s1-fb);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
html[data-ui="v2"] .card-title { margin-bottom: 12px; }
html[data-ui="v2"] .sec-h,
html[data-ui="v2"] .cu-sec-h { margin: var(--s1-sec) 0 8px; padding-left: var(--s1-pad); }
html[data-ui="v2"] .pick-label { margin-bottom: 8px; }
/* Подпись под группой — 13 muted. */
html[data-ui="v2"] .card > .muted:last-child,
html[data-ui="v2"] .sec-note { font-size: 13px; color: var(--muted); }

/* ---------- 7. Списки: строки 44, иконка 28, hairline с отступом 52 ---------- */
html[data-ui="v2"] .list {
  background: var(--surface);
  border: 0;
  box-shadow: none;
  border-radius: var(--s1-r-card);
  overflow: hidden;
  margin-bottom: var(--s1-gap);
}
html[data-ui="v2"] .list-item {
  min-height: 44px;
  padding: 11px var(--s1-pad);
  gap: var(--s1-gap);
  border-bottom: 0;
  position: relative;
  background: transparent;
}
/* Разделитель — псевдоэлемент сверху со сдвигом под иконку: у последней
   строки его нет по определению (только между соседями). */
html[data-ui="v2"] .list-item + .list-item::before {
  content: "";
  position: absolute;
  left: var(--s1-inset);
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line);
}
/* Строки без иконки — hairline от паддинга 16. */
html[data-ui="v2"] .list > .list-item + .list-item:not(:has(> .ic)):not(:has(> .li-ic))::before,
html[data-ui="v2"] .list-item.noicon + .list-item.noicon::before { left: var(--s1-pad); }
html[data-ui="v2"] .list-item:hover { background: var(--surface-2); }
html[data-ui="v2"] .list-item .li-title {
  font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--ink);
}
html[data-ui="v2"] .list-item .li-sub {
  font-size: 13px; color: var(--muted); margin-top: 1px; line-height: 1.35;
}
html[data-ui="v2"] .list-item .li-trail {
  font-size: 15px; color: var(--ink-2); gap: 8px;
}
/* Шеврон 7×7 из бордеров вместо глифа «›».
   Часть шаблонов уже кладёт «›» в .li-trail — там свой не рисуем, иначе
   получается двойная стрелка. */
/* Сначала гасим глиф «›» из app.css — иначе он складывается с нашим. */
html[data-ui="v2"] .list-item.link::after { content: none; }
html[data-ui="v2"] .list-item.link:not(:has(.li-trail))::after {
  content: "";
  width: 7px; height: 7px;
  flex: 0 0 7px;
  margin-left: 6px;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(-45deg);
  font-size: 0;
}
/* Текстовый шеврон «›» в хвосте строки — 7×12 и цвет --muted, как в эталоне. */
html[data-ui="v2"] .list-item.link .li-trail {
  color: var(--ink-2);
  font-weight: 400;
}
html[data-ui="v2"] .list-item.link .li-trail.muted { color: var(--muted); }

/* Квадрат 28 под эмодзи-иконку — платформенные эмодзи сохраняем.
   Часть шаблонов кладёт эмодзи голым <span> с инлайновым font-size —
   выравниваем его в тот же квадрат (размер шрифта инлайн не перебиваем). */
html[data-ui="v2"] .list-item > span:first-child:not([class]),
html[data-ui="v2"] .list-item > .ic,
html[data-ui="v2"] .list-item > .li-ic {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: var(--s1-r-ic);
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}
/* Список внутри карточки — своей поверхности не рисует. */
html[data-ui="v2"] .card > .list,
html[data-ui="v2"] .card .list {
  background: transparent;
  border-radius: 0;
  margin-bottom: 0;
}

/* ---------- 8. Кнопки: 44, радиус 12 (primary — белая заливка) ---------- */
html[data-ui="v2"] .btn {
  font-family: var(--s1-fb);
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--s1-r-ctl);
  border: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  gap: 8px;
}
html[data-ui="v2"] .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-ink); }
html[data-ui="v2"] .btn-accent  { background: var(--accent); color: var(--accent-ink); }
html[data-ui="v2"] .btn:not(.btn-primary):not(.btn-accent):not(.btn-danger):not(.btn-ghost) {
  background: var(--surface-2);
  color: var(--ink);
}
html[data-ui="v2"] .btn-ghost { background: transparent; border: 1px solid var(--line-strong); }
html[data-ui="v2"] .btn-sm { min-height: 34px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
html[data-ui="v2"] .btn-lg { min-height: 52px; font-size: 17px; padding: 0 24px; border-radius: 14px; }
html[data-ui="v2"] .btn:active { transform: scale(.98); box-shadow: none; }
@media (hover: hover) {
  html[data-ui="v2"] .btn:not(.btn-primary):not(.btn-accent):not(.btn-danger):hover { background: var(--surface-3); }
}
/* Ссылка «назад» — 15/600, без капса. */
html[data-ui="v2"] .back { font-size: 15px; font-weight: 600; min-height: 36px; color: var(--ink-2); }
html[data-ui="v2"] .back:hover { color: var(--ink); }

/* ---------- 9. Чипы, бейджи, оценки ---------- */
html[data-ui="v2"] .chip {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  gap: 6px;
}
/* .chip.accent в S1 — не инверсия: в эталоне статус-чипы одинаково нейтральны
   (surface-2), различает их точка-индикатор, а не заливка. */
html[data-ui="v2"] .chip.accent { background: var(--surface-2); color: var(--ink); font-weight: 600; }
/* Чип в хвосте строки / в подписи карточки — мельче, чтобы не распирать 44px. */
html[data-ui="v2"] .li-trail .chip,
html[data-ui="v2"] .list-item .chip,
html[data-ui="v2"] .card-title .chip {
  min-height: 24px; padding: 0 9px; border-radius: var(--s1-r-ic); font-size: 12px;
  letter-spacing: 0; text-transform: none;
}
html[data-ui="v2"] .badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; font-size: 12px; font-weight: 700;
}
html[data-ui="v2"] .badge.neutral { background: var(--surface-3); color: var(--ink-2); }
html[data-ui="v2"] .grade {
  min-width: 34px; height: 34px;
  border-radius: var(--s1-r-seg);
  font-weight: 700; font-size: 17px;
}
html[data-ui="v2"] .grade-label { font-size: 11px; font-weight: 600; color: var(--muted); }

/* ---------- 10. Сегменты: трек surface-2, активный surface-3 ---------- */
/* Четверти (.q-picker), режим журнала (.mode-seg), период (.td-seg),
   дни недели (.daytabs) — единый сегмент-контрол iOS. */
html[data-ui="v2"] .q-picker,
html[data-ui="v2"] .mode-seg,
html[data-ui="v2"] .td-seg,
html[data-ui="v2"] .seg,
html[data-ui="v2"] .daytabs,
html[data-ui="v2"] .td-daytabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-2);
  border-radius: var(--s1-r-seg);
  padding: 2px;
  max-width: 100%;
  overflow-x: auto;
  border: 0;
  margin-bottom: var(--s1-gap);
}
html[data-ui="v2"] .q-picker::-webkit-scrollbar,
html[data-ui="v2"] .mode-seg::-webkit-scrollbar,
html[data-ui="v2"] .seg::-webkit-scrollbar,
html[data-ui="v2"] .daytabs::-webkit-scrollbar,
html[data-ui="v2"] .td-daytabs::-webkit-scrollbar { height: 0; }
html[data-ui="v2"] .q-picker > a,
html[data-ui="v2"] .mode-seg > button,
html[data-ui="v2"] .mode-seg > a,
html[data-ui="v2"] .td-seg > a,
html[data-ui="v2"] .seg > a,
html[data-ui="v2"] .seg > button,
html[data-ui="v2"] .seg > span,
html[data-ui="v2"] .daytabs > .daytab,
html[data-ui="v2"] .td-daytabs > .td-daytab {
  flex: 0 0 auto;
  min-height: 32px;
  min-width: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--s1-fb);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
}
html[data-ui="v2"] .q-picker > a.active,   html[data-ui="v2"] .q-picker > a.on,
html[data-ui="v2"] .mode-seg > button.on,  html[data-ui="v2"] .mode-seg > button.active,
html[data-ui="v2"] .mode-seg > a.on,       html[data-ui="v2"] .mode-seg > a.active,
html[data-ui="v2"] .td-seg > a.active,     html[data-ui="v2"] .td-seg > a.on,
html[data-ui="v2"] .seg > .on,             html[data-ui="v2"] .seg > .active,
html[data-ui="v2"] .daytabs > .daytab.active, html[data-ui="v2"] .daytabs > .daytab.on,
html[data-ui="v2"] .td-daytabs > .td-daytab.active,
html[data-ui="v2"] .td-daytabs > .td-daytab.on {
  background: var(--surface-3);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
html[data-theme="light"][data-ui="v2"] .q-picker > a.active,
html[data-theme="light"][data-ui="v2"] .mode-seg > button.on,
html[data-theme="light"][data-ui="v2"] .td-seg > a.active,
html[data-theme="light"][data-ui="v2"] .seg > .on,
html[data-theme="light"][data-ui="v2"] .daytabs > .daytab.active,
html[data-theme="light"][data-ui="v2"] .td-daytabs > .td-daytab.active {
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
}
/* Полоса классов на главной ученика — квадраты 34, радиус 10. */
html[data-ui="v2"] .grade-strip .gs {
  min-width: 44px; height: 34px;
  border-radius: var(--s1-r-seg);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 11. Поля: 44, радиус 12, surface-2 без рамки ---------- */
html[data-ui="v2"] .input,
html[data-ui="v2"] .select,
html[data-ui="v2"] .textarea,
html[data-ui="v2"] .app-main input[type="text"],
html[data-ui="v2"] .app-main input[type="search"],
html[data-ui="v2"] .app-main input[type="number"],
html[data-ui="v2"] .app-main input[type="date"],
html[data-ui="v2"] .app-main input[type="tel"],
html[data-ui="v2"] .app-main input[type="email"],
html[data-ui="v2"] .app-main input[type="password"],
html[data-ui="v2"] .app-main select,
html[data-ui="v2"] .app-main textarea {
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--s1-r-ctl);
  background: var(--surface-2);
  border: 1px solid transparent;
  color: var(--ink);
  font-family: var(--s1-fb);
  font-size: 15px;
}
html[data-ui="v2"] .textarea,
html[data-ui="v2"] .app-main textarea { min-height: 96px; padding: 11px 12px; line-height: 1.45; }
html[data-ui="v2"] .input:focus,
html[data-ui="v2"] .select:focus,
html[data-ui="v2"] .textarea:focus,
html[data-ui="v2"] .app-main input:focus,
html[data-ui="v2"] .app-main select:focus,
html[data-ui="v2"] .app-main textarea:focus {
  border-color: var(--line-strong);
  box-shadow: none;
  outline: none;
}
/* Поле поиска с иконкой в обёртке (::before слева) — левый инсет 40
   сохраняем, иначе эмодзи наезжает на плейсхолдер. */
html[data-ui="v2"] .app-main input.assess-search[type="search"],
html[data-ui="v2"] .app-main input.search-input[type="search"],
html[data-ui="v2"] .app-main .assess-search-wrap > input,
html[data-ui="v2"] .app-main .has-search-ic > input { padding-left: 40px; }
/* Поиск — тот же контрол 44/12, без рамки. */
html[data-ui="v2"] .app-main input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}
html[data-ui="v2"] .field { gap: 6px; }
html[data-ui="v2"] .field-label {
  font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; text-transform: none;
}

/* ---------- 12. Таблицы: строки 44, шапка капс 11, hairline ---------- */
html[data-ui="v2"] .table-scroll {
  background: var(--surface);
  border: 0;
  box-shadow: none;
  border-radius: var(--s1-r-card);
  overflow-x: auto;
  max-width: 100%;
  margin-bottom: var(--s1-gap);
}
html[data-ui="v2"] .table-scroll table,
html[data-ui="v2"] .card > table,
html[data-ui="v2"] .app-main > table { border-collapse: collapse; font-size: 13px; }
html[data-ui="v2"] .table-scroll th,
html[data-ui="v2"] .card > table th,
html[data-ui="v2"] .app-main > table th {
  font-family: var(--s1-fb);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  height: 40px;
}
html[data-ui="v2"] .table-scroll td,
html[data-ui="v2"] .card > table td,
html[data-ui="v2"] .app-main > table td {
  font-size: 13px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  height: 44px;
  font-variant-numeric: tabular-nums;
}
html[data-ui="v2"] .table-scroll tbody tr:last-child td { border-bottom: 0; }
html[data-ui="v2"] .table-scroll td.sticky-col,
html[data-ui="v2"] .table-scroll th.sticky-col {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 1px 0 0 var(--line);
}
html[data-ui="v2"] .table-scroll tbody tr:hover td { background: var(--surface-2); }

/* ---------- 13. KPI: цифра 34/700 tabular, подпись 13 muted ---------- */
html[data-ui="v2"] .stat-grid,
html[data-ui="v2"] .grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s1-gap);
  margin-bottom: var(--s1-gap);
}
html[data-ui="v2"] .grid-2 { gap: var(--s1-gap); }
html[data-ui="v2"] .grid-3 { gap: var(--s1-gap); }
html[data-ui="v2"] .stat-grid > .span-2,
html[data-ui="v2"] .grid-2 > .span-2 { grid-column: 1 / -1; }
html[data-ui="v2"] .stat-card {
  background: var(--surface);
  border: 0;
  box-shadow: none;
  border-radius: var(--s1-r-card);
  padding: var(--s1-pad);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
/* Порядок S1: подпись 13 muted сверху, под ней цифра 34/700, снизу дельта. */
html[data-ui="v2"] .stat-card .k {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  order: 0;
}
html[data-ui="v2"] .stat-card .v {
  order: 1;
  font-family: var(--s1-fd);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ink);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
html[data-ui="v2"] .stat-card .v small { font-size: 17px; font-weight: 600; }
html[data-ui="v2"] .stat-card .sub,
html[data-ui="v2"] .stat-card .sub-act {
  order: 2;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  overflow-wrap: break-word;
}
html[data-ui="v2"] .stat-card .sub.up { color: var(--ok); }
html[data-ui="v2"] .stat {
  font-family: var(--s1-fd);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}
/* Второй набор имён у той же плитки (.sc-label / .sc-big / .sc-sub —
   главная ученика и родителя). Подпись в S1 — 13 muted, БЕЗ капса. */
html[data-ui="v2"] .stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s1-gap);
  margin-bottom: var(--s1-gap);
}
html[data-ui="v2"] .stat-card .sc-label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  text-align: left;
}
html[data-ui="v2"] .stat-card .sc-big {
  font-family: var(--s1-fd);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
html[data-ui="v2"] .stat-card .sc-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  text-align: left;
}
/* Плитка — слева направо, а не по центру: S1 выравнивает всё по левому краю. */
html[data-ui="v2"] .stat-card { align-items: flex-start; text-align: left; }

/* ---------- 14. Прочее из app.css ---------- */
html[data-ui="v2"] .alert {
  border-radius: var(--s1-r-ctl);
  padding: 12px var(--s1-pad);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--s1-gap);
}
html[data-ui="v2"] .divider { margin: var(--s1-gap) 0; background: var(--line); }
html[data-ui="v2"] .stack { gap: var(--s1-gap); }
html[data-ui="v2"] .stack.tight { gap: 8px; }
html[data-ui="v2"] .row { gap: var(--s1-gap); }
html[data-ui="v2"] .mb-4 { margin-bottom: var(--s1-gap); }
html[data-ui="v2"] .mb-3 { margin-bottom: 10px; }
html[data-ui="v2"] .mt-4 { margin-top: var(--s1-sec); }
html[data-ui="v2"] .mt-5, html[data-ui="v2"] .mt-6 { margin-top: var(--s1-sec); }
/* Крупный отступ между смысловыми секциями страницы — 24. */
html[data-ui="v2"] .app-main > h2 { margin-top: var(--s1-sec); }
html[data-ui="v2"] .app-main > h2:first-child { margin-top: 0; }
html[data-ui="v2"] .sheet { border-radius: 24px; }
/* Прогресс-кольцо и полоса — на нейтральном треке. */
html[data-ui="v2"] .progress-ring::before { background: var(--surface); }
/* Скроллбары внутри контента — тоньше, S1 не любит толстых полос. */
html[data-ui="v2"] .table-scroll::-webkit-scrollbar { height: 8px; }

} /* /@media (min-width: 900px) */

/* evencols (02.09, Амир): недельные таблицы расписания — равные колонки дней,
   плашки на всю ширину ячейки. table-layout:fixed берёт ширины из первой строки. */
@media (min-width: 900px) {
  html[data-ui="v2"] .tsched-week table,
  html[data-ui="v2"] .sched-week table,
  html[data-ui="v2"] .table-scroll > table.tt-week,
  html[data-ui="v2"] .td-grid table {
    table-layout: fixed;
    width: 100%;
  }
  html[data-ui="v2"] .tsched-week th:first-child,
  html[data-ui="v2"] .tsched-week td:first-child,
  html[data-ui="v2"] .sched-week th:first-child,
  html[data-ui="v2"] .sched-week td:first-child { width: 132px; }
  html[data-ui="v2"] .tsched-week .tt-chip,
  html[data-ui="v2"] .sched-week .tt-chip {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
  }
  html[data-ui="v2"] .tsched-week td,
  html[data-ui="v2"] .sched-week td { vertical-align: middle; }
}

/* chipwrap (02.09, Амир: «текст не влез»): плашки недельной таблицы переносят
   текст вместо обрезки; у таблицы минимальная ширина — в узком окне контейнер
   .table-scroll прокручивается по горизонтали, а не сжимает колонки в ничто. */
@media (min-width: 900px) {
  html[data-ui="v2"] .tsched-week table,
  html[data-ui="v2"] .sched-week table { min-width: 760px; }
  html[data-ui="v2"] .tsched-week .tt-chip,
  html[data-ui="v2"] .sched-week .tt-chip {
    padding: 8px 10px;
    text-align: center;
  }
  html[data-ui="v2"] .tsched-week .tt-chip .bz-subj,
  html[data-ui="v2"] .sched-week .tt-chip .bz-subj,
  html[data-ui="v2"] .tsched-week .tt-chip .bz-who,
  html[data-ui="v2"] .sched-week .tt-chip .bz-who,
  html[data-ui="v2"] .tt-chip .tt-subj-link {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    hyphens: auto;
    display: block;
    max-width: 100%;
  }
  html[data-ui="v2"] .tsched-week .tt-chip .bz-subj,
  html[data-ui="v2"] .sched-week .tt-chip .bz-subj { font-size: 13px; line-height: 1.25; }
  html[data-ui="v2"] .tsched-week .tt-chip .bz-who,
  html[data-ui="v2"] .sched-week .tt-chip .bz-who { font-size: 11px; line-height: 1.25; }
}

/* evencols2: та же сетка для ЛЮБОЙ недельной таблицы .bz-tt (панель класса у
   классрука лежит в .ts-panel > .table-scroll без обёртки .tsched-week). */
@media (min-width: 900px) {
  html[data-ui="v2"] table.bz-tt.tt-color { table-layout: fixed; width: 100%; min-width: 760px; }
  html[data-ui="v2"] table.bz-tt.tt-color th:first-child,
  html[data-ui="v2"] table.bz-tt.tt-color td:first-child { width: 132px; }
  html[data-ui="v2"] table.bz-tt.tt-color td { vertical-align: middle; }
  html[data-ui="v2"] table.bz-tt.tt-color .tt-chip { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 8px 10px; text-align: center; }
  html[data-ui="v2"] table.bz-tt.tt-color .tt-chip + .tt-chip { margin-top: 6px; }
  html[data-ui="v2"] table.bz-tt.tt-color .tt-chip .bz-subj,
  html[data-ui="v2"] table.bz-tt.tt-color .tt-chip .bz-who,
  html[data-ui="v2"] table.bz-tt.tt-color .tt-chip .tt-subj-link { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; display: block; max-width: 100%; }
  html[data-ui="v2"] table.bz-tt.tt-color .tt-chip .bz-subj { font-size: 13px; line-height: 1.25; }
  html[data-ui="v2"] table.bz-tt.tt-color .tt-chip .bz-who { font-size: 11px; line-height: 1.25; }
}

/* tablelines (02.09, Амир): тонкие вертикальные разделители между днями,
   дни по центру, колонка «сегодня» чуть светлее остальных. */
@media (min-width: 900px) {
  html[data-ui="v2"] table.bz-tt.tt-color th,
  html[data-ui="v2"] table.bz-tt.tt-color td { border-left: 1px solid var(--line); }
  html[data-ui="v2"] table.bz-tt.tt-color th:first-child,
  html[data-ui="v2"] table.bz-tt.tt-color td:first-child { border-left: 0; }
  html[data-ui="v2"] table.bz-tt.tt-color th { text-align: center; }
  html[data-ui="v2"] table.bz-tt.tt-color th .th-date { text-align: center; }
  html[data-ui="v2"] table.bz-tt.tt-color th:first-child { text-align: left; }
  html[data-ui="v2"] table.bz-tt.tt-color th.tt-today,
  html[data-ui="v2"] table.bz-tt.tt-color td.tt-today,
  html[data-ui="v2"] table.bz-tt.tt-color .tt-today { background: rgba(255, 255, 255, .06); }
  html[data-theme="light"][data-ui="v2"] table.bz-tt.tt-color th.tt-today,
  html[data-theme="light"][data-ui="v2"] table.bz-tt.tt-color td.tt-today,
  html[data-theme="light"][data-ui="v2"] table.bz-tt.tt-color .tt-today { background: #FFFFFF; }
}

/* todaylabel: подпись «сегодня» под датой в колонке текущего дня */
@media (min-width: 900px) {
  html[data-ui="v2"] table.bz-tt.tt-color th.tt-today .th-date::after {
    content: " · сегодня";
    font-weight: 600;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
  }
}