/* ─────────────────────────────────────────────────────────────
   VINIRDENT — единое оформление сайта

   Слой поверх style.css, подключается на всех страницах. Основная
   часть работы делается переопределением переменных: их использует
   вся базовая вёрстка, поэтому палитра подхватывается сама, а ниже
   остаётся дописать стекло, движение и частные случаи страниц.

   Палитра: только чёрное и белое. Цвета нет вообще, поэтому вся
   иерархия держится на трёх вещах — плотности чёрного, толщине
   светлой линии по верхней грани и движении. Белое тратим скупо:
   им отмечено только активное и итоговое, иначе оно перестаёт
   выделять хоть что-то.
   ───────────────────────────────────────────────────────────── */

body {
  /* Белое как акцент. В светлой теме роли переворачиваются. */
  --accent:       #ffffff;
  --accent-text:  #000000;
  --accent-soft:  rgba(255, 255, 255, .10);
  --accent-line:  rgba(255, 255, 255, .26);
  --accent-glow:  rgba(255, 255, 255, .22);
  --sheen-line:   rgba(0, 0, 0, .14);

  /* Чистый чёрный фон, а поверхности — светлые плёнки поверх него.
     Так слои складываются сами и не расходятся при наложении. */
  --bg:         #000000;
  --surface:    rgba(255, 255, 255, .038);
  --surface-2:  rgba(255, 255, 255, .058);
  --surface-3:  rgba(255, 255, 255, .085);
  --line:       rgba(255, 255, 255, .12);
  --line-soft:  rgba(255, 255, 255, .06);

  /* Четыре ступени серого. Самая бледная держит контраст 4.5:1
     к поверхности карточки — мелкие подписи экономии не терпят. */
  --text:       #ffffff;
  --text-dim:   #bcbcc2;
  --text-mute:  #91919a;
  --text-faint: #7c7c85;

  --ring: rgba(255, 255, 255, .16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .8), 0 4px 18px rgba(0, 0, 0, .55);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .7), 0 24px 60px rgba(0, 0, 0, .7);
  --shadow-lg: 0 8px 22px rgba(0, 0, 0, .7), 0 56px 120px rgba(0, 0, 0, .85);

  /* Светлая грань сверху — то, что отличает «панель» от «прямоугольника» */
  --hairline: inset 0 1px 0 rgba(255, 255, 255, .09);
}

[data-theme='light'] body {
  --accent:       #000000;
  --accent-text:  #ffffff;
  --accent-soft:  rgba(0, 0, 0, .07);
  --accent-line:  rgba(0, 0, 0, .22);
  --accent-glow:  rgba(0, 0, 0, .18);
  --sheen-line:   rgba(255, 255, 255, .30);

  --bg:         #f2f2f4;
  --surface:    rgba(255, 255, 255, .92);
  --surface-2:  rgba(0, 0, 0, .035);
  --surface-3:  rgba(0, 0, 0, .07);
  --line:       rgba(0, 0, 0, .14);
  --line-soft:  rgba(0, 0, 0, .075);

  --text:       #000000;
  --text-dim:   #3a3a3f;
  --text-mute:  #5c5c64;
  --text-faint: #6e6e77;

  --ring: rgba(0, 0, 0, .14);
  --hairline: inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ── Свет и зерно за содержимым ───────────────────────────────
   Два неподвижных слоя: мягкое световое пятно сверху, чтобы чёрный
   не был плоским, и еле заметное зерно, которое убирает «пластик»
   с больших однотонных площадей. Оба не перерисовываются. */
body::before,
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
}
body::before {
  background:
    radial-gradient(62vw 44vw at 22% -10%, rgba(255, 255, 255, .07), transparent 60%),
    radial-gradient(48vw 38vw at 88% 2%,  rgba(255, 255, 255, .04), transparent 58%);
}
[data-theme='light'] body::before {
  background:
    radial-gradient(62vw 44vw at 22% -10%, rgba(0, 0, 0, .05), transparent 60%),
    radial-gradient(48vw 38vw at 88% 2%,  rgba(0, 0, 0, .03), transparent 58%);
}
body::after {
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Плотность ────────────────────────────────────────────────
   Базовые стили увеличивали шрифты и отступы панели: кнопка была
   18px с отступом 34px. На рабочем экране, где важна плотность
   информации, это читается как интерфейс для слабовидящих. */
body .btn,
body.panel-page .btn         { padding: 11px 20px; font-size: 14.5px; }
body .btn--sm,
body.panel-page .btn--sm     { padding: 8px 15px;  font-size: 13px; }
body .field__input,
body.panel-page .field__input {
  padding: 13px 16px; font-size: 15px; border-radius: 14px;
}
body textarea.field__input,
body.panel-page textarea.field__input { min-height: 96px; }
body .field__label {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-mute);
}

/* В style.css есть блок, который увеличивал всю панель: вкладки 17.5px,
   поля 19px, строки списков с отступом 32px, календарь на 340px. На рабочем
   экране это съедало половину места. Возвращаем спокойный масштаб —
   селекторы с body.panel-page, чтобы перебить те правила по специфичности. */
body.panel-page .tab        { padding: 10px 20px; font-size: 14px; gap: 8px; }
body.panel-page .tab svg    { width: 16px; height: 16px; }
body.panel-page .icon-btn   { width: 32px; height: 32px; border-radius: 11px; }
body.panel-page .icon-btn svg { width: 16px; height: 16px; }

body.panel-page .field__label { font-size: 11px; }
body.panel-page .search       { width: min(300px, 58vw); }
body.panel-page .search input { padding: 11px 16px 11px 40px; font-size: 14.5px; }
body.panel-page .search svg   { left: 15px; width: 16px; height: 16px; }

body.panel-page .modal__box   { max-width: 520px; padding: 28px 28px 24px; }
body.panel-page .modal__title { font-size: 1.25rem; }
body.panel-page .modal__sub   { font-size: 13.5px; }
body.panel-page .modal__foot  { margin-top: 20px; }

body.panel-page .list-card__head  { padding: 20px 24px 16px; }
body.panel-page .list-card__title { font-size: 17px; }
body.panel-page .list-card__sub   { font-size: 13px; }

body.panel-page .entry              { padding: 16px 24px; gap: 16px; }
body.panel-page .entry__avatar      { width: 42px; height: 42px; font-size: 13.5px; border-radius: 13px; }
body.panel-page .entry__name        { font-size: 15px; }
body.panel-page .entry__phone       { font-size: 13.5px; }
body.panel-page .entry__description { font-size: 13.5px; }
body.panel-page .entry__meta        { font-size: 12px; }

body.panel-page .memo__head   { padding: 18px 24px; }
body.panel-page .memo__body   { padding: 0 24px 20px 70px; }
body.panel-page .memo__title  { font-size: 15.5px; }
body.panel-page .memo__meta   { font-size: 12px; }
body.panel-page .memo__area   { font-size: 14.5px; min-height: 150px; padding: 14px 16px; }
body.panel-page .memo__toggle,
body.panel-page .pcard__toggle { width: 32px; height: 32px; border-radius: 10px; }
body.panel-page .save-state   { font-size: 12px; padding: 5px 11px; }

/* Календарь справочный, а не рабочий: колонку под него сужаем, место
   нужнее списку записей. Но не в ноль — числа должны читаться. */
body.panel-page .records-grid    { grid-template-columns: minmax(0, 1fr) 304px; gap: 18px; }
body.panel-page .calendar        { padding: 18px; position: sticky; top: 88px; }
body.panel-page .clock           { padding: 16px 18px; text-align: center; }
body.panel-page .clock__time     { font-size: 1.9rem; line-height: 1.15; margin-bottom: 6px; }
body.panel-page .clock__zone     { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
body.panel-page .clock__date     { font-size: 12.5px; margin-top: 3px; }
body.panel-page .calendar__month { font-size: 14px; }
body.panel-page .calendar__nav   { width: 30px; height: 30px; }
body.panel-page .calendar__weekdays span { font-size: 11px; }
body.panel-page .day             { font-size: 13px; border-radius: 10px; }
body.panel-page .empty-state     { font-size: 14.5px; padding: 46px 22px; }

/* Цифры везде моноширинные по ширине: суммы и время в столбик
   не должны дрожать при смене значения. */
body .appt__time,
body .estimate__price,
body .estimate__total,
body .result__total,
body .pick__price,
body .clock__time,
body .day,
body .entry__phone { font-variant-numeric: tabular-nums; }

/* ── Шапка ────────────────────────────────────────────────────*/
body .site-header {
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
}
body .site-header.is-stuck {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 20px 44px -34px rgba(0, 0, 0, .95);
}

body .logo__mark {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 6px 22px -8px var(--accent-glow), var(--hairline);
}
body .logo__name { letter-spacing: .18em; font-weight: 700; }
body .logo__sub  { letter-spacing: .1em; color: var(--text-mute); }

body .site-nav a { color: var(--text-mute); }
body .site-nav a:hover { color: var(--text); }

/* Логин в шапке не показываем: на экране, который видят пациенты и который
   попадает на скриншоты, имя учётной записи ни к чему. Остаются инициалы —
   по ним понятно, что вход выполнен, и ссылка на профиль работает. */
body .user-chip__login { display: none; }
body .user-chip { padding: 4px; }

/* ── Вкладки ──────────────────────────────────────────────────*/
/* Переключатель стоит по центру полосы: он единственный элемент в ряду,
   и прижатый к левому краю выглядел случайно поставленным. */
body .tabs-head { justify-content: center; }

body .tabs {
  background: var(--surface);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color: var(--line-soft);
  box-shadow: var(--shadow-sm), var(--hairline);
}
body .tab { font-size: 14px; padding: 10px 20px; }
body .tab.is-active { background: none; color: var(--accent-text); box-shadow: none; }

body .tabs__glider {
  background: var(--accent);
  box-shadow: 0 8px 26px -10px var(--accent-glow), var(--hairline);
}

/* ── Карточки-полотна ─────────────────────────────────────────*/
body .list-card,
body .calendar {
  background: var(--surface);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  box-shadow: var(--shadow-md), var(--hairline);
  animation: panel-rise .6s var(--ease-glide) both;
}
body .calendar { animation-delay: .07s; }

@keyframes panel-rise {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

body .list-card__head {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 18px;
}
body .list-card__title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
body .list-card__sub   { color: var(--text-mute); font-size: 13px; }

/* Часы — единственный крупный белый блок, поэтому он и держит взгляд */
body .clock {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 18px 44px -24px var(--accent-glow), var(--hairline);
}
body .clock__time {
  letter-spacing: -.03em;
  font-weight: 700;
}
/* Двоеточие мигает в такт секунде — единственное «живое» на экране */
body .clock__time::first-letter { letter-spacing: -.03em; }

body .clock__zone,
body .clock__date { opacity: .62; }

/* ── Строки списков ───────────────────────────────────────────
   Наведение отделяет строку от полотна и выращивает светлую метку
   у левого края — глазу не нужно искать, где начинается запись. */
body .appt,
body .entry,
body .pcard,
body .memo { position: relative; }

body .appt::before,
body .entry::before,
body .pcard::before,
body .memo::before {
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  opacity: 0;
  transition: transform .38s var(--ease-glide), opacity .28s var(--ease);
}
body .appt:hover::before,
body .entry:hover::before,
body .memo:hover::before,
body .pcard:hover::before { transform: scaleY(1); opacity: .55; }
body .pcard.is-open::before,
body .appt.is-open::before,
body .memo.is-open::before { transform: scaleY(1); opacity: 1; }

body .appt,
body .entry,
body .pcard,
body .memo,
body .user-row {
  transition: background .25s var(--ease), transform .35s var(--ease-glide);
}
body .appt:hover,
body .entry:hover,
body .pcard:hover,
body .memo:hover,
body .user-row:hover { background: var(--surface-2); }

/* Время приёма — цифра, ради которой открывают вкладку */
body .appt__time {
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  color: var(--text);
  letter-spacing: -.01em;
  box-shadow: var(--hairline);
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
body .appt:hover .appt__time,
body .appt.is-open .appt__time {
  background: var(--accent); color: var(--accent-text); border-color: transparent;
}
body .appt__name { font-weight: 650; }
body .appt__flag { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }

/* Заголовок дня — точка отсчёта в списке, поэтому крупнее и светлее
   остальных подписей: по нему глаз находит нужный день при прокрутке. */
body .daygroup__date {
  color: var(--text);
  font-size: 15px; font-weight: 700;
  letter-spacing: -.01em; text-transform: none;
}
body .daygroup__head { padding-top: 18px; padding-bottom: 12px; }
body .daygroup + .daygroup { border-top: 1px solid var(--line-soft); }
body .daygroup.is-past { opacity: .5; }

@media (max-width: 900px) {
  body.panel-page .records-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Заведение пациента из формы записи ───────────────────────*/
body .field__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
}
body .icon-btn--boxed {
  width: 40px; height: 40px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  color: var(--text-dim);
  box-shadow: var(--hairline);
}
body .icon-btn--boxed:hover {
  background: var(--accent); color: var(--accent-text); border-color: transparent;
}

body .quick-add {
  margin-top: 12px; padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: var(--hairline);
  animation: memo-open .3s var(--ease) both;
}
body .quick-add[hidden] { display: none; }
body .quick-add__title {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-mute);
}
body .quick-add__foot {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;
}

/* ── Окно записи: две колонки, без прокрутки ──────────────────
   Слева то, что заполняют руками, справа выбор даты. В один столбец
   форма не помещалась на экран и приходилось листать. */
body.panel-page #modal-appointment .modal__box { max-width: 720px; }
body #modal-appointment .field { margin-bottom: 16px; }
body #modal-appointment .time-quick { gap: 6px; }
body #modal-appointment .minical { padding: 10px; }
body #modal-appointment .minical .day { font-size: 12.5px; border-radius: 8px; }

body .appt-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 246px;
  gap: 22px;
  align-items: start;
}
body .appt-form__main > .field:last-child { margin-bottom: 0; }
body .appt-form__side .minical { margin-top: 0; }

@media (max-width: 640px) {
  body .appt-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ── Кнопки под боковым календарём ────────────────────────────*/
body .calendar__foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 14px;
}
body .calendar__foot .btn { padding-left: 0; padding-right: 0; }

/* Клик по дате в календаре подсвечивает нужный день в списке —
   иначе после прокрутки непонятно, куда именно тебя привело. */
body .daygroup.is-target { animation: day-flash 1.6s var(--ease) both; }

@keyframes day-flash {
  0%   { background: var(--accent-soft); }
  100% { background: transparent; }
}

/* День с записями кликабелен, поэтому и ведёт себя как кнопка */
body.panel-page .calendar--compact .day--booked { cursor: pointer; }

/* ── Фотоальбомы ──────────────────────────────────────────────*/
body .album {
  position: relative;
  border-bottom: 1px solid var(--line-soft);
  animation: card-in .4s var(--ease) backwards;
  transition: background .25s var(--ease);
}
body .album:last-child { border-bottom: none; }
body .album:hover { background: var(--surface-2); }
body .album.is-removing { animation: card-out .3s var(--ease) both; }

body .album::before {
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px;
  background: var(--accent);
  transform: scaleY(0); opacity: 0;
  transition: transform .38s var(--ease-glide), opacity .28s var(--ease);
}
body .album:hover::before { transform: scaleY(1); opacity: .55; }
body .album.is-open::before { transform: scaleY(1); opacity: 1; }

body .album__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 16px;
  padding: 18px 26px;
}
body .album__meta { font-size: 12px; color: var(--text-faint); margin-top: 3px; }

body .album.is-open .pcard__toggle svg { transform: rotate(90deg); }

body .album__body {
  padding: 0 26px 22px 76px;
  animation: memo-open .35s var(--ease) both;
}
body .album__body[hidden] { display: none; }

/* Сетка снимков: карточки одного размера, картинка кадрируется по центру —
   иначе вертикальные и горизонтальные снимки рвут ряд. */
body .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
body .shot {
  position: relative; margin: 0;
  aspect-ratio: 1;
  border-radius: 14px; overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  box-shadow: var(--hairline);
}
body .shot img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s var(--ease-glide);
}
body .shot:hover img { transform: scale(1.06); }

body .shot__x {
  position: absolute; top: 7px; right: 7px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .62);
  border: none; border-radius: 8px;
  color: #fff; cursor: pointer;
  opacity: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .25s var(--ease), background .2s var(--ease);
}
body .shot:hover .shot__x,
body .shot__x:focus-visible { opacity: 1; }
body .shot__x:hover { background: var(--danger); }

body .shot__open {
  display: block; width: 100%; height: 100%;
  padding: 0; border: none; background: none; cursor: zoom-in;
}

/* ── Просмотр альбома ─────────────────────────────────────────
   Снимок на весь экран, лента кадров внизу. Открывается внутри
   портала, а не соседней вкладкой: там снимок остался бы файлом
   без имени пациента и без возможности листать. */
body .lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 14px;
  animation: lightbox-in .35s var(--ease-glide) both;
}
body .lightbox:not([hidden]) { display: grid; }

@keyframes lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body .lightbox__bar {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 4px 6px;
  color: #fff;
}
body .lightbox__title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
body .lightbox__title > span:first-child {
  font-size: 15px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body .lightbox__count {
  font-size: 12.5px; color: rgba(255, 255, 255, .6);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
body .lightbox__bar .icon-btn { color: rgba(255, 255, 255, .75); }
body .lightbox__bar .icon-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }

body .lightbox__stage {
  grid-column: 2; grid-row: 2;
  margin: 0; min-width: 0; min-height: 0;
  display: grid; place-items: center;
}
body .lightbox__stage img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
  animation: shot-in .4s var(--ease-glide) both;
}

@keyframes shot-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}

body .lightbox__nav {
  grid-row: 2; align-self: center;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: #fff; cursor: pointer;
  transition: background .2s var(--ease), transform .35s var(--ease-soft);
}
body .lightbox__nav:hover { background: rgba(255, 255, 255, .2); }
body .lightbox__nav:active { transform: scale(.9); }
body .lightbox__nav--prev { grid-column: 1; }
body .lightbox__nav--next { grid-column: 3; }
body .lightbox__nav[hidden] { display: none; }

body .lightbox__strip {
  grid-column: 1 / -1;
  display: flex; gap: 8px;
  overflow-x: auto; padding: 4px 2px;
  scrollbar-width: thin;
}
body .lightbox__strip:empty { display: none; }

body .strip__item {
  flex: none;
  width: 62px; height: 62px;
  padding: 0; border: 2px solid transparent; border-radius: 10px;
  overflow: hidden; background: none; cursor: pointer;
  opacity: .55;
  transition: opacity .25s var(--ease), border-color .25s var(--ease);
}
body .strip__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
body .strip__item:hover { opacity: .85; }
body .strip__item.is-current { opacity: 1; border-color: #fff; }

@media (max-width: 560px) {
  body .lightbox__nav { width: 38px; height: 38px; }
  body .strip__item { width: 50px; height: 50px; }
}

/* ── Выбор файлов в модалке ───────────────────────────────────*/
body .dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 20px;
  background: var(--surface-2);
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  cursor: pointer; text-align: center;
  transition: border-color .25s var(--ease), background .25s var(--ease),
              transform .35s var(--ease-glide);
}
body .dropzone:hover { border-color: var(--accent-line); background: var(--surface-3); }
body .dropzone.is-over {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.01);
}
body .dropzone__icon { color: var(--text-mute); }
body .dropzone__title { font-size: 14.5px; font-weight: 600; }
body .dropzone__hint { font-size: 12.5px; color: var(--text-faint); }

body .thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
body .thumbs:not(:empty) { margin-top: 12px; }

body .thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line-soft);
  animation: card-in .35s var(--ease) backwards;
}
body .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body .thumb__x {
  position: absolute; top: 5px; right: 5px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .66);
  border: none; border-radius: 7px;
  color: #fff; cursor: pointer;
}
body .thumb__x:hover { background: var(--danger); }
body .thumb__size {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 6px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  color: #fff; font-size: 10.5px; text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  body .album__head { padding: 16px 18px; gap: 12px; }
  body .album__body { padding: 0 18px 18px; }
  body .gallery { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* ── Кнопки ───────────────────────────────────────────────────*/
body .btn--primary {
  position: relative; overflow: hidden;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  box-shadow: 0 10px 28px -14px var(--accent-glow), var(--hairline);
}
/* Блик пробегает по кнопке при наведении — «дорогая» деталь,
   которая ничего не стоит и не отвлекает в покое. */
body .btn--primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 34%, var(--sheen-line) 50%, transparent 66%);
  transform: translateX(-130%);
  transition: transform .85s var(--ease-glide);
  pointer-events: none;
}
body .btn--primary:hover:not(:disabled)::after { transform: translateX(130%); }
body .btn--primary > * { position: relative; z-index: 1; }
body .btn--primary:hover:not(:disabled) {
  box-shadow: 0 18px 38px -14px var(--accent-glow), var(--hairline);
}

body .btn--ghost {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body .btn--ghost:hover:not(:disabled) {
  border-color: var(--accent-line);
  color: var(--text);
  background: var(--surface-3);
}

body .icon-btn { border-radius: 11px; color: var(--text-mute); }
body .icon-btn:hover { background: var(--surface-3); color: var(--text); }

/* ── Поля и поиск ─────────────────────────────────────────────*/
body .field__input,
body .search input {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  box-shadow: var(--hairline);
}
body .field__input:focus,
body .search input:focus {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 4px var(--ring), var(--hairline);
}
body .search {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-full);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
body .search:focus-within { border-color: var(--accent-line); }
body .search svg { color: var(--text-mute); transition: color .25s var(--ease); }
body .search:focus-within svg { color: var(--text); }

/* ── Метки и подсветка поиска ─────────────────────────────────*/
body .tag {
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
}
body .tag--accent {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-text);
}
body mark {
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 4px;
}

/* ── Календарь ────────────────────────────────────────────────*/
body .day { transition: background .2s var(--ease), color .2s var(--ease),
                               transform .35s var(--ease-soft), box-shadow .25s var(--ease); }
body .day:hover { background: var(--surface-3); }

/* Сегодня — сплошное белое, выбранное — стекло. Два разных сигнала,
   которые могут стоять рядом и не сливаться. */
body .day--today,
body .day--today:hover {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
  box-shadow: 0 6px 20px -10px var(--accent-glow);
}
body .day--picked,
body .day--picked:hover {
  background: var(--surface-3);
  border-color: var(--accent-line);
  color: var(--text);
  box-shadow: var(--hairline);
}
body .day--picked.day--today,
body .day--picked.day--today:hover {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 0 0 3px var(--accent-line), 0 6px 20px -10px var(--accent-glow);
}
body .day--booked::after { background: currentColor; opacity: .85; }
body .calendar__swatch--booked::after { background: var(--text); }

/* ── Расчёт и деньги ──────────────────────────────────────────*/
body .estimate__total,
body .result__total { letter-spacing: -.03em; }
body .result__total { text-shadow: 0 0 60px var(--accent-glow); }
body .result__badge { background: var(--accent); color: var(--accent-text); }

body .pick { transition: border-color .25s var(--ease), background .25s var(--ease),
                                transform .38s var(--ease-glide); }
body .pick:hover { border-color: var(--line); transform: translateX(4px); }
body .pick.is-picked { background: var(--surface-3); border-color: var(--accent-line); }
body .pick.is-picked .pick__mark {
  background: var(--accent); color: var(--accent-text); border-color: transparent;
}

body .chip {
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  color: var(--text);
}

/* ── Карточка пациента ────────────────────────────────────────*/
body .pcard__toggle,
body .memo__toggle {
  background: var(--surface-3);
  border-color: var(--line-soft);
}
body .pcard.is-open .pcard__toggle,
body .memo.is-open .memo__toggle {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
  box-shadow: 0 6px 18px -10px var(--accent-glow);
}
body .pcard__col {
  background: var(--surface-2);
  border-color: var(--line-soft);
  border-radius: 16px;
  box-shadow: var(--hairline);
}
body .pcard__col-title,
body .estimate__label { color: var(--text-mute); }
body .entry__avatar {
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  box-shadow: var(--hairline);
}

/* ── Блокноты и описания ──────────────────────────────────────*/
body .memo__area,
body .appt__area {
  background: var(--surface-2);
  border-color: var(--line-soft);
  box-shadow: var(--hairline);
}
body .memo__area:focus,
body .appt__area:focus {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 4px var(--ring), var(--hairline);
}

/* ── Модальные окна ───────────────────────────────────────────*/
body .modal__box {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(34px) saturate(130%);
  -webkit-backdrop-filter: blur(34px) saturate(130%);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lg), var(--hairline);
  animation: modal-in .5s var(--ease-glide) both;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(18px) scale(.965); }
  to   { opacity: 1; transform: none; }
}

body .modal__title { letter-spacing: -.02em; }
body .modal__sub { color: var(--text-mute); }
body .modal__head { border-bottom: 1px solid var(--line-soft); padding-bottom: 18px; }
body .minical {
  background: var(--surface-2);
  border-color: var(--line-soft);
  border-radius: 16px;
  box-shadow: var(--hairline);
}

/* ── Пустые состояния ─────────────────────────────────────────*/
body .empty-state {
  color: var(--text-mute);
  background: radial-gradient(64% 100% at 50% 0%, var(--accent-soft), transparent 72%);
  border-radius: 16px;
}

/* ── Прокрутка ────────────────────────────────────────────────*/
body ::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: var(--r-full);
}
body ::-webkit-scrollbar-thumb:hover { background: var(--line); }

/* ── Слабые машины и запрет анимаций ──────────────────────────
   Размытие — самое дорогое, что здесь есть. Там, где движение
   отключено, обычно и производительность в цене: снимаем блюр и
   заменяем полупрозрачные плёнки сплошным цветом. */
@media (prefers-reduced-motion: reduce) {
  body .list-card,
  body .calendar,
  body .modal__box,
  body .site-header,
  body .tabs,
  body .btn--ghost {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body .list-card,
  body .calendar,
  body .tabs,
  body .modal__box { background: #0b0b0d; }
  [data-theme='light'] body .list-card,
  [data-theme='light'] body .calendar,
  [data-theme='light'] body .tabs,
  [data-theme='light'] body .modal__box { background: #ffffff; }
}

@media (max-width: 720px) {
  body .list-card,
  body .calendar { border-radius: 18px; }
  body .modal__box { border-radius: 20px; }
}

/* ═════════════════════════════════════════════════════════════
   Остальные страницы

   Палитру они получили сами — вся базовая вёрстка построена на тех
   же переменных. Ниже только то, чего переменными не выразить:
   стекло, светлая грань и появление.
   ═════════════════════════════════════════════════════════════ */

/* ── Вход ─────────────────────────────────────────────────────
   Боковая панель убрана: она пересказывала правила доступа тем,
   кто и так сотрудник. Осталась одна форма по центру экрана. */
body .auth-page { grid-template-columns: 1fr; }
body .auth-main { min-height: 100vh; }
body .auth-box { animation: panel-rise .6s var(--ease-glide) both .08s; }
body .step-panel {
  background: var(--surface);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  box-shadow: var(--shadow-md), var(--hairline);
}
body .auth-point__dot { background: var(--accent); }

/* Точки шагов входа */
body .steps__dot.is-done,
body .steps__dot.is-current { background: var(--accent); color: var(--accent-text); }

/* ── Главная ──────────────────────────────────────────────────
   Плашки со «статистикой» и раздел «Всё рабочее» убраны: портал
   внутренний, и рассказывать сотруднику, что у него есть база и
   вход по коду, незачем. Осталось название и кнопка входа. */
body .hero__panel {
  border-radius: 32px;
  box-shadow: var(--shadow-lg);
}
body .hero__grid {
  grid-template-columns: 1fr;
  max-width: 720px;
  gap: 0;
}
body .hero { padding-bottom: 40px; }
body .display,
body .h2 { letter-spacing: -.035em; }

/* Плитки на главной — то же стекло, что и в панели */
body .tile {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  box-shadow: var(--shadow-sm), var(--hairline);
  animation: panel-rise .6s var(--ease-glide) both;
}
body .cards .tile:nth-child(1) { animation-delay: .04s; }
body .cards .tile:nth-child(2) { animation-delay: .12s; }
body .cards .tile:nth-child(3) { animation-delay: .20s; }

body .tile:hover {
  border-color: var(--line);
  box-shadow: var(--shadow-md), var(--hairline);
}
body .tile__icon {
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  box-shadow: var(--hairline);
}
body .tile:hover .tile__icon { background: var(--accent); color: var(--accent-text); }

body .site-footer { border-top-color: var(--line-soft); }

/* ── Профиль и админка ────────────────────────────────────────*/
body .board-head,
body .admin-cta {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  box-shadow: var(--shadow-sm), var(--hairline);
}

/* Строка аккаунта ведёт себя как строки списков в панели */
body .user-row { position: relative; transition: background .25s var(--ease); }
body .user-row::before {
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px;
  background: var(--accent);
  transform: scaleY(0); opacity: 0;
  transition: transform .38s var(--ease-glide), opacity .28s var(--ease);
}
body .user-row:hover::before { transform: scaleY(1); opacity: .55; }

/* ── 404 ──────────────────────────────────────────────────────*/
body .step-panel__title { letter-spacing: -.03em; }

/* ── Общее для всех страниц ───────────────────────────────────*/
body .eyebrow { letter-spacing: .2em; color: var(--text-mute); }
body .btn--dark {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
}

@media (prefers-reduced-motion: reduce) {
  body .step-panel,
  body .tile,
  body .board-head,
  body .admin-cta {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #0b0b0d;
  }
  [data-theme='light'] body .step-panel,
  [data-theme='light'] body .tile,
  [data-theme='light'] body .board-head,
  [data-theme='light'] body .admin-cta { background: #ffffff; }
}