/* Фундамент · общие компоненты страниц ЛК (17.09.2026).
   Вынесено из инлайновых <style> ученических страниц student-progress.html, student-schedule.html (главная: виджеты
   бенто), student-profile.html без изменений, чтобы родительский кабинет использовал те же компоненты:
   .page-head, .pr-* (сводка успеваемости), .att-* (посещаемость), .stat/.sect-head, .w-* и .widget (виджеты главной),
   .pf-* (профиль: вкладки, карточки, переключатели), .dsr-* (запросы о данных). Подключать после base/sheet/desktop и
   до skin-v3.css. Правки компонентов — только здесь. */

/* ══════════════ успеваемость (student-progress.html) ══════════════ */
  html, body { height: 100%; background: var(--bg-page); }
  body { margin: 0; }
  .app-main { padding: 28px 32px 130px; }
  @media (max-width: 720px) { .app-main { padding: 20px 16px 100px; } }
  .page-head h1 { font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: clamp(36px, 8vw, 56px); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 6px; }
  .page-head h1 em { color: var(--accent); }
  .page-head .eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em; text-transform: none; color: var(--ink-mute); margin-bottom: 8px; }

  /* desktop split: stats+attendance left, aside widgets right */
  .pr-layout { display: flex; flex-direction: column; gap: 0; }
  .pr-aside { order: -1; }
  @media (min-width: 1024px) {
    .pr-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 26px; align-items: start; }
    .pr-aside { order: 0; position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
  }

  .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
  @media (max-width: 540px) { .stat-row { grid-template-columns: 1fr; } }
  .stat { background: var(--bg-canvas); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 20px 22px; text-decoration: none; color: inherit; display: block; }
  .stat .lbl { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.12em; text-transform: none; color: var(--ink-mute); }
  .stat .num { font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 42px; line-height: 1; color: var(--accent); margin-top: 8px; }
  .stat .sub { font-family: var(--font-body); font-size: 10px; color: var(--ink-mute); margin-top: 6px; }
  /* шкала посещаемости */
  .att-bar { height: 8px; background: var(--bg-soft); border-radius: 99px; overflow: hidden; margin-top: 12px; }
  .att-fill { height: 100%; background: var(--moss, #4a6b4f); width: 0; transition: width 1s cubic-bezier(.22,.9,.3,1); border-radius: 99px; }
  .att-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-family: var(--font-body); font-size: 10px; color: var(--ink-mute); }

  .sect-head { font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 22px; color: var(--ink); padding-bottom: 8px; margin: 22px 0 12px; border-bottom: 1.5px solid var(--ink); }
  .prog-card { background: var(--bg-canvas); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 16px 18px; margin-bottom: 12px; text-decoration: none; color: inherit; display: block; }
  .prog-card .t { font-family: var(--font-display); font-style: normal; font-size: 18px; color: var(--ink); overflow-wrap: anywhere; word-break: break-word; }
  .prog-card .m { font-family: var(--font-body); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.04em; margin-top: 4px; overflow-wrap: anywhere; word-break: break-word; }
  .empty { text-align: center; padding: 40px 20px; color: var(--ink-mute); font-family: var(--font-display); font-style: normal; font-size: 16px; }
  .load-error { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:14px 0 18px; padding:14px 16px; border:1px solid var(--grade-poor, #b04a4a); border-radius:var(--r-card); background:var(--bg-canvas); color:var(--ink); font:13px/1.45 var(--font-body); }
  .load-error[hidden] { display:none; }
  .load-error button { min-height:44px; flex:none; padding:0 16px; border:1px solid var(--accent); border-radius:var(--r-button); background:var(--accent); color:var(--ink-on-dark); font:600 12px var(--font-body); cursor:pointer; }
  @media (max-width:540px) { .load-error { align-items:stretch; flex-direction:column; } .load-error button { width:100%; } }

  /* aside widgets (snapshot + breakdown) */
  .pr-card { background: var(--bg-canvas); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 18px 20px; }
  .pr-card__h { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.14em; text-transform: none; color: var(--ink-mute); margin-bottom: 14px; }
  .pr-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hair); }
  .pr-stat:first-child { border-top: 0; padding-top: 0; }
  .pr-stat__k { font-family: var(--font-body); font-size: 13px; color: var(--ink-mute); }
  .pr-stat__v { font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 18px; color: var(--ink); }
  .pr-stat__v.accent { color: var(--accent); }
  /* attendance ring breakdown */
  .pr-ring-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; margin-bottom: 9px; }
  .pr-ring-row:last-child { margin-bottom: 0; }
  .pr-ring-row__dot { width: 10px; height: 10px; border-radius: 50%; }
  .pr-ring-row__k { font-family: var(--font-body); font-size: 13px; color: var(--ink); }
  .pr-ring-row__n { font-family: var(--font-body); font-size: 12px; color: var(--ink-mute); }

/* ══════════════ главная и виджеты (student-schedule.html) ══════════════ */
  /* fullscreen — no iPhone frame */
  html, body { height: 100%; background: var(--bg-page); }
  body { margin: 0; overflow-x: clip; }

  .app-main { padding: 20px 16px 110px; }
  @media (min-width: 720px) {
    .app-main { padding: 28px 32px 130px; }
  }

  /* page head (eyebrow + serif italic H1, dnevnik style) */
  .home-head { margin-bottom: 18px; }
  .home-head .eyebrow {
    font-family: var(--font-body); font-size: 10px;
    letter-spacing: 0.18em; text-transform: none; color: var(--ink-mute);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .home-head .eyebrow::before {
    content: '§'; color: var(--accent);
    font-family: var(--font-display); font-style: normal; font-size: 13px;
  }
  .home-head__title {
    font-family: var(--font-display); font-style: normal; font-weight: 500;
    font-size: clamp(30px, 6vw, 46px); line-height: 0.96;
    letter-spacing: -0.02em; margin: 8px 0 0;
  }
  .home-head__title em { color: var(--accent); }

  /* legacy span-* helpers no longer drive layout (dashboard cells own it),
     but keep them harmless for any widget still carrying the class */
  .span-12, .span-8, .span-6, .span-4 { grid-column: auto; }

  /* widget base */
  .widget {
    position: relative;
    background: var(--bg-canvas);
    border: 1px solid var(--hair);
    border-radius: var(--r-card);
    padding: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--t-fast) var(--ease-ui), transform var(--t-fast) var(--ease-ui);
    text-align: left;
    font: inherit;
    cursor: pointer;
  }
  .widget:active { transform: scale(0.985); }
  @media (hover: hover) and (pointer: fine) {
    .widget:hover { border-color: var(--hair-strong); box-shadow: 0 0 0 0.5px var(--hair-strong); }
  }
  .widget--paper { background: var(--bg-page); }
  .widget--soft  { background: var(--bg-soft); }
  .widget--dark  { background: var(--ink); color: var(--ink-on-dark); border-color: var(--ink); }
  .widget--accent{ background: var(--accent); color: var(--ink-on-dark); border-color: var(--accent); }
  .widget--ghost { background: transparent; border-style: dashed; }

  .widget__num {
    display: none;   /* 03.09: латинские метки «N° lectio» путали — сняты */
    position: absolute; top: 10px; right: 14px;
    font-family: var(--font-body);
    font-size: 9px; text-transform: none; letter-spacing: 0.12em;
    color: var(--ink-mute); z-index: 2;
  }
  .widget--dark .widget__num,
  .widget--accent .widget__num { color: rgba(250, 247, 242, 0.5); }

  .w-eyebrow {
    font-family: var(--font-body); font-size: 11.5px; font-weight: 500;
    letter-spacing: 0.02em; text-transform: none;
    color: var(--ink-mute);
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
  }
  .w-eyebrow::before {
    content: '§'; color: var(--accent);
    font-family: var(--font-display); font-style: normal; font-size: 13px;
  }
  .widget--dark .w-eyebrow,
  .widget--accent .w-eyebrow { color: rgba(250, 247, 242, 0.55); }

  /* greeting */
  .w-greet { padding: 24px 22px 24px; min-height: 132px; }
  .w-greet h1 {
    font-family: var(--font-display); font-style: normal; font-weight: 500;
    font-size: clamp(38px, 5.2vw, 58px); line-height: 0.94;
    letter-spacing: -0.022em; margin: 0 0 12px;
  }
  .w-greet h1 em { color: var(--accent); }
  .w-greet .date {
    font-family: var(--font-body); font-size: 10.5px;
    text-transform: none; letter-spacing: 0.10em; color: var(--ink-mute);
  }
  .w-greet .date .ac { color: var(--accent); margin: 0 5px; }
  .w-greet__deco {
    position: absolute; bottom: -16px; right: -12px;
    width: 180px; height: 180px;
    opacity: 0.045; pointer-events: none;
  }

  /* live lesson */
  .w-live {
    min-height: 196px; display: flex; flex-direction: column;
    justify-content: space-between; padding-top: 18px;
  }
  .w-live__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-right: 48px; }
  .w-live__pulse {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-body); font-size: 12px; letter-spacing: 0.01em;
    text-transform: none; color: var(--accent); font-weight: 500;
  }
  .w-live__pulse::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); animation: pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
  }
  .w-live__time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); white-space: nowrap; }
  .w-live__title {
    font-family: var(--font-display); font-weight: 500;
    font-size: 24px; line-height: 1.12; letter-spacing: -0.005em; margin: 8px 0 6px;
  }
  .w-live__title em { font-style: normal; color: var(--accent); }
  .w-live__teacher {
    font-family: var(--font-body); font-style: normal;
    font-size: 13.5px; color: var(--ink-mute); margin-bottom: 16px;
  }
  .w-live__join {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: var(--ink); color: var(--ink-on-dark);
    font-family: var(--font-body); font-size: 13px;
    text-transform: none; letter-spacing: 0.02em; font-weight: 600;
    border-radius: var(--r-button); text-decoration: none;
    transition: background-color var(--t-fast) var(--ease-ui);
  }
  .w-live__join:hover { background: var(--accent); }
  .w-live__join svg { stroke: currentColor; fill: none; }
  .w-live__seal {
    position: absolute; top: -10px; right: 14px;
    width: 42px; height: 42px; z-index: 3;
    filter: drop-shadow(0 2px 6px rgba(31, 52, 97, 0.30));
  }
  .w-live--empty { min-height: 156px; }
  .w-live--empty p { color: var(--ink-mute); font-family: var(--font-display); font-style: normal; }

  /* announcement banner */
  .announcement-banner {
    margin: 8px 0 16px;
    padding: 12px 16px;
    background: var(--accent);
    color: var(--ink-on-dark);
    border-radius: var(--r-card);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
  }
  .announcement-banner[hidden] { display: none; }
  .announcement-banner__txt {
    font-family: var(--font-body); font-size: 13px; line-height: 1.4;
  }
  .announcement-banner__close {
    background: none; border: none; color: inherit;
    width: 44px; min-width: 44px; height: 44px;
    font-size: 16px; cursor: pointer; padding: 0;
    opacity: 0.7;
  }
  .announcement-banner__close:hover { opacity: 1; }
  .schedule-load-error {
    margin: 8px 0 16px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--garnet);
    border-radius: var(--r-card);
    background: var(--bg-canvas);
    color: var(--garnet);
    font: 500 12px/1.45 var(--font-body);
  }
  .schedule-load-error[hidden] { display: none; }
  .schedule-load-error button {
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid currentColor;
    border-radius: var(--r-button);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  @media (max-width: 520px) {
    .schedule-load-error { align-items: stretch; flex-direction: column; }
    .schedule-load-error button { width: 100%; }
  }
  .home-absence-link {
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }

  /* calendar mini */
  .w-cal { padding: 16px 14px 14px; }
  .w-cal__cap {
    font-family: var(--font-body); font-size: 9px;
    text-transform: none; letter-spacing: 0.18em;
    color: var(--ink-mute); text-align: center; margin: 0 0 10px;
  }
  .w-cal__cap .accent { color: var(--accent); }
  .w-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
  .w-cal-grid .c {
    aspect-ratio: 1; display: grid; place-items: center;
    font-family: var(--font-body); font-size: 9px;
    color: var(--ink-faint); position: relative;
  }
  .w-cal-grid .c.has { color: var(--ink); }
  .w-cal-grid .c.dot::after {
    content: ''; position: absolute; bottom: 1px;
    width: 2px; height: 2px; background: var(--accent); border-radius: 50%;
  }
  .w-cal-grid .c.today {
    background: var(--ink); color: var(--bg-page);
    font-weight: 500; border-radius: 4px;
  }
  .w-cal__below {
    margin-top: 10px; text-align: center;
    font-family: var(--font-body); font-size: 9px;
    text-transform: none; letter-spacing: 0.12em; color: var(--ink-mute);
  }
  .w-cal__below strong { color: var(--accent); font-weight: 500; }

  /* HW deadline (УДО: «задание» вместо «ДЗ») */
  .w-deadline {
    min-height: 156px; display: flex; flex-direction: column;
    justify-content: space-between; padding: 18px 18px 18px;
  }
  .w-deadline__lbl {
    font-family: var(--font-body); font-size: 11.5px; font-weight: 500;
    letter-spacing: 0.02em; text-transform: none;
    color: rgba(250, 247, 242, 0.75); margin-bottom: 8px;
  }
  .w-deadline__title {
    font-family: var(--font-display); font-style: normal; font-weight: 500;
    font-size: 20px; line-height: 1.18; color: var(--ink-on-dark);
    letter-spacing: -0.005em; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere;
  }
  .w-deadline__when {
    margin-top: 14px;
    font-family: var(--font-body); font-size: 12.5px;
    color: rgba(250, 247, 242, 0.85); letter-spacing: 0.01em;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .w-deadline__when b { color: var(--ink-on-dark); font-weight: 600; }
  .w-deadline__when .late { color: #FFD79A; }

  .w-action {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
  }
  .w-action__label {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ink-mute);
    margin-bottom: 6px;
  }
  .w-action__title {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.18;
    color: var(--ink);
    margin: 0;
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .w-action__sub {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-mute);
    margin: 6px 0 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .w-action__go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--accent);
  }
  .w-action--quiet {
    background: var(--bg-soft);
  }
  /* телефон: карточки по высоте содержимого; две половинки в ряду выравнивает сетка (stretch) */
  @media (max-width: 599px) {
    .w-action, .w-deadline { min-height: 0; gap: 16px; }
    .w-live { min-height: 0; }
    .w-today { min-height: 0; }
    /* половинка (04.09): компактнее поля и шрифты, чтобы заголовок не ломался по слову */
    .hw-cell--half .widget { padding: 14px 12px 12px; }
    .hw-cell--half .w-action { gap: 12px; }
    .hw-cell--half .w-action__label, .hw-cell--half .w-deadline__lbl { font-size: 11px; margin-bottom: 6px; }
    .hw-cell--half .w-action__title, .hw-cell--half .w-deadline__title { font-size: 17px; line-height: 1.2; }
    .hw-cell--half .w-action__sub { font-size: 12px; -webkit-line-clamp: 2; }
    .hw-cell--half .w-deadline__when { margin-top: 10px; font-size: 12px; }
    .hw-cell--half .w-action__go { font-size: 12px; }
  }

  /* today list */
  .w-today { padding: 16px 16px 14px; min-height: 156px; }
  .w-today__rows { display: flex; flex-direction: column; margin-top: 8px; }
  .w-today__row {
    display: grid; grid-template-columns: 56px 1fr 14px;
    column-gap: 10px; align-items: baseline;
    padding: 8px 0; border-top: 1px solid var(--hair-soft);
  }
  .w-today__row:first-child { border-top: 0; }
  .w-today__row.past { opacity: 0.45; }
  .w-today__row.live { background: rgba(31, 52, 97, 0.03); margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
  .w-today__row.cancelled { color:var(--garnet); background:var(--state-overdue-bg); }
  .w-today__row.cancelled .w-today__title { color: var(--garnet); }
  .w-today__row.cancelled .w-today__topic { text-decoration: line-through; }
  .w-today__time { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
  .w-today__title {
    font-family: var(--font-body); font-size: 13.5px; line-height: 1.3; color: var(--ink);
  }
  .w-today__empty { padding: 6px 0 2px; }
  .w-today__empty b { display: block; font: 500 20px/1.2 var(--font-display); color: var(--ink); margin-bottom: 4px; }
  .w-today__empty small { display: block; font: 400 13px/1.4 var(--font-body); color: var(--ink-mute); }
  .w-today__row.live .w-today__title { font-weight: 500; }
  .w-today__dot {
    font-family: var(--font-display); font-style: normal; color: var(--accent);
    font-size: 20px; line-height: 0; text-align: center;
  }

  /* «открыть всё» */
  .w-openall {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; gap: 14px;
  }
  .w-openall__txt {
    font-family: var(--font-display); font-style: normal;
    font-size: 18px; color: var(--ink); line-height: 1.2;
  }
  .w-openall__txt small {
    display: block; font-family: var(--font-body); font-style: normal;
    font-size: 9px; text-transform: none; letter-spacing: 0.16em;
    color: var(--ink-mute); margin-top: 4px;
  }
  .w-openall__arr { font-family: var(--font-body); color: var(--accent); font-size: 18px; }

  /* tabbar icon (legacy) */
  .tab-ico { width: 22px; height: 22px; }

  /* enter */
  body.page-enter { animation: page-enter 320ms var(--ease-ui); }
  @keyframes page-enter { from { opacity: 0; } to { opacity: 1; } }

  /* skeleton */
  .skeleton { background: linear-gradient(90deg, var(--bg-soft) 0%, var(--bg-tint) 50%, var(--bg-soft) 100%);
    background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; }
  @keyframes shimmer { 0% {background-position: 200% 0;} 100% {background-position: -200% 0;} }


    .w-live--empty .w-live__join { display: none; }
    .w-today__join { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
  

/* ══════════════ профиль (student-profile.html) ══════════════ */
  /* П4 «Продукт-чистка»: профиль + настройки слиты в одну страницу.
     Когорты и согласия сняты; DSR ужат в свёрнутую строку. */
  html, body { height: 100%; background: var(--bg-page); }
  body { margin: 0; }
  .app-main { padding: 28px 32px 130px; }
  @media (max-width: 720px) { .app-main { padding: 20px 16px 100px; } }

  .profile-head {
    display: grid; grid-template-columns: 88px 1fr;
    gap: 22px; align-items: center;
    margin-bottom: 28px;
  }
  /* аватар: фото — настоящий <img> (object-fit: cover) поверх инициалов; инициалы — запасной вариант */
  .avatar {
    width: 88px; height: 88px; border-radius: 50%;
    background: var(--accent-wash);
    display: grid; place-items: center;
    font-family: var(--font-display); font-style: normal;
    font-size: 38px; color: var(--accent);
    border: 2px solid var(--hair); padding: 0; cursor: pointer;
    position: relative; overflow: hidden; transition: border-color .2s;
    -webkit-user-select: none; user-select: none;
  }
  .avatar:hover, .avatar:focus-visible { border-color: var(--accent); }
  .avatar:disabled { cursor: default; opacity: .7; }
  .avatar__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; border-radius: 50%; display: block;
    background: var(--bg-canvas);
  }
  .avatar__img[hidden] { display: none; }
  .avatar.has-photo .avatar__initials { visibility: hidden; }
  .avatar::after {
    content: 'сменить'; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    font-family: var(--font-body); font-size: 8px; letter-spacing: 0.1em; text-transform: none;
    color: var(--ink-on-dark); background: rgba(31,52,97,.72); padding: 3px 0; opacity: 0; transition: opacity .2s;
  }
  .avatar:hover::after, .avatar:focus-visible::after { opacity: 1; }
  .profile-head h1 {
    font-family: var(--font-display); font-style: normal; font-weight: 500;
    font-size: clamp(28px, 6vw, 40px); line-height: 1; margin: 0 0 6px;
    letter-spacing: -0.01em;
  }
  .profile-head h1 em { color: var(--accent); }
  .profile-head__meta {
    font-family: var(--font-body); font-size: 11px;
    letter-spacing: 0.10em; text-transform: none;
    color: var(--ink-mute);
  }
  .profile-head__meta .ac { color: var(--accent); }

  /* карточки и поля профиля — только внутри .pf-split: глобальные .card/.eyebrow/.field из base.css
     (формы обращений и документов) не трогаем */
  .pf-split .card {
    background: var(--bg-canvas); border: 1px solid var(--hair);
    border-radius: var(--r-card); padding: 22px; margin-bottom: 16px;
  }
  .pf-split .eyebrow {
    font-family: var(--font-body); font-size: 11px;
    letter-spacing: 0.08em; text-transform: none;
    color: var(--accent); margin-bottom: 14px; font-weight: 600;
  }
  .pf-split .field {
    display: grid; grid-template-columns: 160px 1fr;
    gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair-soft);
    font-family: var(--font-body); font-size: 13.5px;
  }
  .pf-split .field:first-of-type { border-top: 0; }
  .pf-split .field .k { color: var(--ink-mute); }
  .pf-split .field .v { color: var(--ink); }
  .pf-split .field input, .pf-split .field select {
    width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--hair);
    border-radius: var(--r-input); font: inherit; background: var(--bg-canvas);
    color: var(--ink);
  }
  /* аудит 14.10 (parent): на телефоне подпись над полем ввода. В две колонки (160 px + остаток) поле на 390 px
     получало 150 px — имя «Громова Ольга Н…» и телефон обрезались. Строки-сведения (div.field) остаются в две колонки. */
  @media (max-width: 560px) {
    .pf-split label.field { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  }
  /* кнопки профиля (были глобальными в student-profile.html; здесь ограничены профилем, чтобы не гасить .btn-primary на других страницах) */
  .pf-split .btn {
    min-height: 44px; padding: 10px 18px; border-radius: var(--r-button);
    font-family: var(--font-body); font-size: 12px;
    cursor: pointer; border: 1px solid var(--hair);
    background: var(--bg-canvas); color: var(--ink);
  }
  .pf-split .btn.btn-primary { background: var(--accent); color: var(--ink-on-dark); border-color: var(--accent); }
  .pf-split .btn--primary { background: var(--accent); color: var(--ink-on-dark); border-color: var(--accent); }
  .pf-split .btn--danger { color: var(--state-overdue); border-color: var(--state-overdue); background: var(--bg-canvas); }
  .pf-split .btn--danger:hover { background: var(--state-overdue); color: var(--ink-on-dark); }

  /* персонализация: тема (из бывших настроек) */
  .theme-row { display: flex; gap: 8px; }
  .theme-opt { flex: 1; min-height: 64px; border: 1px solid var(--hair); border-radius: 10px; padding: 12px; cursor: pointer; text-align: center; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-mute); background: var(--bg-soft); transition: border-color .2s, color .2s; }
  .theme-opt.on { border-color: var(--accent); color: var(--accent); }
  .theme-opt .swatch { display: block; width: 100%; height: 28px; border-radius: 6px; margin-bottom: 8px; }
  /* образцы тем — намеренные цвета, не переключать */
  .theme-opt[data-theme="system"] .swatch { background: linear-gradient(90deg, #FAF8F3 50%, #1a2236 50%); }
  .theme-opt[data-theme="light"] .swatch { background: #FAF8F3; border: 1px solid var(--hair); }
  .theme-opt[data-theme="dark"] .swatch { background: #1a2236; }

  /* уведомления (из бывших настроек) */
  .notif-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hair); }
  .notif-row:first-of-type { border-top: 0; }
  .notif-row .nl { font-size: 14px; color: var(--ink); }
  .notif-row .nl small { display: block; font-family: var(--font-body); font-size: 9px; color: var(--ink-mute); letter-spacing: 0.04em; margin-top: 2px; }
  /* переключатель: свой класс (.toggle в base.css рисует собственную ручку ::after —
     отсюда были «лишние кружки»); один невидимый checkbox 44×44 + дорожка с ручкой */
  .pf-switch { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; cursor: pointer; }
  .pf-switch input {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0;
    cursor: pointer; -webkit-appearance: none; appearance: none;
  }
  .pf-switch__track {
    position: relative; width: 40px; height: 24px; box-sizing: border-box; border-radius: 999px;
    background: var(--bg-soft); border: 1px solid var(--hair);
    transition: background-color .18s var(--ease-ui), border-color .18s var(--ease-ui);
  }
  .pf-switch__track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--ink-faint); transition: transform .18s var(--ease-ui), background-color .18s var(--ease-ui);
  }
  .pf-switch input:checked + .pf-switch__track { background: var(--accent); border-color: var(--accent); }
  .pf-switch input:checked + .pf-switch__track::after { transform: translateX(16px); background: var(--ink-on-dark); }
  .pf-switch input:focus-visible + .pf-switch__track { outline: 2px solid var(--accent); outline-offset: 3px; }
  .pf-switch input:disabled { cursor: default; }
  .pf-switch input:disabled + .pf-switch__track { opacity: .5; }
  @media (prefers-reduced-motion: reduce) {
    .pf-switch__track, .pf-switch__track::after, .avatar, .avatar::after, .theme-opt { transition: none; }
  }
  .saved-flag { font-family: var(--font-body); font-size: 10px; color: var(--moss, #4a6b4f); letter-spacing: 0.06em; height: 14px; }

  .pf-tabs {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin;
    margin: -8px 0 20px; padding: 8px 1px;
  }
  .pf-tabs button {
    flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 1px solid var(--hair);
    border-radius: 999px; background: var(--bg-canvas); color: var(--ink-mute);
    font: 600 12px var(--font-body); cursor: pointer;
  }
  .pf-tabs button.on { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
  .pf-tabs button:focus-visible, .theme-opt:focus-visible, .btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: 2px;
  }
  [data-profile-section][hidden] { display: none !important; }
  .profile-inline-error {
    margin: 0 0 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--state-overdue) 36%, var(--hair));
    border-radius: var(--r-card); background: var(--bg-canvas); color: var(--state-overdue);
    font: 13px/1.5 var(--font-body);
  }
  .profile-inline-error p { margin: 0 0 10px; }
  .dsr-job { padding: 12px 0; border-top: 1px solid var(--hair-soft); }
  .dsr-job:first-child { border-top: 0; }
  .dsr-job__title { margin: 0; font: 600 13px var(--font-body); color: var(--ink); }
  .dsr-job__meta { margin: 4px 0 0; font: 11px/1.5 var(--font-body); color: var(--ink-mute); }
  .dsr-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

  .logout-row {
    margin-top: 32px; padding-top: 20px;
    border-top: 1px solid var(--hair);
    display: flex; justify-content: space-between; gap: 10px; align-items: center;
  }

  /* свёрнутый DSR */
  details.dsr summary { cursor: pointer; font: 500 12.5px var(--font-body); color: var(--ink-mute); padding: 8px 0; }
  details.dsr[open] summary { color: var(--ink); }

  .page-head { margin-bottom: 24px; }
  .page-head .eyebrow { margin-bottom: 10px; }
  .page-head h1 {
    font-family: var(--font-display); font-style: normal; font-weight: 500;
    font-size: clamp(34px, 7vw, 50px); line-height: 0.96; letter-spacing: -0.02em; margin: 0;
  }
  .page-head h1 em { color: var(--accent); }

  /* aside-карточка профиля (десктоп) */
  .pf-aside { display: flex; flex-direction: column; gap: 16px; }
  .pf-id-card {
    background: var(--bg-canvas); border: 1px solid var(--hair); border-radius: var(--r-card);
    padding: 24px 22px; text-align: center;
  }
  .pf-id-card .pf-id-name {
    font-family: var(--font-display); font-style: normal; font-weight: 500;
    font-size: 22px; line-height: 1.1; color: var(--ink); margin: 16px 0 6px;
  }
  .pf-id-card .pf-id-meta {
    font-family: var(--font-body); font-size: 10px; letter-spacing: 0.10em;
    text-transform: none; color: var(--ink-mute); line-height: 1.5;
  }
  .pf-id-card .pf-id-meta .ac { color: var(--accent); }
  .pf-stat-card {
    background: var(--bg-canvas); border: 1px solid var(--hair); border-radius: var(--r-card);
    padding: 18px 20px;
  }
  .pf-stat-card .pf-card-h {
    font-family: var(--font-body); font-size: 11px; letter-spacing: 0.06em;
    color: var(--ink-mute); margin-bottom: 14px; font-weight: 600;
  }
  .pf-stat {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 9px 0; border-top: 1px solid var(--hair-soft);
  }
  .pf-stat:first-child { border-top: 0; padding-top: 0; }
  .pf-stat__k { font-family: var(--font-body); font-size: 13px; color: var(--ink-mute); }
  .pf-stat__v { font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 18px; color: var(--ink); }
  .pf-stat__v.accent { color: var(--accent); }

  @media (min-width: 1024px) {
    .pf-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: start; }
    .pf-aside { position: sticky; top: 84px; }
    .profile-head { display: none; }
  }
  @media (max-width: 1023px) {
    .pf-aside { display: none; }
  }

/* 17.09: [hidden] у .field (display:grid) — как у обычных элементов */
.field[hidden] { display: none; }