/* =========================
   Student hero / layout
========================= */
.student-hero--split{
  display: flex;
  gap: 14px;
  flex-wrap: nowrap;
}

.student-hero__block--profile{
  flex-shrink: 0;
}
.student-hero__block--stats{
  flex: 1;
  min-width: 0;
  /* Glassmorphism: semi-transparent + blur so page gradient shows through */
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
html.invert-images .student-hero__block--stats{
  background: rgba(18, 18, 22, 0.5);
  border-color: rgba(233, 233, 233, 0.18);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(233, 233, 233, 0.08);
}

.student-hero__inner{
  display:flex;
  gap:18px;
  align-items:center;
}
.student-hero__block--profile .student-hero__inner{
  flex-direction: column;
  align-items: flex-start;
}
.student-hero__block--profile .student-hero__cta{
  margin-top: 12px;
  width: 100%;
}

.student-hero__left{ display:flex; gap:14px; align-items:center; }
.student-hero__avatar{ width:64px; height:64px; border-radius:999px; overflow:hidden; }
.student-hero__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.student-hero__avatar--stub{
  width:64px; height:64px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; background:rgba(255,255,255,0.06);
}
.student-hero__name-row{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.student-hero__name{ font-weight:900; font-size:22px; line-height:1.1; }
.student-hero__edit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  padding:0;
  margin-left:2px;
  border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.12);
  color:inherit;
  cursor:pointer;
  opacity:0.7;
  text-decoration:none;
}
.student-hero__edit-btn svg{
  width:14px;
  height:14px;
  fill: currentColor;
}
.student-hero__edit-btn:hover{
  opacity:1;
  background:rgba(255,255,255,0.18);
}

/* Две строки: верхняя — статы (с переносом внутри), нижняя — кнопки */
.student-hero__block--stats .card__pad{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.student-hero__stats-row{
  width: 100%;
  min-width: 0;
}
.student-hero__block--stats .student-hero__stats{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}
.student-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.student-hero__right{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:flex-start; }
.student-hero__stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}
.student-hero__stats .stat{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.14);
  min-width:0;
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.35);
  box-shadow: 0 4px 12px rgba(15,23,42,0.16);
}
html.invert-images .student-hero__stats .stat{
  background: rgba(18,18,22,0.6);
  border-color: rgba(233,233,233,0.20);
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
.stat{ padding:10px 12px; border-radius:14px; background:rgba(255,255,255,0.04); min-width:120px; }
.stat__value{ font-weight:900; font-size:18px; }
.stat__label{ font-size:12px; opacity:.75; margin-top:2px; word-wrap:break-word; overflow-wrap:break-word; }

/* Compact subject picker inside hero */
.student-hero__right .subject-picker,
.student-hero__block--stats .subject-picker,
.student-hero__block--profile .subject-picker{
  display: inline-block;
  max-width: 100%;
}
.student-hero__right .subject-picker__select,
.student-hero__block--stats .subject-picker__select,
.student-hero__block--profile .subject-picker__select{
  min-width: 180px;
  max-width: 260px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:14px;
  margin-top:14px;
}

.student-col{
  min-width: 0;
}

/* Первая карточка в колонках на одной высоте (календарь и прогноз балла) */
.student-col--left > .card:first-child{
  margin-top: 0 !important;
}
.student-col--right > .card:first-child{
  margin-top: 0 !important;
}

@media (max-width: 980px){
  .student-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .student-hero--split{
    flex-direction: column;
  }
  .student-hero__inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .student-hero__right{
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  /* Правая колонка: карточки адаптируются под ширину как календарь/аккаунт */
  .student-col--right .card__pad{
    box-sizing: border-box;
    max-width: 100%;
  }
  .student-col--right .score-forecast__bar{ min-width: 8px; }
  .student-col--right .chart-by-number__num{
    width: 52px;
    flex: 0 0 52px;
  }
  .student-col--right .chart-by-number__pct{ min-width: 28px; font-size: 11px; }

  /* Динамика прогноза: по дням — прореживаем подписи (30 точек); по неделям подписи не скрываем */
  [data-forecast-dynamics-root][data-range="day"] .score-forecast__bar:nth-child(2n+1) .score-forecast__bar-label{
    display: none;
  }
  /* По неделям: показываем только последние 6 недель (скрываем 6 старых) */
  [data-forecast-dynamics-root] [data-strip="week"] .score-forecast__bar:nth-child(-n+6){
    display: none;
  }
}

@media (max-width: 480px){
  /* По неделям: на очень узком экране — только последние 4 недели */
  [data-forecast-dynamics-root] [data-strip="week"] .score-forecast__bar:nth-child(-n+8){
    display: none;
  }
}

/* =========================
   Timeline cards / chips
========================= */
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ padding:6px 10px; border-radius:999px; background:rgba(255,255,255,0.05); font-size:12px; }
.chip--cal-range{
  width: 220px;
  min-width: 220px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* Стрелки и чип календаря (месяц/год). Если не умещаются в ряд — чип можно перенести на вторую строку */
.cal-nav-group{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.event-card{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.04);
  text-decoration:none;
  color:inherit;
  margin-top:10px;
}
.event-card__row{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.event-card__title{ font-weight:850; }
.event-card__meta{ font-size:12px; opacity:.75; }

.progressbar{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  overflow:hidden;
}
.progressbar__fill{
  height:100%;
  background:rgba(160,120,255,0.9);
}








/* базовая карточка: добавим тонкий контур */
.event-card{
  border: 1px solid rgba(0,0,0,0.06);
}
html.invert-images .event-card{
  border-color: rgba(233, 233, 233, 0.14);
}

/* статусные — контур + чуть-чуть тонированный фон */
.event-card--overdue{
  border-color: rgba(255,90,90,0.55);
  background: rgba(255,90,90,0.06);
}
.event-card--today{
  border-color: rgba(255,220,90,0.60);
  background: rgba(255,220,90,0.07);
}
.event-card--tomorrow{
  border-color: rgba(120,220,255,0.55);
  background: rgba(120,220,255,0.06);
}
.event-card--week{
  border-color: rgba(120,255,170,0.55);
  background: rgba(120,255,170,0.06);
}
.event-card--soon{
  border-color: rgba(200,200,200,0.60);
  background: rgba(255,255,255,0.04);
}
.event-card--plan{
  border-color: rgba(160,120,255,0.55);
  background: rgba(160,120,255,0.06);
}

/* =========================
   Profile edit
========================= */
.profile-edit-card{
  max-width: 980px;
  margin: 0 auto;
}

.profile-edit__grid{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 860px){
  .profile-edit__grid{ grid-template-columns: 1fr; }
}

.profile-edit__fields-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 860px){
  .profile-edit__fields-grid{ grid-template-columns: 1fr; }
}

.profile-edit__avatar-block{
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  align-items: center;
}

.profile-edit__avatar-preview{
  width: 108px;
  height: 108px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow-sm);
  display:flex;
  align-items:center;
  justify-content:center;
}

html.invert-images .profile-edit__avatar-preview{
  background: rgba(255,255,255,.06);
}

.profile-edit__avatar-preview img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-edit__avatar-stub{
  font-size: 42px;
  opacity: .9;
}

.profile-edit__avatar-picker{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* hide raw file input: we trigger via label button */
.profile-edit input[type="file"]{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.profile-edit__file-name{
  font-size: 13px;
  color: var(--c-muted);
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-edit__upload-status{
  margin-top: 6px;
}

.profile-edit__errors .errorlist,
.profile-edit .errorlist{
  margin: 0;
  padding-left: 16px;
  color: var(--c-red);
  font-size: 13px;
}

.profile-edit__errors .errorlist{ margin-bottom: 8px; }


/* =========================
   Calendar base
========================= */
.cal-root{
  position: relative;
  margin-top: 12px;

  /* главный параметр “воздуха” вокруг карточки дня */
  --cell-pad: 7px;

  /* радиусы */
  --area-radius: 18px;
  --card-radius: 18px;
}

/* ВАЖНО: gap = 0, чтобы фон был непрерывным между строками/колонками */
/* .cal-grid-7{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  position: relative;
} */

/* Week/month wrappers use same grid */
.week-cal{ margin-top: 12px; }
.month-cal{ margin-top: 12px; }
.month-cal__head{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;           /* только у заголовка можно оставить gap */
  margin-bottom: 8px;
}
.month-cal__dow{
  font-size:12px;
  opacity:.7;
  text-align:center;
}

/* =========================
   Background areas (lvl1/2/3)
========================= */
.cal-area{
  position: relative;
  z-index: 1;
  border-radius: var(--area-radius);
  pointer-events: none;
}
a.cal-area{ pointer-events: auto; text-decoration: none; }

.cal-area::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--area-color);
  opacity: .14;
  border-radius: inherit;
}

/* Вложенность (делаем “уже”) */
/* 1) Базово: пусть cal-area не лезет в межнедельные щели по Y */
/* Сплошняк между днями (по X), но не лезем вверх/вниз (по Y) */
.cal-area{
  /* НЕ top/bottom — они смещают */
  top: auto;
  bottom: auto;

  /* режем вертикальные “поля” (в т.ч. в последней строке) */
  margin: var(--cell-pad) 0 !important;

  /* заливаем щели между днями */
  left: 0;
  right: 0;
}

/* Вложенность: сужаем только по X + чуть режем по Y, чтобы уровни были “внутри” */
.cal-area--lvl1{
  left: 0; right: 0;
}

.cal-area--lvl2{
  left: 6px; right: 6px;
  margin: calc(var(--cell-pad) + 6px) 0 !important;
}

.cal-area--lvl3{
  left: 12px; right: 12px;
  margin: calc(var(--cell-pad) + 12px) 0 !important;
}



/* подпись */
.cal-area__label{
  position:absolute;
  left: 12px;
  top: 10px;
  z-index: 2;
  font-size: 12px;
  font-weight: 900;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 24px);
}

/* Скругления: по умолчанию всё круглое, но если это “продолжение” — убираем */
/* если это продолжение — край должен быть прямым, без “лишнего” скругления */
.cal-area:not(.cap-left){
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.cal-area:not(.cap-right){
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.cal-area:not(.cap-top){
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.cal-area:not(.cap-bottom){
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


/* =========================
   Day cells (transparent)
========================= */
/* .cal-day{
  position: relative;
  z-index: 5;
  padding: var(--cell-pad);
} */

.cal-card{
  height: 100%;
  min-height: 110px;
  border-radius: var(--card-radius);

  /* полупрозрачная карточка, чтобы был виден фон */
  background: rgba(255,255,255,0.28);

  /* убираем “белую рамку”, оставляем очень мягкий контур */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  overflow: hidden;

  padding: 10px;
}
html.invert-images .cal-card{
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(233, 233, 233, 0.10);
}

/* today */
/* .cal-day.is-today .cal-card{
  box-shadow: inset 0 0 0 2px rgba(160,120,255,0.55);
} */

/* out-of-month */
/* .cal-day.is-out .cal-card{
  opacity: .55;
} */

/* week head/body text */
.week-day__date{ font-weight:850; font-size:12px; opacity:.9; }
.week-day__body{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }

/* month num/pills */
.month-day__num{
  font-weight: 800;
  font-size: 12px;
  opacity: .75;
}
.month-day__pills{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}

/* pills */
.pill{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  background:rgba(255,255,255,0.20);
}
.pill--hw{ border-left:3px solid rgba(255,220,90,0.9); }

/* =========================
   Range selection (teacher drag)
========================= */
.js-cal-day{ cursor: pointer; }

.js-cal-day.is-in-range .cal-card{
  background: rgba(111,44,255,0.10);
  box-shadow: inset 0 0 0 2px rgba(111,44,255,0.22);
}
.js-cal-day.is-range-start .cal-card,
.js-cal-day.is-range-end .cal-card{
  box-shadow: inset 0 0 0 2px rgba(111,44,255,0.40);
  background: rgba(111,44,255,0.14);
}

/* =========================
   Year calendar (12 mini months)
========================= */
.year-cal{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
  gap: 14px;
}

.year-cal__month-title{
  font-weight: 900;
  font-size: 13px;
  opacity: .85;
  margin: 6px 0 8px;
  text-align: center;
}

.year-cal__root{
  margin-top: 0;
}

.year-month-body{
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.18);
  overflow:hidden;
}
html.invert-images .year-month-body{
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(233, 233, 233, 0.10);
}

.year-day{
  padding: 4px;
}
.year-day__num{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto;
  font-weight: 900;
  font-size: 12px;
  background: rgba(0,0,0,0.03);
}
html.invert-images .year-day__num{
  background: rgba(255,255,255,0.06);
}
.year-day__num--empty{
  background: transparent !important;
  box-shadow: none !important;
}
.year-day.is-out{
  opacity: .25;
}

/* today in year view */
.year-day.is-today .year-day__num{
  box-shadow: inset 0 0 0 2px rgba(111,44,255,0.35);
}

/* range highlight in year view (no .cal-card there) */
.js-cal-day.is-in-range.year-day .year-day__num{
  background: rgba(111,44,255,0.10);
  box-shadow: inset 0 0 0 2px rgba(111,44,255,0.22);
}
.js-cal-day.is-range-start.year-day .year-day__num,
.js-cal-day.is-range-end.year-day .year-day__num{
  background: rgba(111,44,255,0.14);
  box-shadow: inset 0 0 0 2px rgba(111,44,255,0.40);
}

/* =========================
   Legend (NOTE)
========================= */
.cal-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
}
html.invert-images .cal-legend{
  border-top-color: rgba(233, 233, 233, 0.12);
}
.cal-legend__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  font-weight: 800;
}
html.invert-images .cal-legend__item{
  background: rgba(255,255,255,0.06);
}
.cal-legend__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block; 
}

/* =========================
   Calendar responsive (week / month / year)
   Неделя: при сужении 7 → 3 → 2 → 1 колонка (3+3+1, 2+2+2+1, столбик).
   По ширине контейнера (card), а не viewport — в узкой левой колонке тот же вид.
   Месяц: 7 колонок сохраняем; на узких — компактные ячейки или скролл.
   Год: auto-fill по minmax.
   Выделения плана (оверлей) не трогаем — пересчёт границ в plan_calendar.js.
========================= */
[data-calendar-card="1"]{
  container-type: inline-size;
  container-name: cal;
}

@container cal (max-width: 560px){
  .cal-root .week-cal{
    min-width: 0;
  }
  .cal-root .week-cal.cal-grid-7{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cal-root .week-cal .week-day{
    grid-column: auto !important;
    grid-row: auto !important;
  }
}
@container cal (max-width: 400px){
  .cal-root .week-cal.cal-grid-7{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container cal (max-width: 320px){
  .cal-root .week-cal.cal-grid-7{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  .cal-root{ overflow-x: auto; padding-bottom: 6px; }
  /* Месяц: без min-width, чтобы влезал в колонку без ползунков */
  .cal-root .month-cal{
    min-width: 0;
  }

  /* Week: 3 колонки → строки 3+3+1 */
  .cal-root .week-cal{
    min-width: 0;
  }
  .cal-root .week-cal.cal-grid-7{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cal-root .week-cal .week-day{
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 520px){
  /* Week: 2 колонки → 2+2+2+1 */
  .cal-root .week-cal.cal-grid-7{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Month: компактные ячейки, убираем жёсткий min-width — влезает по ширине */
  .cal-root .month-cal{
    min-width: 0;
  }
  .month-cal__head{
    gap: 4px;
    margin-bottom: 4px;
  }
  .month-cal__dow{ font-size: 10px; }
  .cal-card{ min-height: 80px; padding: 6px; }
  .month-day__num{ font-size: 11px; }
  .month-day__pills{ gap: 4px; margin-top: 4px; }
  .month-body .cal-day{ padding: 4px; }
}

@media (max-width: 380px){
  /* Week: 1 колонка — столбик */
  .cal-root .week-cal.cal-grid-7{
    grid-template-columns: 1fr;
  }
}







/* =========================
   Background masks (SVG overlays)
========================= */

.cal-grid-7{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  position: relative;
}

/* слой с svg поверх грида (но под карточками дней) */
.cal-overlays{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events: none;
}

.cal-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.cal-overlay text{
  font-size:12px;
  font-weight:900;
  opacity:.85;
  dominant-baseline:hanging;
}

/* сами карточки дней выше */
.cal-day{
  position: relative;
  z-index: 5;
  padding: var(--cell-pad);
}




/* легенда */
.cal-legend__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
}

.cal-legend__item.is-hl{
  background: rgba(0,0,0,.06);
}
html.invert-images .cal-legend__item.is-hl{
  background: rgba(255,255,255,0.10);
}

.cal-legend__del{
  display:none;
  width:22px;
  height:22px;
  border-radius:999px;
  border:0;
  background: rgba(0,0,0,.08);
  cursor:pointer;
  line-height:1;
}
html.invert-images .cal-legend__del{
  background: rgba(255,255,255,0.10);
  color: rgba(233, 233, 233, 1);
}

.cal-legend__item.is-picked .cal-legend__del{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* подсветка обычных div/a областей */
.cal-area.is-hl{
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: -2px;
}
html.invert-images .cal-area.is-hl{
  outline-color: rgba(233, 233, 233, 0.28);
}

/* если у тебя SVG-маски: подсветка path */
.cal-overlay{ pointer-events:none; }
.cal-overlay path{ pointer-events:auto; cursor:pointer; }
.cal-overlay path.is-hl{
  stroke: rgba(0,0,0,.35);
  stroke-width: 2;
}
html.invert-images .cal-overlay path.is-hl{
  stroke: rgba(233, 233, 233, 0.35);
}

.cal-overlay path.is-hl{
  stroke: rgba(0,0,0,.45);
  stroke-width: 2;
  opacity: 0.22;
}
html.invert-images .cal-overlay path.is-hl{
  stroke: rgba(233, 233, 233, 0.45);
  opacity: 0.22;
}


/* =========================
   Homework pill (calendar)
========================= */
.hw-pill{
  /* задаются из шаблона:
     --p: 50%;
     --pnum: 50;
  */
  --p: 0%;
  --pnum: 0;

  /* плавный переход: 0% = red (0deg), 50% = yellow (60deg), 100% = green (120deg) */
  --fill: hsl(calc(var(--pnum) * 1.2), 85%, 45%);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  text-decoration: none;
  color: inherit;

  background: rgba(255,255,255,0.20);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);

  overflow: hidden;
}

.hw-pill::before{
  content:"";
  position:absolute;
  inset:0;
  width: var(--p);
  background: var(--fill);
  opacity: 0.28;
  z-index: 0;
}

.hw-pill:hover::before{ opacity: 0.34; }
.hw-pill:hover{ box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14); }

.hw-pill__text{
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 850;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.hw-pill__pct{
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 22px;
  min-width: 36px;
  padding: 0 8px;

  border-radius: 999px;

  background: rgba(255,255,255,0.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);

  font-size: 12px;
  font-weight: 900;
}

/* =========================
   Activity bars (week / month)
========================= */
.activity-bars__toggle.is-active { background: rgba(255,255,255,0.12); }
.activity-bars__strip { display: flex; gap: 4px; align-items: flex-end; min-height: 60px; }
.activity-bars__strip--month { flex-wrap: wrap; }
.activity-bars__day { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.activity-bars__bar {
  width: 100%;
  max-width: 24px;
  height: calc(40px * (var(--h) / var(--max)));
  min-height: 2px;
  max-height: 48px;
  background: rgba(160, 120, 255, 0.6);
  border-radius: 4px 4px 0 0;
  margin-bottom: 4px;
}
.activity-bars__label { font-size: 10px; opacity: .8; }

/* Field help — подсказка «?» в кружке (скопировано из формы регистрации) */
.field-help {
  margin-left: 0px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.3);
  background: transparent;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,.6);
  position: relative;
  vertical-align: bottom;
}
.field-help:hover {
  background: rgba(0,0,0,.04);
}
.field-help::after {
  content: attr(data-hint);
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(8px, -50%);
  white-space: nowrap;
  background: #111827;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  transform-origin: center left;
}
.field-help--multiline::after {
  white-space: normal;
  max-width: 400px;
  text-align: left;
}
.field-help:hover::after,
.field-help:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Score forecast */
.forecast-dynamics__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  font-weight: 700;
  cursor: help;
  line-height: 1;
}
.forecast-dynamics__hint:hover { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }

.score-forecast__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.score-forecast__histogram { display: flex; gap: 2px; align-items: flex-end; height: 48px; }
.score-forecast__bar { flex: 1; min-width: 12px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.score-forecast__bar-fill {
  width: 100%;
  height: calc(100% * var(--p));
  min-height: 2px;
  background: rgba(160, 120, 255, 0.7);
  border-radius: 4px 4px 0 0;
  margin-top: auto;
}
.score-forecast__bar-label { font-size: 10px; opacity: .8; margin-top: 2px; }

/* Chart by number */
.chart-by-number__row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.chart-by-number__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 52px;
  flex: 0 0 52px;
  height: 23px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
}
html.invert-images .chart-by-number__num {
  border-color: rgba(233, 233, 233, 0.22);
  background: rgba(255, 255, 255, 0.08);
}
.chart-by-number__score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 999px;
  background: var(--c-yellow, #FFDD2D);
  color: #121212;
  font-weight: 800;
  font-size: 10px;
  line-height: 1;
}
html.invert-images .chart-by-number__score {
  background: var(--c-yellow, #FFDD2D);
  color: #121212;
}
.chart-by-number__bar-wrap { flex: 1; min-width: 0; height: 14px; background: rgba(255,255,255,0.06); border-radius: 6px; overflow: hidden; position: relative; display: flex; border: 1px solid rgba(18,18,18,0.18); }
.chart-by-number__bar { height: 100%; border-radius: 6px; transition: width .2s; }
.chart-by-number__bar--target { background: rgba(80, 180, 100, 0.6); position: absolute; left: 0; top: 0; }
.chart-by-number__bar--current { background: rgba(160, 120, 255, 0.85); position: absolute; left: 0; top: 0; z-index: 1; }
.chart-by-number__pct { min-width: 36px; font-size: 12px; opacity: .85; }
.chart-by-number__row--no-data { opacity: .6; }
.chart-by-number__row--no-data .chart-by-number__bar-wrap { background: rgba(255,255,255,0.03); }

.work-on-mistakes__link { display: block; text-decoration: none; color: inherit; padding: 4px 0; }
.work-on-mistakes__link:hover { text-decoration: underline; }
.work-on-mistakes__title { font-weight: 700; }
.work-on-mistakes__reason { display: block; font-size: 12px; margin-top: 2px; }