/* =====================================================
   Beauty Сейчас — десктоп-дизайн
   Стек трендов 2026: bento grid, glassmorphism (liquid glass),
   bold typography, soft shadows, dopamine pink + cream neutrals
   ===================================================== */

/* ---------- Шрифты ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Дизайн-токены ---------- */
:root {
    /* Палитра: cream + dopamine pink + графит */
    --bg:            #F5F1EC;        /* основной фон — тёплый off-white «Cloud Dancer» */
    --bg-2:          #EDE6DD;        /* чуть темнее, для секций */
    --surface:       #FFFFFF;        /* карточки */
    --surface-soft:  #FBF7F2;        /* soft карточки */
    --ink:           #1A1A1A;
    --ink-2:         #4A4A4A;
    --ink-muted:     #8A8780;
    --line:          rgba(26, 26, 26, 0.08);
    --line-strong:   rgba(26, 26, 26, 0.14);
    /* Бордер инпутов/полей форм — чуть контрастнее обычных линий-разделителей.
       Раньше переменная использовалась в 19 местах, но не была определена,
       из-за чего у форм пропадали рамки (например, в модалке «Записать клиента»). */
    --border:        rgba(26, 26, 26, 0.18);

    /* Акценты */
    --pink:          #E91E63;
    --pink-600:      #C2185B;
    --pink-50:       #FCE4EC;
    --pink-grad:     linear-gradient(135deg, #FF6BA0 0%, #E91E63 50%, #AD1457 100%);
    --pink-soft-grad: linear-gradient(135deg, #FFE0EC 0%, #FFD3DD 100%);

    --green:         #2E7D32;
    --green-50:      #E8F5E9;
    --amber:         #F9A825;
    --amber-50:      #FFF8E1;
    --grey:          #BDBDBD;
    --star:          #FFB300;
    --red:           #D32F2F;
    --red-50:        #FFEBEE;

    /* Эффекты */
    --radius-sm:     12px;
    --radius:        20px;
    --radius-lg:     28px;
    --radius-xl:     36px;
    --shadow-xs:     0 1px 2px rgba(20, 16, 12, 0.04);
    --shadow-sm:     0 4px 14px rgba(20, 16, 12, 0.06);
    --shadow-md:     0 12px 32px rgba(20, 16, 12, 0.08);
    --shadow-lg:     0 24px 60px rgba(20, 16, 12, 0.12);
    --shadow-pink:   0 18px 40px rgba(233, 30, 99, 0.28);

    /* Типографика */
    --font-serif:    'Fraunces', 'Times New Roman', serif;
    --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --transition:    250ms cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* [hidden] должен работать даже если на элемент стоит display:flex/grid из другого правила */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Орнаментальный «градиентный» фон страницы */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(800px 600px at 90% -10%, rgba(255, 192, 215, 0.55), transparent 60%),
        radial-gradient(600px 500px at -10% 30%, rgba(255, 215, 175, 0.4), transparent 60%),
        radial-gradient(500px 400px at 50% 110%, rgba(255, 200, 230, 0.35), transparent 60%);
    z-index: -2;
    pointer-events: none;
}
/* Едва заметная «зернистость» — для премиум-фактуры */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity: 0.04;
    z-index: -1;
    pointer-events: none;
    mix-blend-mode: multiply;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-serif); letter-spacing: -0.02em; line-height: 1.05; font-weight: 600; }
h1 { font-size: 64px; }
h2 { font-size: 44px; }
h3 { font-size: 28px; letter-spacing: -0.01em; }
p  { margin: 0; }

/* ---------- Контейнеры ---------- */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ===========================================================
   ШАПКА — стеклянная, с центральным меню и пилюлей-CTA
   =========================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 20px 0;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    background: rgba(245, 241, 236, 0.65);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.site-header__inner > .nav { margin: 0 auto; }
.site-header__inner > .header-actions { margin-left: auto; }
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.logo__mark {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: var(--pink-grad);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 20px;
    box-shadow: var(--shadow-pink);
}
.logo__city {
    color: var(--ink-muted);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    margin-left: 4px;
}

.nav {
    display: flex;
    justify-content: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.7);
    padding: 6px;
    border-radius: 999px;
    backdrop-filter: blur(12px);
    width: fit-content;
    margin: 0 auto;
}
.nav a {
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    transition: all var(--transition);
}
.nav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.7); }
.nav a.active { background: var(--ink); color: #fff; }

.header-actions { display: flex; align-items: center; gap: 12px; }

/* ---------- Кнопки ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    white-space: nowrap;
    border: 1px solid transparent;
}
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary {
    background: var(--pink-grad);
    color: #fff;
    box-shadow: var(--shadow-pink);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px rgba(233, 30, 99, 0.35); }

.btn-dark {
    background: var(--ink);
    color: #fff;
}
.btn-dark:hover { background: #2c2c2c; transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-ghost {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink);
    border: 1px solid var(--line);
    backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.9); border-color: var(--line-strong); }

/* Сбер ID */
.btn-sberid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #21A038;
    color: #fff;
    border: none;
    font-weight: 600;
    transition: background .18s;
}
.btn-sberid:hover { background: #1a8830; color: #fff; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--ink-muted);
    font-size: 13px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

.btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-strong);
}
.btn-outline:hover { background: var(--ink); color: #fff; }

.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-lg { padding: 18px 36px; font-size: 17px; }
.btn-block { display: flex; width: 100%; }

.btn-danger {
    background: var(--red-50);
    color: var(--red);
    border: 1px solid transparent;
}
.btn-danger:hover { background: var(--red); color: #fff; }

.btn-success {
    background: var(--green-50);
    color: var(--green);
}
.btn-success:hover { background: var(--green); color: #fff; }

/* Городской свитч в шапке */
.city-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    backdrop-filter: blur(8px);
}
.city-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.18); }

/* Иконка-аватар */
.avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--pink-grad);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 700;
    font-size: 16px;
    box-shadow: var(--shadow-pink);
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.avatar--btn {
    border: 0; padding: 0; cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.avatar.avatar--btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(236, 72, 153, 0.28); }
.avatar.avatar--btn:focus-visible { outline: 3px solid var(--pink-50); outline-offset: 2px; }

/* ----- Выпадающее меню пользователя ----- */
.user-menu { position: relative; }
.user-menu__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 15, 18, 0.16);
    padding: 10px;
    display: none;
    z-index: 100;
}
.user-menu__dropdown.open { display: block; animation: userMenuIn 0.14s ease-out; }
@keyframes userMenuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.user-menu__head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu__name { font-weight: 600; font-size: 15px; color: var(--ink); }
.user-menu__role { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.user-menu__dropdown a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink-2);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.user-menu__dropdown a:hover { background: var(--bg-2); color: var(--ink); }
.user-menu__dropdown a .ic { display: inline-flex; opacity: 0.78; }
.user-menu__dropdown a .ic svg { width: 18px; height: 18px; }
.user-menu__divider { height: 1px; background: var(--line); margin: 6px 4px; }
.user-menu__danger { color: var(--red) !important; }
.user-menu__danger:hover { background: var(--red-50) !important; color: var(--red) !important; }

/* ===========================================================
   HERO — крупный заголовок + правая «информационная» карточка
   =========================================================== */
.hero {
    padding: 60px 0 40px;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: end;
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    backdrop-filter: blur(8px);
    margin-bottom: 24px;
}
.hero__eyebrow .pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 0 0 rgba(233, 30, 99, 0.6);
    animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(233, 30, 99, 0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(233, 30, 99, 0); }
    100% { box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); }
}

.hero h1 {
    font-size: 84px;
    line-height: 0.96;
}
.hero h1 .accent {
    background: var(--pink-grad);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-style: italic;
    font-weight: 500;
}
.hero__sub {
    margin-top: 20px;
    font-size: 18px;
    color: var(--ink-2);
    max-width: 560px;
}

/* Правая «glass»-карточка с быстрой статистикой */
.hero__stats {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-lg);
    padding: 28px;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: var(--shadow-md);
}
.hero__stats h4 {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin-bottom: 16px;
}
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stat-row + .stat-row { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.stat__num {
    font-family: var(--font-serif);
    font-size: 38px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}
.stat__num .unit { color: var(--ink-muted); font-size: 22px; margin-left: 4px; }
.stat__lbl { color: var(--ink-muted); font-size: 13px; margin-top: 6px; }

/* ===========================================================
   BENTO — категории
   =========================================================== */
.section { padding: 60px 0; }
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 36px;
    gap: 24px;
}
.section-head h2 {
    font-size: 48px;
}
.section-head h2 em { font-style: italic; color: var(--pink); font-weight: 500; }
.section-head p { color: var(--ink-muted); max-width: 420px; }

/* ===========================================================
   BENTO V2 — фото-плитки в editorial-стиле
   =========================================================== */
.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 180px;
    gap: 16px;
}
.bento-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: none;
    background: var(--surface);
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
    color: #fff;
    isolation: isolate;
    text-align: left;
    padding: 0;
    display: block;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.bento-card.active { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Размеры плиток (на сетке 12 колонок) */
.bento-card.size-xl { grid-column: span 7; grid-row: span 2; }
.bento-card.size-lg { grid-column: span 5; grid-row: span 2; }
.bento-card.size-md { grid-column: span 4; grid-row: span 1; }
.bento-card.size-sm { grid-column: span 4; grid-row: span 1; }

/* Фоновое изображение */
.bento-card__img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 800ms cubic-bezier(.2, .8, .2, 1), filter 400ms;
    z-index: 0;
}
.bento-card:hover .bento-card__img { transform: scale(1.06); }

/* Затемнение для читаемости текста */
.bento-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0.05) 0%,
        rgba(0,0,0,0.15) 50%,
        rgba(0,0,0,0.75) 100%);
    z-index: 1;
}

/* Контент поверх */
.bento-card__inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bento-card.size-xl .bento-card__inner,
.bento-card.size-lg .bento-card__inner { padding: 32px; }

.bento-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.bento-card__index {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.02em;
}
.bento-card__count {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.bento-card__title {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff;
    margin-bottom: 8px;
}
.bento-card.size-xl .bento-card__title { font-size: 64px; }
.bento-card.size-lg .bento-card__title { font-size: 56px; }
.bento-card.size-md .bento-card__title { font-size: 32px; }

.bento-card__tagline {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}
.bento-card.size-xl .bento-card__tagline,
.bento-card.size-lg .bento-card__tagline { font-size: 16px; max-width: 320px; }

/* Стрелка-CTA */
.bento-card__arrow {
    position: absolute;
    top: 28px; right: 28px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ink);
    display: grid; place-items: center;
    transition: transform var(--transition), background var(--transition);
    z-index: 3;
    font-size: 18px;
}
.bento-card:hover .bento-card__arrow {
    transform: translate(2px, -2px);
    background: var(--pink);
    color: #fff;
}
.bento-card.disabled { cursor: not-allowed; opacity: 0.7; }
.bento-card.disabled:hover { transform: none; }
.bento-card.disabled .bento-card__img { filter: grayscale(0.6) brightness(0.8); }

/* ===========================================================
   КАЛЕНДАРЬ + СЛОТЫ (главная)
   =========================================================== */
.schedule {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    align-items: start;
}

/* Левая панель — выбор дня */
.day-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-xs);
    position: sticky;
    top: 100px;
}
.day-panel h3 { font-size: 22px; margin-bottom: 20px; }
.day-panel__cat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-2);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 24px;
}

.day-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
}
.day-list::-webkit-scrollbar { width: 6px; }
.day-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

.day-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    transition: background var(--transition);
    text-align: left;
    cursor: pointer;
}
.day-item:hover { background: var(--bg-2); }
.day-item.active {
    background: var(--ink);
    color: #fff;
}
.day-item.active .day-item__weekday,
.day-item.active .day-item__free { color: rgba(255, 255, 255, 0.7); }
.day-item.disabled { opacity: 0.45; cursor: not-allowed; }
.day-item__num {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
}
.day-item__weekday { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.day-item__month { font-size: 14px; font-weight: 500; }
.day-item__free { font-size: 12px; color: var(--ink-muted); }
.day-item__dot {
    width: 10px; height: 10px; border-radius: 50%;
}
.day-item__dot.high   { background: var(--green); box-shadow: 0 0 0 4px var(--green-50); }
.day-item__dot.medium { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-50); }
.day-item__dot.low    { background: var(--grey); }

/* Правая панель — слоты */
.slots-area {
    min-height: 400px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-xs);
}
.slots-area h3 { font-size: 28px; margin-bottom: 6px; }
.slots-area .sub { color: var(--ink-muted); margin-bottom: 28px; }

.daypart {
    margin-bottom: 28px;
}
.daypart__head {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}
.daypart__head .line { flex: 1; height: 1px; background: var(--line); }

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.slot-card {
    position: relative;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    cursor: pointer;
    overflow: hidden;
}
.slot-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.04), transparent 60%);
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}
.slot-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.slot-card:hover::before { opacity: 1; }

.slot-card__time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.slot-card__time .duration {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--ink-muted);
    background: var(--bg-2);
    padding: 4px 8px;
    border-radius: 8px;
    font-weight: 500;
}
.slot-card__service {
    margin-top: 10px;
    font-size: 17px;
    font-weight: 600;
}
.slot-card__master {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px;
    color: var(--ink-2);
    font-size: 14px;
}
.slot-card__master .mini-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--pink-soft-grad);
    flex-shrink: 0;
}
.slot-card__master .mname { font-weight: 600; color: var(--ink); }
.slot-card__meta {
    margin-top: 16px;
    display: flex; justify-content: space-between; align-items: end;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
}
.slot-card__price {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
}
.slot-card__price .cur { color: var(--ink-muted); margin-left: 2px; }
.slot-card__rating {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--ink-2); font-size: 13px; font-weight: 500;
}
.slot-card__rating .star { color: var(--star); }
.slot-card__district {
    font-size: 12px; color: var(--ink-muted);
    margin-top: 4px;
}
.slot-card__cta {
    margin-top: 16px;
    padding: 12px;
    background: var(--ink);
    color: #fff;
    border-radius: 14px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    transition: background var(--transition);
}
.slot-card__cta:hover { background: var(--pink); }

.empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--ink-muted);
}
.empty .icon {
    margin: 0 auto 16px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--pink);
}
.empty .icon svg { width: 44px; height: 44px; }
.empty h4 { font-family: var(--font-serif); font-size: 22px; color: var(--ink); margin-bottom: 6px; }

/* Универсальные правила для inline SVG-иконок */
.icon[class*="icon-"] { flex-shrink: 0; vertical-align: -3px; }

/* Ненавязчивая ссылка внутри текста */
.link-soft {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed var(--line-strong);
    transition: color var(--transition), border-color var(--transition);
}
.link-soft:hover { color: var(--pink); border-color: var(--pink); }
.meta-row svg.icon { width: 14px; height: 14px; opacity: 0.85; margin-right: 2px; }
.feature .ic svg { width: 22px; height: 22px; }
.sidebar__menu a .ic svg { width: 18px; height: 18px; opacity: 0.85; }
.sidebar__menu a .ic svg.icon-support { width: 24px; height: 24px; }
.sidebar__menu a .ic svg.icon-gallery { width: 20px; height: 20px; }
.sidebar__menu a .ic svg.icon-ticket { width: 20px; height: 22px; }
.success-icon svg { width: 32px; height: 32px; }

/* ===========================================================
   HERO-фото — большой коллаж справа
   =========================================================== */
.hero__media {
    position: relative;
    height: 560px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1200ms cubic-bezier(.2, .8, .2, 1);
}
.hero__media:hover img { transform: scale(1.04); }
.hero__media__badge {
    position: absolute;
    bottom: 24px; left: 24px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: var(--radius);
    padding: 18px 22px;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100% - 48px);
}
.hero__media__badge .stack {
    display: flex;
    align-items: center;
}
.hero__media__badge .stack img {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    margin-left: -10px;
}
.hero__media__badge .stack img:first-child { margin-left: 0; }
.hero__media__badge .text {
    font-size: 13px;
    color: var(--ink-2);
}
.hero__media__badge .text strong { color: var(--ink); display: block; font-weight: 600; font-size: 14px; }

/* Изменим раскладку hero — теперь с фото */
.hero__inner.with-media {
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: stretch;
}

/* ===========================================================
   КАРТОЧКИ МАСТЕРОВ — секция «наша команда»
   =========================================================== */
.masters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.master-card {
    position: relative;
    display: block;
    height: 420px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition), box-shadow var(--transition);
    isolation: isolate;
}
.master-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.master-card__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 800ms cubic-bezier(.2, .8, .2, 1);
}
.master-card:hover .master-card__bg { transform: scale(1.05); }
.master-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85));
    z-index: 1;
}
.master-card__inner {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 2;
    padding: 28px;
    color: #fff;
}
.master-card__cat {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}
.master-card__name {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 8px;
}
.master-card__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
}
.master-card__rating {
    display: inline-flex; align-items: center; gap: 4px;
    color: #FFB300;
    font-weight: 600;
}

/* ===========================================================
   ФОРМЫ — авторизация и т.п.
   =========================================================== */
.auth-page {
    min-height: calc(100vh - 100px);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
}
.auth-page__visual {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border-radius: var(--radius-xl);
    margin: 24px 0 24px 24px;
}
.auth-page__visual::before {
    content: '';
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(60% 60% at 30% 20%, rgba(233, 30, 99, 0.55), transparent 60%),
        radial-gradient(40% 40% at 80% 80%, rgba(255, 152, 0, 0.35), transparent 60%);
    filter: blur(20px);
    pointer-events: none;
}
.auth-page__visual .content { position: relative; z-index: 1; max-width: 480px; }
.auth-page__visual h2 {
    font-size: 64px; line-height: 1; color: #fff;
    font-style: italic; font-weight: 500;
}
.auth-page__visual h2 .grad {
    background: linear-gradient(135deg, #FFC1CC, #FF8FB1);
    background-clip: text; -webkit-background-clip: text; color: transparent;
}
.auth-page__visual p { color: rgba(255, 255, 255, 0.7); font-size: 17px; margin-top: 16px; }
.auth-page__visual .features { position: relative; z-index: 1; display: grid; gap: 14px; }
.auth-page__visual .feature {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
    backdrop-filter: blur(12px);
    font-size: 14px;
}
.auth-page__visual .feature .ic {
    width: 36px; height: 36px;
    border-radius: 12px;
    background: var(--pink-grad);
    display: grid; place-items: center;
}

.auth-page__form {
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-form {
    width: 100%;
    max-width: 420px;
}
.auth-form h1 {
    font-size: 40px;
    margin-bottom: 8px;
}
.auth-form .lead { color: var(--ink-muted); margin-bottom: 32px; }

.field { margin-bottom: 16px; }
.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1.5px solid var(--line-strong);
    background: var(--surface);
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--pink);
    box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.12);
}
.field .hint { font-size: 12px; color: var(--ink-muted); margin-top: 6px; }

/* Радио в виде «карточек-табов» */
.role-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: var(--bg-2);
    padding: 6px;
    border-radius: 16px;
    margin-bottom: 20px;
}
.role-switch input { display: none; }
.role-switch label {
    text-align: center;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: all var(--transition);
    color: var(--ink-2);
    margin: 0;
}
.role-switch input:checked + label {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

.message {
    padding: 14px 18px;
    border-radius: 14px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}
.message.error   { background: var(--red-50);   color: var(--red);   border: 1px solid rgba(211, 47, 47, 0.2); }
.message.success { background: var(--green-50); color: var(--green); border: 1px solid rgba(46, 125, 50, 0.2); }
.message.info    { background: rgba(255, 255, 255, 0.7); color: var(--ink-2); border: 1px solid var(--line); }

.auth-footer {
    text-align: center;
    margin-top: 24px;
    color: var(--ink-muted);
    font-size: 14px;
}
.auth-footer a { color: var(--pink); font-weight: 600; }

/* ===========================================================
   ПЛАВАЮЩАЯ КНОПКА «Я — мастер»
   =========================================================== */
.fab {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 40;
    padding: 16px 24px;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    transition: transform var(--transition);
}
.fab:hover { transform: translateY(-3px) scale(1.02); background: var(--pink); }
.fab .sparkle { font-size: 18px; }

/* ===========================================================
   ВХОД / РЕГИСТРАЦИЯ — две карточки на главной
   =========================================================== */
.join-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.join-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    min-height: 460px;
    color: #fff;
    isolation: isolate;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition);
}
.join-card:hover { transform: translateY(-4px); }
.join-card__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .8s ease;
}
.join-card:hover .join-card__bg { transform: scale(1.05); }
.join-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0.25) 0%,
        rgba(0,0,0,0.55) 55%,
        rgba(0,0,0,0.85) 100%);
    z-index: -1;
}
.join-card--master::after {
    background: linear-gradient(180deg,
        rgba(20,8,32,0.30) 0%,
        rgba(50,12,70,0.55) 55%,
        rgba(20,8,40,0.92) 100%);
}
.join-card__inner {
    position: relative;
    height: 100%;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: flex-end;
}
.join-card__role {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: auto;
}
.join-card__title {
    font-family: var(--font-display, inherit);
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
}
.join-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
    font-size: 14.5px;
    color: rgba(255,255,255,0.92);
}
.join-card__list li {
    position: relative;
    padding-left: 22px;
}
.join-card__list li::before {
    content: '';
    position: absolute;
    left: 4px; top: 9px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    opacity: .85;
}
.join-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}
.btn-light {
    background: #fff;
    color: var(--ink);
    border: 1px solid #fff;
}
.btn-light:hover { background: var(--cream); border-color: var(--cream); }
.btn-ghost-light {
    background: rgba(255,255,255,0.10);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.45);
    backdrop-filter: blur(6px);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.20); border-color: #fff; }

@media (max-width: 860px) {
    .join-grid { grid-template-columns: 1fr; }
    .join-card { min-height: 380px; }
    .join-card__title { font-size: 30px; }
}

/* ===========================================================
   МОДАЛЬНОЕ ОКНО
   =========================================================== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    isolation: isolate;
    display: none;
    /* Все модалки — со сквозной (page-style) прокруткой: скроллится сама
       модалка, а карточка растёт под свой контент. Внутренних скролл-боксов
       у модалок быть не должно — иначе из-за inner scroll длинные формы
       (запись клиента, правка слота, отзывы) теряют часть контента. */
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6vh 24px;
    /* Тёмный фон рисуется на самой модалке (а не на отдельном .modal__overlay
       div'е). Иначе fixed-overlay перекрывает полосу прокрутки, и
       пользователь не видит, что внутри ещё есть контент. */
    background: rgba(20, 16, 12, 0.7);
    animation: fadeIn .3s ease;
    /* Тонкий, контрастный к тёмному фону скроллбар — чтобы был виден всегда. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.55) transparent;
}
.modal::-webkit-scrollbar { width: 10px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.45);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.modal::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.7);
}
.modal.show { display: flex; }

/* Блокируем прокрутку фона на время показа модалки */
body:has(.modal.show) { overflow: hidden; }

/* .modal__overlay — слой кликабельной зоны «вне карточки». Тёмный фон
   рисует сама .modal (см. выше), поэтому overlay делаем прозрачным, но
   КЛИКАБЕЛЬНЫМ — чтобы продолжали работать обработчики data-*-close,
   привязанные к этому диву во многих модалках проекта. */
.modal__overlay {
    position: fixed;
    inset: 0;
    background: transparent;
}

/* Блюр фона: применяем filter к контенту страницы, а не к оверлею.
   Так браузер не создаёт артефактов на границах элементов (как при backdrop-filter).
   Без transition — анимация filter:blur каждый кадр очень тормозная. */
body:has(.modal.show) > *:not(.modal):not(script):not(style) {
    filter: blur(4px);
}
.modal__card {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 36px;
    max-width: 520px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    animation: pop .35s cubic-bezier(.2,.8,.2,1);
    /* Карточка растёт по контенту — внутренней прокрутки нет.
       Скроллится родительская .modal целиком (см. секцию выше). */
    max-height: none;
    overflow: visible;
    margin: 0 auto;
}
.modal__close {
    position: absolute;
    top: 20px; right: 20px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-2);
    display: grid; place-items: center;
    font-size: 18px; color: var(--ink-2);
    transition: background var(--transition);
}
.modal__close:hover { background: var(--ink); color: #fff; }
.modal h3 { font-size: 26px; margin-bottom: 8px; }
.modal .lead { color: var(--ink-muted); margin-bottom: 24px; }

/* Универсальные стили форм внутри модалок — гарантируют, что инпуты
   никогда не «налезают» друг на друга и тянутся на 100% ячейки.
   Контент центрируем, чтобы в широкой модалке форма не «прилипала» к левому краю. */
.modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    text-align: left;
}
.modal-form > * { width: 100%; }
.modal-form .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-items: stretch; }
.modal-form .field > label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink-muted);
    text-align: left;
}
.modal-form input[type="date"],
.modal-form input[type="time"],
.modal-form input[type="text"],
.modal-form input[type="tel"],
.modal-form input[type="number"],
.modal-form select,
.modal-form textarea {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    height: 38px;
    padding: 6px 10px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.2;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
}
.modal-form input[type="date"]:focus,
.modal-form input[type="time"]:focus,
.modal-form input[type="text"]:focus,
.modal-form input[type="tel"]:focus,
.modal-form input[type="number"]:focus,
.modal-form select:focus,
.modal-form textarea:focus {
    outline: none;
    border-color: var(--pink-600);
    box-shadow: 0 0 0 3px rgba(228,90,140,.15);
}
/* Нужно разрешить input'ам внутри грид-пар ужиматься — иначе нативные
   date/time-контролы оставляют свою «естественную» ширину и вылезают за ячейку. */
.modal-form__pair > * { min-width: 0; }

/* Вариант модалки пошире — нужен там, где внутри сразу несколько
   полей дат/времени (bulk-создание, применение шаблона и т. п.). */
.modal__card--wide { max-width: 720px; }
.modal-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 520px) {
    .modal-form__grid { grid-template-columns: 1fr; }
    .modal { padding: 16px 12px; }
    .modal__card { padding: 22px 18px; }
}
.modal-form__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 0;
}
.modal-form__chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.modal-form__footer {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
    flex-wrap: wrap;
}
.modal-form__footer--split { justify-content: space-between; align-items: center; }
.modal-form__footer-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { transform: translateY(20px) scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }

/* Класс-алиас для обратной совместимости. Поведение «scroll-page» теперь
   зашито в базовом .modal (сквозная прокрутка, фон на самой модалке).
   Класс оставлен, чтобы существующие шаблоны с `class="modal modal--scroll-page"`
   не пришлось трогать; явных стилей больше не задаём. */

/* ===========================================================
   КАБИНЕТ — общая сетка: левый сайдбар + контент
   =========================================================== */
.cabinet {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 32px;
    padding: 40px 0;
}
.cabinet__content { min-width: 0; }
.sidebar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-xs);
    position: sticky;
    top: 100px;
    height: fit-content;
}
.sidebar__user {
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    background: var(--bg-2);
    border-radius: 16px;
    margin-bottom: 24px;
}
.sidebar__user .name { font-weight: 600; font-size: 15px; }
.sidebar__user .role { font-size: 12px; color: var(--ink-muted); }
.sidebar__menu { display: grid; gap: 4px; }
.sidebar__menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
}
.sidebar__menu a:hover { background: var(--bg-2); color: var(--ink); }
.sidebar__menu a.active { background: var(--ink); color: #fff; }
.sidebar__menu a .ic { font-size: 18px; opacity: 0.85; }
.sidebar__menu .divider { height: 1px; background: var(--line); margin: 12px 0; }

/* Статус видимости в каталоге, в шапке сайдбара мастера */
.sidebar__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    transition: filter var(--transition);
}
.sidebar__status:hover { filter: brightness(0.95); }
.sidebar__status-dot {
    width: 7px; height: 7px; border-radius: 50%;
}
.sidebar__status--on  { background: #ECFDF5; color: #047857; }
.sidebar__status--on  .sidebar__status-dot { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.sidebar__status--off { background: #FEF2F2; color: #B91C1C; }
.sidebar__status--off .sidebar__status-dot { background: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }

/* Карточка «Видимость в каталоге» в дашборде мастера */
.visibility-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: #fff;
}
.visibility-card--on  { border-color: #BBF7D0; background: linear-gradient(180deg, #F0FDF4 0%, #ffffff 75%); }
.visibility-card--off { border-color: #FECACA; background: linear-gradient(180deg, #FEF2F2 0%, #ffffff 75%); }

.visibility-card__main {
    display: flex; align-items: center; gap: 14px;
    min-width: 0;
}
.visibility-card__dot {
    flex-shrink: 0;
    width: 12px; height: 12px; border-radius: 50%;
    position: relative;
}
.visibility-card--on  .visibility-card__dot { background: #10B981; box-shadow: 0 0 0 6px rgba(16,185,129,.18); }
.visibility-card--off .visibility-card__dot { background: #EF4444; box-shadow: 0 0 0 6px rgba(239,68,68,.18); }
.visibility-card--on  .visibility-card__dot::after {
    content: ''; position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(16,185,129,.25);
    animation: vbPulse 1.6s ease-out infinite;
}
@keyframes vbPulse {
    0%   { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}
.visibility-card__title { font-weight: 700; font-size: 16px; color: var(--ink); }
.visibility-card__lead  { font-size: 13.5px; color: var(--ink-muted); margin-top: 2px; max-width: 560px; }

.visibility-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.visibility-card__actions .btn { white-space: nowrap; }

/* Список причин в модалке «Приостановить» */
.visibility-modal__list {
    list-style: none; padding: 0;
    margin: 16px 0 22px;
    display: grid; gap: 10px;
    font-size: 14px;
    color: var(--ink-2);
}
.visibility-modal__list li {
    display: flex; gap: 10px;
    padding: 12px 14px;
    background: var(--bg-2);
    border-radius: 12px;
    line-height: 1.45;
}
.visibility-modal__list .dot {
    flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
    margin-top: 7px;
}
.visibility-modal__list .dot--ok   { background: #10B981; }
.visibility-modal__list .dot--warn { background: #F59E0B; }

.visibility-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}

@media (max-width: 720px) {
    .visibility-card { flex-direction: column; align-items: flex-start; }
    .visibility-card__actions { width: 100%; }
    .visibility-card__actions .btn { flex: 1 1 auto; justify-content: center; }
    .visibility-modal__actions { flex-direction: column-reverse; }
    .visibility-modal__actions .btn { width: 100%; justify-content: center; }
}

.cabinet__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.cabinet__head { margin-bottom: 8px; }
.cabinet__head h1 { font-size: 44px; margin-bottom: 6px; }
.cabinet__head p { color: var(--ink-muted); }

/* ---------- Карточки статистики (дашборд) ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-xs);
}
.stat-card .lbl {
    font-size: 12px; color: var(--ink-muted);
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
    margin-bottom: 12px;
}
.stat-card .val {
    font-family: var(--font-serif);
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}
.stat-card .val .star { color: var(--star); font-size: 28px; }
.stat-card.accent {
    background: var(--pink-grad);
    border: none;
    color: #fff;
    box-shadow: var(--shadow-pink);
}
.stat-card.accent .lbl { color: rgba(255, 255, 255, 0.85); }

/* ---------- Карточка-блок (контейнер) ---------- */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-xs);
}
.panel + .panel { margin-top: 24px; }

/* Бейдж статуса записи (универсальный — таблицы, карточки) */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--bg-2, #f3efe9);
    color: var(--ink-2, #4a473f);
}
.status-pill--active    { background: rgba(16, 185, 129, 0.12); color: #047857; }
.status-pill--completed { background: rgba(99, 102, 241, 0.12); color: #4338ca; }
.status-pill--cancelled { background: rgba(239, 68, 68, 0.12);  color: #b91c1c; }
.status-pill--no_show   { background: rgba(245, 158, 11, 0.14); color: #92400e; }
.status-pill--pending   { background: rgba(148, 163, 184, 0.18); color: #475569; }
.panel__head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px;
    gap: 12px;
    flex-wrap: wrap;
}
.panel__head h3 { font-size: 22px; }
.panel__head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ===========================================================
   КАЛЕНДАРЬ-СЕТКА МАСТЕРА (slots.php)
   =========================================================== */
.master-week {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-xs);
    overflow: auto;
}
.week-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
}
.week-toolbar .week-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; }
.week-toolbar .nav-btns { display: flex; gap: 8px; }
.week-toolbar .nav-btns button {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bg-2);
    color: var(--ink);
    font-size: 18px;
    transition: background var(--transition);
}
.week-toolbar .nav-btns button:hover { background: var(--ink); color: #fff; }

.week-grid {
    --row-h: 44px;            /* высота 1 ячейки = 30 минут */
    display: grid;
    grid-template-columns: 70px repeat(7, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    min-width: 900px;
}
.week-grid .gh,
.week-grid .gc,
.week-grid .gt {
    background: var(--surface);
    font-size: 12px;
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.week-grid .gh {
    background: var(--bg-2);
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 8px;
    flex-direction: column;
    gap: 4px;
}
.week-grid .gh .num { font-family: var(--font-serif); font-size: 20px; color: var(--ink); }
.week-grid .gh.today { background: var(--ink); color: #fff; }
.week-grid .gh.today .num { color: #fff; }
.week-grid .gt {
    font-weight: 600;
    color: var(--ink-2);
    justify-content: flex-end;
    padding-right: 12px;
    height: var(--row-h);
}

.week-grid .gc {
    height: var(--row-h);
    position: relative;
    padding: 0;
    overflow: visible;       /* чтобы chip мог растягиваться поверх соседей */
    transition: background var(--transition);
}
/* Пустая, доступная для клика */
.week-grid .gc[data-empty-cell] { cursor: pointer; }
.week-grid .gc[data-empty-cell]:hover {
    background: linear-gradient(180deg, var(--pink-50) 0%, var(--bg-2) 100%);
}
.week-grid .gc[data-empty-cell]:hover::after {
    content: "+";
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--pink);
    font-size: 22px;
    font-weight: 300;
}
/* Занятая клетка внутри слота: видно но не кликается */
.week-grid .gc.busy {
    background:
        repeating-linear-gradient(
            135deg,
            var(--bg) 0px,
            var(--bg) 6px,
            var(--bg-2) 6px,
            var(--bg-2) 12px
        );
    cursor: not-allowed;
}
/* Прошедший день */
.week-grid .gc.past {
    background: var(--bg);
    cursor: not-allowed;
    opacity: 0.55;
}

/* Чип слота — растягивается на N клеток через --span */
.slot-chip {
    position: absolute;
    inset: 3px;
    height: calc(var(--span, 1) * var(--row-h) - 6px);
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    line-height: 1.25;
    cursor: pointer;
    z-index: 2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: transform var(--transition), box-shadow var(--transition);
    box-shadow: var(--shadow-xs);
}
.slot-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    z-index: 3;
}
.slot-chip__time {
    font-family: var(--font-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.slot-chip__name { font-weight: 600; font-size: 12px; }
.slot-chip__svc {
    font-weight: 400;
    font-size: 11px;
    opacity: 0.8;
    margin-top: auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot-chip.free {
    background: linear-gradient(180deg, #DCFCE7 0%, #BBF7D0 100%);
    color: #15803D;
    border: 1px solid #86EFAC;
}
.slot-chip.booked {
    background: linear-gradient(180deg, var(--pink-50) 0%, #FBCFE8 100%);
    color: var(--pink-600);
    border: 1px solid #F9A8D4;
}

/* Легенда под календарём мастера */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 18px;
    padding: 14px 18px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 13px;
    color: var(--ink-2);
}
.legend .dot {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: -3px;
}
.legend .dot-free   { background: #BBF7D0; border: 1px solid #86EFAC; }
.legend .dot-booked { background: #FBCFE8; border: 1px solid #F9A8D4; }
.legend .dot-busy   {
    background: repeating-linear-gradient(135deg, var(--bg) 0 4px, var(--bg-2) 4px 8px);
    border: 1px solid var(--line);
}
.legend .dot-empty  { background: var(--surface); border: 1px solid var(--line); }

/* Предупреждение в модалке */
.message.warn {
    background: #FEF3C7;
    color: #92400E;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin: 10px 0;
}

/* ===========================================================
   ТАБЫ
   =========================================================== */
.tabs {
    display: flex; gap: 4px;
    background: var(--bg-2);
    padding: 6px;
    border-radius: 999px;
    width: fit-content;
    margin-bottom: 24px;
}
/* В кабинете родитель .cabinet__content уже даёт gap: 24px — двойной отступ убираем */
.cabinet__content > .tabs { margin-bottom: 0; }
/* Панели-вкладки: соседство в DOM не должно прибавлять margin-top к скрытым/видимым панелям */
.cabinet__content > .panel[data-pane] + .panel[data-pane] { margin-top: 0; }

/* Клиентская пагинация «Показать ещё» */
.paginate { display: flex; flex-direction: column; gap: 16px; }
.paginate__more { align-self: center; min-width: 220px; margin-top: 8px; }
.paginate__more[hidden] { display: none; }
.is-paginate-hidden, .is-filter-hidden { display: none !important; }

/* Под-фильтр «Отменено мной/клиентом» */
.cancel-subfilter {
    display: inline-flex; gap: 4px;
    background: var(--bg-2);
    padding: 4px;
    border-radius: 999px;
}
.cancel-subfilter button {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    background: transparent;
    transition: all var(--transition);
}
.cancel-subfilter button.active { background: var(--ink); color: #fff; font-weight: 600; }
@media (max-width: 600px) {
    .panel__head:has(.cancel-subfilter) { flex-wrap: wrap; gap: 12px; }
    .cancel-subfilter { width: 100%; justify-content: stretch; }
    .cancel-subfilter button { flex: 1; }
}

/* Модалка «Причина отмены» */
.cancel-reasons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cancel-reason {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    cursor: pointer; transition: border-color var(--transition), background var(--transition);
    font-size: 14px;
}
.cancel-reason:has(input:checked) { border-color: var(--ink); background: var(--bg-2); }
.cancel-reason input { accent-color: var(--ink); }

/* Бейдж «причина отмены» в карточках/строках */
.cancel-note {
    margin-top: 6px; padding: 8px 10px;
    border-left: 3px solid var(--red, #b42318);
    background: #fdecec; color: #6e1818;
    border-radius: 6px;
    font-size: 13px; line-height: 1.4;
    display: flex; gap: 8px; align-items: flex-start;
}
.cancel-note__label { font-weight: 600; }

/* Блок «Ваш отзыв» внутри карточки завершённой записи */
.my-review {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--pink-500, #ec4899);
    background: #fff5f9;
    border-radius: 6px;
    font-size: 13px; line-height: 1.45;
}
.my-review__head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
}
.my-review__stars { font-size: 14px; letter-spacing: 1px; color: #ddd; }
.my-review__stars .star.filled { color: #f5a623; }
.my-review__label { font-weight: 600; color: var(--ink-2); font-size: 12.5px; }
.my-review__text { color: var(--ink-1); }
.my-review__photos {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.my-review__photo {
    display: block;
    width: 64px; height: 64px;
    border-radius: 8px;
    overflow: hidden;
}
.my-review__photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.my-review__actions {
    display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}

/* Кнопки на собственном отзыве на публичной странице мастера */
.review__actions {
    margin-top: 10px;
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-left: 56px;
}

/* Вариант блока «мой отзыв» внутри booking-card (мастер о клиенте) */
.my-review--cr {
    border-left-color: #6366f1;
    background: #eef2ff;
}
.my-review--cr .my-review__label { color: #4338ca; }

/* Услуги мастера: статус видимости */
.svc-state {
    display: inline-block;
    padding: 2px 10px; margin-left: 8px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.02em; vertical-align: middle;
}
.svc-state--on      { background: #e6f7ec; color: #18794e; }
.svc-state--off     { background: #fde8e8; color: #b42318; }
.svc-state--partial { background: #fff4e0; color: #a35200; }
.list-item.is-dim { opacity: 0.6; }

/* Модалка «Скрыть услугу» */
.hide-scope { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.hide-scope__opt {
    display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.hide-scope__opt:has(input:checked) { border-color: var(--ink); background: var(--bg-2); }
.hide-scope__title { font-weight: 600; }
.hide-scope__hint  { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }

.hide-slots { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 16px; }
.hide-slots__day { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.hide-slots__day:last-child { border-bottom: 0; }
.hide-slots__date { font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--ink); }
.hide-slot { display: flex; gap: 8px; align-items: center; padding: 4px 6px; font-size: 13.5px; cursor: pointer; border-radius: 6px; }
.hide-slot:hover { background: var(--bg-2); }
.hide-slot.is-disabled { color: var(--ink-muted); cursor: not-allowed; }
.hide-slot__note { color: var(--ink-muted); font-size: 12px; }

/* Компактная панель фильтров (дашборд) */
.filter-bar {
    display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}
.filter-bar__field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.filter-bar__field--grow { flex: 1 1 220px; }
.filter-bar__field label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ink-muted); font-weight: 600;
}
.filter-bar__field input,
.filter-bar__field select {
    padding: 8px 34px 8px 12px; font-size: 14px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center / 13px 13px;
    color: var(--ink);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit; line-height: 1.2;
}
.filter-bar__field select { cursor: pointer; }
.filter-bar__actions { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; }
@media (max-width: 600px) {
    .filter-bar__field { flex: 1 1 calc(50% - 7px); min-width: 0; }
    .filter-bar__actions { margin-left: 0; width: 100%; }
}
.tabs button,
.tabs a {
    padding: 10px 24px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 14px;
    color: var(--ink-2);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all var(--transition);
}
.tabs button:hover,
.tabs a:hover { color: var(--ink); }
.tabs button.active,
.tabs a.active { background: var(--ink); color: #fff; font-weight: 600; }

/* «Бейдж» с количеством элементов внутри кнопки вкладки */
.tabs__count {
    display: inline-flex;
    align-items: center; justify-content: center;
    margin-left: 6px;
    min-width: 22px;
    padding: 0 7px;
    height: 20px;
    border-radius: 999px;
    background: rgba(15, 15, 18, 0.08);
    color: var(--ink-2);
    font-size: 12px; font-weight: 600;
}
.tabs button.active .tabs__count,
.tabs a.active .tabs__count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.tabs__count--alert {
    background: #fef3c7;
    color: #92400e;
}
.tabs button.active .tabs__count--alert,
.tabs a.active .tabs__count--alert {
    background: #fbbf24;
    color: #fff;
}

/* Ответ мастера на отзыв */
.review--dash {
    padding: 16px;
    border: 0;
    border-radius: 12px;
    background: #fff;
}
.review--hidden-by-mod {
    background: #fafafa;
    border: 1px dashed #fed7aa;
    opacity: 0.85;
}
.review__hidden-banner {
    display: flex; align-items: center; gap: 8px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #92400e;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
}
.reply-block { margin-top: 14px; margin-left: 56px; }
.reply {
    border-radius: 10px;
    padding: 12px 14px;
}
.reply--view {
    background: #f5f3ff;
    border-left: 3px solid #8b5cf6;
}
.reply__head {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 6px;
}
.reply__label { font-weight: 600; color: var(--ink-2); font-size: 13px; }
.reply__date  { color: var(--ink-muted); font-size: 12px; }
.reply__text  { color: var(--ink-1); font-size: 14px; line-height: 1.5; }
.reply__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.reply--form {
    background: #fafafa;
    border: 1px dashed var(--border, #e5e5e5);
}
.reply--form label { display:block; margin-bottom: 6px; font-weight: 600; font-size: 13px; }
.reply--form textarea {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    resize: vertical; min-height: 70px;
}
.reply__form-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Блок «Обжаловать отзыв» — рядом с формой ответа мастера, более приглушённый */
.appeal-block { margin-top: 10px; }
.appeal-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink-2);
}
.appeal-toggle:hover { color: #b91c1c; }
.appeal-toggle svg { color: #b45309; }
.appeal-form {
    margin-top: 10px;
    padding: 12px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
}
.appeal-form label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.appeal-already {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 10px 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    color: #065f46;
    font-size: 13px;
}
.appeal-already__txt { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.appeal-already__txt svg { color: #059669; }
.appeal-form textarea {
    width: 100%; box-sizing: border-box;
    border: 1px solid #fed7aa;
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    resize: vertical; min-height: 70px;
}

/* На публичных страницах — отзыв мастера в виде «вложенного» блока под отзывом клиента */
.review__reply {
    margin: 10px 0 0 56px;
    padding: 10px 12px;
    border-left: 3px solid #8b5cf6;
    background: #f5f3ff;
    border-radius: 8px;
    font-size: 13.5px; line-height: 1.5;
    display: flex; gap: 10px; align-items: flex-start;
}
.review__reply-avatar {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}
.review__reply-body { flex: 1; min-width: 0; }
.review__reply-head {
    display: flex; gap: 8px; align-items: baseline;
    margin-bottom: 4px;
    color: var(--ink-2);
}
.review__reply-label { font-weight: 600; }
.review__reply-date  { color: var(--ink-muted); font-size: 12px; }
.review__reply-text  { color: var(--ink-1); }
.review__reply--inline .review__reply { margin-left: 0; margin-top: 8px; }
.tabs--review { gap: 6px; margin-bottom: 18px; }
.tabs--review button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; }
.tabs--review button svg { width: 14px; height: 14px; }

/* Карточки «Оценить клиента» — название услуги и кнопка в столбик */
.rate-list { display: grid; gap: 10px; }
.rate-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.rate-card__title { font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.35; }
.rate-card__meta {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    color: var(--ink-2); font-size: 12px;
}
.rate-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.rate-card__btn { width: 100%; margin-top: 4px; }

/* Модалка «Отзывы о клиенте» — без внутреннего скролла, скроллится сама модалка */
.crm__card { max-width: 720px; }
.crm__head { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.crm__head h3 { margin-bottom: 6px; }
.crm__sub { color: var(--ink-muted); font-size: 14px; }
.crm__loader { padding: 40px 0; text-align: center; color: var(--ink-muted); }
.review.review--mine { background: var(--bg-2); border-color: var(--line); border-radius: 12px; padding: 12px; }

/* Карточка записи мастера в расписании — единый стиль с дашбордом */
.bookings-stack { display: grid; gap: 10px; }
.booking-card { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.booking-card + .booking-card { margin-top: 0; }
.booking-card.is-done { opacity: 0.7; background: var(--bg-2); }
.booking-card__time {
    min-width: 64px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--ink); color: #fff;
    font-family: var(--font-serif); font-size: 18px;
    text-align: center; line-height: 1.2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.booking-card__time small { font-size: 11px; opacity: 0.7; font-family: var(--font-sans); margin-top: 2px; }
.booking-card__title { font-weight: 600; font-size: 15px; line-height: 1.35; margin-bottom: 6px; }
.booking-card__title .client { color: var(--ink-muted); font-weight: 500; }
.booking-card__client { margin-bottom: 6px; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Чип «рейтинг клиента» — кликабельный (открывает модалку отзывов) */
.client-rating {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    background: var(--bg-2);
    color: var(--ink);
    cursor: default;
    font-family: inherit;
}
.client-rating .star { color: #f5b301; font-size: 14px; line-height: 1; }
.client-rating--has { cursor: pointer; transition: background var(--transition), border-color var(--transition); }
.client-rating--has:hover { background: var(--line); border-color: var(--line-strong); }
.client-rating--none { color: var(--ink-muted); font-weight: 500; }
.client-rating--none .star { color: var(--ink-muted); }
.client-rating__count { color: var(--ink-muted); font-weight: 500; margin-left: 2px; }
.booking-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; color: var(--ink-2); font-size: 13px; }
.booking-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.booking-card__comment { margin-top: 8px; font-size: 13px; color: var(--ink-muted); display: flex; gap: 6px; align-items: flex-start; }
.booking-card__actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.booking-card__actions .btn { white-space: nowrap; }

@media (max-width: 720px) {
    .booking-card { grid-template-columns: auto 1fr; }
    .booking-card__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}

/* ===========================================================
   СПИСКИ В КАБИНЕТЕ (брони, услуги)
   =========================================================== */
.list { display: grid; gap: 12px; }
.list-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color var(--transition), transform var(--transition);
}
.list-item:hover { border-color: var(--line-strong); }
.list-item--no-icon {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.list-item--no-icon .list-item__actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}
.list-item__icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--pink-soft-grad);
    display: grid; place-items: center;
    font-size: 26px;
}
.list-item__title { font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.list-item__meta { font-size: 13.5px; color: var(--ink-2); display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: center; }
.list-item__meta span { display: inline-flex; align-items: center; gap: 5px; }
.list-item__meta a.link-soft { color: var(--ink); font-weight: 500; }
.list-item__meta svg.icon { opacity: 0.85; }
.list-item__actions { display: flex; gap: 8px; }

/* Чип «человек с аватаркой» в строке мета (мастер или клиент) */
.master-chip, .client-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 3px 10px 3px 3px;
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition);
}
.master-chip:hover, .client-chip:hover { background: var(--line); }
.master-chip__avatar, .client-chip__avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
    color: var(--ink);
    text-transform: uppercase;
    overflow: hidden;
}

/* ===========================================================
   СТРАНИЦА БРОНИРОВАНИЯ — confirm/success
   =========================================================== */
.center-page {
    min-height: calc(100vh - 100px);
    display: grid; place-items: center;
    padding: 60px 0;
}
.book-card {
    width: 100%;
    max-width: 540px;
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: 48px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
}
.book-card .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: var(--pink-50);
    color: var(--pink-600);
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    margin-bottom: 20px;
}
.book-card h1 { font-size: 44px; margin-bottom: 8px; }
.book-card .summary {
    margin: 28px 0;
    padding: 24px;
    background: var(--bg-2);
    border-radius: var(--radius);
    display: grid;
    gap: 12px;
}
.book-card .summary__row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px;
}
.book-card .summary__row .k { color: var(--ink-muted); }
.book-card .summary__row .v { font-weight: 600; }
.book-card .summary__total {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid var(--line);
}
.book-card .summary__total .price {
    font-family: var(--font-serif); font-size: 32px; font-weight: 600;
}

/* Список услуг с чекбоксами в форме соглашений (кабинет мастера) */
.agr-services {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.agr-services__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, border-color .15s;
}
.agr-services__item:hover {
    background: var(--ink-5, #f5f5f5);
    border-color: var(--ink-10, rgba(0,0,0,.12));
}
.agr-services__item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--pink-600);
    cursor: pointer;
}
.agr-services__item span { flex: 1; }

/* Блок соглашений на странице подтверждения записи */
.agreements-block {
    margin: 4px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.agreements-block__title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 2px;
}
.agreement-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.agreement-item--compact .agreement-item__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 8px;
}
.agreement-item__title {
    font-weight: 600;
    font-size: 14px;
}
.agreement-item__view {
    background: none;
    border: none;
    padding: 0;
    color: var(--pink-600);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    flex-shrink: 0;
}
.agreement-item__view:hover { color: var(--pink-700, #c2185b); }
.agreement-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 12px;
    cursor: pointer;
    font-size: 14px;
}
.agreement-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--pink-600);
    cursor: pointer;
}

/* Документ в модалке (текст соглашения) */
.agr-doc__title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px;
    padding-right: 40px;
    line-height: 1.3;
}
.agr-doc__signed {
    font-size: 12px;
    color: var(--ink-muted);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--green-50, #e8f5e9);
    color: var(--green, #2e7d32);
    border-radius: 6px;
}
.agr-doc__signed::before { content: '✓'; font-weight: 700; }

/* Список принятых соглашений в карточках записей */
.consents-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--ink-5, #f7f7f5);
    border-radius: 8px;
    font-size: 12px;
}
.consents-list__title {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.consents-list__item {
    background: none;
    border: none;
    padding: 2px 0;
    text-align: left;
    color: var(--ink, #1a1a1a);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.consents-list__item::before {
    content: '✓';
    color: var(--green, #2e7d32);
    font-weight: 700;
    font-size: 12px;
}
.consents-list__item:hover { color: var(--pink-600); text-decoration: underline; }
.agr-doc__body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 18px 20px;
    background: var(--ink-5, #f7f7f5);
    border-radius: 10px;
    border: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink, #1a1a1a);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.agr-doc__body::-webkit-scrollbar { width: 8px; }
.agr-doc__body::-webkit-scrollbar-thumb {
    background: var(--ink-10, rgba(0,0,0,.15));
    border-radius: 4px;
}


.success-icon {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: var(--green-50);
    color: var(--green);
    display: grid; place-items: center;
    font-size: 40px;
    margin: 0 auto 24px;
}

/* ===========================================================
   СТРАНИЦА КАРТОЧКИ МАСТЕРА  /masters.php?id=X
   =========================================================== */
.master-page { padding-bottom: 60px; }

.master-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;

    /* Вписываем hero в ширину контейнера сайта (баннер не растягивается на 4K). */
    width: calc(100% - 64px);
    max-width: 1280px;
    margin: 20px auto 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);

    /* Обложка мастера кропается 16:4 — показываем её в тех же пропорциях,
       чтобы изображение отображалось без дополнительной подрезки.
       min-height: fit-content, чтобы контент не обрезался на узких экранах. */
    aspect-ratio: 16 / 4;
    min-height: fit-content;
}
.master-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.7) 100%);
}
@media (max-width: 700px) {
    .master-hero { width: calc(100% - 24px); margin-top: 12px; border-radius: var(--radius); }
}
.master-hero__inner {
    position: relative;
    padding: 32px 40px 40px;
    max-width: none;
    height: 100%;
    display: flex; flex-direction: column; justify-content: space-between;
}
@media (max-width: 900px) {
    .master-hero { aspect-ratio: 16 / 6; }
}
@media (max-width: 700px) {
    .master-hero__inner { padding: 20px 20px 28px; }
}
.back-link {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.9;
    align-self: flex-start;
}
.back-link:hover { opacity: 1; text-decoration: underline; }

.master-hero__card {
    display: flex;
    align-items: flex-end;
    gap: 28px;
}
.master-hero__avatar {
    width: 140px; height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: var(--shadow-lg);
}
.master-hero__cat {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 8px;
}
.master-hero__name {
    font-family: var(--font-serif);
    font-size: 56px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
}
.master-hero__meta {
    display: flex; gap: 18px; align-items: center;
    font-size: 15px;
    opacity: 0.95;
}
.master-hero__rating {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
}

/* ===========================================================
   СТРАНИЦА ПРОФИЛЯ КЛИЕНТА  /profile.php?id=X
   =========================================================== */
.client-page { padding-bottom: 60px; }
.client-hero {
    position: relative;
    color: #fff;
    background: linear-gradient(135deg, #1f1d2b 0%, #3a2347 60%, var(--pink-600) 130%);
    overflow: hidden;

    /* Вписываем hero в ширину контейнера сайта, чтобы на широких
       экранах фон-баннер не растягивался от края до края. */
    width: calc(100% - 64px);
    max-width: 1280px;
    margin: 20px auto 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
@media (max-width: 700px) {
    .client-hero { width: calc(100% - 24px); margin-top: 12px; border-radius: var(--radius); }
}
.client-hero::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(600px 320px at 110% -10%, rgba(236,72,153,0.32), transparent 60%),
        radial-gradient(420px 260px at -10% 120%, rgba(255,255,255,0.10), transparent 60%);
    pointer-events: none;
}

/* Вариант с загруженным баннером: фото подкладывается фоном,
   поверх — тёмный полупрозрачный слой для читаемости белого текста.
   aspect-ratio совпадает с пропорциями кропа (16:9),
   чтобы то, что пользователь обрезал в кропере, отображалось
   без дополнительной подрезки. min-height: fit-content — чтобы
   при очень длинном имени/мете блок мог вырасти. */
.client-hero--has-banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Пропорции совпадают с кропом (16:4 — панорамный баннер),
       чтобы обрезанное фото показывалось ровно тем кадром. */
    aspect-ratio: 16 / 4;
    min-height: fit-content;
}
.client-hero--has-banner::before {
    background:
        linear-gradient(180deg, rgba(20, 14, 18, 0.20) 0%, rgba(20, 14, 18, 0.78) 100%),
        radial-gradient(600px 320px at 110% -10%, rgba(236,72,153,0.18), transparent 60%);
}
.client-hero--has-banner .client-hero__inner {
    /* Контент прижимаем к нижней части баннера — как у мастера */
    height: 100%;
    justify-content: flex-end;
}
@media (max-width: 900px) {
    /* На узких экранах 16:4 слишком низкий для текста — смягчаем до 16:6. */
    .client-hero--has-banner { aspect-ratio: 16 / 6; }
}
.client-hero__inner {
    position: relative;
    /* Ограничение ширины теперь на родителе .client-hero — здесь
       задаём только внутренние отступы, чтобы содержимое не прилипало
       к краям hero-карточки. Глобальный .container имеет max-width,
       и он не мешает (поскольку hero уже ограничен). */
    padding: 32px 40px 40px;
    max-width: none;
    display: flex; flex-direction: column; gap: 24px;
}
@media (max-width: 700px) {
    .client-hero__inner { padding: 20px 20px 28px; }
}
.client-hero__inner .back-link { color: #fff; opacity: 0.85; }
.client-hero__card { display: flex; align-items: center; gap: 24px; }
.client-hero__avatar {
    width: 120px; height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 18px 40px rgba(0,0,0,0.32);
}
.client-hero__role {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 6px;
}
.client-hero__name {
    font-family: var(--font-serif);
    font-size: 48px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}
.client-hero__meta {
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    font-size: 14px; opacity: 0.95;
}
.client-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.client-hero__meta strong { color: #fff; font-weight: 700; }
.client-hero__rating {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
}

/* «Только для мастеров» бейдж */
.badge-pro {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-2);
    color: var(--ink-2);
    border: 1px solid var(--line);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px; font-weight: 500;
}
.badge-pro svg { width: 14px; height: 14px; }
.badge-mine {
    display: inline-flex; align-items: center;
    background: var(--pink-50);
    color: var(--pink-600);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    margin-left: 8px; vertical-align: middle;
}

.master-body { padding-top: 40px; }
.master-cols {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}
.master-cols.master-cols--single {
    grid-template-columns: 1fr;
}
@media (max-width: 980px) {
    .master-cols { grid-template-columns: 1fr; }
}

.panel.sticky { position: sticky; top: 100px; }

/* Услуги мастера — список */
.services-list { display: flex; flex-direction: column; }
.service-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    gap: 20px;
}
.service-row:first-child { border-top: 0; }
.service-row__name {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
}
.service-row__desc {
    font-size: 13.5px;
    color: var(--ink-2, #555);
    margin-top: 6px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    background: #faf7f2;
    border-left: 3px solid #fbcfe8;
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
}
/* В кабинете мастера — то же стилем, без рамки слева, чуть компактнее */
.service-list__desc {
    margin-top: 8px;
    padding: 8px 12px;
    background: #faf7f2;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2, #555);
    white-space: normal;
    overflow-wrap: anywhere;
}
.service-row__meta {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ink-2);
    display: flex; align-items: center; gap: 6px;
}
.service-row__price {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

/* Свободные окошки в карточке мастера */
.free-slots { display: flex; flex-direction: column; gap: 18px; }
.free-slots__date {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    margin-bottom: 8px;
    font-weight: 600;
}
.free-slots__chips {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.free-chip {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    transition: all var(--transition);
    min-width: 110px;
}
.free-chip:hover {
    border-color: var(--pink);
    background: var(--pink-50);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.free-chip__time {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}
.free-chip__svc {
    font-size: 11px;
    color: var(--ink-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 110px;
}
.free-chip__price { font-size: 12px; color: var(--pink); font-weight: 600; }

/* Отзывы */
.reviews-list { display: flex; flex-direction: column; gap: 4px; }
.review {
    padding: 18px 0;
    border-top: 1px solid var(--line);
}
.review:first-child { border-top: 0; }
.review__head {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
}
.review__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--pink-soft-grad);
    color: var(--pink-600);
    display: grid; place-items: center;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 18px;
}
.review__name { font-weight: 600; }
.review__date { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.review__stars { display: flex; gap: 2px; font-size: 14px; color: var(--line-strong); }
.review__stars .star.filled { color: #FBBF24; }
.review__text {
    margin-top: 10px;
    color: var(--ink-2);
    line-height: 1.6;
    font-style: italic;
    padding-left: 56px;
}

/* ===========================================================
   КАТАЛОГ МАСТЕРОВ /masters.php
   =========================================================== */
.hero--small { padding: 60px 0 30px; }
.hero--small h1 { font-size: 56px; }

.catalog-filters {
    display: flex; flex-direction: column; gap: 14px;
    margin-bottom: 32px;
    padding: 18px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* Табы переключения типа каталога: Мастера / Салоны / Услуги */
.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.catalog-toolbar .catalog-tabs { margin-bottom: 0; }
.catalog-toolbar .cm-pill-wrap { margin-bottom: 0; margin-left: auto; }

.catalog-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    width: fit-content;
}
.catalog-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-2);
    transition: all var(--transition);
    border: 1px solid transparent;
}
.catalog-tab:hover {
    background: var(--bg);
    color: var(--ink);
}
.catalog-tab.is-active {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.catalog-tab__cnt {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 7px;
    background: rgba(0,0,0,0.08);
    color: inherit;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.catalog-tab.is-active .catalog-tab__cnt {
    background: rgba(255,255,255,0.18);
    color: #fff;
}
@media (max-width: 600px) {
    .catalog-tabs { width: 100%; }
    .catalog-tab { flex: 1 1 0; justify-content: center; padding: 10px 12px; font-size: 14px; }
}

/* Второй ряд табов — фильтр по категориям внутри выбранного типа. */
.catalog-tabs--cats {
    margin-bottom: 32px;
}
.catalog-tabs--cats .catalog-tab {
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 500;
}
.filter-group {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.filter-label {
    font-size: 13px;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-right: 10px;
}
.chip {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink-2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition);
    border: 1px solid transparent;
}
.chip:hover { background: var(--pink-50); color: var(--pink); }
.chip-active {
    background: var(--ink);
    color: #fff;
}
.chip-active:hover { background: var(--ink); color: #fff; }

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.catalog-card {
    display: flex; flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    box-shadow: var(--shadow-xs);
    transition: all var(--transition);
}
.catalog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.catalog-card__cover {
    height: 200px;
    background-size: cover; background-position: center;
    position: relative;
}
.catalog-card__cat {
    position: absolute; top: 12px; left: 12px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.catalog-card__free {
    position: absolute; top: 12px; right: 12px;
    background: var(--green);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.catalog-card__body {
    padding: 16px;
    display: flex; gap: 14px; align-items: center;
}
.catalog-card__avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.catalog-card__name {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}
.catalog-card__meta {
    font-size: 13px;
    color: var(--ink-muted);
    display: flex; gap: 6px; align-items: center;
}
.catalog-card__meta .rating { color: var(--ink); font-weight: 600; }

/* ===========================================================
   ФУТЕР
   =========================================================== */
.footer {
    margin-top: 80px;
    padding: 40px 0;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--ink-muted);
    font-size: 13px;
}

/* ===========================================================
   ОТЗЫВЫ — фото, dropzone, лайтбокс, flash, звёздочки
   =========================================================== */

/* Аватар-картинка в шапке отзыва */
.review__avatar--img {
    object-fit: cover;
    background: var(--bg-2);
}

/* Сетка миниатюр под текстом отзыва */
.review__photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin: 12px 0 0 56px;
}
.review__photo {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-2);
    cursor: zoom-in;
    transition: transform var(--transition);
}
.review__photo:hover { transform: translateY(-2px); }
.review__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 720px) {
    .review__photos { margin-left: 0; }
}

/* Звёздочки-выбор оценки в форме */
.stars-picker {
    display: flex;
    gap: 6px;
    font-size: 36px;
    color: var(--line-strong);
    cursor: pointer;
    user-select: none;
}
.stars-picker span {
    transition: color .15s ease, transform .15s ease;
    line-height: 1;
}
.stars-picker span.on { color: var(--star); }
.stars-picker span:hover { transform: scale(1.1); }

/* Dropzone */
.dropzone {
    display: block;
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--bg-2);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.dropzone:hover,
.dropzone.is-drag {
    border-color: var(--pink-600);
    background: var(--pink-soft-grad, #FFF1F4);
}
.dropzone__inner { pointer-events: none; }
.dropzone__icon { color: var(--ink-muted); margin-bottom: 8px; }
.dropzone__title { font-weight: 500; color: var(--ink); }
.dropzone__link  { color: var(--pink-600); text-decoration: underline; }
.dropzone__hint  { font-size: 12px; color: var(--ink-muted); margin-top: 6px; }

/* Превью выбранных фото в форме отзыва */
.photo-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.photo-preview:empty { margin-top: 0; }
.photo-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-2);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.photo-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.photo-thumb__del {
    position: absolute;
    top: 4px; right: 4px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,.65);
    color: #fff;
    display: grid; place-items: center;
    font-size: 14px; line-height: 1;
    cursor: pointer;
    transition: background var(--transition);
}
.photo-thumb__del:hover { background: var(--pink-600); }

/* Flash-сообщения в кабинете */
.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 14px;
    border: 1px solid transparent;
}
.flash--ok   { background: var(--green-50); color: var(--green); border-color: rgba(46,125,50,.2); }
.flash--err  { background: var(--red-50);   color: var(--red);   border-color: rgba(211,47,47,.2); }
.flash--warn { background: #fff8e6;         color: #7a5a00;       border-color: rgba(200, 160, 30, .25); }

/* Лайтбокс */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(10, 8, 6, .92);
    display: grid;
    place-items: center;
    padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
    max-width: min(92vw, 1200px);
    max-height: 86vh;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lightbox__close,
.lightbox__nav {
    position: absolute;
    background: rgba(255,255,255,.1);
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    cursor: pointer;
    transition: background var(--transition);
    border: 0;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255,255,255,.25); }
.lightbox__close {
    top: 24px; right: 24px;
    width: 44px; height: 44px;
    font-size: 24px; line-height: 1;
}
.lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    font-size: 32px; line-height: 1;
}
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
.lightbox__counter {
    position: absolute;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background: rgba(0,0,0,.4);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
}
@media (max-width: 720px) {
    .lightbox__nav { width: 40px; height: 40px; font-size: 24px; }
    .lightbox__close { width: 36px; height: 36px; font-size: 20px; top: 16px; right: 16px; }
}

/* ===========================================================
   НАСТРОЙКИ ПРОФИЛЯ — медиа-блоки, формы, галерея работ
   =========================================================== */

/* Аватар-картинка (сайдбар, карточки) */
.avatar.avatar--img { padding: 0; background: var(--bg-2); }
.avatar.avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Сетка форм с двумя колонками */
.profile-form .panel { margin-bottom: 18px; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 720px) {
    .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* Медиа-сетка: аватар + обложка рядом */
.media-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
}
@media (max-width: 900px) {
    .media-grid { grid-template-columns: 1fr; }
}
.media-block__title {
    font-weight: 600;
    margin-bottom: 6px;
}
.media-block__hint {
    color: var(--ink-muted);
    font-size: 13px;
    margin-bottom: 14px;
}
.media-block__row {
    display: flex;
    align-items: center;
    gap: 18px;
}
.media-block__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Превью аватара */
.media-avatar-preview {
    flex: 0 0 auto;
    width: 110px; height: 110px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--line);
    display: grid; place-items: center;
}
.media-avatar-preview img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Превью обложки — пропорция совпадает с кропом (16:4 — панорамный баннер) */
.media-cover-preview {
    aspect-ratio: 16 / 4;
    background: var(--bg-2) center/cover no-repeat;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    display: grid; place-items: center;
    color: var(--ink-muted);
}
.media-cover-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.85);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
}

/* ===========================================================
   ГАЛЕРЕЯ РАБОТ — на странице мастера и в кабинете мастера
   =========================================================== */

/* Публичная галерея на странице мастера */
.works-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.works-gallery__item {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-2);
    cursor: zoom-in;
    transition: transform var(--transition);
}
.works-gallery__item:hover { transform: translateY(-2px); }
.works-gallery__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Превью-режим — только 3 элемента в ряд + плитка «ещё N» */
.works-gallery--preview { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .works-gallery--preview { grid-template-columns: repeat(2, 1fr); } }

.works-gallery__more {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    background: var(--bg-2);
    color: var(--ink);
    font-family: var(--font-serif);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    border: 1px dashed var(--line-strong);
}
.works-gallery__more:hover { background: var(--line); transform: translateY(-2px); }
.works-gallery__more-num { font-size: 28px; font-weight: 600; line-height: 1; }
.works-gallery__more-lbl { font-size: 12px; color: var(--ink-2); margin-top: 4px; font-family: var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; }

/* Модалка «все работы» */
.works-modal__card { max-width: 960px; }
.works-modal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 4px;
}
.works-modal__item {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-2);
    cursor: zoom-in;
    transition: transform var(--transition);
    display: block;
}
.works-modal__item:hover { transform: translateY(-2px); }
.works-modal__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 720px) {
    .works-modal__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Sticky-панель «Записаться» на странице мастера */
.side-cta__row {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    gap: 12px;
}
.side-cta__row:last-of-type { border-bottom: 0; }
.side-cta__lbl { color: var(--ink-2); font-size: 13px; }
.side-cta__val { font-weight: 600; font-size: 15px; text-align: right; }

.side-cta__cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin: 14px 0 8px;
}
.side-cta__day {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 2px;
    border-radius: 8px;
    background: var(--bg-2);
    color: var(--ink-2);
    font-size: 12px;
    line-height: 1.1;
}
.side-cta__day.is-free {
    background: var(--green-50, #DCFCE7);
    color: var(--green, #16A34A);
}
.side-cta__day.is-empty { opacity: 0.55; }
.side-cta__day-num { font-weight: 700; font-size: 14px; }
.side-cta__day-wd { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; margin-top: 2px; }

.side-cta__legend {
    display: flex; gap: 14px;
    color: var(--ink-2); font-size: 12px;
    margin-bottom: 4px;
}
.side-cta__legend .dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 3px; margin-right: 4px; vertical-align: -1px;
}
.side-cta__legend .dot-free  { background: var(--green-50, #DCFCE7); border: 1px solid var(--green, #16A34A); }
.side-cta__legend .dot-empty { background: var(--bg-2); border: 1px solid var(--line); }

/* Подсветка панели при якорной навигации */
@keyframes flashHighlight {
    0%   { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.55); }
    50%  { box-shadow: 0 0 0 6px rgba(236, 72, 153, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
}
.flash-highlight { animation: flashHighlight 1.4s ease-out; }

/* Управление галереей в кабинете */
.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.work-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-2);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.work-tile img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.work-tile__del {
    position: absolute;
    top: 6px; right: 6px;
    margin: 0;
}
.work-tile .btn-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,.65);
    color: #fff;
    display: grid; place-items: center;
    font-size: 16px; line-height: 1;
    border: 0; cursor: pointer;
    transition: background var(--transition);
}
.work-tile .btn-icon:hover { background: var(--pink-600); }

/* Перетаскивание плиток в галерее мастера */
.work-tile { cursor: grab; user-select: none; transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition); }
.work-tile:active { cursor: grabbing; }
.work-tile.dragging { opacity: 0.45; transform: scale(0.97); box-shadow: 0 6px 24px rgba(0,0,0,0.18); }
.work-tile__handle {
    position: absolute;
    bottom: 6px; left: 6px;
    width: 26px; height: 22px;
    border-radius: 6px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    pointer-events: none;
    letter-spacing: -1px;
}
.work-tile__del-btn {
    position: absolute;
    top: 6px; right: 6px;
}

.reorder-bar {
    position: sticky; bottom: 16px;
    margin-top: 16px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: var(--ink);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    z-index: 5;
}
.reorder-bar[hidden] { display: none; }
.reorder-bar svg { color: #fff; }

/* =============================================================
   РАСПИСАНИЕ МАСТЕРА
============================================================= */
.schedule-form { display: flex; flex-direction: column; gap: 12px; }
.schedule-form__row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 120px 120px auto;
    gap: 12px; align-items: end;
}
@media (max-width: 720px) {
    .schedule-form__row { grid-template-columns: 1fr 1fr; }
}

.schedule-days { display: flex; flex-direction: column; gap: 28px; }
.schedule-day {}
.schedule-day__head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.schedule-day__title {
    font-family: var(--font-serif);
    font-size: 22px; font-weight: 700;
    color: var(--ink);
    text-transform: capitalize;
}
.schedule-day__sub { font-size: 13px; color: var(--ink-muted); }

.slot-block {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--bg);
    transition: border-color var(--transition);
}
.slot-block:hover { border-color: var(--line-strong); }
.slot-block__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.slot-block__time {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-family: var(--font-serif);
    font-size: 18px; color: var(--ink);
}
.slot-block__time[hidden] { display: none; }
.slot-block__salon {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--font-sans, inherit);
    font-size: 12px;
    color: var(--pink, #ec4899);
    background: rgba(236, 72, 153, 0.08);
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1;
}
.slot-block__salon--solo {
    color: var(--ink-muted);
    background: var(--bg-2);
}
.slot-block__edit-salon {
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
    font-size: 13px;
}
.slot-block__actions {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.slot-block__actions[hidden] { display: none; }
.slot-block__hint {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--ink-muted);
    padding: 3px 8px; border-radius: 999px; background: var(--bg-2);
}
.slot-block__edit {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.slot-block__edit[hidden] { display: none; }
.slot-block__edit input[type="time"] {
    padding: 6px 10px; font-size: 14px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink);
    font-family: inherit;
}
.slot-block__edit-dash { color: var(--ink-muted); }
@media (max-width: 600px) {
    .slot-block__head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .slot-block__edit { width: 100%; }
}
.slot-block__empty {
    color: var(--ink-muted); font-size: 13px; padding: 4px 0 2px;
}
.slot-block__bookings {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 6px;
}
.booking-row {
    display: grid;
    grid-template-columns: 130px 1fr 1.2fr auto auto;
    gap: 14px; align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    font-size: 14px;
}
.booking-row.is-active { background: var(--pink-50); border-left: 3px solid var(--pink); }
.booking-row.is-done   { background: var(--bg-2); opacity: .8; }
.booking-row__time { font-family: var(--font-serif); font-weight: 700; color: var(--ink); }
.booking-row__dur  { font-family: var(--font-sans); font-weight: 400; font-size: 12px; color: var(--ink-muted); margin-left: 4px; }
.booking-row__service { color: var(--ink); font-weight: 500; }
.booking-row__client {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    color: var(--ink-2);
}
.booking-row__phone { color: var(--ink-muted); font-size: 12px; }
.booking-row__price { font-weight: 700; color: var(--ink); white-space: nowrap; }
.booking-row__action {}
.booking-row__comment {
    grid-column: 1 / -1;
    margin-top: 6px;
    font-size: 13px; color: var(--ink-muted);
    display: flex; gap: 6px; align-items: flex-start;
}
@media (max-width: 720px) {
    .booking-row {
        grid-template-columns: 1fr 1fr;
    }
    .booking-row__service { grid-column: 1 / -1; }
    .booking-row__client  { grid-column: 1 / -1; }
}

.badge { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-ok   { background: rgba(16,185,129,.12); color: #047857; }
.badge-warn { background: rgba(245,158,11,.15); color: #92400e; }
.badge-err  { background: rgba(220, 38, 38,.12); color: #b42318; }
.badge-salon { background: rgba(99,102,241,.12); color: #4338ca; font-weight: 500; cursor: default; }

/* Блок «Мастер / Клиент» в карточках записей дашборда салона */
.salon-bk-parties {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0 2px;
}
.salon-bk-party {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.salon-bk-party__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-muted);
    min-width: 46px;
    flex-shrink: 0;
}
.salon-bk-party__phone {
    font-size: 12px;
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-decoration: none;
}
.salon-bk-party__phone:hover { color: var(--accent); }
.booking-card.is-cancelled { opacity: 0.85; border-style: dashed; }
.booking-card.is-cancelled .booking-card__time { color: var(--ink-muted); }

/* =============================================================
   ВЫБОР ВРЕМЕНИ ПРИ БРОНИ (booking/start.php)
============================================================= */
.hero--small { padding: 60px 0 30px; min-height: auto; }
.hero--small h1 { font-size: clamp(36px, 5vw, 56px); margin: 8px 0 0; }

.booking-start { padding: 30px 0 80px; }
.booking-start__grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 920px) {
    .booking-start__grid { grid-template-columns: 1fr; }
}
.booking-start__side { padding: 22px; }
.booking-start__master {
    display: flex; gap: 14px; align-items: center;
    margin-bottom: 18px;
}
.booking-start__avatar {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    flex: 0 0 auto;
}
.booking-start__name {
    font-family: var(--font-serif);
    font-size: 20px; font-weight: 700; color: var(--ink); text-decoration: none;
    line-height: 1.15;
    display: block;
}
.booking-start__cat { font-size: 13px; color: var(--ink-muted); margin-top: 4px; }
.booking-start__rating { font-size: 13px; margin-top: 4px; color: var(--ink); font-weight: 600; }

.booking-start__service {
    padding: 16px;
    background: var(--bg-2);
    border-radius: var(--radius-md);
    margin-top: 10px;
}
.booking-start__svc-name {
    font-family: var(--font-serif);
    font-size: 18px; font-weight: 700; color: var(--ink);
    margin-bottom: 8px;
}
.booking-start__svc-meta {
    display: flex; gap: 14px; font-size: 13px; color: var(--ink-2);
}
.booking-start__svc-meta span { display: inline-flex; gap: 4px; align-items: center; }

.booking-start__main { display: flex; flex-direction: column; gap: 20px; }

.time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.time-grid__item {
    text-align: center;
    padding: 14px 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    font-family: var(--font-serif);
    font-size: 18px; font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    transition: all var(--transition);
}
.time-grid__item:hover {
    border-color: var(--pink);
    background: var(--pink-50);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.free-chip--time {
    min-width: 64px;
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 700;
    padding: 10px 12px;
}

.service-row__action { white-space: nowrap; }

/* Confirm — мастер блок сверху */
.confirm-master {
    display: flex; gap: 12px; align-items: center;
    padding: 14px;
    margin: 10px 0 18px;
    background: var(--bg-2);
    border-radius: var(--radius-md);
}
.confirm-master img {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
.confirm-master__name {
    font-family: var(--font-serif);
    font-size: 17px; font-weight: 700; color: var(--ink);
    text-decoration: none; display: block;
}
.confirm-master__meta { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

/* ===========================================================
   МОДАЛКА ОБРЕЗКИ ФОТО (Cropper.js) + БАННЕР КЛИЕНТА
   =========================================================== */
.crop-modal {
    position: fixed; inset: 0;
    display: none;
    z-index: 2000;
}
.crop-modal.is-open { display: block; }
.crop-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(26, 16, 20, 0.55);
    backdrop-filter: blur(4px);
}
.crop-modal__dialog {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.crop-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}
.crop-modal__head h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 20px; font-weight: 700;
}
.crop-modal__close {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg-2);
    color: var(--ink);
    font-size: 22px; line-height: 1;
    cursor: pointer;
    transition: background var(--transition);
}
.crop-modal__close:hover { background: var(--line-strong); }

.crop-modal__body {
    padding: 18px 22px;
    display: flex; flex-direction: column; gap: 12px;
    overflow: auto;
}
.crop-modal__canvas {
    width: 100%;
    height: min(60vh, 460px);
    background: #111;
    border-radius: var(--radius-sm, 12px);
    overflow: hidden;
}
.crop-modal__canvas img {
    display: block;
    max-width: 100%;
}
.crop-modal__hint {
    color: var(--ink-muted);
    font-size: 13px;
}
.crop-modal__foot {
    padding: 14px 22px;
    border-top: 1px solid var(--line);
    display: flex; justify-content: flex-end; gap: 10px;
    background: var(--surface-soft);
}

/* Круглая маска поверх Cropper — для аватаров */
.crop-modal--round .cropper-view-box,
.crop-modal--round .cropper-face { border-radius: 50%; }

/* Баннер (шапка) профиля клиента — по мотивам master cover, кроп 16:4 */
.media-banner-preview {
    aspect-ratio: 16 / 4;
    background: var(--bg-2) center/cover no-repeat;
    border-radius: var(--radius-md, 16px);
    border: 1px solid var(--line);
    display: grid; place-items: center;
    color: var(--ink-muted);
}
.media-banner-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.85);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
}

/* ===== Master: Availability toggles ===== */
.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    background: #fff;
}
.toggle-row:last-child { margin-bottom: 0; }
.toggle-row--muted { opacity: 0.65; background: var(--bg-2); }
.toggle-row--muted .btn[disabled] { cursor: not-allowed; }

/* Двухсостоянийный toggle-row: показываем on/off-вариации в зависимости от data-state */
.toggle-row[data-state="on"]  [data-state-off] { display: none !important; }
.toggle-row[data-state="off"] [data-state-on]  { display: none !important; }
/* Внутри title — выравниваем иконку и текст как и раньше (через inline-flex span). */
.toggle-row__title [data-state-on],
.toggle-row__title [data-state-off] { display: inline-flex; align-items: center; gap: 8px; }
.toggle-row[data-toggle-row]   [data-toggle-btn] { transition: background var(--transition), border-color var(--transition), color var(--transition); }
.toggle-row[data-toggle-row][data-busy="1"] [data-toggle-btn] { opacity: .65; pointer-events: none; }

/* Toast-host для AJAX-уведомлений (фиксированный угол) */
.toast-host {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: calc(100vw - 48px);
}
.toast {
    pointer-events: auto;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    background: #111;
    color: #fff;
    box-shadow: 0 16px 40px rgba(0,0,0,.20);
    transform: translateY(20px);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    max-width: 380px;
    line-height: 1.4;
}
.toast.is-show { transform: translateY(0); opacity: 1; }
.toast--ok  { background: #065F46; }
.toast--err { background: #7F1D1D; }

@media (max-width: 600px) {
    .toast-host { left: 16px; right: 16px; bottom: 16px; align-items: stretch; }
    .toast { max-width: none; }
}
.toggle-row__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}
.toggle-row__hint {
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.5;
    max-width: 560px;
}
@media (max-width: 700px) {
    .toggle-row { flex-direction: column; align-items: stretch; }
    .toggle-row form { align-self: flex-end; }
}

/* ===== Vanity URL editor ===== */
.slug-editor {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
}
.slug-editor__prefix {
    padding: 10px 14px;
    background: var(--bg-2);
    color: var(--ink-muted);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    border-right: 1px solid var(--border);
}
.slug-editor input {
    border: 0 !important;
    padding: 10px 14px !important;
    flex: 1;
    outline: none;
    background: transparent;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.vanity-preview {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 16px;
    background: var(--bg-2);
    border-radius: var(--radius-md);
    margin-top: 16px;
}
.vanity-qr {
    background: #fff;
    padding: 10px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.vanity-qr img { display: block; width: 180px; height: 180px; }
@media (max-width: 700px) {
    .vanity-preview { grid-template-columns: 1fr; }
    .vanity-qr { justify-self: center; }
}

/* No-show карточка */
.booking-card.is-noshow {
    background: repeating-linear-gradient(
        45deg,
        #fff5f5, #fff5f5 8px,
        #ffecec 8px, #ffecec 16px
    );
    opacity: .95;
}

/* Скидка на услуге (зачёркивание старой цены) */
.price-strike {
    text-decoration: line-through;
    color: var(--ink-muted);
    margin-right: 6px;
    font-weight: 400;
}
.price-badge-discount {
    display: inline-block;
    background: #fee;
    color: #b00;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 6px;
}

/* Радио в форме промокода «процент / рубли» — в виде pill */
.chip-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
}
.chip-radio input { accent-color: var(--pink-600); }
.chip-radio:has(input:checked) {
    background: var(--pink-50, #ffeef5);
    border-color: var(--pink-600);
    color: var(--pink-600);
}

/* Быстрые пресеты периодов */
.preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.preset-row .btn.active {
    background: var(--ink);
    color: #fff;
}

/* Бар-чарт выручки */
.bars {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    overflow-x: auto;
    padding: 16px 10px 0;
    min-height: 220px;
}
.bar {
    flex: 0 0 auto;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 200px;
}
.bar__value {
    font-size: 11px;
    color: var(--ink-muted);
    margin-bottom: 4px;
    white-space: nowrap;
}
.bar__fill {
    width: 28px;
    min-height: 3px;
    background: linear-gradient(180deg, var(--pink-600) 0%, #e06b94 100%);
    border-radius: 6px 6px 0 0;
    transition: height .3s ease;
}
.bar__label {
    font-size: 11px;
    color: var(--ink-2);
    margin-top: 6px;
    white-space: nowrap;
}

/* Простая таблица отчётов */
.simple-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.simple-table thead th {
    text-align: left;
    font-weight: 600;
    color: var(--ink-muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.simple-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.simple-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Шаблон недели: 7 колонок на десктопе, 2 на планшете, 1 на мобильном */
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.tpl-day {
    background: var(--bg-2);
    border-radius: var(--radius-md);
    padding: 12px;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}
.tpl-day__head {
    font-weight: 600;
    color: var(--ink);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.tpl-day__rows { display: flex; flex-direction: column; gap: 6px; min-height: 30px; width: 100%; align-items: center; }
.tpl-empty { margin: 0; font-size: 12px; }
.tpl-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    background: #fff;
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid var(--border);
    min-width: 0;
}
.tpl-row.is-invalid {
    border-color: #e05a5a;
    background: #fff5f5;
}
.tpl-errors {
    list-style: none;
    padding: 0;
    margin: 0 0 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}
.tpl-errors li {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff5f5;
    border: 1px solid #f1c6c6;
    color: #7a2a2a;
    font-size: 14px;
    line-height: 1.4;
}
.tpl-row input[type="time"] {
    border: 0 !important;
    padding: 4px 4px !important;
    font-size: 13px !important;
    background: transparent;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 70px;
}
.tpl-row > span { flex: 0 0 auto; color: var(--ink-muted); }
.tpl-row__rm {
    margin-left: auto;
    padding: 2px 8px !important;
    min-height: 0 !important;
}
.tpl-day__add {
    align-self: center;
    margin-top: 4px;
    border: 1px dashed var(--border) !important;
    color: var(--ink-muted);
}
.tpl-day__add:hover {
    border-color: var(--pink-600) !important;
    color: var(--pink-600);
    background: #fff;
}

/* Нижняя панель действий под шаблоном недели */
.tpl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}
.tpl-actions__apply {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tpl-actions__apply select,
.select--pretty {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 9px 38px 9px 14px;
    border: 1.5px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>")
        no-repeat right 12px center / 14px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
    min-width: 140px;
}
.tpl-actions__apply select:hover,
.select--pretty:hover {
    border-color: var(--pink-600);
}
.tpl-actions__apply select:focus,
.select--pretty:focus {
    outline: none;
    border-color: var(--pink-600);
    box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.12);
}
@media (max-width: 640px) {
    .tpl-actions__apply { width: 100%; justify-content: flex-end; }
}

/* Форма отпуска: flex-строка + нижняя панель с чекбоксом и кнопкой */
.timeoff-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.timeoff-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.timeoff-form__row .field {
    flex: 1 1 160px;
    min-width: 160px;
}
.timeoff-form__row .field--grow {
    flex: 2 1 260px;
}
.timeoff-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    flex-wrap: wrap;
}
.timeoff-form__foot .btn { flex-shrink: 0; }

/* Лейаут страницы шаблонов: сайдбар со списком пресетов + редактор */
.presets-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.presets-layout > .panel { min-width: 0; }
@media (max-width: 900px) {
    .presets-layout { grid-template-columns: 1fr; }
}
.presets-aside { padding-bottom: 12px; }
.presets-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.preset-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    transition: all .15s ease;
}
.preset-chip:hover {
    border-color: var(--pink-600);
    background: var(--bg-2);
}
.preset-chip.is-selected {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.preset-chip__name { font-weight: 600; font-size: 14px; display:flex; align-items:center; gap:6px; flex-wrap: wrap; }
.preset-chip__meta {
    font-size: 12px;
    color: var(--ink-muted);
    white-space: nowrap;
}
.preset-chip.is-selected .preset-chip__meta { color: rgba(255,255,255,.75); }
.preset-new-wrap {
    margin-top: 14px;
    padding: 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.preset-new-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink);
}
.preset-new {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.preset-new input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    min-width: 0;
    background: #fff;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.preset-new input[type="text"]::placeholder { color: var(--ink-muted); }
.preset-new input[type="text"]:hover { border-color: var(--ink-2); }
.preset-new input[type="text"]:focus {
    outline: none;
    border-color: var(--pink-600);
    box-shadow: 0 0 0 3px rgba(228, 90, 140, .15);
}
.preset-new .btn { width: 100%; justify-content: center; }
.preset-new-hint {
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.4;
}

/* Заголовок редактора пресета с инлайн-переименованием */
.preset-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}
.preset-title__input {
    flex: 1 1 200px;
    min-width: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    border: 1px solid transparent;
    background: transparent;
    padding: 6px 10px;
    border-radius: 8px;
    font-family: inherit;
    margin: -6px -10px;
}
.preset-title__input:hover { background: var(--bg-2); }
.preset-title__input:focus {
    outline: none;
    border-color: var(--pink-600);
    background: #fff;
}
.preset-title__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Чекбокс inline — для форм мастера */
.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ink-2);
    user-select: none;
}
.checkbox-inline input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--pink-600);
    margin: 0;
}

/* ===========================================================
   КАЛЕНДАРНЫЙ ВИД РАСПИСАНИЯ МАСТЕРА (slots.php?view=week)
   Шкала времени слева + 7 колонок-дней с блоками пропорционально часам.
   =========================================================== */
/* Контейнер, в котором происходит плавное «листание» дат стрелками ←/→.
   При листании анимируются только полосы с днями (.week-calendar__heads
   и .week-calendar__days), а угловая ячейка и шкала времени слева остаются
   неподвижными. См. JS navigate() в _slots_week_view.php. */
.week-calendar-viewport {
    position: relative;
}
.week-calendar {
    --scale-w: 64px;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
}
/* На полосах с днями отключаем клики во время анимации, чтобы пользователь
   не открыл модалку «уезжающего» окна. */
.week-calendar__heads.is-leaving,
.week-calendar__days.is-leaving,
.week-calendar__heads.is-entering,
.week-calendar__days.is-entering {
    pointer-events: none;
}
.week-calendar__head {
    display: flex;
    position: relative;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
    /* Не ставим overflow:hidden — иначе обрезаются верхние подписи шкалы.
       Слева полоса дней маскируется углом (z-index + непрозрачный фон),
       справа — общим overflow:hidden у .week-calendar. */
}
.week-calendar__corner {
    position: relative;
    width: var(--scale-w);
    flex: 0 0 auto;
    border-right: 1px solid var(--line);
    background: var(--bg-2);
    /* z-index НЕ ставим постоянно: он нужен только во время анимации листания,
       чтобы перекрыть «уезжающую» полосу заголовков. JS добавляет/убирает его
       через el.style.zIndex вокруг navigate(). Без постоянного z-index угол
       не создаёт стекинг-контекст и не мешает модалкам выходить на полный экран. */
}
/* Полоса с заголовками дней — анимируется при листании ←/→.
   Сами day-head внутри расположены равномерной 7-колоночной сеткой. */
.week-calendar__heads {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    /* z-index и will-change намеренно не ставим постоянно: они создают стекинг-
       контекст / новый containing block для position:fixed, из-за чего модалки
       внутри слотов оказываются «заперты» внутри полосы вместо viewport.
       JS добавляет их только на время самой анимации. */
}
.week-calendar__day-head {
    padding: 10px 8px;
    border-right: 1px solid var(--line);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
}
.week-calendar__day-head:last-child { border-right: 0; }
.week-calendar__day-head.is-today { background: var(--ink); color: #fff; }
.week-calendar__day-head.is-past  { color: var(--ink-muted); }
.week-calendar__day-head.is-off   {
    background: repeating-linear-gradient(135deg, var(--bg) 0 8px, var(--bg-2) 8px 16px);
}
.week-calendar__wd {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-muted);
}
.week-calendar__day-head.is-today .week-calendar__wd { color: rgba(255,255,255,.8); }
.week-calendar__date {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}
.week-calendar__sub {
    font-size: 11px;
    color: var(--ink-muted);
}
.week-calendar__day-head.is-today .week-calendar__sub { color: rgba(255,255,255,.85); }

.week-calendar__body {
    display: flex;
    position: relative;
    /* Без overflow:hidden — иначе подпись 06:00 (с translateY(-50%))
       оказалась бы обрезана сверху. Слева сдвиг полосы дней маскируется
       шкалой (z-index + непрозрачный фон), справа — общим overflow:hidden
       у .week-calendar. */
}

/* Шкала времени — статична, не участвует в анимации листания. */
.week-calendar__scale {
    position: relative;
    width: var(--scale-w);
    flex: 0 0 auto;
    border-right: 1px solid var(--line);
    background: var(--bg-2);
    /* z-index НЕ ставим постоянно — только во время анимации через JS.
       Постоянный z-index создаёт стекинг-контекст, который перекрывает
       position:fixed модалки, вылезающие «из» колонки дней на полный экран. */
}
/* Полоса с 7 колонками дней — анимируется при листании ←/→. */
.week-calendar__days {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    /* Нет z-index и нет position:relative — не создаём стекинг-контекст.
       Иначе модалки (position:fixed, z-index:100) внутри колонок оказываются
       ниже шкалы (z=2) и шапки (z=50), потому что z-index:1 этой полосы
       проигрывает им в родительском контексте. */
}
.week-calendar__hour {
    position: absolute;
    left: 0; right: 0;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--ink-muted);
    text-align: right;
    padding-right: 8px;
    pointer-events: none;
}

/* Колонка одного дня */
.week-calendar__day {
    position: relative;
    border-right: 1px solid var(--line);
    overflow: hidden;
}
.week-calendar__day:last-child { border-right: 0; }
.week-calendar__day.is-past { background: var(--bg); }
.week-calendar__day.is-off {
    background: repeating-linear-gradient(135deg, #fff 0 10px, var(--bg) 10px 20px);
}

/* Горизонтальные линии сетки */
.week-calendar__grid-line {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: rgba(0,0,0,.04);
    pointer-events: none;
}
.week-calendar__grid-line.is-hour { background: rgba(0,0,0,.08); }

/* Линия «сейчас» — только на сегодняшней колонке */
.week-calendar__now {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #e05a5a;
    box-shadow: 0 0 0 2px rgba(224,90,90,.18);
    z-index: 4;
    pointer-events: none;
}
.week-calendar__now::before {
    content: '';
    position: absolute;
    left: -4px; top: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #e05a5a;
}

/* Надпись «Отпуск» поверх выходного дня */
.week-calendar__off-label {
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--ink-muted);
    background: rgba(255,255,255,.85);
    padding: 2px 8px;
    border-radius: 999px;
    z-index: 2;
    pointer-events: none;
}

/* Блок «открытое окно» */
.wc-slot {
    position: absolute;
    left: 2px; right: 2px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    text-align: left;
    font-family: inherit;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    user-select: none;
}
.wc-slot:hover { background: #d1fae5; border-color: #6ee7b7; }
.wc-slot.has-bookings { background: #f9fafb; border-color: #e5e7eb; }
.wc-slot.is-locked { cursor: default; }
.wc-slot.is-dragging { opacity: .8; box-shadow: 0 6px 16px rgba(0,0,0,.18); z-index: 10; }
.wc-slot.is-resizing { box-shadow: 0 0 0 2px rgba(228,90,140,.25); z-index: 10; }

.wc-slot__body {
    flex: 1;
    padding: 4px 6px;
    cursor: pointer;
    min-height: 0;
    overflow: hidden;
}
/* Окна без броней можно перетаскивать целиком — курсор grab подсказывает это */
.wc-slot:not(.has-bookings):not(.is-locked) .wc-slot__body { cursor: grab; }
.wc-slot:not(.has-bookings):not(.is-locked).is-dragging .wc-slot__body { cursor: grabbing; }

.wc-slot__time {
    font-size: 11px;
    font-weight: 600;
    color: #047857;
    line-height: 1.2;
}
.wc-slot.has-bookings .wc-slot__time { color: var(--ink-muted); }
.wc-slot__free {
    font-size: 11px;
    color: #047857;
    margin-top: 2px;
}
.wc-slot__salon {
    font-size: 10px;
    line-height: 1.2;
    color: var(--pink, #ec4899);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wc-slot.has-salon {
    border-left: 3px solid var(--pink, #ec4899);
    padding-left: 1px;
}
.slot-modal__edit-salon {
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
    font-size: 14px;
    flex: 1 1 auto;
    min-width: 160px;
}

/* Хэндлы resize: тонкие полоски сверху/снизу окна */
.wc-slot__resize {
    height: 6px;
    cursor: ns-resize;
    background: transparent;
    transition: background .12s ease;
}
.wc-slot__resize:hover,
.wc-slot.is-resizing .wc-slot__resize { background: rgba(228, 90, 140, .25); }

/* Превью при select-создании нового окна (перетаскивание по пустому месту) */
.wc-select-preview {
    position: absolute;
    left: 2px; right: 2px;
    background: rgba(228, 90, 140, .18);
    border: 1.5px dashed var(--pink-600);
    border-radius: 6px;
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4px;
}
.wc-select-preview__time {
    font-size: 11px;
    font-weight: 700;
    color: var(--pink-600);
    background: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Курсор «crosshair» над пустой кликабельной колонкой — намёк на создание */
.week-calendar__day[data-editable="1"] { cursor: crosshair; }
.week-calendar__day[data-editable="1"] .wc-slot,
.week-calendar__day[data-editable="1"] .wc-booking,
.week-calendar__day[data-editable="1"] .wc-slot__resize { cursor: auto; }
.week-calendar__day[data-editable="1"] .wc-slot__body { /* уточняем в правиле выше */ }
.week-calendar__day[data-editable="1"] .wc-slot__resize { cursor: ns-resize; }

/* Мини-флеш для AJAX — показывается в правом верхнем углу страницы */
/* ══════════════════════════════════════════════
   Клиент-пикер в модалке «Записать клиента»
   ══════════════════════════════════════════════ */
.mbk-client-picker {
    position: relative;
}
.mbk-client-search__input {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.mbk-client-search__input:focus {
    border-color: var(--pink-600);
    box-shadow: 0 0 0 3px rgba(228,90,140,.15);
}
.mbk-client-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    z-index: 10;
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mbk-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .12s;
}
.mbk-dropdown-item:hover { background: var(--bg); }
.mbk-dropdown-item:not(:last-child) { border-bottom: 1px solid var(--line); }
.mbk-dropdown-item--new { color: var(--pink-600); }
.mbk-dropdown-item--global { opacity: .85; }
.mbk-badge {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--ink-5, rgba(26,26,26,.06));
    color: var(--ink-muted);
    vertical-align: middle;
    margin-left: 4px;
}
.mbk-dropdown-item__avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--pink-50);
    color: var(--pink-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.mbk-dropdown-item__avatar--img {
    object-fit: cover;
    background: var(--bg-2);
}
.mbk-dropdown-item__avatar--new {
    background: var(--green-50);
    color: var(--green);
    font-size: 18px; font-weight: 400;
}
.mbk-dropdown-item__info {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
    text-align: left;
}
.mbk-dropdown-item__name  { font-size: 14px; font-weight: 600; }
.mbk-dropdown-item__phone { font-size: 12px; color: var(--ink-muted); }

/* Карточка выбранного клиента */
.mbk-client-chosen { margin-top: 6px; }
.mbk-chosen-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}
.mbk-chosen-card--new { border-color: var(--green); background: var(--green-50); }
.mbk-chosen-card__avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--pink-50);
    color: var(--pink-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.mbk-chosen-card__avatar--img {
    object-fit: cover;
    background: var(--bg-2);
}
.mbk-chosen-card__avatar--new {
    background: var(--green-50);
    color: var(--green);
    font-size: 20px; font-weight: 300;
}
.mbk-chosen-card__info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
    text-align: left;
}
.mbk-chosen-card__name  { font-size: 14px; font-weight: 600; }
.mbk-chosen-card__phone { font-size: 12px; color: var(--ink-muted); }
.mbk-chosen-card__clear {
    all: unset;
    cursor: pointer;
    font-size: 16px;
    color: var(--ink-muted);
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1;
    transition: color .12s, background .12s;
}
.mbk-chosen-card__clear:hover { color: var(--red); background: var(--red-50); }

.slots-toast-host {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.slots-toast {
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    font-size: 13px;
    color: var(--ink);
    min-width: 220px;
    max-width: 360px;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: auto;
}
.slots-toast.show { opacity: 1; transform: translateX(0); }
.slots-toast--err { background: var(--red-50); color: var(--red); border-color: rgba(211,47,47,.25); }
.slots-toast--ok  { background: var(--green-50, #e9f8ee); color: #1e7c3a; border-color: rgba(22,130,60,.25); }

/* Блок «бронь» поверх окна */
.wc-booking {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    left: 6px; right: 6px;
    background: linear-gradient(180deg, #fce7f3 0%, #fbcfe8 100%);
    border: 1px solid #f9a8d4;
    border-radius: 6px;
    padding: 3px 6px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    z-index: 3;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: var(--ink);
}
.wc-booking:hover {
    transform: translateX(-1px);
    box-shadow: 0 4px 10px rgba(228,90,140,.25);
}
.wc-booking__time {
    font-size: 10px;
    font-weight: 700;
    color: var(--pink-600);
    line-height: 1.1;
}
.wc-booking__client {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}
.wc-booking__svc {
    font-size: 10px;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

/* Адаптация: на узком экране шкалу поджимаем, ниже — предлагаем list-вид. */
@media (max-width: 900px) {
    .week-calendar { --scale-w: 48px; }
    .week-calendar__date { font-size: 16px; }
    .week-calendar__sub { display: none; }
}

/* Модалка деталей окна — используется в недельном виде расписания. */
.slot-modal__empty {
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 16px;
    background: var(--bg-2);
    margin-bottom: 16px;
}
.slot-modal__bookings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
/* Внутри модалки деталей окна кнопки брони размещаем снизу во всю ширину,
   а не в правой колонке — так они крупнее и лучше читаются на узком макете. */
.slot-modal__bookings .booking-card {
    grid-template-columns: auto 1fr;
}
.slot-modal__bookings .booking-card__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 4px;
}
.slot-modal__bookings .booking-card__actions .btn { white-space: nowrap; }
.slot-modal__manage {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.slot-modal__edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.slot-modal__edit-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink-muted);
    margin-right: 4px;
}
.slot-modal__edit-dash { color: var(--ink-muted); }
.slot-modal__edit-row input[type="time"] {
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    height: 36px;
    min-width: 100px;
}
.slot-modal__delete { margin: 0; }

/* =============================================================
   Мессенджер: страница чата, список диалогов, бейджи
   ============================================================= */

/* — Бейдж непрочитанных в сайдбаре — */
.sidebar__menu a {
    position: relative;
}
.sidebar__badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--pink, #ec4899);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.sidebar__menu a.active .sidebar__badge { background: #fff; color: var(--ink); }

/* — Кнопка чата в шапке — */
.header-chat-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bg-2, #f4ede4);
    color: var(--ink);
    transition: background var(--transition);
}
.header-chat-btn:hover { background: var(--line, #e4dcd0); }
.header-chat-btn__badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--pink, #ec4899);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid #fff;
}

/* — Кнопка-иконка (квадратная) в строке услуги — */
.btn-icon {
    padding: 10px 12px;
    line-height: 1;
}
.service-row__action {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* — Когда сайт скрыл свою шапку (кабинет мастера), у кабинета убираем большой
     верхний отступ и подгоняем высоту мессенджера под полный экран. — */
body.no-site-header .cabinet { padding: 18px 0; }
body.no-site-header .messenger { height: calc(100vh - 60px); }
body.no-site-header .sidebar    { top: 18px; }

/* — Мессенджер: 3-колоночная вёрстка (сайдбар кабинета | список диалогов | чат) — */
.cabinet--messenger {
    padding: 24px 0 32px;
}
.cabinet__content--messenger {
    min-width: 0;
    display: block;
}
.messenger {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 18px);
    box-shadow: var(--shadow-xs);
    height: calc(100vh - 180px);
    min-height: 560px;
    overflow: hidden;
}

/* — Левая колонка: список диалогов — */
.messenger__list {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
    background: var(--bg-2, #f6f0e7);
    min-width: 0;
}
.messenger__list-head {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 18px 10px;
}
.messenger__list-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}
.messenger__list-count {
    font-size: 12px;
    color: var(--ink-muted);
    background: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
}
.messenger__list-search {
    flex-shrink: 0;
    padding: 0 14px 10px;
}
.messenger__list-search input {
    width: 100%;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13.5px;
    color: var(--ink);
    transition: border-color var(--transition);
}
.messenger__list-search input:focus {
    outline: none;
    border-color: var(--pink, #ec4899);
}
.messenger__list-items {
    list-style: none;
    margin: 0;
    padding: 0 6px 12px;
    overflow-y: auto;
    /* flex: 1 + min-height: 0 — без этого список не скроллится, а раздвигает родителя
       (flex-items по умолчанию имеют min-height: auto). */
    flex: 1 1 0;
    min-height: 0;
}
.messenger__list-empty {
    padding: 26px 18px;
    text-align: center;
    color: var(--ink-muted);
    font-size: 13.5px;
    line-height: 1.5;
}
.messenger__list-item {
    margin: 2px 0;
    border-radius: 12px;
    transition: background var(--transition);
}
.messenger__list-item:hover { background: rgba(255,255,255,.7); }
.messenger__list-item.is-active { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.messenger__list-item.is-active .messenger__list-name { color: var(--ink); }
.messenger__list-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    color: inherit;
}
.messenger__list-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    background: #fff;
    flex-shrink: 0;
}
.messenger__list-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.messenger__list-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: space-between;
}
.messenger__list-name {
    font-weight: 600;
    color: var(--ink);
    font-size: 14.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.messenger__list-time {
    font-size: 11.5px;
    color: var(--ink-muted);
    flex-shrink: 0;
}
.messenger__list-svc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--pink, #ec4899);
    font-weight: 600;
    line-height: 1.2;
}
.messenger__list-svc .icon { width: 12px; height: 12px; }
.messenger__list-svc--general { color: var(--ink-muted); font-weight: 500; }
.messenger__list-last {
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.messenger__list-you { color: var(--ink-muted); }
.messenger__list-empty-msg { color: var(--ink-muted); font-style: italic; }
.messenger__list-badge {
    align-self: center;
    background: var(--pink, #ec4899);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.messenger__list-item.has-unread .messenger__list-name,
.messenger__list-item.has-unread .messenger__list-last { color: var(--ink); font-weight: 600; }

/* — Правая колонка: окно чата или плейсхолдер — */
.messenger__pane {
    display: flex;
    min-width: 0;
    background: var(--bg, #faf6f0);
}
.messenger__placeholder {
    margin: auto;
    text-align: center;
    color: var(--ink-muted);
    padding: 40px 20px;
    max-width: 360px;
}
.messenger__placeholder-icon {
    width: 90px; height: 90px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(236,72,153,.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pink, #ec4899);
}
.messenger__placeholder h3 { color: var(--ink); margin-bottom: 8px; font-size: 22px; }
.messenger__placeholder p { line-height: 1.55; }

/* — Окно чата — */
.chat-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--surface, #fff);
    overflow: hidden;
}
.chat-shell__head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
}
.chat-shell__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    color: var(--ink-2);
    background: #fff;
    border: 1px solid var(--line);
}
.chat-shell__back:hover { background: var(--bg); color: var(--ink); }
.chat-shell__peer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    color: inherit;
}
.chat-shell__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    background: #fff;
}
.chat-shell__peer-info { min-width: 0; }
.chat-shell__peer-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-shell__peer-role {
    font-size: 12px;
    color: var(--ink-muted);
    margin-top: 2px;
}
.chat-shell__status {
    font-size: 12px;
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.chat-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #1ec45a;
    box-shadow: 0 0 0 4px rgba(30,196,90,.18);
    animation: chatPulse 2s infinite ease-in-out;
}
@keyframes chatPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

.chat-shell__body {
    /* flex-basis: 0 + min-height: 0 — без этого длинная переписка распирает
       шапку/форму вверх и вниз, а сама не скроллится. */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 24px;
    background:
        radial-gradient(circle at 20% 0%, rgba(236,72,153,.04), transparent 50%),
        radial-gradient(circle at 90% 100%, rgba(99,102,241,.03), transparent 50%),
        var(--bg, #faf6f0);
}
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chat-msg {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    line-height: 1.45;
    word-wrap: break-word;
}
.chat-msg--peer {
    align-self: flex-start;
    background: #fff;
    border-color: var(--line);
    border-bottom-left-radius: 6px;
    color: var(--ink);
}
.chat-msg--mine {
    align-self: flex-end;
    background: var(--pink, #ec4899);
    color: #fff;
    border-bottom-right-radius: 6px;
}
.chat-msg__svc {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    opacity: .8;
}
.chat-msg--peer .chat-msg__svc { color: var(--pink, #ec4899); }
.chat-msg__body {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14.5px;
}
.chat-msg__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}
.chat-msg__link:hover { opacity: .85; }
.chat-msg--mine .chat-msg__link { color: #fff; }

/* Блок модерации для админа в обжалованных отзывах */
.chat-msg__appeal {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(255, 247, 237, 0.95);
    border: 1px dashed #fed7aa;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    color: #1a1a1a;
}
.chat-msg--mine .chat-msg__appeal {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.6);
}
.chat-msg__appeal--gone { color: #92400e; font-style: italic; justify-content: center; }
.chat-msg__appeal-status {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px;
}
.chat-msg__appeal-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #065f46;
    font-weight: 600;
    font-size: 12px;
}
.chat-msg__appeal-tag--hidden { background: #fee2e2; color: #991b1b; }
.chat-msg__appeal-link {
    color: #1d4ed8;
    text-decoration: underline;
    font-size: 13px;
}
.chat-msg__time {
    margin-top: 4px;
    font-size: 11px;
    opacity: .65;
    text-align: right;
}

.chat-empty {
    margin: auto;
    text-align: center;
    color: var(--ink-muted);
    padding: 40px 20px;
}
.chat-empty__icon {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--bg-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pink, #ec4899);
}
.chat-empty h4 { color: var(--ink); margin-bottom: 6px; }

/* — Плашка «текущая тема диалога» под шапкой чата.
     Видна обоим собеседникам, обновляется при отправке сообщения с service_id. — */
.chat-topic {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(90deg, rgba(236,72,153,.10), rgba(236,72,153,.04));
    border-bottom: 1px solid rgba(236,72,153,.18);
    font-size: 13px;
    line-height: 1.3;
}
.chat-topic[hidden] { display: none; }
.chat-topic svg.icon-support {
    flex-shrink: 0;
    align-self: center;
    width: 18px;
    height: 18px;
}
.chat-topic__lbl {
    color: var(--pink, #ec4899);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10.5px;
    padding: 3px 8px;
    background: #fff;
    border-radius: 999px;
    border: 1px solid rgba(236,72,153,.25);
    flex-shrink: 0;
}
.chat-topic__name {
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-topic__meta {
    color: var(--ink-muted);
    font-weight: 400;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-topic__cta {
    flex-shrink: 0;
    padding: 6px 14px;
    background: var(--pink, #ec4899);
    color: #fff;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    transition: transform var(--transition), box-shadow var(--transition);
}
.chat-topic__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(236,72,153,.3);
}
.chat-topic__cta[hidden] { display: none; }

.chat-shell__form {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--line);
    background: #fff;
}

/* Уведомление в нижней части чата (вместо/над формой), когда мессенджер
   мастера выключен или мастер скрыт. */
.chat-notice {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    background: #fff;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink-2);
}
.chat-notice .icon { flex-shrink: 0; margin-top: 2px; }
.chat-notice--warn { background: #fff7ed; color: #92400E; border-top-color: #FED7AA; }
.chat-notice--warn .icon { color: #D97706; }
.chat-notice--lock { background: #F8FAFC; color: #475569; border-top-color: var(--line); }
.chat-notice--lock .icon { color: #94A3B8; }
.chat-notice--info { background: #EEF2FF; color: #3730A3; border-top-color: #C7D2FE; }
.chat-notice--info .icon { color: #4F46E5; }
.chat-notice a { color: inherit; }
.chat-notice .link-soft { text-decoration: underline; text-underline-offset: 3px; }
.chat-shell__row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.chat-shell__attach {
    flex-shrink: 0;
    align-self: flex-end;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bg-2);
    color: var(--ink-2);
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.chat-shell__attach:hover { background: var(--line); color: var(--pink, #ec4899); }
.chat-shell__input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 14.5px;
    font-family: inherit;
    line-height: 1.4;
    resize: none;
    min-height: 44px;
    max-height: 200px;
    /* Скролл прячем по умолчанию — JS переключит на auto, когда текст реально перестанет влезать. */
    overflow-y: hidden;
    background: var(--bg-2);
    color: var(--ink);
    transition: border-color var(--transition), background var(--transition);
}
.chat-shell__input:focus {
    outline: none;
    background: #fff;
    border-color: var(--pink, #ec4899);
    box-shadow: 0 0 0 3px rgba(236,72,153,.12);
}
/* Кнопка фиксированной высоты, прижата к нижнему краю формы и не растёт вместе с инпутом. */
.chat-shell__send {
    flex-shrink: 0;
    align-self: flex-end;
    height: 44px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
}

/* — Превью прикреплённых фото перед отправкой — */
.chat-attach-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px;
    background: var(--bg-2);
    border-radius: 12px;
}
.chat-attach-preview[hidden] { display: none; }
.chat-attach-preview__cell {
    position: relative;
    width: 64px; height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
}
.chat-attach-preview__cell img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.chat-attach-preview__del {
    position: absolute;
    top: 2px; right: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    border: 0;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chat-attach-preview__del:hover { background: rgba(0,0,0,.8); }
.chat-attach-preview__counter {
    margin-left: auto;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 0 6px;
}

/* — Drag & drop индикатор тела чата — */
.chat-shell__body.is-drop {
    outline: 3px dashed rgba(236,72,153,.55);
    outline-offset: -10px;
    background-color: rgba(236,72,153,.04);
}

/* =============================================================
   Альбом фото в сообщении — Telegram-style сетка без пустот.
   Контейнер имеет фиксированный aspect-ratio под количество ячеек,
   ячейки object-fit: cover — никогда не остаётся пустого места.
   ============================================================= */
.chat-album {
    display: grid;
    gap: 3px;
    width: 100%;
    max-width: 360px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0,0,0,.06);
}
.chat-msg--with-album              { padding: 6px; max-width: 380px; }
.chat-msg--with-album .chat-msg__body { padding: 6px 6px 0; margin-top: 4px; }
.chat-msg--with-album .chat-msg__time { padding: 0 6px 2px; }

.chat-album__cell {
    position: relative;
    overflow: hidden;
    display: block;
    background: rgba(0,0,0,.05);
    cursor: zoom-in;
}
.chat-album__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s ease;
}
.chat-album__cell:hover img { transform: scale(1.02); }

/* 1 фото — широкий блок 4:3 */
.chat-album--1 {
    grid-template-columns: 1fr;
    aspect-ratio: 4 / 3;
}
/* 2 фото — две квадратные ячейки в ряд */
.chat-album--2 {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 2 / 1;
}
/* 3 фото — большая слева, две справа стопкой */
.chat-album--3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 3 / 2;
}
.chat-album--3 .chat-album__cell:nth-child(1) { grid-row: span 2; }
/* 4 фото — 2x2 квадрат */
.chat-album--4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1 / 1;
}
/* 5 фото — 2 широких сверху, 3 поменьше снизу. Используем сетку 6 колонок:
   верхний ряд: span 3 + span 3, нижний: span 2 + span 2 + span 2. */
.chat-album--5 {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 3fr 2fr;
    aspect-ratio: 3 / 2;
}
.chat-album--5 .chat-album__cell:nth-child(1),
.chat-album--5 .chat-album__cell:nth-child(2) { grid-column: span 3; }
.chat-album--5 .chat-album__cell:nth-child(3),
.chat-album--5 .chat-album__cell:nth-child(4),
.chat-album--5 .chat-album__cell:nth-child(5) { grid-column: span 2; }

/* =============================================================
   Страница 404 — брендовый «полноэкранный» лендинг ошибки
   ============================================================= */
.err-page {
    position: relative;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 60px 0;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(236,72,153,.06), transparent 60%),
        var(--bg, #faf6f0);
}
.err-page__inner {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
}

/* Декоративные «блобы» на фоне — лёгкая анимация parallax-подобия. */
.err-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    z-index: 1;
    pointer-events: none;
}
.err-blob--1 {
    width: 380px; height: 380px;
    background: rgba(236,72,153,.35);
    top: -80px; left: -100px;
    animation: errFloat 14s ease-in-out infinite alternate;
}
.err-blob--2 {
    width: 320px; height: 320px;
    background: rgba(255,196,170,.55);
    bottom: -60px; right: -80px;
    animation: errFloat 18s ease-in-out infinite alternate-reverse;
}
.err-blob--3 {
    width: 220px; height: 220px;
    background: rgba(99,102,241,.18);
    top: 40%; right: 22%;
    animation: errFloat 22s ease-in-out infinite alternate;
}
@keyframes errFloat {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(40px, -30px) scale(1.08); }
}

.err-card {
    position: relative;
    z-index: 2;
    background: var(--surface, #fff);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 56px 48px;
    box-shadow: 0 30px 80px rgba(20, 10, 6, .08);
    text-align: center;
    max-width: 720px;
    width: 100%;
}

.err-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(236,72,153,.10);
    color: var(--pink, #ec4899);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.err-eyebrow__dot {
    width: 8px; height: 8px;
    background: var(--pink, #ec4899);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(236,72,153,.18);
    animation: errPulse 2s infinite ease-in-out;
}
@keyframes errPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

/* Большие «404» с центральным «O» в виде стилизованного бриллианта. */
.err-num {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    line-height: 1;
    margin-bottom: 24px;
    font-family: var(--font-serif, Georgia, serif);
    font-weight: 600;
    letter-spacing: -.04em;
}
.err-num__d {
    font-size: clamp(110px, 18vw, 180px);
    background: linear-gradient(135deg, #f8b3d2 0%, var(--pink, #ec4899) 60%, #b22662 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-shadow: 0 30px 50px rgba(236,72,153,.18);
}
.err-num__o {
    width: clamp(96px, 16vw, 156px);
    height: clamp(96px, 16vw, 156px);
    border-radius: 50%;
    background: linear-gradient(135deg, #fff 0%, #ffe1ee 100%);
    border: 1px solid rgba(236,72,153,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pink, #ec4899);
    box-shadow:
        inset 0 -10px 24px rgba(236,72,153,.10),
        0 18px 40px rgba(236,72,153,.18);
    padding: 22%;
}

.err-title {
    font-size: clamp(28px, 3vw, 38px);
    margin-bottom: 12px;
    color: var(--ink);
}
.err-lead {
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.55;
    max-width: 480px;
    margin: 0 auto;
}

.err-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 28px;
}

/* Карточки-подсказки категорий. */
.err-suggest {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
.err-suggest__lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 14px;
}
.err-suggest__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.err-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--bg-2, #f6f0e7);
    border-radius: 16px;
    border: 1px solid transparent;
    text-align: left;
    color: var(--ink);
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.err-cat:hover {
    background: #fff;
    border-color: rgba(236,72,153,.25);
    transform: translateY(-2px);
}
.err-cat__img {
    width: 52px; height: 52px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.err-cat__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.err-cat__name {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.err-cat__tag {
    font-size: 12px;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 720px) {
    .err-card { padding: 36px 22px; border-radius: 22px; }
    .err-suggest__grid { grid-template-columns: 1fr; }
}

/* — Список диалогов /chats.php — */
.chat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.chat-list__item + .chat-list__item { border-top: 1px solid var(--line); }
.chat-list__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 6px;
    color: inherit;
    transition: background var(--transition);
    border-radius: 10px;
}
.chat-list__link:hover { background: var(--bg-2); }
.chat-list__avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    flex-shrink: 0;
}
.chat-list__main {
    flex: 1;
    min-width: 0;
}
.chat-list__top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    justify-content: space-between;
}
.chat-list__name {
    font-weight: 600;
    color: var(--ink);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-list__time {
    font-size: 12px;
    color: var(--ink-muted);
    flex-shrink: 0;
}
.chat-list__sub {
    font-size: 12px;
    color: var(--ink-muted);
    margin-top: 2px;
}
.chat-list__last {
    margin-top: 4px;
    color: var(--ink-2);
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-list__you { color: var(--ink-muted); }
.chat-list__empty { color: var(--ink-muted); font-style: italic; }
.chat-list__badge {
    background: var(--pink, #ec4899);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chat-list__item.has-unread .chat-list__name,
.chat-list__item.has-unread .chat-list__last { color: var(--ink); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   Админ-кабинет: сводка + список обращений
   ───────────────────────────────────────────────────────────── */
.avatar--admin {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: #fff;
    font-size: 22px;
    display: inline-flex; align-items: center; justify-content: center;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.kpi {
    background: #fff;
    border: 1px solid var(--line, #ece8e0);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.kpi__label {
    color: var(--ink-muted, #888);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.kpi__value {
    font-size: 30px;
    font-weight: 700;
    color: var(--ink, #1a1a1a);
    line-height: 1.1;
}
.kpi__hint {
    color: var(--ink-2, #555);
    font-size: 13px;
    margin-top: 6px;
}

.appeals-list { display: grid; gap: 10px; margin-top: 6px; }
.appeal-card {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line, #ece8e0);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .12s, transform .12s;
}
.appeal-card:hover { border-color: var(--pink, #ec4899); transform: translateY(-1px); }
.appeal-card--unread { background: #fff7ed; border-color: #fed7aa; }
.appeal-card__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #eee;
}
.appeal-card__main { min-width: 0; }
.appeal-card__top {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    margin-bottom: 4px;
}
.appeal-card__name { font-weight: 600; color: var(--ink, #1a1a1a); }
.appeal-card__role { font-size: 12px; color: var(--ink-muted, #888); }
.appeal-card__time { font-size: 12px; color: var(--ink-muted, #888); margin-left: auto; }
.appeal-card__body {
    color: var(--ink-2, #555);
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.appeal-card__you { color: var(--ink-muted, #888); }
.appeal-card__badge {
    background: var(--pink, #ec4899);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-head h1 { font-family: 'Fraunces', Georgia, serif; }

/* ─────────────────────────────────────────────────────────────
   Форма промокода — пошаговая, с превью и подсказками
   ───────────────────────────────────────────────────────────── */
.promo-form { display: flex; flex-direction: column; gap: 6px; }
.promo-form__step {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line, #ece8e0);
}
.promo-form__step:last-of-type { border-bottom: 0; padding-bottom: 6px; }
.promo-form__step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    flex-shrink: 0;
}
.promo-form__step-body { min-width: 0; }
.promo-form__label {
    display: block;
    font-weight: 600;
    color: var(--ink, #1a1a1a);
    font-size: 15px;
    margin-bottom: 2px;
}
.promo-form__hint {
    color: var(--ink-2, #555);
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 1.4;
}
.promo-form__hint code {
    font-family: ui-monospace, monospace;
    background: #fef3c7;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
    color: #78350f;
}
.promo-form__sub {
    color: var(--ink-muted, #888);
    font-size: 12px;
    margin-top: 6px;
}
.promo-form__field { margin-top: 12px; }
.promo-form__field > label {
    display: block;
    font-size: 13px;
    color: var(--ink-2, #555);
    margin-bottom: 4px;
}
.promo-form input[type="text"],
.promo-form input[type="number"],
.promo-form input[type="date"] {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--line, #ece8e0);
    border-radius: 8px;
    font-size: 14px;
    font: inherit;
}
.promo-form input:focus { outline: 2px solid var(--pink, #ec4899); outline-offset: 0; }

.promo-form__presets {
    margin-top: 8px;
    color: var(--ink-muted, #888);
    font-size: 12px;
    display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.promo-preset {
    background: #fff;
    border: 1px dashed var(--line, #ece8e0);
    border-radius: 999px;
    padding: 4px 10px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    cursor: pointer;
    color: var(--ink-2, #555);
}
.promo-preset:hover { border-color: var(--pink, #ec4899); color: var(--pink, #ec4899); }

/* Радио-блоки «Тип скидки» */
.promo-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.promo-kind__opt {
    border: 1px solid var(--line, #ece8e0);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
    background: #fff;
    transition: border-color .12s, background .12s;
}
.promo-kind__opt:has(input:checked) {
    border-color: var(--pink, #ec4899);
    background: #fdf2f8;
}
.promo-kind__opt input { display: none; }
.promo-kind__title { font-weight: 600; font-size: 13px; color: var(--ink, #1a1a1a); }
.promo-kind__hint  { font-size: 11px; color: var(--ink-muted, #888); }

.promo-value-row {
    position: relative;
    display: flex; align-items: stretch; gap: 0;
}
.promo-value-row input {
    flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0;
    border-right: 0;
    font-size: 18px; font-weight: 600;
}
.promo-value-row__unit {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 16px;
    border: 1px solid var(--line, #ece8e0);
    border-top-right-radius: 8px; border-bottom-right-radius: 8px;
    background: #faf7f2;
    color: var(--ink-2, #555);
    font-weight: 600;
    min-width: 50px;
}

.promo-input-row { display: flex; align-items: center; gap: 10px; }
.promo-input-row input { max-width: 140px; }

/* Превью */
.promo-preview {
    margin-top: 10px;
    padding: 14px;
    background: linear-gradient(135deg, #fdf2f8, #fef3c7);
    border: 1px dashed #fbcfe8;
    border-radius: 12px;
}
.promo-preview__lbl {
    font-size: 12px;
    color: var(--ink-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.promo-preview__row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 4px;
}
.promo-preview__code {
    font-family: ui-monospace, monospace;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--ink, #1a1a1a);
    background: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #fbcfe8;
}
.promo-preview__discount {
    font-weight: 700;
    color: #be185d;
    font-size: 18px;
}
.promo-preview__sub  { font-size: 14px; color: var(--ink, #1a1a1a); }
.promo-preview__rules { font-size: 12px; color: var(--ink-2, #555); margin-top: 4px; }

/* ===========================================================
   КАБИНЕТ САЛОНА · /salon/* и страница «Мои салоны»
   Утилиты: cabinet__main → cabinet__content, шапка страницы,
   сетка карточек, карточка-блок, сообщения, таблица, .muted,
   бейдж в сайдбаре, тройная join-grid, градиент join-card--salon.
   =========================================================== */

.cabinet__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}
.page-head h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 6px;
}
.page-head__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.muted { color: var(--ink-muted); }

.cards-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 1100px) { .cards-grid[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .cards-grid[style] { grid-template-columns: 1fr !important; } .cards-grid { grid-template-columns: 1fr; } }

.card {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #ece6dc);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04));
}
.card h2 { margin-top: 0; }

.message {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.4;
}
.message.error,
.message--err   { background: var(--red-50, #fdecea); color: var(--red, #d33); border-color: rgba(211,47,47,.2); }
.message.success,
.message--ok    { background: var(--green-50, #ecfaf1); color: var(--green, #2e7d32); border-color: rgba(46,125,50,.2); }
.message.info,
.message--info  { background: #fff8e6; color: #7a5a00; border-color: rgba(200, 160, 30, .25); }

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #ece6dc);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04));
}
.data-table th,
.data-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line, #ece6dc);
    font-size: 14px;
    vertical-align: top;
}
.data-table thead th {
    background: var(--bg-2, #f7f2ea);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--ink-muted, #8A8780);
}
.data-table tbody tr:last-child td { border-bottom: 0; }

.sidebar__badge {
    margin-left: auto;
    background: var(--pink, #ec4899);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
}
.sidebar__menu a.active .sidebar__badge { background: #fff; color: var(--ink, #1a1a1a); }

.join-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .join-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .join-grid { grid-template-columns: 1fr; } }

.join-card--salon::after {
    background: linear-gradient(180deg,
        rgba(8,12,32,0.30) 0%,
        rgba(20,40,80,0.55) 55%,
        rgba(8,16,40,0.92) 100%);
}

/* Toggle-переключатель (флажок) — для логических полей форм. */
.switch-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 14px;
    background: #fff;
}
.switch-row__text {
    flex: 1;
    min-width: 0;
}
.switch-row__title {
    font-weight: 600;
    color: var(--ink, #1a1a1a);
    font-size: 14px;
}
.switch-row__hint {
    color: var(--ink-muted, #8a8780);
    font-size: 12.5px;
    margin-top: 2px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.switch__slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #d6d2c9;
    border-radius: 999px;
    transition: background .2s ease;
}
.switch__slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform .2s ease;
}
.switch input:checked + .switch__slider {
    background: var(--pink, #ec4899);
}
.switch input:checked + .switch__slider::before {
    transform: translateX(20px);
}
.switch input:focus-visible + .switch__slider {
    box-shadow: 0 0 0 3px rgba(236,72,153,0.25);
}
.switch input:disabled + .switch__slider {
    background: #ece8df;
    cursor: not-allowed;
}
.switch input:disabled + .switch__slider::before {
    box-shadow: none;
    opacity: .85;
}

/* Компактная версия toggle-переключателя — для списков с большим количеством опций. */
.switch.switch--sm {
    width: 36px;
    height: 20px;
}
.switch.switch--sm .switch__slider::before {
    width: 14px;
    height: 14px;
    left: 3px;
    top: 3px;
}
.switch.switch--sm input:checked + .switch__slider::before {
    transform: translateX(16px);
}

/* ===========================================================
   DELEGATION PERMS — список разделов кабинета мастера,
   которые он передаёт в управление салону.
   =========================================================== */
.delegation-perms {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 14px;
    background: #fbf9f5;
}
.delegation-perms.is-disabled {
    opacity: .55;
}
.delegation-perms__title {
    font-weight: 600;
    font-size: 13px;
    color: var(--ink, #1a1a1a);
    margin-bottom: 10px;
}
.delegation-perms__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.delegation-perms__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.delegation-perms__text {
    flex: 1;
    min-width: 0;
}
.delegation-perms__label {
    font-size: 13.5px;
    color: var(--ink, #1a1a1a);
    line-height: 1.3;
}
.delegation-perms__desc {
    font-size: 12px;
    line-height: 1.35;
    margin-top: 2px;
}
.delegation-perms__hint {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff7d6;
    color: #6a5300;
    font-size: 12.5px;
}

/* Бейджи делегированных разделов в карточке мастера на стороне салона. */
.delegated-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.delegated-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fdecf4;
    color: #b22a6c;
    font-size: 11.5px;
    line-height: 1.2;
    white-space: nowrap;
}

/* Подсказка на дашборде в режиме «работаю от имени мастера». */
.acting-perms-card {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff7fb;
    border: 1px solid #fbd5e6;
}
.acting-perms-card__title {
    font-weight: 600;
    color: var(--ink, #1a1a1a);
    font-size: 14.5px;
}
.acting-perms-card__sub {
    font-size: 12.5px;
    margin-top: 4px;
}
.acting-perms-card__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* ===========================================================
   LOCATION PICKER (карта + поиск адреса для форм мастера/салона)
   =========================================================== */
.lp {
    position: relative;
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}
.lp__bar {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--line, #e6dfd5);
    background: #fff;
}
.lp__search {
    position: relative;
    flex: 1;
    min-width: 0;
}
.lp__search-icon {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted, #8a8780);
    font-size: 14px;
    pointer-events: none;
}
.lp__input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
    color: var(--ink, #1a1a1a);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lp__input:focus {
    border-color: var(--pink, #ec4899);
    box-shadow: 0 0 0 3px rgba(236,72,153,0.15);
}
.lp__clear {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--bg-2, #f3efe8);
    color: var(--ink-muted, #8a8780);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.lp__clear:hover { background: var(--ink, #1a1a1a); color: #fff; }
.lp__suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    z-index: 1000;
    margin: 0; padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
    max-height: 320px;
    overflow-y: auto;
}
.lp__suggest-item {
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
}
.lp__suggest-item:hover { background: var(--bg-2, #f3efe8); }
.lp__suggest-main {
    font-size: 13.5px;
    color: var(--ink, #1a1a1a);
    line-height: 1.4;
}
.lp__suggest-sub {
    font-size: 11.5px;
    color: var(--ink-muted, #8a8780);
    margin-top: 2px;
    text-transform: lowercase;
}
.lp__locate {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 10px;
    background: #fff;
    color: var(--ink, #1a1a1a);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.lp__locate:hover { background: var(--ink, #1a1a1a); color: #fff; }
.lp__locate-icon {
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: relative;
}
.lp__locate-icon::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: currentColor;
    border-radius: 50%;
}
.lp__locate.is-loading { opacity: 0.7; pointer-events: none; }
.lp__locate.is-loading .lp__locate-icon { animation: lp-spin .8s linear infinite; }
@keyframes lp-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.lp__map {
    width: 100%;
    height: 320px;
    background: #f3efe8;
}
.lp__hint {
    padding: 8px 12px;
    background: var(--bg-2, #f3efe8);
    color: var(--ink-muted, #8a8780);
    font-size: 12px;
    border-top: 1px solid var(--line, #e6dfd5);
}
@media (max-width: 600px) {
    .lp__bar { flex-direction: column; }
    .lp__locate-text { display: none; }
    .lp__locate { padding: 10px 12px; align-self: flex-end; }
    .lp__map { height: 260px; }
}

/* ===========================================================
   SALON SCHEDULE — 7-дневный календарь по каждому мастеру.
   За основу взят .week-calendar из мастерского кабинета (read-only вариант).
   =========================================================== */

/* Тулбар недели на странице расписания салона. */
.week-toolbar.week-toolbar--salon {
    margin-bottom: 18px;
}
.week-toolbar__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    flex-wrap: wrap;
}

.salon-week {
    display: grid;
    gap: 18px;
}
.salon-week__row {
    background: #fff;
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 14px;
    padding: 14px;
}
.salon-week__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--line, #e6dfd5);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.salon-week__avatar {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0;
}
.salon-week__info { flex: 1 1 200px; min-width: 0; }
.salon-week__name {
    font-weight: 600;
    color: var(--ink, #1a1a1a);
    font-size: 15px;
}
.salon-week__meta { font-size: 12.5px; margin-top: 2px; }
.salon-week__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Read-only вариант .week-calendar — без курсоров drag/resize и
   с компактной шкалой времени (rowPx ~16). Основные стили шкалы и
   разметки берутся от обычного .week-calendar. */
.week-calendar.week-calendar--readonly { user-select: text; }
.week-calendar.week-calendar--readonly .week-calendar__day { overflow: hidden; }

/* Табы переключения «По мастерам» / «Общий календарь». */
.schedule-tabs {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 4px;
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 999px;
    background: #fff;
    margin-bottom: 14px;
}
.schedule-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    color: var(--ink-muted, #8a8780);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
    cursor: pointer;
}
.schedule-tabs__tab:hover { color: var(--ink, #1a1a1a); }
.schedule-tabs__tab.is-active {
    background: var(--ink, #1a1a1a);
    color: #fff;
}
.schedule-tabs__tab.is-active:hover { color: #fff; }

/* Легенда мастеров над общим календарём. */
.combined-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 10px 12px;
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 12px;
}
.combined-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--ink, #1a1a1a);
}
.combined-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.combined-legend__avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.combined-legend__name { white-space: nowrap; }

/* Слот в общем календаре: цветная полоса слева (по master_id),
   аватар + время в шапке, имя мастера, потом клиент/«Свободно». */
.sc-slot.sc-slot--combined {
    border-left-width: 3px;
    border-left-style: solid;
    padding: 3px 6px;
}
.sc-slot__head {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
}
.sc-slot__avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-block;
}
.sc-slot__avatar--text {
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    text-transform: uppercase;
}
.sc-slot__master {
    font-size: 11px;
    color: var(--ink, #1a1a1a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}
.sc-slot.is-busy .sc-slot__master { color: var(--ink, #1a1a1a); }

/* Когда слот очень узкий (lanes >= 3) — прячем имя мастера, оставляем только
   аватар-точку и время. Container query сжатой колонки. */
.sc-slot.sc-slot--combined { container-type: inline-size; }
@container (max-width: 80px) {
    .sc-slot__master { display: none; }
}

/* Бронь в общем календаре наследует left/width от своей дорожки через
   inline-style — он побеждает дефолтные left:4px/right:4px из .sc-booking.
   Здесь только включаем container query для адаптации текста. */
.sc-booking--combined {
    right: auto;
    container-type: inline-size;
}
@container (max-width: 80px) {
    .sc-booking__svc { display: none; }
}
@container (max-width: 60px) {
    .sc-booking__time { font-size: 9px; }
    .sc-booking__client { font-size: 10px; }
}

/* Имя мастера + аватар крупным шрифтом в заголовке модалки. */
.modal-title-master {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid var(--clr, var(--pink, #ec4899));
    padding-bottom: 2px;
}
.modal-title-master__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

/* Карточка окна (read-only), аналог .wc-slot, но без редактирования.
   Когда внутри есть активные брони (.has-bookings) — окно становится фоновой
   серо-зелёной карточкой, поверх неё лежат отдельные блоки .sc-booking. */
.sc-slot {
    position: absolute;
    left: 2px; right: 2px;
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    border-radius: 6px;
    padding: 2px 6px;
    text-align: left;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
    z-index: 1;
}
.sc-slot:hover {
    background: #d1fae5;
    border-color: #6ee7b7;
    box-shadow: 0 2px 8px rgba(16, 185, 129, .18);
}
.sc-slot.has-bookings {
    background: #f9fafb;
    border-color: #e5e7eb;
}
.sc-slot.has-bookings:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    box-shadow: none;
}
.sc-slot__time {
    font-size: 11px;
    font-weight: 600;
    color: #047857;
}
.sc-slot.has-bookings .sc-slot__time { color: var(--ink-muted, #8a8780); }
.sc-slot__free {
    font-size: 10.5px;
    color: #047857;
    margin-top: 1px;
}

/* Отдельный блок одной записи — позиционируется по своему диапазону времени
   ВНУТРИ (или поверх) карточки окна. По образцу .wc-booking из мастера. */
.sc-booking {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    left: 4px; right: 4px;
    background: linear-gradient(180deg, #fce7f3 0%, #fbcfe8 100%);
    border: 1px solid #f9a8d4;
    border-radius: 6px;
    padding: 2px 6px;
    color: var(--ink, #1a1a1a);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.15;
    z-index: 3;
    transition: transform .12s ease, box-shadow .12s ease;
}
.sc-booking:hover {
    transform: translateX(-1px);
    box-shadow: 0 4px 10px rgba(228, 90, 140, .25);
}
.sc-booking__time {
    font-size: 10px;
    font-weight: 700;
    color: var(--pink-600, #b22a6c);
}
.sc-booking__client {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-booking__svc {
    font-size: 10px;
    color: var(--ink-muted, #8a8780);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Компактный вид брони в режиме «По мастерам»: только имя клиента,
   крупнее, по центру карточки. Время/услуга/телефон — только в title и
   в модалке слота. */
.sc-booking--name-only {
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
}
.sc-booking--name-only .sc-booking__client {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink, #1a1a1a);
    text-align: center;
    width: 100%;
}

/* Полу-часовые подписи на шкале (08:30, 09:30, …) для всех режимов
   .week-calendar (включая readonly «По мастерам»). Для day-view есть
   более специфичные правила в секции day-view ниже — они переопределят. */
.week-calendar__hour.is-hour-mark { font-weight: 600; }
.week-calendar__hour.is-half-mark {
    font-size: 9.5px;
    opacity: 0.55;
    font-weight: 400;
}

/* Модалка деталей записи (открывается по клику на .sc-slot). */
.sc-modal-bookings {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sc-modal-booking {
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
}
.sc-modal-booking.is-inactive {
    background: #fbfaf6;
    color: var(--ink-muted, #8a8780);
}
.sc-modal-booking__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.sc-modal-booking__time {
    font-weight: 600;
    color: var(--ink, #1a1a1a);
    font-size: 14px;
}
.sc-modal-booking.is-inactive .sc-modal-booking__time { color: var(--ink-muted, #8a8780); }
.sc-modal-booking__client {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    margin-bottom: 4px;
}
.sc-modal-booking__client a { text-decoration: none; }
.sc-modal-booking__client .client-chip { font-weight: 600; }
.sc-modal-booking__client .salon-bk-party__phone { margin-left: auto; }
.sc-modal-booking__service {
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sc-modal-booking__comment {
    margin-top: 8px;
    padding: 8px 10px;
    background: #fbf9f5;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}
.sc-modal-booking__cancel {
    margin-top: 6px;
    font-size: 12.5px;
}
/* Кнопки действий по активной брони (Клиент пришёл / Не пришёл / Отмена)
   внутри модалки слота — компактный ряд с переносом на узких экранах. */
.sc-modal-booking__actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line, #e6dfd5);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.sc-modal-booking__actions form { display: inline-flex; }

/* ===========================================================
   ACTING-AS BANNER — салон управляет кабинетом мастера.
   Показывается над всем интерфейсом (включая шапку и сайдбар).
   =========================================================== */
.acting-banner {
    background: linear-gradient(135deg, #fde2ec 0%, #fff3f8 100%);
    border-bottom: 1px solid #f7c7d9;
    color: #1a1a1a;
    font-size: 14px;
}
.acting-banner__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    flex-wrap: wrap;
}
.acting-banner__icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #ec4899;
    color: #fff;
    font-size: 14px;
}
.acting-banner__text { flex: 1; min-width: 0; }
.acting-banner__text strong { font-weight: 700; }
.acting-banner__form { margin: 0; }
.acting-banner__btn {
    border: 1px solid #ec4899;
    background: #fff;
    color: #ec4899;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.acting-banner__btn:hover { background: #ec4899; color: #fff; }
@media (max-width: 600px) {
    .acting-banner__row { gap: 8px; }
    .acting-banner__btn { width: 100%; }
}

/* ===========================================================
   CATALOG MAP (карта в /catalog.php с метками и радиусом)
   =========================================================== */

/* Anti-flicker: если у пользователя сохранена локация (см. inline-script
   в catalog.php), grid скрыт до применения JS-фильтра — иначе при
   переключении вкладок виден кадр со всеми карточками. */
html.cm-prefilter .catalog-grid {
    opacity: 0;
}
.catalog-grid {
    transition: opacity .15s ease;
}

/* Pill с сохранённой локацией — кликабельный пункт над каталогом.
   По стилю похож на верхний пункт «📍 Санкт-Петербург» в шапке Авито. */
.cm-pill-wrap {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 18px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cm-pill {
    display: inline-flex; align-items: center; gap: 10px;
    border: 0;
    background: transparent;
    font-size: 14px;
    color: var(--ink, #1a1a1a);
    cursor: pointer;
    line-height: 1.1;
}
.cm-pill__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: currentColor;
}
.cm-pill__icon svg { display: block; }
.cm-pill.is-set { color: #000000; }
.cm-pill__clear {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--ink-muted, #8a8780);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease;
}
.cm-pill__clear:hover { color: var(--ink, #1a1a1a); }

/* Модалка с картой каталога. */
.cm-modal {
    position: fixed; inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.cm-modal[hidden] { display: none; }
.cm-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(20, 18, 14, 0.55);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
.cm-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 920px;
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cm-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line, #e6dfd5);
}
.cm-modal__head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink, #1a1a1a);
}
.cm-modal__close {
    width: 36px; height: 36px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: var(--ink-muted, #8a8780);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.cm-modal__close:hover { background: var(--bg-2, #f3efe8); color: var(--ink, #1a1a1a); }

/* Внутри модалки сам блок карты не должен иметь дублирующих границ/отступов. */
.cm-modal .catalog-map-block {
    border: 0;
    border-radius: 0;
    margin: 0;
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.cm-modal .catalog-map-block__map {
    height: 50vh;
    min-height: 320px;
    flex: 1 1 auto;
}

body.cm-modal-open { overflow: hidden; }

@media (max-width: 700px) {
    .cm-modal { padding: 0; }
    .cm-modal__dialog {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        height: 100vh;
    }
    .cm-modal .catalog-map-block__map { height: 40vh; }
}

.catalog-map-block {
    position: relative;
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 24px;
}
.catalog-map-block__head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--line, #e6dfd5);
}
.catalog-map-block__head .lp__search { flex: 1 1 260px; min-width: 0; }
.catalog-map-block__map {
    width: 100%;
    height: 420px;
    background: #f3efe8;
}
/* Футер карты: ряд кнопок-радиусов + большая primary-кнопка «Показать N». */
.catalog-map-block__foot {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 14px 16px;
    border-top: 1px solid var(--line, #e6dfd5);
    background: #fff;
}
.cm-radius-row {
    flex: 1;
    min-width: 0;
}
.cm-radius-row__label {
    font-size: 12.5px;
    color: var(--ink-muted, #8a8780);
    margin-bottom: 8px;
    font-weight: 500;
}
.cm-radius-row__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cm-r-chip {
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--bg-2, #f3efe8);
    color: var(--ink-2, #555);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s ease;
    min-width: 44px;
}
.cm-r-chip:hover { background: var(--line, #e6dfd5); color: var(--ink, #1a1a1a); }
.cm-r-chip.is-active {
    background: var(--ink, #1a1a1a);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.cm-apply-btn {
    flex-shrink: 0;
    padding: 13px 22px;
    border: 0;
    border-radius: 12px;
    background: var(--pink, #ec4899);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: 0 4px 14px rgba(236,72,153,0.35);
    min-height: 46px;
    min-width: 220px;
    text-align: center;
}
.cm-apply-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(236,72,153,0.45);
}
.cm-apply-btn:disabled {
    background: var(--bg-2, #f3efe8);
    color: var(--ink-muted, #8a8780);
    box-shadow: none;
    cursor: default;
}
@media (max-width: 760px) {
    .catalog-map-block__foot { flex-direction: column; align-items: stretch; gap: 14px; }
    .cm-apply-btn { width: 100%; min-width: 0; }
}

/* Поповер с карточкой при клике на маркер */
.leaflet-popup-content { margin: 10px 12px !important; font-family: inherit; }
.cmp-card {
    display: flex; gap: 10px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    min-width: 220px;
}
.cmp-card__avatar {
    width: 48px; height: 48px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}
.cmp-card__name {
    font-weight: 600;
    color: var(--ink, #1a1a1a);
    font-size: 14px;
    line-height: 1.2;
}
.cmp-card__meta {
    color: var(--ink-muted, #8a8780);
    font-size: 12px;
    margin-top: 2px;
}

/* Розовая метка центра радиуса в catalog-map. */
.cm-center-icon { background: transparent; border: 0; }
.cm-center-pin {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #ec4899;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(236,72,153,0.55), 0 4px 14px rgba(236,72,153,0.45);
    cursor: grab;
}
.cm-center-pin:active { cursor: grabbing; }
@media (max-width: 600px) {
    .catalog-map-block__map { height: 320px; }
    .catalog-map-block__head { flex-direction: column; align-items: stretch; }
    .catalog-map-block__radius { justify-content: space-between; }
}

/* === Мини-карта (статичная, в карточках мастера/салона) === */
.where-block {
    display: flex;
    gap: 16px;
    align-items: stretch;
}
.where-block__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.where-block__kind {
    color: var(--pink, #ec4899);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.where-block__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}
.where-block__address {
    color: var(--ink-2, #4a473f);
    font-size: 14px;
    line-height: 1.5;
}
.where-block__hint {
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.5;
}
.where-block__salons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.where-block__salon {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-2, #faf7f2);
    text-decoration: none;
    color: inherit;
    transition: background .15s ease;
}
.where-block__salon:hover {
    background: rgba(236, 72, 153, 0.08);
}
.where-block__salon-name {
    font-weight: 600;
    color: var(--ink);
    font-size: 14px;
}
.where-block__salon-addr {
    color: var(--ink-muted);
    font-size: 12.5px;
}

.mini-map {
    width: 220px;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-2, #faf7f2);
    flex-shrink: 0;
    position: relative;
}
.mini-map.mini-map--empty {
    display: none;
}
.mini-map .leaflet-control-attribution { display: none; }
.mini-map--wide {
    width: 100%;
    height: 280px;
}

@media (max-width: 600px) {
    .where-block { flex-direction: column; }
    .mini-map {
        width: 100%;
        height: 200px;
    }
}

/* === Витрина салона: hero-pills, команда, контактная карточка === */
.salon-hero {
    /* Тот же общий стиль, что и у мастера, но pills-блока со статами. */
}
.salon-hero__card {
    align-items: center;
    flex-wrap: wrap;
}
.salon-hero__logo {
    background: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.salon-hero__stats {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
    color: #fff;
}
.salon-hero__stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.salon-hero__stat--rating {
    background: rgba(236, 72, 153, 0.95);
    font-weight: 600;
}
.salon-hero__stat--addr {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.salon-hero__stat--addr svg { flex-shrink: 0; }
@media (max-width: 700px) {
    .salon-hero__stat--addr { max-width: none; }
}

.salon-body {
    padding: 36px 0 60px;
}
@media (max-width: 700px) {
    .salon-body { padding: 24px 0 40px; }
}

.salon-team-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
}
.salon-team-status .dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
}
.salon-team-status .dot-free {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}

.salon-team {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 720px) {
    .salon-team { grid-template-columns: 1fr; }
}
.salon-team__card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--line, #e6dfd5);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.salon-team__card:hover {
    border-color: var(--pink, #ec4899);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(236, 72, 153, 0.12);
}
.salon-team__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.salon-team__avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-2);
}
.salon-team__dot {
    position: absolute;
    right: -2px; bottom: -2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
}
.salon-team__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.salon-team__name {
    font-weight: 600;
    color: var(--ink);
    font-size: 15.5px;
    line-height: 1.2;
}
.salon-team__cat {
    color: var(--pink, #ec4899);
    font-size: 12.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.salon-team__meta {
    color: var(--ink-muted);
    font-size: 12.5px;
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.salon-team__rating {
    color: var(--ink);
    font-weight: 500;
}
.salon-team__sep {
    opacity: 0.5;
}
.salon-team__cta {
    color: var(--ink-muted);
    font-size: 22px;
    transition: color .15s ease, transform .15s ease;
}
.salon-team__card:hover .salon-team__cta {
    color: var(--pink, #ec4899);
    transform: translateX(2px);
}

/* Подпись «где работает мастер» в карточке каталога */
.catalog-card__where {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--ink-muted);
    font-size: 12.5px;
    margin-top: 4px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.catalog-card__where--salon {
    color: var(--pink, #ec4899);
}
.catalog-card__where svg {
    flex-shrink: 0;
}

/* ─────────────────── Резиновые колонки в расписании салона ───────────────
 * Расписание салона может содержать произвольное число мастеров. Чтобы день
 * с 5–10 мастерами оставался читаемым, у колонок дня есть минимальная
 * ширина (--day-min-w), а лишнее уезжает в горизонтальный скролл. Шкала
 * времени и угол фиксированы слева, шапка дней и тело прокручиваются
 * синхронно (JS-связка в salon/schedule.php).
 *
 * В combined view ширина колонки растёт пропорционально числу одновременных
 * дорожек: каждая колонка получает inline-style `flex: 0 0 <px>` из PHP.
 * ───────────────────────────────────────────────────────────────────────── */
.week-calendar--readonly .week-calendar__head,
.week-calendar--readonly .week-calendar__body {
    overflow-x: auto;
    overflow-y: hidden;
}
.week-calendar--readonly .week-calendar__head           { scrollbar-width: none; }
.week-calendar--readonly .week-calendar__head::-webkit-scrollbar { display: none; }

/* Угол и шкала времени остаются «приклеены» слева при горизонтальном скролле. */
.week-calendar--readonly .week-calendar__corner,
.week-calendar--readonly .week-calendar__scale {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--bg-2);
}

/* Колонки на flex'е. Базовая ширина одной колонки `--day-base` = (видимая
   ширина календаря - шкала) / 7 — её выставляет JS на загрузке и при resize
   (см. salon/schedule.php → setDayBase()).
   Каждая колонка получает `--day-cols` (по умолчанию 1; в combined-режиме
   PHP ставит число одновременно работающих мастеров — это её «кратность»).
   Итоговая ширина = `--day-base × --day-cols`, без grow/shrink: дни
   1-кратные ровно вписываются в 7 равных долей; день с 2 мастерами =
   удвоенная колонка → суммарная ширина превышает viewport → скролл. */
.week-calendar--readonly .week-calendar__heads,
.week-calendar--readonly .week-calendar__days {
    display: flex;
    grid-template-columns: none;
}
.week-calendar--readonly .week-calendar__day-head,
.week-calendar--readonly .week-calendar__day {
    flex: 0 0 calc(var(--day-base, 0px) * var(--day-cols, 1));
    min-width: 0;
}
/* До инициализации JS — равные 1/7 доли (избегает «нулевых» колонок
   на момент первого рендера, пока скрипт не выставил --day-base). */
.week-calendar--readonly:not([data-base-ready="1"]) .week-calendar__day-head,
.week-calendar--readonly:not([data-base-ready="1"]) .week-calendar__day {
    flex: 1 1 0;
}

/* Тонкая «тень» у правого края тела как намёк на возможность скролла. */
.week-calendar--readonly .week-calendar__body {
    background:
        linear-gradient(to right, var(--surface), rgba(255, 255, 255, 0)) left center / 16px 100% no-repeat,
        linear-gradient(to left,  rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)) right center / 24px 100% no-repeat,
        var(--surface);
    background-attachment: local, local, scroll;
}

/* ─────────────────── Интерактивный календарь салона ──────────────────────
 * Drag-create новых окон, форма редактирования внутри модалки, тосты и т.п.
 * ───────────────────────────────────────────────────────────────────────── */

/* Курсор-прицел на пустом месте редактируемой колонки дня. */
.week-calendar--editable .week-calendar__day[data-editable="1"] {
    cursor: crosshair;
}
.week-calendar--editable .week-calendar__day[data-editable="1"] .sc-slot,
.week-calendar--editable .week-calendar__day[data-editable="1"] .sc-booking {
    cursor: pointer;
}

/* Превью-прямоугольник во время drag-select. */
.sc-select-preview {
    position: absolute;
    left: 4px;
    right: 4px;
    background: rgba(236, 72, 153, 0.15);
    border: 1.5px dashed var(--pink, #ec4899);
    border-radius: 6px;
    pointer-events: none;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-select-preview__time {
    font-size: 12px;
    font-weight: 700;
    color: var(--pink, #ec4899);
    background: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(236, 72, 153, 0.25);
}

/* Раскрывающийся блок «Изменить окно» в модалке слота. */
.sc-edit-block {
    margin-top: 14px;
    border-top: 1px solid var(--line, #e6dfd5);
    padding-top: 14px;
}
.sc-edit-block > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    color: var(--ink, #1a1a1a);
    padding: 6px 0;
    user-select: none;
}
.sc-edit-block > summary::-webkit-details-marker { display: none; }
.sc-edit-block > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s;
    color: var(--ink-muted);
}
.sc-edit-block[open] > summary::before { transform: rotate(90deg); }

/* Форма редактирования / создания окна. */
.sc-edit-form,
#newSlotForm {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.sc-edit-form .field,
#newSlotForm .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sc-edit-form .field label,
#newSlotForm .field label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink, #1a1a1a);
}
.sc-edit-form .field select,
.sc-edit-form .field input,
#newSlotForm .field select,
#newSlotForm .field input {
    padding: 8px 10px;
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: var(--ink, #1a1a1a);
    width: 100%;
    box-sizing: border-box;
}
.sc-edit-form .field select:disabled,
.sc-edit-form .field input:disabled {
    background: var(--bg-muted, #f7f3ed);
    color: var(--ink-muted);
    cursor: not-allowed;
}

.sc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.sc-form-row .field { gap: 4px; }
@media (max-width: 520px) {
    .sc-form-row { grid-template-columns: 1fr 1fr; }
    .sc-form-row .field:first-child { grid-column: 1 / -1; }
}

.sc-form-error {
    background: var(--red-50, #fef2f2);
    color: var(--red, #dc2626);
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
}

.sc-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .sc-form-actions { gap: 6px; }
    .sc-form-actions .btn { flex: 1; min-width: 0; padding-left: 8px; padding-right: 8px; }
}

/* Тосты после успеха/ошибки. */
.sc-toast-host {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.sc-toast {
    padding: 10px 16px;
    border-radius: 10px;
    background: #1f2937;
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: auto;
    max-width: 320px;
}
.sc-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.sc-toast--ok  { background: #059669; }
.sc-toast--err { background: #dc2626; }

/* Кнопка «+ Записать клиента» в модалке слота расписания салона. */
.sc-add-booking {
    width: 100%;
    margin-bottom: 12px;
}

/* Pill с именем мастера в шапке модалки записи (sBookingModal). */
.sbk-master-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(176, 122, 58, 0.12);
    color: var(--brand, #b07a3a);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.6;
    vertical-align: middle;
}
.sbk-master-pill[hidden] { display: none; }

/* =========================================================================
   Режим работы салона — компактные поля «открытие–закрытие» в настройках.
   ========================================================================= */
.salon-hours {
    display: inline-flex;
    align-items: flex-end;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 12px;
    background: #fff;
}
.salon-hours__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.salon-hours__cap {
    font-size: 11.5px;
    color: var(--muted, #7a7066);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.salon-hours__cell input[type="time"] {
    font-size: 16px;
    font-weight: 600;
    padding: 6px 10px;
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 8px;
    background: #fff;
    color: var(--ink, #1a1a1a);
    width: 120px;
}
.salon-hours__cell input[type="time"]:focus {
    border-color: var(--brand, #b07a3a);
    outline: none;
    box-shadow: 0 0 0 3px rgba(176, 122, 58, 0.18);
}
.salon-hours__dash {
    font-size: 22px;
    color: var(--muted, #7a7066);
    padding-bottom: 6px;
    user-select: none;
}
.salon-hours__label { display: block; }
@media (max-width: 540px) {
    .salon-hours { width: 100%; }
    .salon-hours__cell { flex: 1 1 0; }
    .salon-hours__cell input[type="time"] { width: 100%; }
}

/* =========================================================================
   Расписание салона — режим «По дням» (а-ля Дикиди).
   День + week-strip + мини-календарь сверху, ниже — N колонок мастеров с
   общей шкалой времени слева. DOM нижней секции совпадает с .week-calendar,
   поэтому переиспользуется sync-scroll, drag-create и модалки слотов.
   ========================================================================= */

.day-view { margin-top: 8px; }

.day-view__nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 14px;
    background: #fff;
    margin-bottom: 12px;
}
.day-view__nav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}
.day-view__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink, #1a1a1a);
    flex: 1 1 220px;
    min-width: 0;
}
.day-view__title.is-past { opacity: 0.6; }
.day-view__summary {
    display: inline-flex;
    align-items: center;
    gap: 4px 8px;
    font-size: 12.5px;
    flex-wrap: wrap;
}
.day-view__summary strong { color: var(--ink, #1a1a1a); }

/* Старый layout (1fr + 280px) больше не нужен: мини-календарь переехал
   в модалку, остаётся только week-strip + кнопка «Календарь». */
.day-view__nav-bottom {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.day-view__nav-bottom--compact .day-view__weekstrip {
    flex: 1 1 auto;
    min-width: 0;
}
.day-view__cal-btn {
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.day-view__cal-btn-label {
    font-weight: 600;
    font-size: 13px;
}
@media (max-width: 760px) {
    .day-view__nav-bottom { flex-wrap: wrap; }
    .day-view__cal-btn { width: 100%; justify-content: center; }
}

/* Week-strip: компактная горизонтальная полоса дней недели. */
.day-view__weekstrip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.day-view__weekstrip-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 2px;
    border-radius: 9px;
    background: #f7f3ec;
    color: var(--ink, #1a1a1a);
    text-decoration: none;
    transition: background 0.12s, color 0.12s, transform 0.12s;
    border: 1px solid transparent;
}
.day-view__weekstrip-day:hover {
    background: #efe7d7;
    transform: translateY(-1px);
}
.day-view__weekstrip-day.is-past { opacity: 0.55; }
.day-view__weekstrip-day.is-today {
    border-color: var(--brand, #b07a3a);
    color: var(--brand, #b07a3a);
}
.day-view__weekstrip-day.is-selected {
    background: var(--brand, #b07a3a);
    color: #fff;
    border-color: var(--brand, #b07a3a);
}
.day-view__weekstrip-day.is-selected.is-today { color: #fff; }
.day-view__weekstrip-wd {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}
.day-view__weekstrip-num {
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

/* Мини-календарь месяца. На странице больше не используется напрямую —
   только внутри модалки. Стили оставлены для обратной совместимости. */
.day-view__minimonth {
    border: 1px solid var(--line, #e6dfd5);
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}
/* В модалке border/background не нужны — карточка модалки уже даёт фон. */
.day-view__minimonth--in-modal {
    border: 0;
    padding: 0;
    background: transparent;
}

/* ─── Модалка мини-календаря ─────────────────────────────────────────────
   Большая, «премиальная» карточка месяца: крупная типографика, мягкий
   градиентный фон, подсветка дней с записями/окнами, точки-индикаторы
   под датой и компактная легенда внизу. */
.day-view__cal-modal {
    max-width: 480px;
    padding: 28px 28px 24px;
    background:
        radial-gradient(1200px 200px at 50% -80px, rgba(176, 122, 58, 0.08), transparent 60%),
        var(--surface, #fff);
    border-radius: 18px;
    box-shadow:
        0 24px 60px -20px rgba(58, 36, 12, 0.18),
        0 8px 22px -10px rgba(58, 36, 12, 0.08);
}
.day-view__cal-modal-head {
    margin-bottom: 18px;
    padding-right: 32px;
}
.day-view__cal-modal-title {
    font-size: 22px;
    margin: 0 0 4px;
    line-height: 1.2;
    letter-spacing: -0.2px;
}
.day-view__cal-modal-sub {
    margin: 0;
    font-size: 13px;
}

/* Шапка месяца (стрелки + название) — крупнее, по центру. */
.day-view__minimonth--in-modal .day-view__minimonth-head {
    margin-bottom: 16px;
    padding: 4px 2px;
}
.day-view__minimonth--in-modal .day-view__minimonth-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.1px;
    color: var(--ink, #1a1a1a);
}
.day-view__minimonth--in-modal .day-view__minimonth-arrow {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: var(--ink, #1a1a1a);
    background: #f7f3ec;
    transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.day-view__minimonth--in-modal .day-view__minimonth-arrow:hover {
    background: var(--brand, #b07a3a);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -6px rgba(176, 122, 58, 0.45);
}
.day-view__minimonth--in-modal .day-view__minimonth-arrow svg {
    width: 16px;
    height: 16px;
}

/* Сетка месяца. */
.day-view__minimonth--in-modal .day-view__minimonth-grid {
    gap: 6px;
}
.day-view__minimonth--in-modal .day-view__minimonth-wd {
    font-size: 11.5px;
    padding: 6px 0 10px;
    color: var(--muted, #7a7066);
    font-weight: 600;
    letter-spacing: 0.6px;
}

/* Сама ячейка — теперь flex-колонка: число сверху, точка-индикатор снизу. */
.day-view__minimonth--in-modal .day-view__minimonth-cell {
    flex-direction: column;
    gap: 4px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 12px;
    position: relative;
    padding: 6px 0 8px;
    min-height: 52px;
    transition: background 0.14s, color 0.14s, transform 0.12s, box-shadow 0.14s;
}
.day-view__minimonth--in-modal .day-view__minimonth-cell:hover:not(.is-empty):not(.is-selected) {
    background: #f1ebe0;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(58, 36, 12, 0.15);
}
.day-view__minimonth-num { line-height: 1; }

/* Подсветка занятости. Приоритеты:
     is-selected > is-today > has-bookings > has-slots > обычный.
   Поэтому правила has-* пишем БЕЗ перекрытия is-selected/is-today. */
.day-view__minimonth-cell.has-slots:not(.is-selected):not(.is-today) {
    background: #f3ede0;
}
.day-view__minimonth-cell.has-bookings:not(.is-selected):not(.is-today) {
    background: rgba(176, 122, 58, 0.14);
    color: var(--ink, #1a1a1a);
    font-weight: 600;
}
.day-view__minimonth-cell.is-today.has-bookings,
.day-view__minimonth-cell.is-today.has-slots {
    background: rgba(176, 122, 58, 0.10);
}

/* Сегодня в большой модалке — заметнее: тонкая брендовая обводка. */
.day-view__minimonth--in-modal .day-view__minimonth-cell.is-today:not(.is-selected) {
    box-shadow: inset 0 0 0 1.5px var(--brand, #b07a3a);
}

/* Выбранный день — мягкая тень брендового цвета, чтобы выделялся. */
.day-view__minimonth--in-modal .day-view__minimonth-cell.is-selected {
    box-shadow: 0 6px 16px -6px rgba(176, 122, 58, 0.55);
}

/* Точки-индикаторы: окна — приглушённые, записи — акцентный розово-коричневый. */
.day-view__minimonth-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand, #b07a3a);
    flex: 0 0 6px;
}
.day-view__minimonth-dot--slots    { background: #c8b896; }
.day-view__minimonth-dot--bookings { background: var(--brand, #b07a3a); }

/* На выбранной (is-selected) ячейке точка инверсная — белая, чтобы видно. */
.day-view__minimonth-cell.is-selected .day-view__minimonth-dot {
    background: #fff;
    opacity: 0.95;
}

/* Прошедшие дни — приглушаем, но индикатор всё равно показываем приглушённо. */
.day-view__minimonth-cell.is-past.has-bookings,
.day-view__minimonth-cell.is-past.has-slots { opacity: 0.55; }

/* Легенда снизу модалки. */
.day-view__minimonth-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--line, #e6dfd5);
    font-size: 12.5px;
    color: var(--muted, #7a7066);
}
.day-view__minimonth-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.day-view__minimonth-legend .day-view__minimonth-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
}

/* Адаптив: на узких экранах не делаем модалку шире viewport. */
@media (max-width: 540px) {
    .day-view__cal-modal { padding: 22px 18px 20px; }
    .day-view__cal-modal-title { font-size: 19px; }
    .day-view__minimonth--in-modal .day-view__minimonth-cell {
        font-size: 15px;
        min-height: 46px;
    }
    .day-view__minimonth--in-modal .day-view__minimonth-arrow {
        width: 34px;
        height: 34px;
    }
}
.day-view__minimonth-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.day-view__minimonth-title {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink, #1a1a1a);
}
.day-view__minimonth-arrow {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--ink, #1a1a1a);
    text-decoration: none;
    background: #f7f3ec;
}
.day-view__minimonth-arrow:hover { background: #efe7d7; }
.day-view__minimonth-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.day-view__minimonth-wd {
    font-size: 11px;
    text-align: center;
    color: var(--muted, #7a7066);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 4px 0;
}
.day-view__minimonth-cell {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--ink, #1a1a1a);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.day-view__minimonth-cell.is-empty { visibility: hidden; }
.day-view__minimonth-cell:hover { background: #f7f3ec; }
.day-view__minimonth-cell.is-past { opacity: 0.5; }
.day-view__minimonth-cell.is-today {
    color: var(--brand, #b07a3a);
    font-weight: 600;
}
.day-view__minimonth-cell.is-selected {
    background: var(--brand, #b07a3a);
    color: #fff;
}
.day-view__minimonth-cell.is-selected.is-today { color: #fff; }

/* Кнопки nav-btns в режиме by_day могут быть «активными»
   («На сегодня», когда выбрана сегодняшняя дата). */
.nav-btns .btn.is-active {
    background: var(--brand, #b07a3a);
    color: #fff;
    border-color: var(--brand, #b07a3a);
}

/* В day-view DOM .week-calendar__heads / .week-calendar__days — это набор
   колонок мастеров фиксированной ширины (--col-base из JS), а не семь дней. */
.week-calendar--day-view .week-calendar__heads,
.week-calendar--day-view .day-view__col-heads,
.week-calendar--day-view .week-calendar__days {
    display: flex;
}

/* Полу-часовые риски в day-view — мельче и бледнее. Целые часы остаются
   на дефолтном стиле .week-calendar__hour. Шкала чуть шире, чтобы
   «09:30» помещалось без переноса. */
.week-calendar--day-view .week-calendar__scale {
    --scale-w: 56px;
    width: 56px;
}
.week-calendar--day-view .week-calendar__hour.is-half-mark {
    font-size: 10px;
    opacity: 0.6;
}
.week-calendar--day-view .week-calendar__hour.is-hour-mark {
    font-weight: 600;
}
.week-calendar--day-view .week-calendar__day {
    flex: 0 0 var(--col-base, 280px);
    min-width: 280px;
    position: relative;
    background: #fff;
    border-right: 1px solid var(--line, #e6dfd5);
}
.week-calendar--day-view .week-calendar__day.is-past { background: #fbfaf6; }
.day-view__col-head {
    flex: 0 0 var(--col-base, 280px);
    min-width: 280px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-right: 1px solid var(--line, #e6dfd5);
    background: #fff;
    position: relative;
}
.day-view__col-head::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--clr, #b07a3a);
    border-radius: 0 0 2px 2px;
}
.day-view__col-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #f7f3ec;
}
.day-view__col-avatar--text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
}
.day-view__col-info { min-width: 0; overflow: hidden; }
.day-view__col-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.day-view__col-hours {
    font-size: 12px;
    color: var(--muted, #7a7066);
    white-space: nowrap;
}

/* Слот в day-view — тонкая цветная полоса слева, время сверху. */
.sc-slot--day {
    border-left-width: 3px;
    border-left-style: solid;
    padding: 4px 8px;
}

/* Бронь в day-view — высота честно по диапазону времени (inline height).
   Шкала рассчитана так, что в 30 мин (= 72 px) помещаются все 4 строки
   контента без вылезания. При hover приподнимаем над соседями. */
.sc-booking--day {
    border-left: 3px solid var(--clr, #b07a3a);
    padding: 5px 8px 6px;
    text-align: left;
    line-height: 1.2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 2;
}
.sc-booking--day:hover { z-index: 5; box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
.sc-booking--day .sc-booking__time {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 1px;
}
.sc-booking--day .sc-booking__dur { font-weight: 400; }
.sc-booking--day .sc-booking__client {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #1a1a1a);
    word-break: break-word;
    line-height: 1.15;
}
.sc-booking--day .sc-booking__svc {
    display: block;
    font-size: 12px;
    color: var(--ink, #1a1a1a);
    word-break: break-word;
    line-height: 1.15;
}
.sc-booking--day .sc-booking__phone {
    display: block;
    font-size: 11px;
    word-break: break-word;
    line-height: 1.15;
}

/* =====================================================
   Подарочные сертификаты — карточка и дизайны
===================================================== */
.gc-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 22px;
    padding: 28px 32px;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto 1fr auto;
    box-shadow: 0 16px 40px rgba(20, 16, 12, 0.18);
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.2px;
}
.gc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.gc-card::after {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 14px;
    pointer-events: none;
}
.gc-card > * { position: relative; z-index: 2; }
.gc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.9;
}
.gc-card__brand {
    font-weight: 700;
    letter-spacing: 3px;
}
.gc-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
}
.gc-card__label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    opacity: 0.85;
}
.gc-card__amount {
    font-size: clamp(38px, 5.5vw, 64px);
    font-weight: 700;
    line-height: 1;
    margin: 4px 0 6px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
.gc-card__issuer {
    font-size: 18px;
    font-weight: 600;
    opacity: 0.95;
}
.gc-card__recipient {
    font-size: 14px;
    opacity: 0.85;
    margin-top: 2px;
}
.gc-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}
.gc-card__code {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 17px;
    letter-spacing: 3px;
    background: rgba(0, 0, 0, 0.18);
    padding: 8px 12px;
    border-radius: 10px;
}
.gc-card__expiry {
    font-size: 12px;
    opacity: 0.8;
    text-align: right;
}
.gc-card__used-stamp {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.gc-card__used-stamp span {
    transform: rotate(-14deg);
    border: 4px solid rgba(255, 255, 255, 0.85);
    color: rgba(255, 255, 255, 0.92);
    padding: 10px 30px;
    font-weight: 800;
    font-size: clamp(28px, 4vw, 48px);
    letter-spacing: 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* — Дизайны фонов — реализованы только CSS, без внешних картинок */
.gc-design--rose::before {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255, 215, 230, 0.85), transparent 60%),
        radial-gradient(80% 60% at 0% 100%, rgba(255, 175, 200, 0.7), transparent 60%),
        linear-gradient(135deg, #f7b6c8 0%, #e8869f 55%, #c75577 100%);
}
.gc-design--gold::before {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255, 220, 130, 0.5), transparent 55%),
        radial-gradient(60% 50% at 10% 90%, rgba(190, 130, 30, 0.5), transparent 60%),
        linear-gradient(135deg, #1c140d 0%, #3a281a 50%, #6b4520 100%);
}
.gc-design--gold::after { border-color: rgba(255, 215, 130, 0.55); }
.gc-design--mint::before {
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(220, 255, 230, 0.85), transparent 60%),
        radial-gradient(80% 70% at 100% 100%, rgba(120, 220, 180, 0.7), transparent 60%),
        linear-gradient(135deg, #a8e6cf 0%, #5cc7a4 55%, #2f9b7a 100%);
    color: #fff;
}
.gc-design--night::before {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(140, 170, 255, 0.4), transparent 55%),
        radial-gradient(80% 60% at 0% 100%, rgba(180, 140, 255, 0.3), transparent 60%),
        linear-gradient(135deg, #0e1230 0%, #1c2360 50%, #3a3a8e 100%);
}
.gc-design--night::after { border-color: rgba(220, 220, 255, 0.45); }
.gc-design--peach::before {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255, 230, 200, 0.85), transparent 60%),
        radial-gradient(80% 60% at 0% 100%, rgba(255, 180, 130, 0.7), transparent 60%),
        linear-gradient(135deg, #ffd2a4 0%, #ffa977 55%, #d97a45 100%);
}
.gc-design--mono::before {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
        linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 50%, #4a4a4a 100%);
}
.gc-design--mono::after { border-color: rgba(255, 255, 255, 0.5); }

/* Превью-плитки в редакторе сертификата */
.gc-design-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.gc-design-tile {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.gc-design-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12); }
.gc-design-tile input { position: absolute; opacity: 0; pointer-events: none; }
.gc-design-tile__bg {
    position: absolute;
    inset: 0;
    border-radius: 10px;
}
.gc-design-tile__name {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 2;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.gc-design-tile.is-selected {
    border-color: var(--pink, #d05a85);
    box-shadow: 0 0 0 3px rgba(208, 90, 133, 0.18);
}
.gc-design-tile.is-selected::after {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 2;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Список сертификатов в кабинете */
.gc-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.gc-list__item {
    background: var(--bg-1, #fff);
    border: 1px solid var(--line, #ece7e1);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gc-list__item .gc-card { aspect-ratio: 16 / 9; box-shadow: 0 6px 16px rgba(20, 16, 12, 0.12); }
.gc-list__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 12px;
    color: var(--ink-muted, #8a8278);
}
.gc-list__meta b { color: var(--ink, #1a1a1a); font-weight: 600; }
.gc-list__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.gc-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.gc-status-badge--active    { background: #e1f7e6; color: #1c7a37; }
.gc-status-badge--used      { background: #f3e7e7; color: #843333; }
.gc-status-badge--cancelled { background: #efeae5; color: #6b6b6b; }

/* Печатная страница сертификата */
.gc-public {
    max-width: 720px;
    margin: 30px auto;
    padding: 0 16px;
}
.gc-public .gc-card {
    aspect-ratio: 16 / 9;
    box-shadow: 0 30px 80px rgba(20, 16, 12, 0.18);
}
.gc-public__note {
    margin: 24px 0;
    background: var(--bg-2, #faf6f1);
    border: 1px solid var(--line, #ece7e1);
    border-radius: 12px;
    padding: 16px 18px;
    color: var(--ink, #1a1a1a);
    line-height: 1.5;
}
.gc-public__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}
@media print {
    body { background: #fff !important; }
    .gc-public { margin: 0 auto; padding: 24px; max-width: none; }
    .gc-public__actions, .site-header, .site-footer, .sidebar { display: none !important; }
    .gc-public .gc-card { aspect-ratio: 16/9; max-width: 720px; margin: 0 auto; }
}