/* ══════════════════════════════════════════════════════════════
   Студия маникюра — Telegram Mini App
   «Пастельная» дизайн-система v4
   Спокойные тона: пудровая роза, шалфей, лаванда, персик
   ═══════════════════════════════════════════════════════════ */

/* ══ СБРОС ══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input  { font-family: inherit; }

/* ══ ДИЗАЙН-ТОКЕНЫ (светлая тема) ══════════════════════════ */
:root {
  /* Основа */
  --clr-bg:         #F6F1EE;          /* молочный       */
  --clr-surface:    #FFFFFF;          /* карточки       */
  --clr-surface-2:  #FBF7F5;          /* вложенные поля */
  --clr-line:       #EDE3DE;          /* разделители    */
  --clr-text:       #3A3236;          /* тёмная слива   */
  --clr-muted:      #8E8287;          /* тёплый серый   */

  /* Акцент — пудровая роза */
  --clr-accent:      #A8646F;         /* для текста и кнопок (контраст с белым) */
  --clr-accent-soft: #F3DADB;         /* пастельная заливка */
  --clr-on-accent:   #FFFFFF;

  /* Пастельные пары «заливка / чернила» */
  --clr-rose:       #F3DADB;  --ink-rose:     #A8646F;
  --clr-sage:       #DDE7D8;  --ink-sage:     #5C7757;
  --clr-lavender:   #E4DFF2;  --ink-lavender: #6D6390;
  --clr-peach:      #F8E4D3;  --ink-peach:    #9C6640;

  /* Семантика */
  --clr-success:    var(--ink-sage);
  --clr-danger:     #B5566A;
  --clr-warning:    var(--ink-peach);
  --clr-cancel-bg:    #F8E1E5;
  --clr-cancel-hover: #F2D0D7;
  --clr-booked-bg:    var(--clr-peach);
  --clr-completed-bg: var(--clr-sage);

  /* Мягкое свечение в углу карточек (как в референсе) */
  --glow:        rgba(236, 196, 199, .55);
  --glow-2:      rgba(214, 205, 236, .45);
  --dot:         rgba(168, 100, 111, .45);

  /* Типографика */
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fz-xs:  11px;
  --fz-sm:  13px;
  --fz-md:  15px;
  --fz-lg:  17px;
  --fz-xl:  22px;
  --fz-2xl: 28px;

  /* Радиусы */
  --r-sm:   14px;
  --r-md:   22px;
  --r-lg:   28px;
  --r-pill: 999px;

  /* Отступы (кратны 4px) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;

  /* Тени — очень мягкие */
  --shadow-card: 0 1px 2px rgba(58,50,54,.04), 0 10px 30px rgba(58,50,54,.06);
  --shadow-btn:  0 8px 20px rgba(168,100,111,.25);
  --shadow-nav:  0 10px 40px rgba(58,50,54,.12);

  /* Переходы */
  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   350ms;
  --ease:       cubic-bezier(.4,0,.2,1);

  /* Нижняя панель */
  --nav-h: 68px;
}

/* ══ ТЁМНАЯ ТЕМА ════════════════════════════════════════════ */
:root[data-theme="dark"],
:root.dark {
  --clr-bg:         #1C1A1D;
  --clr-surface:    #262327;
  --clr-surface-2:  #2E2A2F;
  --clr-line:       #3A3439;
  --clr-text:       #F2EBEE;
  --clr-muted:      #A39799;

  --clr-accent:      #E9B7BD;         /* пастель на тёмном */
  --clr-accent-soft: rgba(233,183,189,.16);
  --clr-on-accent:   #2A2226;

  --clr-rose:       rgba(233,183,189,.16);  --ink-rose:     #EDBFC4;
  --clr-sage:       rgba(176,201,168,.16);  --ink-sage:     #B9D1B1;
  --clr-lavender:   rgba(196,186,230,.16);  --ink-lavender: #CBC2EA;
  --clr-peach:      rgba(240,196,160,.16);  --ink-peach:    #F0C9A6;

  --clr-danger:       #EE9AA9;
  --clr-cancel-bg:    rgba(238,154,169,.14);
  --clr-cancel-hover: rgba(238,154,169,.22);

  --glow:   rgba(233,183,189,.14);
  --glow-2: rgba(196,186,230,.10);
  --dot:    rgba(233,183,189,.55);

  --shadow-card: 0 1px 2px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.25);
  --shadow-btn:  0 8px 20px rgba(233,183,189,.18);
  --shadow-nav:  0 10px 40px rgba(0,0,0,.45);
}

/* ══ БАЗОВЫЕ СТИЛИ ══════════════════════════════════════════ */
html {
  font-size: var(--fz-md);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  font-family:      var(--font-body);
  background-color: var(--clr-bg);
  color:            var(--clr-text);
  min-height:       100dvh;
  padding-bottom:   calc(var(--nav-h) + 28px + env(safe-area-inset-bottom));
  padding-top:      env(safe-area-inset-top);
  padding-left:     env(safe-area-inset-left);
  padding-right:    env(safe-area-inset-right);
  overflow-x: hidden;
  transition: background-color var(--dur-normal) var(--ease),
              color var(--dur-normal) var(--ease);
}

/* ══ ШАПКА / ПРИВЕТСТВИЕ ════════════════════════════════════ */
.app-header {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-2);
  overflow: hidden;
}
/* Пастельное свечение сверху */
.app-header::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--glow) 0%, transparent 65%);
  pointer-events: none;
}
/* Точечное кольцо — отсылка к «сфере» из референса */
.header-dots {
  position: absolute;
  top: -70px; right: -60px;
  width: 240px; height: 240px;
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.6px);
  background-size: 9px 9px;
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 50%, #000 58%, transparent 70%);
          mask: radial-gradient(circle, transparent 42%, #000 50%, #000 58%, transparent 70%);
  opacity: .7;
  pointer-events: none;
}
.header-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}
.brand-mark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
}
.brand-mark span {
  width: 4px;
  border-radius: var(--r-pill);
  background: var(--clr-accent);
}
.brand-mark span:nth-child(1) { height: 10px; opacity: .5; }
.brand-mark span:nth-child(2) { height: 16px; opacity: .75; }
.brand-mark span:nth-child(3) { height: 22px; }

.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--clr-lavender);
  color: var(--ink-lavender);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--fz-md);
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--clr-surface), var(--shadow-card);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.greeting {
  position: relative;
  font-size: var(--fz-2xl);
  font-weight: 700;
  letter-spacing: -.4px;
  line-height: 1.15;
}
.greeting-sub {
  position: relative;
  margin-top: var(--sp-1);
  font-size: var(--fz-sm);
  color: var(--clr-muted);
  font-weight: 500;
}

/* Карточка «Ближайшая запись» */
.next-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  text-align: left;
  background:
    radial-gradient(120% 140% at 100% 100%, var(--glow) 0%, transparent 60%),
    var(--clr-surface);
  border: 1px solid var(--clr-line);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease);
}
.next-card:active { transform: scale(.98); }
.next-card[hidden] { display: none; }
.next-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--clr-rose);
  color: var(--ink-rose);
  display: flex; align-items: center; justify-content: center;
}
.next-icon svg { width: 22px; height: 22px; }
.next-body { flex: 1; min-width: 0; }
.next-label,
.next-title { display: block; }
.next-label { font-size: var(--fz-xs); color: var(--clr-muted); font-weight: 600; }
.next-title { font-size: var(--fz-md); font-weight: 700; margin-top: 2px; }
.next-pill {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--clr-accent-soft);
  color: var(--clr-accent);
  font-size: var(--fz-xs);
  font-weight: 700;
}

/* ══ ЭКРАНЫ ════════════════════════════════════════════════ */
#screens { padding: var(--sp-4); }
.screen { animation: fadeUp var(--dur-normal) var(--ease); }
.screen[hidden] { display: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--sp-2) 0 var(--sp-4);
}
.section-title {
  font-size: var(--fz-lg);
  font-weight: 700;
  letter-spacing: -.2px;
}
.section-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--clr-accent);
  color: var(--clr-on-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-btn);
}
.section-icon svg { width: 18px; height: 18px; }

/* ══ КАРТОЧКИ ════════════════════════════════════════════════ */
.card {
  position: relative;
  background:
    radial-gradient(90% 60% at 0% 0%, var(--glow) 0%, transparent 60%),
    var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-card);
}
.card[hidden] { display: none; }
.card-title {
  font-size: var(--fz-lg);
  font-weight: 700;
  letter-spacing: -.2px;
  margin-bottom: var(--sp-4);
  color: var(--clr-text);
}

/* Плавное раскрытие карточек при прохождении шагов */
.reveal-card { animation: revealCard var(--dur-slow) var(--ease); }
@keyframes revealCard {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══ ИНДИКАТОР ШАГОВ ════════════════════════════════════════ */
.step-indicator {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: var(--sp-2);
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--r-pill);
}
.step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-2);
  border-radius: var(--r-pill);
  transition: background var(--dur-normal) var(--ease);
}
.step-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-line);
  color: var(--clr-on-accent);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-normal) var(--ease);
}
.step.active { background: var(--clr-accent-soft); }
.step.active .step-dot { background: var(--clr-accent); border-color: transparent; }
.step.done   .step-dot { background: var(--ink-sage); border-color: transparent; color: #fff; }
.step-label {
  font-size: var(--fz-xs);
  color: var(--clr-muted);
  font-weight: 600;
  transition: color var(--dur-normal) var(--ease);
}
.step.active .step-label { color: var(--clr-accent); font-weight: 700; }
.step.done   .step-label { color: var(--ink-sage); }
.step-line { display: none; }

/* ══ КАЛЕНДАРЬ ════════════════════════════════════════════════ */
.cal-month + .cal-month {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--clr-line);
}
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.cal-nav-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-line);
  color: var(--clr-muted);
  font-size: var(--fz-lg);
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cal-nav-btn:hover { background: var(--clr-accent-soft); color: var(--clr-accent); }
.cal-month-title {
  font-size: var(--fz-lg);
  font-weight: 700;
  color: var(--clr-text);
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: var(--sp-2);
}
.cal-weekday {
  text-align: center;
  font-size: var(--fz-xs);
  font-weight: 600;
  color: var(--clr-muted);
  padding: 2px 0;
}

.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px 4px;
}
.cal-day {
  position: relative;
  aspect-ratio: 1;
  max-width: 44px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--fz-sm);
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  user-select: none;
  min-width: 34px;
  min-height: 34px;
}
.cal-day.available { color: var(--clr-text); background: var(--clr-surface-2); }
.cal-day.available:hover { background: var(--clr-accent-soft); }
/* Точка-индикатор под числом */
.cal-day.available::after {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--clr-accent);
  opacity: .7;
}
.cal-day.selected {
  background: var(--clr-accent);
  color: var(--clr-on-accent);
  transform: scale(1.06);
  box-shadow: var(--shadow-btn);
}
.cal-day.selected::after { background: var(--clr-on-accent); }
.cal-day.today:not(.selected) { border-color: var(--clr-accent); }
.cal-day.disabled,
.cal-day.empty {
  color: var(--clr-muted);
  opacity: .35;
  cursor: default;
  pointer-events: none;
  background: transparent;
}

/* ══ СЛОТЫ ═══════════════════════════════════════════════════ */
.slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.slot-chip {
  padding: 12px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-line);
  background: var(--clr-surface-2);
  color: var(--clr-text);
  font-size: var(--fz-md);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  user-select: none;
  min-height: 48px;
}
.slot-chip[aria-selected="true"] {
  background: var(--clr-accent);
  color: var(--clr-on-accent);
  border-color: transparent;
  box-shadow: var(--shadow-btn);
}
.slot-chip:hover:not([aria-selected="true"]):not(.booked) {
  background: var(--clr-accent-soft);
  color: var(--clr-accent);
}
.slot-chip.booked {
  color: var(--clr-muted);
  text-decoration: line-through;
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* ══ ФОРМА ════════════════════════════════════════════════════ */
.form-group  { margin-bottom: var(--sp-4); }
.form-label  {
  display: block;
  font-size: var(--fz-xs);
  font-weight: 600;
  color: var(--clr-muted);
  margin-bottom: 6px;
  padding-left: 4px;
}
.form-input {
  width: 100%;
  padding: 14px var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-line);
  background: var(--clr-surface-2);
  color: var(--clr-text);
  font-size: var(--fz-md);
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.form-input:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 4px var(--clr-accent-soft);
}
.form-input::placeholder { color: var(--clr-muted); opacity: .7; }

/* Телефон: зафиксированный префикс +380 внутри поля */
.phone-field { position: relative; }
.phone-prefix {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fz-md);
  font-weight: 700;
  color: var(--clr-text);
  pointer-events: none;
  padding-right: var(--sp-3);
  border-right: 1px solid var(--clr-line);
  line-height: 1.2;
}
.phone-input { padding-left: 104px; letter-spacing: .3px; }
.form-input::-webkit-calendar-picker-indicator { opacity: .5; }
:root.dark .form-input::-webkit-calendar-picker-indicator { filter: invert(1); }

/* ══ КНОПКИ ══════════════════════════════════════════════════ */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 14px var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fz-md);
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
  text-align: center;
  min-height: 50px;
  border: none;
}
.btn[hidden] { display: none; }
.btn:active   { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--clr-accent);
  color: var(--clr-on-accent);
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover:not(:disabled) { opacity: .92; }

.btn-outline {
  background: var(--clr-accent-soft);
  color: var(--clr-accent);
  width: auto;
  padding: 10px var(--sp-4);
  min-height: 48px;
  flex-shrink: 0;
}
.input-row .btn-primary { width: auto; flex-shrink: 0; min-height: 48px; padding: 10px var(--sp-4); }

.btn-outline-danger {
  background: var(--clr-cancel-bg);
  color: var(--clr-danger);
}
.btn-outline-danger:hover { background: var(--clr-cancel-hover); }

.btn-danger {
  background: var(--clr-danger);
  color: var(--clr-on-accent);
}

.btn-ghost {
  background: transparent;
  color: var(--clr-accent);
  font-weight: 600;
}
.btn-ghost:hover { background: var(--clr-accent-soft); }

/* ══ СЕГМЕНТНЫЙ КОНТРОЛ ═════════════════════════════════════ */
.segment-control {
  display: flex;
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--r-pill);
  padding: 4px;
  margin-bottom: var(--sp-4);
  gap: 4px;
}
.segment-btn {
  flex: 1;
  padding: 9px var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fz-sm);
  font-weight: 600;
  color: var(--clr-muted);
  background: transparent;
  transition: background var(--dur-normal) var(--ease),
              color var(--dur-normal) var(--ease);
  min-height: 38px;
  white-space: nowrap;
}
.segment-btn.active,
.segment-btn[aria-selected="true"] {
  background: var(--clr-accent-soft);
  color: var(--clr-accent);
  font-weight: 700;
}

/* ══ СТАТИСТИКА (как «Monthly Review») ═══════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.stat-tile {
  position: relative;
  overflow: hidden;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.stat-tile::before {
  content: '';
  position: absolute;
  inset: auto -30% -60% auto;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--tile-glow, var(--clr-rose));
  opacity: .9;
}
.stat-tile--rose     { --tile-glow: var(--clr-rose);     --tile-ink: var(--ink-rose); }
.stat-tile--sage     { --tile-glow: var(--clr-sage);     --tile-ink: var(--ink-sage); }
.stat-tile--lavender { --tile-glow: var(--clr-lavender); --tile-ink: var(--ink-lavender); }
.stat-tile--peach    { --tile-glow: var(--clr-peach);    --tile-ink: var(--ink-peach); }
.stat-num {
  position: relative;
  font-size: var(--fz-2xl);
  font-weight: 700;
  color: var(--tile-ink, var(--clr-text));
  line-height: 1.1;
}
.stat-label {
  position: relative;
  font-size: var(--fz-xs);
  font-weight: 600;
  color: var(--clr-muted);
}

/* ══ КАРТОЧКА ЗАПИСИ ════════════════════════════════════════ */
.appt-card {
  position: relative;
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-4);
  align-items: center;
}
/* Предстоящая запись — пастельная заливка (как оранжевая карточка в референсе) */
.appt-card:not([class*="appt-card--"]) {
  background:
    radial-gradient(120% 120% at 100% 0%, var(--glow-2) 0%, transparent 60%),
    var(--clr-rose);
  border-color: transparent;
}
.appt-time {
  grid-row: span 4;
  font-size: var(--fz-xl);
  font-weight: 700;
  color: var(--clr-accent);
  padding-right: var(--sp-4);
  border-right: 1px solid var(--clr-line);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.appt-card:not([class*="appt-card--"]) .appt-time { border-right-color: rgba(168,100,111,.2); }
.appt-card--completed .appt-time       { color: var(--ink-sage); }
.appt-card--cancelled .appt-time,
.appt-card--cancelled-admin .appt-time { color: var(--clr-muted); }

.appt-date  { font-weight: 700; font-size: var(--fz-md); margin-bottom: 2px; }
.appt-name,
.appt-phone { font-size: var(--fz-sm); color: var(--clr-muted); }
.appt-card > .status-badge { grid-column: 2; justify-self: start; }

.appt-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.appt-cancel-btn,
.appt-rebook-btn {
  flex: 1;
  padding: 9px;
  border-radius: var(--r-pill);
  font-size: var(--fz-sm);
  font-weight: 700;
  font-family: var(--font-body);
  border: none;
  cursor: pointer;
  min-height: 42px;
  transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.appt-cancel-btn { background: var(--clr-surface); color: var(--clr-danger); }
.appt-cancel-btn:hover { opacity: .85; }
.appt-rebook-btn { background: var(--clr-sage); color: var(--ink-sage); }
.appt-rebook-btn:hover { opacity: .85; }

/* ── Бейдж статуса ────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fz-xs);
  font-weight: 700;
  margin-top: var(--sp-2);
}
.status-badge--upcoming        { background: var(--clr-rose);      color: var(--ink-rose); }
.status-badge--completed       { background: var(--clr-sage);      color: var(--ink-sage); }
.status-badge--cancelled       { background: var(--clr-surface-2); color: var(--clr-muted); }
.status-badge--cancelled-admin { background: var(--clr-cancel-bg); color: var(--clr-danger); }

/* ── Разделитель месяца в истории ─────────────────────────── */
.month-divider {
  font-size: var(--fz-xs);
  font-weight: 700;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: var(--sp-2) 4px;
  margin-top: var(--sp-2);
}

/* ══ ПУСТЫЕ СОСТОЯНИЯ ════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--clr-muted);
  background: var(--clr-surface);
  border: 1px dashed var(--clr-line);
  border-radius: var(--r-md);
}
.empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  background: var(--clr-lavender);
  font-size: 1.8rem;
  display: flex; align-items: center; justify-content: center;
}
.empty-text { font-size: var(--fz-sm); line-height: 1.55; white-space: pre-line; color: var(--clr-muted); }

/* ══ СКЕЛЕТОН ════════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--clr-line)      25%,
    var(--clr-surface-2) 50%,
    var(--clr-line)      75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
}
.skeleton-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.skeleton-list[hidden] { display: none; }
.skeleton--title    { height: 20px; width: 60%; border-radius: var(--r-pill); }
.skeleton--calendar { height: 280px; border-radius: var(--r-lg); }
.skeleton--card     { height: 96px;  border-radius: var(--r-md); }

/* ══ НИЖНЯЯ НАВИГАЦИЯ (плавающая) ═══════════════════════════ */
.bottom-nav {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: calc(12px + env(safe-area-inset-bottom));
  height: var(--nav-h);
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--sp-2);
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  z-index: 200;
  box-shadow: var(--shadow-nav);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px var(--sp-2);
  color: var(--clr-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
  min-height: 44px;
}
.nav-icon {
  width: 22px; height: 22px;
  box-sizing: content-box;
  padding: 5px 16px;
  border-radius: var(--r-pill);
  transition: background var(--dur-normal) var(--ease);
}
.nav-item.active { color: var(--clr-accent); }
.nav-item.active .nav-icon { background: var(--clr-accent-soft); }
.nav-label { font-size: var(--fz-xs); font-weight: 600; }

/* ══ BOTTOM SHEET ════════════════════════════════════════════ */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(40,32,36,.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease);
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.bottom-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background:
    radial-gradient(80% 50% at 50% 0%, var(--glow) 0%, transparent 70%),
    var(--clr-surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--sp-3) var(--sp-6) calc(var(--sp-8) + env(safe-area-inset-bottom));
  z-index: 500;
  text-align: center;
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease);
  box-shadow: 0 -8px 32px rgba(40,32,36,.15);
}
.bottom-sheet.open { transform: translateY(0); }

.sheet-handle {
  width: 40px; height: 4px;
  border-radius: var(--r-pill);
  background: var(--clr-line);
  margin: 0 auto var(--sp-5);
}
.sheet-icon    { font-size: 3rem; margin-bottom: var(--sp-3); }
.sheet-title   { font-size: var(--fz-xl); font-weight: 700; margin-bottom: var(--sp-2); }
.sheet-message { font-size: var(--fz-md); color: var(--clr-muted);
                 margin-bottom: var(--sp-6); line-height: 1.55;
                 white-space: pre-wrap; }

/* ── Анимация галочки (SVG вставляется JS) ────────────────── */
@keyframes checkDraw {
  from { stroke-dashoffset: 60; }
  to   { stroke-dashoffset: 0; }
}
.check-svg { display: block; margin: 0 auto var(--sp-3); }
.check-svg circle { fill: var(--clr-sage); }
.check-svg .check-path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: checkDraw .4s var(--dur-normal) var(--ease) forwards;
}

/* ══ АДМИНИСТРАТОР ════════════════════════════════════════════ */
.admin-tabs { overflow-x: auto; scrollbar-width: none; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs .segment-btn { padding: 9px 10px; flex: 1 0 auto; }

.card-hint {
  font-size: var(--fz-xs);
  color: var(--clr-muted);
  line-height: 1.5;
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
}
#repNote.card-hint { margin: 0 4px var(--sp-4); }

/* ── Записи дня: правка фактической послуги / цены ──────── */
.admin-day-hint { margin: var(--sp-3) 0 0; }
.admin-appt-row { flex-wrap: wrap; gap: 0 var(--sp-2); }
.admin-appt-info { flex: 1; min-width: 0; }
.admin-appt-info .status-badge { margin-top: 0; }
.appt-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: 6px;
}
.appt-badge-row .chip-btn { margin-left: 0; padding: 4px 10px; }
.chip-btn--danger { background: var(--clr-cancel-bg); color: var(--clr-danger); }
.admin-appt-row.no-show { background: transparent; border-style: dashed; }
.admin-appt-row.no-show strong,
.admin-appt-row.no-show .admin-appt-info > span { opacity: .55; }
.admin-appt-row.no-show strong { text-decoration: line-through; }
.admin-appt-actions { display: flex; align-items: center; flex-shrink: 0; }
.visit-editor {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--clr-line);
  animation: revealCard var(--dur-normal) var(--ease);
}
.visit-editor .form-input { background: var(--clr-surface); }
.visit-editor-btns { display: flex; gap: var(--sp-2); }
.visit-editor-btns .btn { min-height: 44px; padding: 10px; }

/* ── Ручная запись мастером ──────────────────────────────── */
.ab-open-btn { margin-bottom: var(--sp-4); }
.ab-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.ab-close { color: var(--clr-muted); margin: -10px -10px 0 0; }
.field-hint {
  font-size: var(--fz-xs);
  color: var(--clr-muted);
  line-height: 1.5;
  margin-top: 6px;
  padding-left: 4px;
  grid-column: 1 / -1;
}
#abHint { color: var(--ink-sage); font-weight: 600; }
#abSlots:empty { display: none; }
.ab-custom-time {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.ab-or { font-size: var(--fz-sm); color: var(--clr-muted); white-space: nowrap; }
.ab-custom-time .form-input { flex: 1; min-width: 0; }
select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--clr-muted) 50%),
                    linear-gradient(135deg, var(--clr-muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* ── Слоти: лента рабочих дней ───────────────────────────── */
.day-chips {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  margin: 0 calc(-1 * var(--sp-5)) var(--sp-4);
  padding: 8px var(--sp-5) var(--sp-1);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.day-chips::-webkit-scrollbar { display: none; }
.day-chips .empty-state { flex: 1; margin: 0; }
.day-chip {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  padding: var(--sp-2) 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-line);
  background: var(--clr-surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  scroll-snap-align: center;
  transition: background var(--dur-fast) var(--ease);
}
.day-chip.closed { border-style: dashed; background: transparent; opacity: .6; }
.day-chip[aria-selected="true"] {
  background: var(--clr-accent);
  border-color: transparent;
  color: var(--clr-on-accent);
  opacity: 1;
  box-shadow: var(--shadow-btn);
}
.day-chip-wd, .day-chip-mon { font-size: 10px; font-weight: 600; opacity: .75; }
.day-chip-num { font-size: var(--fz-lg); font-weight: 700; line-height: 1.2; }
.day-chip-count {
  position: absolute;
  top: -6px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--clr-lavender);
  color: var(--ink-lavender);
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.slot-day-title { font-weight: 700; margin-bottom: var(--sp-3); }
#adminSlotsList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--sp-2);
}
#adminSlotsList .empty-text { grid-column: 1 / -1; }

/* ── Список рабочих дней ─────────────────────────────────── */
.admin-days-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.admin-day-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-line);
  transition: opacity var(--dur-normal) var(--ease);
}
.admin-day-row.closed { background: transparent; border-style: dashed; }
.admin-day-row.closed .admin-day-info { opacity: .55; }
.admin-day-info {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 4px 0;
}
.admin-day-info strong { display: block; font-size: var(--fz-md); font-weight: 700; }
.admin-day-info span   { display: block; font-size: var(--fz-xs); color: var(--clr-muted); margin-top: 2px; }

.day-toggle-wrap { display: flex; align-items: center; gap: var(--sp-2); }
.day-status { font-size: var(--fz-xs); font-weight: 600; color: var(--clr-muted); }
.admin-day-row:not(.closed) .day-status { color: var(--ink-sage); }
.day-toggle {
  position: relative;
  width: 44px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--clr-line);
  transition: background var(--dur-normal) var(--ease);
  flex-shrink: 0;
}
.day-toggle.on { background: var(--ink-sage); }
.day-toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform var(--dur-normal) var(--ease);
}
.day-toggle.on .day-toggle-knob { transform: translateX(18px); }

/* ── Послуги (клиент) ────────────────────────────────────── */
.service-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.service-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-line);
  background: var(--clr-surface-2);
  text-align: left;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.service-item:hover { background: var(--clr-accent-soft); }
.service-item.selected {
  background: var(--clr-accent-soft);
  border-color: var(--clr-accent);
}
.service-radio {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--clr-line);
  background: var(--clr-surface);
  transition: border var(--dur-fast) var(--ease);
}
.service-item.selected .service-radio { border: 6px solid var(--clr-accent); }
.service-body { flex: 1; min-width: 0; }
.service-name { display: block; font-size: var(--fz-md); font-weight: 700; }
.service-desc { display: block; font-size: var(--fz-xs); color: var(--clr-muted); margin-top: 2px; line-height: 1.4; }
.service-price {
  flex-shrink: 0;
  font-size: var(--fz-md);
  font-weight: 700;
  color: var(--clr-accent);
  white-space: nowrap;
}

/* Итог записи в форме */
.booking-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--clr-rose);
}
.booking-summary[hidden] { display: none; }
.summary-title { font-weight: 700; font-size: var(--fz-md); }
.summary-when  { font-size: var(--fz-sm); color: var(--clr-muted); margin-top: 2px; }
.summary-price { font-weight: 700; font-size: var(--fz-lg); color: var(--ink-rose); white-space: nowrap; }

.appt-service { font-size: var(--fz-sm); font-weight: 600; color: var(--clr-text); margin-bottom: 2px; }

/* ── Послуги (админ) ─────────────────────────────────────── */
.price-field { position: relative; flex: 1; min-width: 0; }
.price-field .form-input { padding-right: 46px; }
.price-suffix {
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fz-sm);
  color: var(--clr-muted);
  pointer-events: none;
}
.price-field--sm { max-width: 130px; }
.price-field--sm .form-input { padding: 9px 40px 9px 12px; font-weight: 700; }
.price-field--sm .price-suffix { right: 12px; }

.admin-service-row {
  padding: var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-line);
  margin-bottom: var(--sp-2);
}
.admin-service-row.hidden-service { background: transparent; border-style: dashed; }
.admin-service-row.hidden-service .admin-service-head strong { opacity: .55; }
.admin-service-head strong { display: block; font-size: var(--fz-md); font-weight: 700; }
.admin-service-head span:not(.status-badge) { display: block; font-size: var(--fz-xs); color: var(--clr-muted); margin-top: 2px; }
.admin-service-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.icon-btn[hidden] { display: none; }
.icon-btn--accent { background: var(--clr-accent); color: var(--clr-on-accent); }
.chip-btn {
  padding: 8px 12px;
  border-radius: var(--r-pill);
  background: var(--clr-lavender);
  color: var(--ink-lavender);
  font-size: var(--fz-xs);
  font-weight: 700;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Звіт ────────────────────────────────────────────────── */
.report-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.report-period { font-weight: 700; font-size: var(--fz-md); }
.report-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-6) var(--sp-4);
  margin-bottom: var(--sp-3);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, var(--glow-2) 0%, transparent 60%),
    var(--clr-rose);
  text-align: center;
}
.report-hero-label { font-size: var(--fz-sm); font-weight: 600; color: var(--ink-rose); }
.report-hero-num   { font-size: 34px; font-weight: 700; letter-spacing: -.5px; color: var(--clr-text); }
.report-hero-sub   { font-size: var(--fz-xs); font-weight: 600; color: var(--clr-muted); min-height: 1em; }
#adminTabReport .stats-grid { margin-bottom: var(--sp-4); }
#adminTabReport .stat-num { font-size: var(--fz-xl); }

.report-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 140px;
  padding-bottom: 18px;
}
.report-bars--month { gap: 2px; }
.report-bar {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.report-bar::before {           /* фон-дорожка */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: var(--clr-surface-2);
}
.report-bar-fill {
  position: relative;
  width: 100%;
  border-radius: 6px;
  background: var(--clr-accent);
  opacity: .85;
  transition: height var(--dur-slow) var(--ease);
}
.report-bars--month .report-bar::before,
.report-bars--month .report-bar-fill { border-radius: 3px; }
.report-bar-label {
  position: absolute;
  bottom: -18px;
  font-size: 10px;
  font-weight: 600;
  color: var(--clr-muted);
  white-space: nowrap;
}

.report-service + .report-service { margin-top: var(--sp-3); }
.report-service-top {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fz-sm);
  margin-bottom: 6px;
}
.report-service-top strong { white-space: nowrap; }
.report-service-track {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--clr-surface-2);
  overflow: hidden;
}
.report-service-track span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--ink-lavender);
  opacity: .7;
}

.input-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.input-row .form-input { flex: 1; min-width: 0; }

.admin-day-view { margin-top: var(--sp-3); }
.admin-appt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-line);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-2);
}
.admin-appt-info strong { display: block; font-size: var(--fz-md); font-weight: 700; }
.admin-appt-info span   { display: block; font-size: var(--fz-sm); color: var(--clr-muted); }

.admin-slot-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-line);
  font-size: var(--fz-md);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}
.admin-slot-item.booked {
  background: var(--clr-booked-bg);
  border-color: transparent;
  color: var(--clr-warning);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}

.danger-zone {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.del-btn {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  color: var(--clr-danger);
  border-radius: var(--r-sm);
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease);
}
.del-btn:hover { background: var(--clr-cancel-bg); }

/* ══ УТИЛИТЫ ═════════════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ══ ДОСТУПНОСТЬ: focus-visible глобально ════════════════════ */
:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ══ REDUCED MOTION ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   v4: перенос, лист ожидания, фото, студия, клиенты, настройки
   ══════════════════════════════════════════════════════════════ */

/* ── Перенос записи ──────────────────────────────────────────── */
.reschedule-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--clr-lavender);
  color: var(--ink-lavender);
}
.reschedule-banner[hidden] { display: none; }
.reschedule-label { font-size: var(--fz-xs); font-weight: 600; opacity: .85; }
.reschedule-title { font-weight: 700; color: var(--clr-text); margin-top: 2px; }

/* ── Клиент заблокирован ─────────────────────────────────────── */
.notice-card { text-align: center; }
.notice-icon { font-size: 2.2rem; margin-bottom: var(--sp-2); }
.notice-text { color: var(--clr-text); line-height: 1.5; }
.is-blocked #servicesCard, .is-blocked #calendarCard,
.is-blocked #slotsCard, .is-blocked #formCard,
.is-blocked #calendarSkeleton { display: none !important; }

/* ── Календарь: всё занято ───────────────────────────────────── */
.cal-day.full {
  color: var(--clr-muted);
  background: transparent;
  border: 1.5px dashed var(--clr-line);
  cursor: pointer;
}
.cal-day.full.selected {
  background: var(--clr-surface-2);
  color: var(--clr-text);
  border-color: var(--clr-accent);
  box-shadow: none;
}

/* ── Лист ожидания ───────────────────────────────────────────── */
.waitlist-box { margin-top: var(--sp-2); text-align: center; }
.waitlist-box[hidden] { display: none; }
.waitlist-text { color: var(--clr-muted); font-size: var(--fz-sm); line-height: 1.5; margin-bottom: var(--sp-3); }
.waitlist-btn { width: 100%; }
.waitlist-on {
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--clr-sage);
  color: var(--ink-sage);
  font-size: var(--fz-sm);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.waitlist-card {
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--clr-lavender);
}
.waitlist-title { font-weight: 700; margin-bottom: var(--sp-2); }
.waitlist-chips, .tpl-times { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.waitlist-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--r-pill);
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  font-size: var(--fz-sm);
  font-weight: 600;
}
.waitlist-chip button {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--clr-surface-2);
  color: var(--clr-muted);
  font-size: 11px;
}
.waitlist-hint { font-size: var(--fz-xs); color: var(--ink-lavender); margin-top: var(--sp-2); }

/* ── Пожелания и фото-пример ─────────────────────────────────── */
.label-opt { font-weight: 500; opacity: .7; }
.form-textarea { resize: vertical; min-height: 64px; line-height: 1.45; font-family: var(--font-body); }
.photo-pick { margin-bottom: var(--sp-2); }

/* Согласие на обработку персональных данных */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--sp-3) 0 var(--sp-2);
  font-size: var(--fz-sm);
  color: var(--clr-muted);
  line-height: 1.45;
  cursor: pointer;
}
.consent-row input {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  accent-color: var(--clr-accent);
}
.link-btn {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--clr-accent);
  text-decoration: underline; cursor: pointer;
}
/* Длинный текст в bottom sheet (умови обробки даних) */
.sheet-message.sheet-long {
  text-align: left;
  max-height: 55vh;
  overflow-y: auto;
  font-size: var(--fz-sm);
}
.photo-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--clr-surface-2);
  border: 1px dashed var(--clr-line);
  color: var(--clr-accent);
  font-size: var(--fz-sm);
  font-weight: 600;
  cursor: pointer;
}
.photo-pick-btn[hidden] { display: none; }
.photo-preview { position: relative; display: inline-block; }
.photo-preview[hidden] { display: none; }
.photo-preview img {
  display: block;
  max-width: 160px; max-height: 160px;
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-line);
}
.photo-remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(40,32,36,.6);
  color: #fff;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}

/* ── Послуги: длительность ───────────────────────────────────── */
.service-meta { display: block; font-size: var(--fz-xs); color: var(--clr-muted); margin-top: 4px; font-weight: 600; }

/* ── Карточка записи: адрес, поздно менять ───────────────────── */
.appt-address, .appt-late {
  grid-column: 1 / -1;
  margin-top: var(--sp-3);
  font-size: var(--fz-sm);
  color: var(--clr-muted);
  line-height: 1.5;
}
.appt-late {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--clr-surface);
}
.link-btn {
  display: inline;
  padding: 0;
  color: var(--clr-accent);
  font-weight: 700;
  text-decoration: none;
  background: none;
}
a.chip-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* ── Экран «Студія» ──────────────────────────────────────────── */
.studio-name { font-size: var(--fz-xl); font-weight: 700; letter-spacing: -.3px; }
.studio-rating {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--clr-peach);
  color: var(--ink-peach);
  font-weight: 700;
  font-size: var(--fz-sm);
}
.studio-rating[hidden] { display: none; }
.contact-list { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-line);
}
.contact-icon { font-size: 1.1rem; }
.contact-text { flex: 1; min-width: 0; font-weight: 600; font-size: var(--fz-sm); overflow-wrap: anywhere; }
.contact-row .chip-btn { margin-left: 0; flex-shrink: 0; }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: var(--sp-5);
}
.portfolio-grid .empty-state { grid-column: 1 / -1; }
.portfolio-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--clr-surface-2);
  padding: 0;
}
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-grid--admin { margin: var(--sp-3) 0 0; }
.portfolio-grid--admin .field-hint { grid-column: 1 / -1; }
.photo-upload-btn { width: 100%; cursor: pointer; }

.review-card {
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
}
.review-card.review-hidden { opacity: .55; border-style: dashed; }
.review-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.review-stars { color: #D9A441; letter-spacing: 1px; font-size: var(--fz-sm); }
.review-text { margin: var(--sp-2) 0; line-height: 1.5; font-size: var(--fz-sm); white-space: pre-line; }
.review-text:empty { display: none; }
.review-meta { font-size: var(--fz-xs); color: var(--clr-muted); margin: var(--sp-2) 0; }
.reviews-summary { font-size: var(--fz-lg); font-weight: 700; margin-bottom: var(--sp-2); padding: 0 4px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(20,16,18,.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: var(--r-sm); }
.lightbox-caption { color: #fff; margin-top: var(--sp-3); font-size: var(--fz-sm); text-align: center; }

/* ── Админ: клиенты ──────────────────────────────────────────── */
.search-input { margin-bottom: var(--sp-3); }
.client-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  text-align: left;
}
.client-row.blocked { border-style: dashed; opacity: .75; }
.client-avatar {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--clr-lavender);
  color: var(--ink-lavender);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.client-body { flex: 1; min-width: 0; }
.client-body strong { display: block; font-size: var(--fz-md); }
.client-body span { display: block; font-size: var(--fz-xs); color: var(--clr-muted); margin-top: 2px; }
.client-badges { display: flex; gap: 4px; flex-shrink: 0; }
.client-badge {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--clr-surface-2);
  font-size: var(--fz-xs);
  font-weight: 700;
}
.client-badge.warn { background: var(--clr-cancel-bg); color: var(--clr-danger); }
.back-btn { width: auto; min-height: 40px; padding: 8px 12px; margin-bottom: var(--sp-2); }
.client-card-head .card-title { margin-bottom: 4px; }
.client-phone { color: var(--clr-muted); font-size: var(--fz-sm); }
.client-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.client-actions .chip-btn { margin-left: 0; }
.client-stats { grid-template-columns: repeat(2, 1fr); }
.client-stats .stat-num { font-size: var(--fz-xl); }
.client-visit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--clr-line);
}
.client-visit:last-child { border-bottom: none; }
.client-visit strong { display: block; font-size: var(--fz-sm); }
.client-visit span:not(.status-badge) { display: block; font-size: var(--fz-xs); color: var(--clr-muted); }
.client-visit .status-badge { margin-top: 0; flex-shrink: 0; }

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  font-size: var(--fz-sm);
  cursor: pointer;
}
.switch-row small { color: var(--clr-muted); font-size: var(--fz-xs); }
.switch-row input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 44px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--clr-line);
  position: relative;
  cursor: pointer;
  transition: background var(--dur-normal) var(--ease);
}
.switch-row input::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform var(--dur-normal) var(--ease);
}
.switch-row input:checked { background: var(--clr-accent); }
.switch-row input:checked::after { transform: translateX(18px); }

/* ── Админ: детали визита ────────────────────────────────────── */
.admin-appt-info .visit-comment { color: var(--clr-text); }
.admin-appt-info .visit-warn { color: var(--clr-danger); font-weight: 600; }
.admin-appt-info .visit-note { font-style: italic; }
.visit-photo-btn { margin-top: 6px; align-self: flex-start; }
.field-hint--warn, #abHint.field-hint--warn { color: var(--clr-danger); }

/* ── Админ: шаблон недели ────────────────────────────────────── */
.weekday-chips { display: flex; gap: 6px; margin-bottom: var(--sp-3); }
.weekday-chip {
  flex: 1;
  min-height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-line);
  background: var(--clr-surface-2);
  color: var(--clr-muted);
  font-weight: 700;
  font-size: var(--fz-sm);
}
.weekday-chip.on { background: var(--clr-accent); color: var(--clr-on-accent); border-color: transparent; }
.tpl-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ── Звіт: прибуток и витрати ────────────────────────────────── */
.report-profit { position: relative; margin-top: 6px; font-size: var(--fz-sm); color: var(--clr-text); }
.report-profit:empty { display: none; }
.exp-add { width: 100%; margin-top: var(--sp-3); }
#expCategory { flex: 0 0 auto; width: auto; }
#expList { margin-top: var(--sp-3); }
.expense-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--clr-line);
}
.expense-row:last-child { border-bottom: none; }
.expense-row > div { flex: 1; min-width: 0; }
.expense-row strong { display: block; font-size: var(--fz-sm); }
.expense-row span:not(.expense-amount) { display: block; font-size: var(--fz-xs); color: var(--clr-muted); }
.expense-amount { font-weight: 700; color: var(--clr-danger); white-space: nowrap; }
#repExport { margin-bottom: var(--sp-4); }

/* Нижняя панель: 3–4 вкладки */
.bottom-nav .nav-icon { padding: 5px 12px; }

/* Скрытый шаг (нет послуг / перенос записи) */
.step[hidden] { display: none; }

/* Атрибут hidden всегда скрывает элемент, даже если у класса задан display */
[hidden] { display: none !important; }

/* Прайс: цена и длительность не сжимаются, кнопки переносятся */
.admin-service-controls { flex-wrap: wrap; }
.admin-service-controls .price-field--sm { flex: 1 1 96px; max-width: 132px; }

/* Шаблон: «щогодини з … до …» */
.tpl-hourly { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: var(--sp-3); font-size: var(--fz-sm); color: var(--clr-muted); }
.tpl-hourly .form-input { width: 96px; flex: 0 0 auto; padding: 10px; }
.tpl-hourly .btn { width: auto; min-height: 44px; padding: 8px 14px; }

/* ══════════════════════════════════════════════════════════════
   ТЕМЫ ОФОРМЛЕНИЯ (мастер выбирает во вкладке ⚙️)
   <html data-skin="noir|sage|lavender|cherry">; без атрибута — «Пудра».
   Светлые темы задают цвета только вне тёмного режима Telegram,
   в тёмном режиме — свой акцент поверх тёмной основы.
   ══════════════════════════════════════════════════════════════ */

:root {
  --font-display: var(--font-body);         /* шрифт заголовков */
  --accent-line: rgba(168,100,111,.2);      /* разделитель в карточке записи */
}
.greeting, .card-title, .section-title, .studio-name, .sheet-title,
.cal-month-title, .report-hero-num, .next-title, .summary-title,
.reschedule-title, .stat-num {
  font-family: var(--font-display);
}
.appt-card:not([class*="appt-card--"]) .appt-time { border-right-color: var(--accent-line); }

/* ── 1. Нуар і золото: тёмная, золото, засечки ─────────────────── */
:root[data-skin="noir"] {
  --clr-bg:         #121012;
  --clr-surface:    #1C191C;
  --clr-surface-2:  #242024;
  --clr-line:       #352E31;
  --clr-text:       #F4EEE6;
  --clr-muted:      #A89F96;

  --clr-accent:      #D8B26E;
  --clr-accent-soft: rgba(216,178,110,.14);
  --clr-on-accent:   #1A1408;

  --clr-rose:     rgba(216,178,110,.13);  --ink-rose:     #E3C48C;
  --clr-sage:     rgba(150,190,150,.14);  --ink-sage:     #B4D2AE;
  --clr-lavender: rgba(190,175,225,.13);  --ink-lavender: #CCC0EA;
  --clr-peach:    rgba(214,140,96,.16);   --ink-peach:    #E9AE86;

  --clr-danger:       #EE9AA9;
  --clr-cancel-bg:    rgba(238,154,169,.14);
  --clr-cancel-hover: rgba(238,154,169,.22);

  --glow:   rgba(216,150,90,.18);           /* медное свечение, как в референсе */
  --glow-2: rgba(216,178,110,.10);
  --dot:    rgba(216,178,110,.65);
  --accent-line: rgba(216,178,110,.25);

  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.35);
  --shadow-btn:  0 8px 22px rgba(216,178,110,.22);
  --shadow-nav:  0 10px 40px rgba(0,0,0,.55);

  --font-display: 'Playfair Display', Georgia, serif;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 22px;
}
:root[data-skin="noir"] .greeting { letter-spacing: 0; }
:root[data-skin="noir"] .form-input::-webkit-calendar-picker-indicator { filter: invert(1); }
:root[data-skin="noir"] .card,
:root[data-skin="noir"] .next-card { border-color: rgba(216,178,110,.18); }

/* ── 2. Шавлія: зелень евкаліпта, молочний, органічні засічки ───── */
:root[data-skin="sage"]:not(.dark) {
  --clr-bg:         #F2F4EE;
  --clr-surface:    #FFFFFF;
  --clr-surface-2:  #F8FAF5;
  --clr-line:       #DFE6D9;
  --clr-text:       #25302A;
  --clr-muted:      #6C7A70;

  --clr-accent:      #4D7A5C;
  --clr-accent-soft: #DCE9DF;
  --clr-on-accent:   #FFFFFF;

  --clr-rose:     #DCE9DF;  --ink-rose:     #4D7A5C;
  --clr-sage:     #E4EEDC;  --ink-sage:     #4A7146;
  --clr-lavender: #E8E6F0;  --ink-lavender: #615B80;
  --clr-peach:    #F2E9D9;  --ink-peach:    #86683C;

  --glow:   rgba(186,212,192,.6);
  --glow-2: rgba(236,226,204,.55);
  --dot:    rgba(77,122,92,.38);
  --accent-line: rgba(77,122,92,.22);
  --shadow-btn:  0 8px 20px rgba(77,122,92,.22);
}
:root.dark[data-skin="sage"] {
  --clr-accent:      #A3C9AE;
  --clr-accent-soft: rgba(163,201,174,.16);
  --clr-on-accent:   #13201A;
  --clr-rose:        rgba(163,201,174,.15);  --ink-rose: #B5D5BE;
  --glow:   rgba(163,201,174,.14);
  --dot:    rgba(163,201,174,.55);
  --accent-line: rgba(163,201,174,.25);
  --shadow-btn: 0 8px 20px rgba(163,201,174,.16);
}
:root[data-skin="sage"] {
  --font-display: 'Lora', Georgia, serif;
  --r-lg: 30px;
}

/* ── 3. Лавандовий сон: бузок, слива, округлий шрифт ──────────── */
:root[data-skin="lavender"]:not(.dark) {
  --clr-bg:         #F5F2FA;
  --clr-surface:    #FFFFFF;
  --clr-surface-2:  #FAF8FD;
  --clr-line:       #E6DFF1;
  --clr-text:       #2D2538;
  --clr-muted:      #827893;

  --clr-accent:      #7A5A9E;
  --clr-accent-soft: #EAE2F6;
  --clr-on-accent:   #FFFFFF;

  --clr-rose:     #ECE3F8;  --ink-rose:     #7A5A9E;
  --clr-sage:     #E0EEE6;  --ink-sage:     #4E7560;
  --clr-lavender: #F7E3EE;  --ink-lavender: #9A4F78;
  --clr-peach:    #FBEBDD;  --ink-peach:    #94653F;

  --glow:   rgba(212,196,240,.65);
  --glow-2: rgba(248,212,230,.55);
  --dot:    rgba(122,90,158,.38);
  --accent-line: rgba(122,90,158,.2);
  --shadow-btn:  0 8px 22px rgba(122,90,158,.25);
}
:root.dark[data-skin="lavender"] {
  --clr-accent:      #C8B3EC;
  --clr-accent-soft: rgba(200,179,236,.16);
  --clr-on-accent:   #211A2E;
  --clr-rose:        rgba(200,179,236,.15);  --ink-rose: #D3C2F0;
  --glow:   rgba(200,179,236,.14);
  --dot:    rgba(200,179,236,.55);
  --accent-line: rgba(200,179,236,.25);
  --shadow-btn: 0 8px 20px rgba(200,179,236,.18);
}
:root[data-skin="lavender"] {
  --font-display: 'Comfortaa', 'Manrope', sans-serif;
  --r-sm: 18px;
  --r-md: 26px;
  --r-lg: 32px;
}

/* ── 4. Вишневий лак: класичний червоний на кремовому ─────────── */
:root[data-skin="cherry"]:not(.dark) {
  --clr-bg:         #FBF6F2;
  --clr-surface:    #FFFFFF;
  --clr-surface-2:  #FDF9F7;
  --clr-line:       #EEE1DB;
  --clr-text:       #2A1A1C;
  --clr-muted:      #876F72;

  --clr-accent:      #B0152E;
  --clr-accent-soft: #F8DCE0;
  --clr-on-accent:   #FFFFFF;

  --clr-rose:     #FBE4E7;  --ink-rose:     #9C1229;
  --clr-sage:     #E2EEE2;  --ink-sage:     #44704A;
  --clr-lavender: #F3E6E1;  --ink-lavender: #7E4A3E;
  --clr-peach:    #FCEADB;  --ink-peach:    #95592B;

  --glow:   rgba(242,170,180,.45);
  --glow-2: rgba(255,214,192,.45);
  --dot:    rgba(176,21,46,.32);
  --accent-line: rgba(176,21,46,.18);
  --shadow-btn:  0 8px 22px rgba(176,21,46,.28);
}
:root.dark[data-skin="cherry"] {
  --clr-accent:      #F27B8E;
  --clr-accent-soft: rgba(242,123,142,.16);
  --clr-on-accent:   #2A0D13;
  --clr-rose:        rgba(242,123,142,.15);  --ink-rose: #F59AA9;
  --glow:   rgba(242,123,142,.14);
  --dot:    rgba(242,123,142,.55);
  --accent-line: rgba(242,123,142,.25);
  --shadow-btn: 0 8px 20px rgba(242,123,142,.2);
}
:root[data-skin="cherry"] {
  --font-display: 'Unbounded', 'Manrope', sans-serif;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
}
/* Unbounded широкий — чуть меньше размер крупных заголовков */
:root[data-skin="cherry"] .greeting { font-size: 24px; letter-spacing: -.2px; }
:root[data-skin="cherry"] .report-hero-num { font-size: 30px; }

/* ── Выбор темы в ⚙️ ───────────────────────────────────────────── */
.skin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.skin-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  border: 2px solid transparent;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.skin-tile:active { transform: scale(.97); }
.skin-tile[aria-checked="true"] { border-color: var(--clr-accent); }
.skin-tile[aria-checked="true"]::after {
  content: "✓";
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--clr-accent);
  color: var(--clr-on-accent);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.skin-preview-card {
  height: 54px;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.skin-preview-title { font-size: 15px; font-weight: 700; line-height: 1; }
.skin-preview-row { display: flex; gap: 4px; align-items: center; }
.skin-preview-dot { width: 18px; height: 18px; border-radius: 50%; }
.skin-preview-btn { flex: 1; height: 12px; border-radius: 999px; }
.skin-name { font-size: var(--fz-sm); font-weight: 700; }
.skin-desc { font-size: var(--fz-xs); opacity: .7; margin-top: -4px; }
.skin-grid .skin-tile:first-child { grid-column: 1 / -1; }