/* Макет приложения: каркас, меню, главная. Только токены из tokens.css.
   Граница media-запросов: 48em = 768px (боковое меню или нижняя панель). */

html.is-locked { overflow: hidden; }

.topbar__links { display: none; gap: var(--sp-2); }
.tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch); height: var(--touch); flex: none;
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border-ui); border-radius: var(--r-pill);
}
.tool:hover { background: var(--c-primary-soft); }
.tool[aria-pressed="true"] { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }

/* Каркас */
.shell { max-width: var(--container); margin-inline: auto; }
.side { display: none; }
.main { min-width: 0; padding: var(--sp-5) var(--sp-4) calc(var(--tabbar-h) + var(--sp-6)); }
.page-title { font-size: var(--fs-2xl); line-height: var(--lh-tight); margin-bottom: var(--sp-5); }
.page-title:focus { outline: none; }

/* Меню */
.nav { display: grid; gap: var(--sp-1); }
.nav ul { display: grid; gap: var(--sp-1); }
.nav__link {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: var(--touch); padding: var(--sp-2) var(--sp-3);
  background: transparent; border: 0; border-radius: var(--r-1);
  color: var(--c-text); text-align: start; text-decoration: none;
  font-size: var(--fs-md);
}
.nav__link:hover { background: var(--c-primary-soft); }
.nav__link[aria-current="page"] { background: var(--c-primary); color: var(--c-on-primary); font-weight: var(--fw-semi); }
.nav__heading { margin: 0; font-size: inherit; }
.nav__toggle {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: var(--touch); padding: var(--sp-2) var(--sp-3);
  background: transparent; border: 0; border-radius: var(--r-1);
  color: var(--c-text-2); text-align: start;
  font-size: var(--fs-sm); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: 0.04em;
}
.nav__toggle span { flex: 1; }
.nav__toggle:hover { background: var(--c-primary-soft); color: var(--c-text); }
.nav__toggle .icon:last-child { transition: transform var(--dur) var(--ease); }
.nav__toggle[aria-expanded="true"] .icon:last-child { transform: rotate(180deg); }
.nav__group ul { padding-inline-start: var(--sp-4); border-inline-start: 2px solid var(--c-border); margin-inline-start: var(--sp-4); }
.nav__group ul[hidden] { display: none; }
.nav__extra { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); display: grid; gap: var(--sp-1); }

/* Нижняя панель */
.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 5;
  background: var(--c-surface); border-top: 1px solid var(--c-border);
}
.tabbar ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  width: 100%; height: var(--tabbar-h); min-width: var(--touch);
  background: transparent; border: 0; color: var(--c-text-2); text-decoration: none;
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
}
.tab[aria-current="page"] { color: var(--c-primary-text); }
.tab[aria-current="page"] .icon { stroke-width: 2.5; }
.tab[aria-expanded="true"] { color: var(--c-primary-text); }

/* Шторка */
.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; }
.sheet[hidden] { display: none; }
.sheet__backdrop { position: absolute; inset: 0; background: var(--c-overlay); }
.sheet__panel {
  position: relative; width: 100%; max-height: 88vh; overflow-y: auto;
  background: var(--c-surface); border-radius: var(--r-3) var(--r-3) 0 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
  animation: sheet-in var(--dur) var(--ease);
}
.sheet__panel:focus { outline: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); font-size: var(--fs-lg); }
@keyframes sheet-in { from { transform: translateY(2rem); opacity: 0; } }

/* Уведомление */
.toast {
  position: fixed; z-index: 30; inset-inline: var(--sp-4); bottom: calc(var(--tabbar-h) + var(--sp-4));
  max-width: var(--measure); margin-inline: auto;
  background: var(--c-text); color: var(--c-bg);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-1); box-shadow: var(--shadow-2);
  font-size: var(--fs-sm);
}
.toast[hidden] { display: none; }

/* Заглушка раздела */
.stub { display: grid; justify-items: start; gap: var(--sp-4); max-width: var(--measure); padding-block: var(--sp-6); }
.stub .page-title { margin: 0; }
.stub__icon {
  display: grid; place-items: center; width: calc(var(--touch) * 1.5); height: calc(var(--touch) * 1.5);
  background: var(--c-primary-soft); color: var(--c-primary-text); border-radius: var(--r-pill);
}
.stub__icon .icon { width: calc(var(--icon) * 1.5); height: calc(var(--icon) * 1.5); }
.stub__note { color: var(--c-text-2); }

/* Главная */
.home { display: grid; gap: var(--sp-5); }
.home .page-title { margin: 0; }
.pinned { display: grid; align-items: start; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.pin { display: grid; gap: var(--sp-2); align-content: start; }
.pin__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-2); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: 0.04em; }
.pin__main { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.pin__meta { color: var(--c-text-2); font-size: var(--fs-sm); }
.pin__link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); font-weight: var(--fw-semi); }
.tasks { display: grid; gap: var(--sp-1); }
.task {
  display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); min-height: var(--touch);
  color: var(--c-text); text-decoration: none; border-radius: var(--r-1); border: 1px solid var(--c-border);
}
.task:hover { background: var(--c-primary-soft); }
.task__title { font-weight: var(--fw-semi); }
.task__meta { color: var(--c-text-2); font-size: var(--fs-sm); }
.status { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.status .icon { width: 1rem; height: 1rem; }
.status--overdue { color: var(--c-warn-text); }
.status--soon { color: var(--c-primary-text); }

.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.tiles-section { display: grid; gap: var(--sp-3); }
.tiles-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.tiles-section__head h2 { font-size: var(--fs-xl); }
.tiles-section__tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tiles-section__tools [hidden] { display: none; }
.edit-hint { display: none; color: var(--c-text-2); font-size: var(--fs-sm); max-width: var(--measure); }
.is-editing .edit-hint { display: block; }

.tiles { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile-min)), 1fr)); }
.tile {
  position: relative; display: grid; align-content: start; gap: var(--sp-3);
  min-height: var(--tile-h); padding: var(--sp-4);
  background: var(--tile-bg); color: var(--c-text); border-radius: var(--r-2);
}
.tile--lavender { --tile-bg: var(--c-tile-lavender); }
.tile--green { --tile-bg: var(--c-tile-green); }
.tile--yellow { --tile-bg: var(--c-tile-yellow); }
.tile--sky { --tile-bg: var(--c-tile-sky); }
.tile--peach { --tile-bg: var(--c-tile-peach); }
.tile__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--touch); }
.tile__title { font-size: var(--fs-lg); }
.tile__tools { display: none; gap: var(--sp-2); }
.is-editing .tile__tools { display: flex; }
.is-editing .tile { outline: 2px dashed var(--c-border-ui); outline-offset: 2px; }
.tile__handle { touch-action: none; cursor: grab; }
.tile.is-dragging { z-index: 6; cursor: grabbing; box-shadow: var(--shadow-2); outline: var(--focus-width) solid var(--c-primary-text); }
.tile.is-dragging .tile__handle { cursor: grabbing; }
.tile:has(.tile__handle[aria-pressed="true"]) { outline: var(--focus-width) solid var(--c-primary-text); }

.metric { display: grid; gap: var(--sp-1); }
.metric--inline { grid-auto-flow: column; justify-content: space-between; align-items: center; }
.metric__value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.metric__label { font-size: var(--fs-sm); }
.rows { display: grid; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-block: var(--sp-2); min-height: var(--touch);
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.row small { display: block; font-size: var(--fs-xs); }
.row--me { font-weight: var(--fw-bold); }
.row em { font-style: normal; font-weight: var(--fw-regular); }
.place { display: inline-block; min-width: 1.5rem; }
.amounts { display: inline-flex; flex-wrap: wrap; gap: var(--sp-3); }
.amounts--big { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.amount { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: var(--fw-semi); }
.tile__foot { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.bar { height: var(--bar-h); border-radius: var(--r-pill); background: color-mix(in srgb, currentColor 20%, transparent); overflow: hidden; }
.bar span { display: block; height: 100%; width: var(--p); background: var(--c-text); border-radius: var(--r-pill); }

.cal { width: 100%; border-collapse: collapse; text-align: center; font-size: var(--fs-sm); table-layout: fixed; }
.cal caption { text-align: start; font-weight: var(--fw-semi); padding-bottom: var(--sp-2); }
.cal caption::first-letter { text-transform: uppercase; }
.cal th { font-weight: var(--fw-semi); padding-block: var(--sp-1); }
.cal abbr { text-decoration: none; }
.cal td { padding: var(--sp-1) 0; vertical-align: top; }
.cal .is-today { font-weight: var(--fw-bold); outline: 2px solid var(--c-text); outline-offset: -2px; border-radius: var(--r-1); }
.marks { display: flex; justify-content: center; gap: var(--sp-1); min-height: var(--dot); margin-top: 2px; }
.mark { display: inline-block; width: var(--dot); height: var(--dot); flex: none; }
.mark--class { background: var(--c-text); border-radius: var(--r-pill); }
.mark--deadline { border: 2px solid var(--c-text); }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); }
.legend span { display: inline-flex; align-items: center; gap: var(--sp-1); }

.hidden-tiles { display: grid; gap: var(--sp-2); padding: var(--sp-4); border: 2px dashed var(--c-border-ui); border-radius: var(--r-2); }
.hidden-tiles[hidden] { display: none; }
.hidden-tiles h3 { font-size: var(--fs-md); }
.hidden-tiles ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hidden-tiles__none { color: var(--c-text-2); font-size: var(--fs-sm); }

@media (min-width: 64em) {
  .shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .side {
    display: block; align-self: start;
    padding: var(--sp-5) var(--sp-3) var(--sp-5) var(--sp-4);
  }
  .main { padding-bottom: var(--sp-7); }
  .tabbar { display: none; }
  .toast { bottom: var(--sp-5); }
  .topbar__links { display: inline-flex; }
}

/* Страницы разделов: общие блоки */
.page { display: grid; gap: var(--sp-6); }
.page .page-title { margin: 0; }
.section-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.count { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding-inline: var(--sp-2); border-radius: var(--r-pill); background: var(--c-primary-soft); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.note { color: var(--c-text-2); font-size: var(--fs-sm); max-width: var(--measure); }
.list { display: grid; gap: var(--sp-3); }
.list--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile-min)), 1fr)); }
.chip { display: inline-flex; align-items: center; min-height: 1.75rem; padding-inline: var(--sp-3); border: 1px solid var(--c-border-ui); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semi); white-space: nowrap; }

/* Статусы заданий и наград: текст и иконка */
.status--done { color: var(--c-success-text); }
.status--progress { color: var(--c-primary-text); }
.status--todo { color: var(--c-text-2); }

/* Карточка задания */
.tcard { display: grid; gap: var(--sp-3); }
.tcard--overdue { border-inline-start: var(--status-strip) solid var(--c-warn-text); }
.tcard__top { display: grid; gap: var(--sp-1); }
.tcard__top .status { order: -1; }
.tcard__heading { margin: 0; font-size: inherit; }
.tcard__toggle {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--sp-3); align-items: center; width: 100%;
  min-height: var(--touch); padding: 0; background: transparent; border: 0; text-align: start; color: var(--c-text);
}
.tcard__toggle .icon { grid-row: 1 / span 2; grid-column: 2; transition: transform var(--dur) var(--ease); }
.tcard__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.tcard__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); line-height: var(--lh-tight); }
.tcard__meta { color: var(--c-text-2); font-size: var(--fs-sm); }
.tcard__panel { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-bg); border-radius: var(--r-1); }
.tcard__panel[hidden] { display: none; }
.tcard__link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); font-weight: var(--fw-semi); }
.tcard__go { justify-self: start; }
.tcard--done { background: transparent; }

/* Материалы */
.mrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-3); }
.mrow .btn { grid-column: 1 / -1; justify-self: start; }
.mrow__title { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.mrow__meta { color: var(--c-text-2); font-size: var(--fs-sm); }
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-primary-soft); border-radius: var(--r-2); }

/* Награды */
.acard { display: grid; gap: var(--sp-3); align-content: start; }
.acard--got { background: transparent; }
.acard__top { display: grid; gap: var(--sp-1); }
.acard__title { font-size: var(--fs-lg); }
.acard__cond { color: var(--c-text-2); }
.acard__meta { color: var(--c-text-2); font-size: var(--fs-sm); }
.acard__reward { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-2); }
.acard__reward .amounts { color: var(--c-text); font-size: var(--fs-md); }
.bar--accent { background: var(--c-border); }
.bar--accent span { background: var(--c-primary); }
.tests { display: grid; gap: var(--sp-3); max-width: var(--measure); }
.tests .section-title { margin: 0; }

/* Таблица начислений */
.table-wrap { padding: 0; overflow-x: auto; }
.rules { width: 100%; border-collapse: collapse; }
.rules th, .rules td { padding: var(--sp-3) var(--sp-4); text-align: start; border-bottom: 1px solid var(--c-border); }
.rules thead th { font-size: var(--fs-sm); color: var(--c-text-2); background: var(--c-bg); }
.rules tbody th { font-weight: var(--fw-regular); }
.rules tr:last-child > * { border-bottom: 0; }

/* Магазин */
.product { display: grid; gap: var(--sp-3); align-content: start; }
.product__title { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.product__note { display: flex; }
.prices { display: grid; gap: var(--sp-1); margin: 0; }
.price { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.price dt { color: var(--c-text-2); }
.price dd { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-md); }
.pv { display: grid; place-items: center; height: 5.5rem; border-radius: var(--r-1); background: var(--c-tile-lavender); color: var(--c-text); }
.pv--good { background: var(--c-tile-yellow); }
.pv--frame .icon { width: 3rem; height: 3rem; padding: var(--sp-2); border: 4px solid var(--c-primary); border-radius: var(--r-pill); }
.pv--badge { background: var(--c-tile-green); }
.pv--badge .icon { width: 3rem; height: 3rem; padding: var(--sp-2); background: var(--c-coin); color: var(--c-on-accent); border-radius: var(--r-pill); }
.pv--bg { background: var(--c-tile-sky); background-image: radial-gradient(var(--c-border-ui) 1.5px, transparent 1.5px); background-size: var(--sp-4) var(--sp-4); }
.pv--card { display: grid; gap: var(--sp-2); align-content: center; justify-items: start; padding-inline: var(--sp-5); background: var(--c-tile-peach); border-inline-start: 6px solid var(--c-primary); }
.pv--card i { display: block; height: var(--sp-2); width: 70%; border-radius: var(--r-pill); background: var(--c-text); opacity: 0.35; }
.pv--card i + i { width: 45%; }

@media (min-width: 48em) {
  .mrow { grid-template-columns: 1fr auto auto; }
  .mrow .btn { grid-column: auto; }
}

/* Рейтинг */
.controls { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.seg--wrap { flex-wrap: wrap; border-radius: var(--r-2); }
.flag { width: 1.5rem; height: 1rem; flex: none; border-radius: 2px; outline: 1px solid var(--c-border-ui); }
.board { display: grid; gap: var(--sp-3); }
.board__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xl); }
.lrows { display: grid; }
.lrow { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: var(--sp-3); min-height: var(--touch); padding-block: var(--sp-2); border-top: 1px solid var(--c-border); }
.lrow--me { font-weight: var(--fw-bold); background: var(--c-primary-soft); margin-inline: calc(var(--sp-3) * -1); padding-inline: var(--sp-3); border-radius: var(--r-1); }
.lrow em { font-style: normal; font-weight: var(--fw-regular); }
.stars { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: var(--fw-semi); }
.hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); background: var(--c-primary-soft); }
.privacy { display: grid; gap: var(--sp-3); justify-items: start; }
.privacy__title { font-size: var(--fs-lg); }
.how summary, .article summary { cursor: pointer; font-weight: var(--fw-semi); min-height: var(--touch); display: flex; align-items: center; }
.how p, .article p { margin-top: var(--sp-2); color: var(--c-text-2); max-width: var(--measure); }
.article .chip { margin-top: var(--sp-3); }

/* Настройки */
.setting { display: grid; gap: var(--sp-3); justify-items: start; }
.setting .section-title { margin: 0; }
.choices { display: grid; gap: var(--sp-2); width: 100%; max-width: var(--measure); }
.choice {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--touch);
  padding: var(--sp-2) var(--sp-4); background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border-ui); border-radius: var(--r-1); text-align: start;
}
.choice .icon { visibility: hidden; }
.choice[aria-pressed="true"] { background: var(--c-primary-soft); border-color: var(--c-primary-text); font-weight: var(--fw-semi); }
.choice[aria-pressed="true"] .icon { visibility: visible; }
.form { display: grid; gap: var(--sp-4); width: 100%; max-width: var(--measure); justify-items: start; }
.form[hidden] { display: none; }
.field { display: grid; gap: var(--sp-1); width: 100%; }
.field label { font-weight: var(--fw-semi); }
.field select, .field textarea, .field input[type="file"], .search input {
  width: 100%; min-height: var(--touch); padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border-ui); border-radius: var(--r-1);
}
.field [aria-invalid="true"] { border-color: var(--c-warn-text); border-width: 2px; }
.field__error { color: var(--c-warn-text); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.field__error[hidden] { display: none; }
.success { display: grid; gap: var(--sp-3); justify-items: start; }
.success[hidden] { display: none; }
.success p { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-success-text); font-weight: var(--fw-semi); }

/* Центр помощи */
.search { display: grid; gap: var(--sp-1); max-width: var(--measure); }
.search__label { font-weight: var(--fw-semi); }
.empty, .contact { display: grid; gap: var(--sp-3); justify-items: start; max-width: var(--measure); }
.empty .section-title, .contact .section-title { margin: 0; }

.f-white { fill: var(--flag-white); }
.f-black { fill: var(--flag-black); }
.f-red { fill: var(--flag-red); }
.f-ua-blue { fill: var(--flag-ua-blue); }
.f-ua-yellow { fill: var(--flag-ua-yellow); }
.f-de-gold { fill: var(--flag-de-gold); }
.f-cz-blue { fill: var(--flag-cz-blue); }
.f-lt-yellow { fill: var(--flag-lt-yellow); }
.f-lt-green { fill: var(--flag-lt-green); }
.how summary::after, .article summary::after {
  content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-inline-start: auto;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.how[open] summary::after, .article[open] summary::after { transform: rotate(-135deg); }
.how summary, .article summary { list-style: none; }
.how summary::-webkit-details-marker, .article summary::-webkit-details-marker { display: none; }

/* Часть 6: плотная главная, читаемые действия и локальный предпросмотр. */
.today-column { display: grid; align-content: start; gap: var(--sp-3); min-width: 0; }
.snapshot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); padding: var(--sp-4); }
.snapshot div { display: grid; gap: var(--sp-1); }
.snapshot span { color: var(--c-text-2); font-size: var(--fs-sm); }
.snapshot strong { font-size: var(--fs-xl); }
.task-filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; }
.task-filters label { display: grid; gap: var(--sp-2); flex: 1 1 var(--field-min); font-size: var(--fs-sm); min-width: 0; }
.task-filters select { width: 100%; min-height: var(--touch); padding: var(--sp-2); border: 1px solid var(--c-border-ui); border-radius: var(--r-1); background: var(--c-surface); }
.done-tasks summary { cursor: pointer; min-height: var(--touch); }
.benefit { display: grid; gap: var(--sp-3); align-content: start; }
.benefit__icon { color: var(--c-primary-text); }
.benefit__icon .icon, .pv--good .icon { width: var(--product-icon); height: var(--product-icon); }
.benefit__details summary { min-height: var(--touch); padding-block: var(--sp-2); cursor: pointer; font-weight: var(--fw-semi); }
.benefit__details p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-2); }
.wallet { max-width: var(--measure); }
.wallet .prices { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.pv--mug { background: var(--c-tile-peach); }
.pv--stickers { background: var(--c-tile-green); }
.pv--usb { background: var(--c-tile-sky); }
.pv--background { background: var(--c-tile-sky); }
.profile-preview { display: grid; gap: var(--sp-3); margin-block: var(--sp-4); }
.profile-preview__sample { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-2); }
.profile-preview__avatar { display: grid; place-items: center; width: var(--preview-size); height: var(--preview-size); flex: none; border-radius: var(--r-pill); background: var(--c-primary-soft); }
.profile-preview__avatar .icon { width: var(--product-icon); height: var(--product-icon); }
.profile-preview[data-appearance="frame"] .profile-preview__avatar { outline: var(--focus-width) solid var(--c-primary-text); outline-offset: var(--focus-offset); }
.profile-preview[data-appearance="background"] .profile-preview__sample { background: var(--c-tile-sky); }
.profile-preview[data-appearance="card"] .profile-preview__sample { background: var(--c-tile-peach); border-inline-start: var(--sp-2) solid var(--c-primary); }
.profile-preview[data-appearance="badge"] .profile-preview__sample > .icon { color: var(--c-success-text); width: var(--product-icon); height: var(--product-icon); }

/* Часть 8: журнал, расписание и содержательные экраны. */
.attendance-shares { display: grid; gap: var(--sp-3); }
.attendance-share { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.attendance-share meter { grid-column: 1 / -1; width: 100%; height: var(--sp-3); accent-color: var(--c-primary-text); }
.attendance-label--present { color: var(--c-success-text); }
.attendance-label--late, .status--review { color: var(--c-primary-text); }
.attendance-label--absent, .status--revision { color: var(--c-warn-text); }
.history-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.history-item h3 { font-size: var(--fs-lg); }
.agenda-day { display: grid; gap: var(--sp-2); }
.agenda-item { display: grid; gap: var(--sp-3); align-items: start; }
.agenda-item > time { font-weight: var(--fw-semi); color: var(--c-primary-text); }
.agenda-item h3 { font-size: var(--fs-lg); }
.agenda-item details { margin-top: var(--sp-3); }
.agenda-item details p { margin-block: var(--sp-3); }
.agenda-item details .btn { margin: var(--sp-2); }
.grade-trend { display: grid; gap: var(--sp-3); }
.grade-trend li { display: grid; grid-template-columns: var(--trend-label-w) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
.grade-trend meter { width: 100%; min-width: 0; height: var(--sp-4); accent-color: var(--c-primary); }
.demo-form { display: grid; gap: var(--sp-4); max-width: var(--measure); }
.demo-form label { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.demo-form input, .demo-form textarea, .demo-form select, .task-filters input { min-width: 0; width: 100%; min-height: var(--touch); padding: var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-border-ui); border-radius: var(--r-1); }
.demo-form textarea { resize: vertical; }
.page details > summary { cursor: pointer; min-height: var(--touch); padding-block: var(--sp-2); }
.page details p + p { margin-top: var(--sp-3); }
@media (min-width: 48em) {
  .agenda-item { grid-template-columns: var(--agenda-time-w) minmax(0, 1fr); }
  .agenda-item > .status { grid-column: 2; }
}

/* Часть 9: компактные оценки и явные переходы. */
.tile__title a { min-height: var(--touch); display: inline-flex; align-items: center; gap: var(--sp-2); color: inherit; text-decoration: none; }
.tile__title a:hover { text-decoration: underline; }
.snapshot a { min-height: var(--touch); gap: var(--sp-1); display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.snapshot a:hover span { text-decoration: underline; }
.grade-summary { list-style: none; padding: 0; margin: 0; }
.grade-summary li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: var(--border-w) solid var(--c-border); }
.grade-summary strong { white-space: nowrap; }
.grade-history { padding: var(--sp-3) var(--sp-4); }

.snapshot strong { display: flex; align-items: center; gap: var(--sp-2); }
.is-editing .tile__head { flex-wrap: wrap; }
.is-editing .tile__title { flex-basis: 100%; }

.analytics-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-block: var(--sp-3); }
.analytics-controls label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.analytics-controls select { min-height: var(--touch); max-width: 100%; background: var(--c-surface); color: var(--c-text); border: var(--border-w) solid var(--c-border-ui); border-radius: var(--r-1); padding: var(--sp-2); }
.chart-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); cursor: pointer; }
.analytics-chart { margin: var(--sp-3) 0; }
.analytics-chart figcaption { font-weight: var(--fw-semi); }
.analytics-chart .chart-plot > svg { display: block; width: 100%; height: var(--chart-height); overflow: visible; }
.analytics-chart svg text { fill: var(--c-text-2); font-family: var(--font); font-size: var(--fs-sm); }
.chart-axis { fill: none; stroke: var(--c-border-ui); }
.chart-line { fill: none; stroke-width: var(--chart-stroke); }
.chart-line--grade, .chart-line--present { stroke: var(--c-primary-text); }
.chart-point--grade, .chart-point--present { fill: var(--c-primary-text); }
.chart-line--late { stroke: var(--c-text-2); stroke-dasharray: 8 4; }
.chart-point--late { fill: var(--c-text-2); }
.chart-line--absent { stroke: var(--c-warn-text); stroke-dasharray: 2 4; }
.chart-point--absent { fill: var(--c-warn-text); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-sm); list-style: none; padding: 0; }
.chart-key--grade, .chart-key--present { color: var(--c-primary-text); }
.chart-key--absent { color: var(--c-warn-text); }
.chart-data { font-size: var(--fs-sm); overflow-x: auto; }
.chart-data th, .chart-data td { padding: var(--sp-2); text-align: start; }

@media (min-width: 64em) {
  #report .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  #report .form > button { justify-self: start; }
}

.chart-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2); }
.chart-scale { display: flex; flex-direction: column; justify-content: space-between; padding-block: var(--sp-3) var(--sp-5); color: var(--c-text-2); font-size: var(--fs-sm); }
.chart-range { display: flex; justify-content: space-between; gap: var(--sp-2); color: var(--c-text-2); font-size: var(--fs-sm); }
.chart-line, .chart-axis { vector-effect: non-scaling-stroke; }

/* Часть 13: одна строка управления, поля без вертикального растяжения. */
.tile__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-3); }
.tile__controls:has(.tile__tools:only-child) { margin-block-end: 0; }
.tile__controls .analytics-controls { display: contents; margin: 0; }
.tile__controls .tile__tools { flex: none; }
.tile__controls .chart-toggle { font-size: var(--fs-sm); }
.tile__controls select { min-height: var(--touch); max-width: 100%; background: var(--c-surface); color: var(--c-text); border: var(--border-w) solid var(--c-border-ui); border-radius: var(--r-1); padding: var(--sp-2); }
#report .form { align-items: start; }
#report .field { align-self: start; align-content: start; grid-template-rows: auto auto auto; }
#report .field label { min-height: var(--form-label-height); }
#report .field select { align-self: start; }
/* Part 16: compact cards, readable labels, and bounded chart data. */
.page { grid-template-columns: minmax(0, 1fr); }
.page > *, .home > * { min-width: 0; }
.nav__link span { flex: 1; min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: none; }
.nav__group ul { padding-inline-start: var(--sp-2); margin-inline-start: var(--sp-2); }
.btn { max-width: 100%; text-align: center; overflow-wrap: normal; }
.tests > .btn { justify-self: start; }
.tests > p { line-height: var(--lh-body); }
.tests details > .btn { margin-block-start: var(--sp-3); }
.tests details > summary { justify-content: flex-start; }
.tests details > summary > .icon:last-child { margin-inline-start: 0; }
.tests h2 { font-size: var(--fs-xl); line-height: var(--lh-tight); }
.review-author { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-2); font-size: var(--fs-sm); }
.payment-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: var(--sp-3); }
.payment-row strong { text-align: center; white-space: nowrap; }
.payment-row > span { justify-self: end; text-align: end; }
.task-filters .select-control, .demo-form .select-control, .field .select-control { width: 100%; }
.analytics-controls .select-control, .tile__controls .select-control { min-width: var(--choice-min); max-width: 100%; flex: 0 1 auto; }
.chart-toggle { display: inline-flex; align-items: center; position: relative; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: var(--border-w) solid var(--c-border-ui); border-radius: var(--r-pill); min-height: var(--touch); background: var(--c-surface); color: var(--c-text); font-size: var(--fs-sm); }
.chart-toggle input { position: absolute; opacity: 0; width: var(--border-w); height: var(--border-w); }
.chart-toggle__mark { display: grid; place-items: center; width: var(--icon); height: var(--icon); border: var(--border-w) solid var(--c-border-ui); border-radius: var(--sp-1); }
.chart-toggle__mark .icon { visibility: hidden; }
.chart-toggle:has(input:checked) { background: var(--c-primary-soft); color: var(--c-primary-text); border-color: var(--c-primary-text); }
.chart-toggle:has(input:checked) .chart-toggle__mark { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
.chart-toggle:has(input:checked) .icon { visibility: visible; }
.chart-toggle:has(input:focus-visible) { outline: var(--focus-width) solid var(--c-focus); outline-offset: var(--focus-offset); }
.tiles { align-items: start; }
.tile { min-width: 0; }
.tile__body { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.tile__body > *, .analytics-chart { min-width: 0; max-width: 100%; }
.chart-data { overflow: visible; }
.chart-data__scroll { min-width: 0; max-width: 100%; max-height: var(--chart-table-height); overflow: auto; overscroll-behavior: contain; border: var(--border-w) solid var(--c-border); border-radius: var(--r-1); }
.chart-data table { width: 100%; min-width: var(--chart-table-min); border-collapse: collapse; }
.chart-data th, .chart-data td { white-space: nowrap; overflow-wrap: normal; }
.chart-data thead { position: sticky; top: 0; background: var(--c-surface); }
.chart-legend li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.chart-legend li::before { content: ''; width: var(--legend-mark-w); border-top: var(--chart-stroke) solid currentColor; }
.chart-key--late::before { border-top-style: dashed !important; }
.chart-key--absent::before { border-top-style: dotted !important; }
.attendance-journal { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--journal-min)), 1fr)); max-width: var(--measure); }
.attendance-entry { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-4); }
.attendance-entry h3 { font-size: var(--fs-md); }
.attendance-entry time, .attendance-entry strong { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.attendance-entry time { color: var(--c-text-2); }
.pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); max-width: var(--measure); margin-block-start: var(--sp-4); }
.pagination .btn { padding-inline: var(--sp-3); }
.rules { min-width: var(--chart-table-min); }
.rules thead th:not(:first-child), .rules td { white-space: nowrap; overflow-wrap: normal; }
.rules thead .icon { display: inline-block; vertical-align: middle; margin-inline-end: var(--sp-1); }
.zero-amount { display: inline-flex; color: var(--c-text-2); }
.price dt, .price dd, .amount { overflow-wrap: normal; white-space: nowrap; }
.amounts { flex-wrap: wrap; }
.cal td { padding: 0; position: relative; vertical-align: top; }
.cal-day, .cal-event > button { display: grid; align-content: center; justify-items: center; gap: var(--sp-1); width: 100%; min-height: var(--touch); padding: var(--sp-1); }
.cal-event > button { background: transparent; color: inherit; border: 0; border-radius: var(--r-1); }
.cal-event > button:hover, .cal-event > button[aria-expanded="true"] { background: var(--c-surface); color: var(--c-primary-text); }
.cal-icons { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-1); }
.cal-icons .icon { width: var(--fs-xs); height: var(--fs-xs); }
.cal-popup { position: fixed; z-index: var(--z-language); width: min(var(--calendar-popup-w), calc(100vw - var(--sp-6))); padding: var(--sp-3); background: var(--c-surface); color: var(--c-text); border: var(--border-w) solid var(--c-border-ui); border-radius: var(--r-1); box-shadow: var(--shadow-2); text-align: start; }
.cal-popup[hidden] { display: none; }
.cal-popup ul { display: grid; gap: var(--sp-3); margin-block-start: var(--sp-3); }
.cal-popup li { display: flex; align-items: start; gap: var(--sp-2); font-size: var(--fs-sm); }
.cal-popup small { display: block; color: var(--c-text-2); }
.legend { flex-wrap: wrap; gap: var(--sp-2); }
.legend span { display: inline-flex; align-items: center; gap: var(--sp-1); }
@media (max-width: 40em) {
  .payment-row { grid-template-columns: minmax(0, 1fr); }
  .payment-row strong, .payment-row > span { text-align: start; justify-self: start; }
  .rules { min-width: 0; }
  .rules th, .rules td { padding: var(--sp-3) var(--sp-2); }
  .currency-head > span { position: absolute; width: var(--border-w); height: var(--border-w); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  .currency-head .icon { width: var(--sp-5); height: var(--sp-5); }
  .currency-head { position: relative; }
  .rules tbody th { overflow-wrap: normal; word-break: normal; }
}

/* Part 16.1: smaller visual scale without shrinking readable text or touch targets. */
body { font-size: var(--app-copy-size); }
.main .card, .tile { padding: var(--app-card-pad); }
.page, .home { gap: var(--sp-4); }
.page > .note { max-width: var(--measure); }
.main { padding-block-start: var(--sp-4); }
.profile-layout { display: grid; gap: var(--sp-4); min-width: 0; }
.profile-layout > * { min-width: 0; max-width: none; }
.profile-preview { display: grid; gap: var(--sp-3); align-content: start; }
.profile-preview__sample strong { font-size: var(--profile-name-size); line-height: var(--lh-tight); }
.profile-layout .demo-form label { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.profile-layout input { font-size: var(--fs-md); font-weight: var(--fw-regular); }
.profile-layout [role="status"]:empty { display: none; }
.profile-access { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); }
.profile-access > div { flex: 1 1 var(--field-min); }
.profile-access .section-title { margin-bottom: var(--sp-2); }
.profile-access > .btn { flex: none; align-self: center; }
.acard { grid-template-rows: auto 1fr auto auto; align-content: stretch; }
.acard__description { display: grid; align-content: start; gap: var(--sp-2); min-height: var(--award-copy-height); }
.acard__top { min-height: var(--touch); }
.acard__cond { font-size: var(--fs-sm); }
.acard__reward { align-self: end; }
.analytics-chart { display: grid; gap: var(--sp-2); }
.chart-grid { fill: none; stroke: var(--c-border); stroke-dasharray: var(--chart-grid-dash); vector-effect: non-scaling-stroke; }
.chart-bar--present { fill: var(--c-primary-text); }
.chart-bar--late { fill: var(--c-text-2); }
.chart-bar--absent { fill: var(--c-warn-text); }
.chart-plot { position: relative; }
.chart-scale { padding-block: var(--sp-3) var(--sp-5); }
.chart-toggle { cursor: pointer; user-select: none; font-weight: var(--fw-semi); }
.chart-toggle:hover { border-color: var(--c-primary-text); }
.chart-toggle__mark { flex: none; }

input[type="checkbox"] { accent-color: var(--c-primary); }
@media (min-width: 64em) {
  .profile-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-access { grid-column: 1 / -1; }
  .main { padding-inline: var(--sp-5); }
}

@supports (grid-template-rows: subgrid) {
  .list--grid > .acard { grid-row: span 4; grid-template-rows: subgrid; }
}
.profile-layout > .profile-preview { margin: 0; }

.acard__description { min-height: 0; }
.analytics-chart--attendance .chart-legend li::before { height: var(--sp-2); border: 0; border-radius: var(--border-w); background: currentColor; }
.analytics-chart { grid-template-columns: minmax(0, 1fr); } .analytics-chart > * { min-width: 0; }

/* Part 17: every attendance period has a readable label and exact values. */
.attendance-periods { display: grid; gap: var(--sp-1); max-height: var(--attendance-chart-height); overflow: auto; overscroll-behavior: contain; padding: var(--sp-1); border: var(--border-w) solid var(--c-border); border-radius: var(--r-1); }
.attendance-period { display: grid; grid-template-columns: var(--attendance-date-width) minmax(0, 1fr); align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--touch); padding: var(--sp-2); border: var(--border-w) solid transparent; border-radius: var(--r-1); background: transparent; color: var(--c-text); text-align: start; }
.attendance-period__date { font-size: var(--fs-sm); overflow-wrap: normal; }
.attendance-period:hover, .attendance-period[aria-pressed="true"] { border-color: var(--c-primary-text); background: var(--c-surface); }
.attendance-period__bar { display: flex; height: var(--attendance-bar-height); overflow: hidden; border-radius: var(--r-pill); background: var(--c-border); }
.attendance-part { flex-basis: 0; min-width: 0; }
.attendance-part--present { background: var(--c-primary-text); }
.attendance-part--late { background: var(--c-text-2); }
.attendance-part--absent { background: var(--c-warn-text); }
.attendance-chart .chart-legend li::before { height: var(--sp-2); border: 0; border-radius: var(--border-w); background: currentColor; }
.attendance-selected { font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: var(--lh-body); }

.group-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--journal-min)), 1fr)); gap: var(--sp-3); }
.group-member { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.group-member > .icon { flex: none; color: var(--c-primary-text); }
@media (min-width: 64em) and (pointer: fine) {
  :root { --touch: var(--desktop-control); --side-w: var(--desktop-side); --fs-2xl: var(--desktop-title); --fs-xl: var(--desktop-heading); --app-card-pad: var(--sp-4); --icon: var(--desktop-icon); }
  .nav__link, .btn, .brand { font-size: var(--fs-sm); }
  .nav__link, .nav__toggle { padding-block: var(--sp-1); }
  .topbar__inner { min-height: calc(var(--touch) + var(--sp-2)); padding-block: var(--sp-1); }
  .banner { padding-block: var(--sp-1); }
  .main { padding-inline: var(--sp-4); }
  .tile__title, .tcard__title, .acard__title, .history-item h3 { font-size: var(--fs-md); }
  .demo-form input { padding-block: var(--sp-2); }
}

/* Part 18: percentages, balanced rows and a readable calendar grid. */
.attendance-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.attendance-stat { display: grid; align-content: start; gap: var(--sp-1); padding: var(--sp-3) var(--sp-2); border-radius: var(--r-1); background: var(--c-surface); }
.attendance-stat strong { font-size: var(--attendance-number); line-height: var(--lh-tight); }
.attendance-stat span { font-size: var(--fs-sm); overflow-wrap: normal; }
.attendance-stat--attended strong { color: var(--c-primary-text); }
.attendance-stat--absent strong { color: var(--c-warn-text); }
.attendance-stat--late strong { color: var(--c-text); }
.cal { border-collapse: separate; border-spacing: var(--sp-1); }
.cal td { border: var(--border-w) solid var(--c-border-ui); border-radius: var(--r-1); background: var(--c-surface); }
.cal td:empty { border-color: transparent; background: transparent; }
.cal-day, .cal-event > button { min-height: var(--calendar-cell-height); }
.cal-marker { display: inline-block; flex: none; width: var(--calendar-marker); height: var(--calendar-marker); border-radius: var(--r-pill); }
.cal-marker--class { background: var(--c-primary-text); }
.cal-marker--exam { background: var(--c-text); border-radius: 0; }
.cal-marker--deadline { background: var(--c-warn-text); }
.tiles { align-items: stretch; }
.tile { align-content: start; }
@media (min-width: 40em) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tiles > .tile, .tiles > .tile:last-child:nth-child(odd) { grid-column: span 2; }
  .tiles[data-count="5"] > .tile:nth-child(n+4) { grid-column: span 3; }
  .tiles[data-count="4"] > .tile { grid-column: span 3; }
  .tiles[data-count="2"] > .tile { grid-column: span 3; }
  .tiles[data-count="1"] > .tile { grid-column: 1 / -1; }
}