/* Сброс tap highlight и запрет копирования текста */
* {
    -webkit-tap-highlight-color: transparent !important;
}

html, body {
    touch-action: pan-x pan-y manipulation !important;
}

body {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

input, textarea, select {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* Переменные для быстрой подстройки Liquid Glass эффекта */
:root {
    --page-x: 20px;
    --header-gap: 12px;
    --section-gap: 12px;
    --heading-to-card-gap: 8px;
    --card-to-section-gap: 12px;
    
    --time-card-height: 156px;
    --appointment-avatar-size: 56px;
    --appointment-card-padding: 12px 16px;
    --quick-card-height: 148px;
    --tabbar-height: 80px;
    --tabbar-item-height: 60px;
    
    --glass-blur: 14px;
    --glass-saturate: 140%;
    
    --bg-position-x: 54%;
    --bg-position-y: 6%; /* Сдвинуто выше и левее для идеального попадания солнца в часы */

    --ios-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ios-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Медиа-запрос для компактных по высоте iPhone экранов (например, iPhone 13 mini / 375x812) */
@media (max-height: 830px) {
    :root {
        --page-x: 16px;
        --header-gap: 8px;
        --section-gap: 10px;
        --heading-to-card-gap: 6px;
        --card-to-section-gap: 10px;
        
        --time-card-height: 136px;
        --appointment-avatar-size: 48px;
        --appointment-card-padding: 10px 14px;
        --quick-card-height: 132px;
        --tabbar-height: 72px;
        --tabbar-item-height: 54px;
        --bg-position-x: 54%;
        --bg-position-y: 4%;
    }
    .time-card-val {
        font-size: 46px !important;
    }
    .home-title {
        font-size: 24px !important;
    }
    .home-kicker {
        font-size: 13px !important;
    }
    .section-title {
        font-size: 15px !important;
    }
    .quick-actions-grid {
        gap: 12px !important;
    }
    .action-card-text {
        margin-top: 6px !important;
    }
    .action-card-text h3 {
        font-size: 14px !important;
    }
    .action-card-text p {
        font-size: 11px !important;
    }
    .action-card-icon-wrapper {
        width: 46px !important;
        height: 46px !important;
        border-radius: 12px !important;
    }
    .action-card-icon-wrapper svg {
        width: 20px !important;
        height: 20px !important;
    }
    .bottom-nav {
        padding: 0 6px !important;
    }
}

html {
    width: 100% !important;
    min-height: -webkit-fill-available !important;
    min-height: var(--app-vh-safe, 100dvh) !important;
    height: var(--app-vh-safe, 100dvh) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #0b1526 !important;
    overflow-x: hidden !important;
}

html.is-home-active,
html.is-appointments-active,
html.is-clients-active {
    width: 100% !important;
    min-height: var(--app-vh-safe, 100dvh) !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
}

html.is-sheet-open,
html.is-scroll-locked {
    width: 100% !important;
    min-height: var(--app-vh-safe, 100dvh) !important;
    height: var(--app-vh-safe, 100dvh) !important;
    max-height: var(--app-vh-safe, 100dvh) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    scrollbar-width: none !important;
}

html.is-home-active::-webkit-scrollbar,
html.is-appointments-active::-webkit-scrollbar,
html.is-clients-active::-webkit-scrollbar,
html.is-sheet-open::-webkit-scrollbar,
html.is-scroll-locked::-webkit-scrollbar,
body.is-home-active::-webkit-scrollbar,
body.is-appointments-active::-webkit-scrollbar,
body.is-clients-active::-webkit-scrollbar,
body.is-sheet-open::-webkit-scrollbar,
body.is-scroll-locked::-webkit-scrollbar {
    display: none !important;
}

body {
    width: 100% !important;
    min-height: -webkit-fill-available !important;
    min-height: var(--app-vh-safe, 100dvh) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #0b1526 !important;
    overflow-x: hidden !important;
}

body.is-home-active,
body.is-appointments-active,
body.is-clients-active {
    width: 100% !important;
    min-height: -webkit-fill-available !important;
    min-height: var(--app-vh-safe, 100dvh) !important;
    background: #0b1526 !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
}

body.is-home-active.is-scroll-locked,
body.is-appointments-active.is-scroll-locked,
body.is-clients-active.is-scroll-locked,
body.is-sheet-open.is-scroll-locked {
    top: 0 !important;
    height: var(--app-vh-safe, 100dvh) !important;
    max-height: var(--app-vh-safe, 100dvh) !important;
    overflow: hidden !important;
}



/* Корневой контейнер с изоляцией контекста наложения */
.app-shell {
    width: 100% !important;
    min-height: -webkit-fill-available !important;
    min-height: var(--app-vh-safe, 100dvh) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative;
    isolation: isolate;
    background: transparent !important;
}

/* Единый фиксированный слой фона с живым небом, облаками и солнцем */
.mobile-app::before {
    content: "";
    position: fixed;
    inset: 0 0 calc(-1 * env(safe-area-inset-bottom)) 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(
          180deg,
          rgba(5, 34, 67, 0.18) 0%,
          rgba(5, 34, 67, 0.08) 45%,
          rgba(5, 34, 67, 0.15) 100%
        ),
        var(--app-wallpaper-url, url("fon/bg.webp"));
    background-position: var(--app-wallpaper-position, center center);
    background-size: cover;
    background-repeat: no-repeat;
    transition: background-image 800ms ease, background-position 800ms ease, opacity 420ms ease !important; /* Плавная смена фона при переключении времени суток */
}
.mobile-app.no-transition::before {
    transition: none !important;
}

.mobile-app.has-flower-motion::before {
    opacity: 0;
}

.flower-motion-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    background: #141219;
    transition: opacity 420ms ease;
}

.flower-motion-layer.is-active.is-ready {
    opacity: 1;
}

.flower-motion-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

.screen {
    position: relative;
    z-index: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
}

.bottom-nav,
#react-bottom-nav-root {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .flower-motion-layer {
        display: none;
    }
}

/* Дневная тема с новым качественным фоном */
.mobile-app.theme-day::before {
    background-image:
        linear-gradient(
          180deg,
          rgba(5, 34, 67, 0.18) 0%,
          rgba(5, 34, 67, 0.08) 45%,
          rgba(5, 34, 67, 0.15) 100%
        ),
        var(--app-wallpaper-url, url("fon/day_bg.webp"));
    background-position: var(--app-wallpaper-position, center center);
}

/* Вечерняя тема с красивым закатным фоном */
.mobile-app.theme-evening::before {
    background-image:
        linear-gradient(
          180deg,
          rgba(5, 34, 67, 0.18) 0%,
          rgba(5, 34, 67, 0.08) 45%,
          rgba(5, 34, 67, 0.15) 100%
        ),
        var(--app-wallpaper-url, url("fon/evening_bg.webp"));
    background-position: var(--app-wallpaper-position, center center);
}

/* Ночная тема с красивым звездным небом */
.mobile-app.theme-night::before {
    background-image:
        linear-gradient(
          180deg,
          rgba(5, 34, 67, 0.18) 0%,
          rgba(5, 34, 67, 0.08) 45%,
          rgba(5, 34, 67, 0.15) 100%
        ),
        var(--app-wallpaper-url, url("fon/night_bg.webp"));
    background-position: var(--app-wallpaper-position, 62% 2%);
}

.mobile-app {
    width: 100% !important;
    min-height: -webkit-fill-available !important;
    min-height: var(--app-vh-safe, 100dvh) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.screen-home {
    box-sizing: border-box;
    min-height: -webkit-fill-available !important;
    min-height: var(--app-vh-safe, 100dvh) !important;
    padding: max(env(safe-area-inset-top), 20px) var(--page-x) calc(var(--tabbar-height) + max(env(safe-area-inset-bottom), 20px)) var(--page-x);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Manrope", sans-serif;
}

/* Скрываем скроллбар */
.screen-home::-webkit-scrollbar {
    display: none;
}

/* Верхний блок приветствия */
.home-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--header-gap);
}

.home-welcome {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.home-kicker {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: -0.01em;
}

.home-title {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.home-date {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.icon-button-bell,
.icon-button-settings,
.icon-button-add {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.33);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), 0 6px 16px rgba(3, 24, 53, 0.15);
}

.icon-button-bell:active,
.icon-button-settings:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.15);
}

.icon-button-bell svg,
.icon-button-settings svg {
    width: 22px;
    height: 22px;
}

.icon-button-bell {
    position: relative;
}

.icon-button-bell::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3b30;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(120, 0, 0, 0.12), 0 2px 6px rgba(255, 59, 48, 0.45);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 180ms var(--ios-ease), transform 180ms var(--ios-ease);
    pointer-events: none;
}

.icon-button-bell.has-notifications::after {
    opacity: 1;
    transform: scale(1);
}

/* Карточка времени (Кристальный Liquid Glass, блюр убран для максимальной прозрачности) */
.glass-card-time {
    position: relative;
    height: var(--time-card-height);
    border-radius: 36px;
    border: 1px solid rgba(255, 255, 255, 0.48) !important;
    background:
      linear-gradient(
        105deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 52%,
        rgba(255, 255, 255, 0.02) 100%
      ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 10px 22px rgba(255, 255, 255, 0.06),
        0 14px 30px rgba(3, 25, 55, 0.18) !important;
    overflow: hidden;
    margin-bottom: var(--card-to-section-gap);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 20px;
    box-sizing: border-box;
}

.glass-card-time::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 2;
}

.time-card-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.time-card-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.location-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.time-card-val {
    font-size: 56px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.015em;
    margin: 4px 0;
    display: flex;
    align-items: center;
}

/* Строка погоды внизу карточки (вместо даты) */
.time-card-weather-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: -0.01em;
}

.weather-row-icon {
    font-size: 16px;
    line-height: 1;
}

.weather-row-temp {
    color: #ffffff;
    font-weight: 700;
}

.weather-row-sep {
    color: rgba(255, 255, 255, 0.4);
}

.weather-row-desc {
    color: rgba(255, 255, 255, 0.8);
}

/* Заголовки разделов */
.section-title {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 var(--heading-to-card-gap) 0;
    letter-spacing: -0.01em;
}

/* Карточка ближайшей записи (Светлая и прозрачная) */
.glass-card-appointment {
    position: relative;
    display: grid;
    grid-template-columns: var(--appointment-avatar-size) minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--appointment-card-padding);
    border-radius: 28px;
    margin-bottom: var(--card-to-section-gap);
    box-sizing: border-box;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s;
    
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.03) 100%
      ) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 8px 20px rgba(255, 255, 255, 0.04),
      0 10px 24px rgba(3, 24, 53, 0.12) !important;
    overflow: hidden;
}

.glass-card-appointment:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.18) !important;
}

.glass-card-appointment::after,
.quick-action-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0) 36%
      );
    z-index: 2;
}

.appointment-avatar-wrapper {
    width: var(--appointment-avatar-size);
    height: var(--appointment-avatar-size);
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

.appointment-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.appointment-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 3;
}

.appointment-main h3 {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.appointment-service {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.appointment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.meta-icon {
    width: 12px;
    height: 12px;
    opacity: 0.8;
}

.meta-separator {
    color: rgba(255, 255, 255, 0.3);
}

.appointment-chip-wrapper {
    flex: 0 0 auto;
    white-space: nowrap;
    z-index: 3;
    min-width: 0;
}

.pill-chip-today {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Сетка быстрых действий */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: var(--section-gap);
}

/* Карточки быстрых действий (Форма сделана квадратной) */
.quick-action-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px;
    height: var(--quick-card-height);
    border-radius: 28px;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s;
    text-align: left;
    outline: none;
    overflow: hidden;
    
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.03) 100%
      ) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 8px 20px rgba(255, 255, 255, 0.04),
      0 10px 24px rgba(3, 24, 53, 0.12) !important;
}

.quick-action-card:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.18) !important;
}

/* Строго квадратные контейнеры иконок с глянцевым внутренним бликом */
.action-card-icon-wrapper {
    width: 54px !important;
    height: 54px !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

.color-blue {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.color-green {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.color-coral {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
}

.color-purple {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.action-card-icon-wrapper svg {
    width: 24px !important;
    height: 24px !important;
}

.action-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
    z-index: 3;
}

.action-card-text h3 {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
}

.action-card-text p {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Нижняя навигация (Позиционируется абсолютно внутри .mobile-app для идеального центрирования на десктопах) */
/* React-версия нижнего FloatingDock (теперь на ванильном Liquid Glass) */
#react-bottom-nav-root {
    position: fixed !important;
    left: 50% !important;
    width: calc(100% - 32px) !important;
    max-width: calc(430px - 32px) !important;
    margin-left: calc(-1 * min(100% - 32px, 430px - 32px) / 2) !important;
    bottom: max(calc(env(safe-area-inset-bottom) - 22px), 4px) !important;
    z-index: 1000 !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: auto !important; /* Разрешаем клики на самом доке */
    transition: transform 0.38s var(--ios-ease), opacity 0.28s ease, filter 0.28s ease !important;
    will-change: opacity;
    
    /* Liquid Glass Эффект перенесен на сам рут */
    height: 68px !important;
    box-sizing: border-box !important;
    border-radius: 26px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.12) 100%) !important;
    backdrop-filter: blur(45px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(45px) saturate(140%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.35),
        inset 0 10px 20px rgba(255, 255, 255, 0.04),
        0 12px 36px rgba(0, 0, 0, 0.28) !important;
}

#react-bottom-nav-root > div {
    pointer-events: auto !important; /* Разрешаем клики на самом доке */
    width: 100% !important;
    height: 100% !important;
}

/* Скрываем док при открытом листе */
body.is-sheet-open #react-bottom-nav-root {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + max(calc(env(safe-area-inset-bottom) - 22px), 4px) + 24px)) scale(0.98) !important;
    filter: blur(8px) saturate(90%) !important;
}

/* Скрываем старую навигацию */
.bottom-nav {
    display: none !important;
}

/* Стили ванильной Liquid Glass навигации */
.liquid-nav-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 26px;
    overflow: visible !important;
    contain: none !important;
    
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Адаптация Liquid Glass эффекта таббара под время суток */
body.theme-morning #react-bottom-nav-root {
    background: linear-gradient(135deg, rgba(215, 235, 255, 0.16) 0%, rgba(195, 220, 255, 0.12) 100%) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 10px 20px rgba(180, 215, 255, 0.08),
        0 12px 35px rgba(5, 20, 40, 0.25) !important;
    overflow: visible !important;
}

body.theme-day #react-bottom-nav-root {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.11) 100%) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    overflow: visible !important;
}

body.theme-evening #react-bottom-nav-root {
    background: linear-gradient(135deg, rgba(255, 232, 215, 0.18) 0%, rgba(255, 220, 195, 0.12) 100%) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 10px 20px rgba(255, 200, 175, 0.08),
        0 12px 35px rgba(25, 15, 5, 0.25) !important;
    overflow: visible !important;
}

body.theme-night #react-bottom-nav-root {
    background: linear-gradient(135deg, rgba(12, 22, 38, 0.5) 0%, rgba(9, 14, 24, 0.45) 100%) !important;
    backdrop-filter: blur(60px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(60px) saturate(125%) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 12px 25px rgba(255, 255, 255, 0.02),
        0 12px 35px rgba(0, 0, 0, 0.45) !important;
    overflow: visible !important;
}

/* Быстрый и плавный индикатор (без обрезки по краям) */
.liquid-nav-indicator {
    position: absolute;
    top: 0;
    left: 6px;
    width: calc((100% - 12px) / 3);
    height: 100%;
    z-index: 1;
    transition: transform 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    overflow: visible !important;
    pointer-events: none;
}

/* Сама капля с запасом пространства для растяжения без обрезания */
.liquid-nav-indicator::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1),
        0 6px 16px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 340ms cubic-bezier(0.2, 0.9, 0.2, 1.05), background 300ms ease;
    will-change: transform;
    transform-origin: center center;
}

/* Ликвидный пружинящий отклик при переключении или повторном нажатии на ту же вкладку */
.liquid-nav-indicator.is-moving::after,
.liquid-nav-indicator.is-pulsing::after {
    transform: scaleX(1.14) scaleY(0.92);
}

/* Вкладка */
.liquid-nav-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    gap: 1px;
    z-index: 2;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.3s ease;
    overflow: visible !important;
    touch-action: pan-x pan-y manipulation;
}

/* Контейнер иконки */
.nav-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    z-index: 1;
    overflow: visible !important;
}

.liquid-nav-item .nav-icon-wrapper,
.liquid-nav-item > span {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    /* transition override removed */
}

.liquid-nav-item svg {
    width: 22px;
    height: 22px;
    stroke: rgba(255, 255, 255, 0.65);
    stroke-width: 2.2px;
    transition: transform 280ms cubic-bezier(0.175, 0.885, 0.32, 1.275), stroke 180ms ease;
    will-change: transform;
}

.liquid-nav-item:active svg {
    transform: scale(0.82) translateZ(0);
}

/* Пружинная микро-анимация при повторном клике по активной вкладке */
.icon-bounce-tap {
    animation: iconBounceSpring 340ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes iconBounceSpring {
    0% { transform: scale(0.82) translateZ(0); }
    50% { transform: scale(1.18) translateY(-2px) translateZ(0); }
    100% { transform: scale(1.08) translateY(-1px) translateZ(0); }
}

.liquid-nav-item span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.01em;
    opacity: 0.8;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}

/* Активное состояние */
.liquid-nav-item.is-active {
    color: #ffffff;
}

.liquid-nav-item.is-active svg {
    transform: scale(1.08) translateY(-1px) translateZ(0);
    stroke: #ffffff;
    filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.4));
}

.liquid-nav-item.is-active span {
    opacity: 1;
    transform: scale(1.02);
    color: #ffffff;
}

/* Анимированные фоновые "жидкие капли" для преломления жидкого стекла */
.nav-glass-blob {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(14px) !important;
    pointer-events: none !important;
    z-index: -2 !important; /* Под линзой и контентом */
    mix-blend-mode: screen !important;
    opacity: 0.7 !important;
}

.nav-glass-blob--1 {
    width: 65px !important;
    height: 65px !important;
    background: radial-gradient(circle, rgba(120, 182, 255, 0.28) 0%, transparent 75%) !important;
    top: -15px !important;
    left: 15% !important;
    animation: navBlobFloat1 8s infinite alternate ease-in-out !important;
}

.nav-glass-blob--2 {
    width: 80px !important;
    height: 80px !important;
    background: radial-gradient(circle, rgba(224, 132, 255, 0.24) 0%, transparent 75%) !important;
    bottom: -25px !important;
    right: 12% !important;
    animation: navBlobFloat2 10s infinite alternate ease-in-out !important;
}

.nav-glass-blob--3 {
    width: 55px !important;
    height: 55px !important;
    background: radial-gradient(circle, rgba(255, 182, 120, 0.22) 0%, transparent 75%) !important;
    top: 50% !important;
    left: 55% !important;
    transform: translateY(-50%) !important;
    animation: navBlobFloat3 7s infinite alternate ease-in-out !important;
}

@keyframes navBlobFloat1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, 12px) scale(1.15); }
}

@keyframes navBlobFloat2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-35px, -12px) scale(0.9); }
}

@keyframes navBlobFloat3 {
    0% { transform: translate(0, -50%) scale(0.95); }
    100% { transform: translate(20px, calc(-50% + 15px)) scale(1.1); }
}

body.is-sheet-open .bottom-nav {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + max(env(safe-area-inset-bottom), 24px))) scale(0.98) !important;
    filter: blur(8px) saturate(90%) !important;
}


/* Псевдоэлемент для придания tab bar глубины и подсветки верхнего края */
.bottom-nav::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  display: block !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.02) 20%,
      transparent 50%
    ),
    linear-gradient(
      0deg,
      rgba(2, 28, 60, 0.06) 0%,
      transparent 30%
    ) !important;
}

/* Внешний контейнер активной вкладки (отвечает за перемещение) */
.nav-active-indicator {
    position: absolute;
    top: 8px !important; /* Внутренний отступ 6-8px */
    height: var(--tabbar-item-height) !important;
    left: 8px;
    width: calc((100% - 16px) / 3);
    z-index: 1 !important;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition: transform 300ms var(--ios-ease), width 300ms var(--ios-ease) !important;
    will-change: transform, width !important; /* Статически для избежания динамического создания слоев */
}

/* Направление движения для смещения точки масштабирования */
.is-moving-right .nav-active-indicator__lens {
    transform-origin: left center !important;
}
.is-moving-left .nav-active-indicator__lens {
    transform-origin: right center !important;
}

/* Внутренняя линза (отвечает за squeeze/stretch и Liquid Glass) */
.nav-active-indicator__lens {
    width: 100%;
    height: 100%;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important; /* Яркий тонкий стеклянный контур */
    position: relative !important;

    background:
      radial-gradient(
        110% 110% at 35% 10%,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.08) 35%,
        rgba(255, 255, 255, 0.01) 70%,
        rgba(100, 180, 255, 0.12) 100%
      ) !important; /* Прозрачный глянцевый градиент */

    backdrop-filter:
      blur(10px)
      saturate(200%)
      brightness(1.22) !important; /* Снижено размытие до 10px для высокой прозрачности */

    -webkit-backdrop-filter:
      blur(10px)
      saturate(200%)
      brightness(1.22) !important;

    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.65),
      inset -1px -1px 0 rgba(255, 255, 255, 0.15),
      inset 0 6px 12px rgba(255, 255, 255, 0.20),
      0 8px 24px rgba(0, 0, 0, 0.16),
      0 2px 4px rgba(0, 0, 0, 0.06) !important; /* Выраженная тень для 3D объема */

    /* Принудительное 3D-ускорение на мобильных GPU для капли */
    transform: translate3d(0, 0, 0) scaleX(1) scaleY(1);
    transform-origin: center center;
    transition: transform 180ms var(--ios-ease), border-color 200ms var(--ios-ease), box-shadow 200ms var(--ios-ease), backdrop-filter 150ms ease, -webkit-backdrop-filter 150ms ease !important;
    will-change: transform !important; /* Статически для плавного старта */
}

/* Динамическое снижение нагрузки размытия (LOD) на GPU телефонов во время активного движения */
.nav-active-indicator.is-moving .nav-active-indicator__lens {
    backdrop-filter: blur(5px) saturate(130%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(5px) saturate(130%) brightness(1.08) !important;
}

/* Верхний яркий блик линзы */
.nav-active-indicator__lens::before {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.60) 0%,
      rgba(255, 255, 255, 0.15) 35%,
      transparent 70%
    ) !important;
    opacity: 0.90;
    transition: opacity 200ms var(--ios-ease) !important;
    z-index: 1 !important;
}

/* Нижнее рассеянное отражение (глянцевый отсвет) */
.nav-active-indicator__lens::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background: radial-gradient(
      circle at 50% 90%,
      rgba(255, 255, 255, 0.35) 0%,
      transparent 60%
    ) !important;
    opacity: 0.80;
    transition: opacity 200ms var(--ios-ease) !important;
    z-index: 1 !important;
}

/* Фазы капельной деформации */
.nav-active-indicator__lens.state-start {
    transform: scaleX(1.08) scaleY(0.92) !important; /* Умеренное сжатие */
    transition: transform 55ms var(--ios-ease) !important;
}

.nav-active-indicator__lens.state-move {
    transform: scaleX(1.15) scaleY(0.88) !important; /* Умеренное вытягивание в полете, без пережатия */
    transition: transform 225ms var(--ios-ease) !important;
}

.nav-active-indicator__lens.state-arrival {
    transform: scaleX(0.92) scaleY(1.08) !important; /* Умеренное вытягивание по вертикали при прибытии */
    transition: transform 85ms var(--ios-spring) !important;
}

/* Усиление блика и контура при arrival и wobble */
.nav-active-indicator__lens.is-arrival,
.nav-active-indicator__lens.is-wobbling {
    border-color: rgba(255, 255, 255, 0.60) !important;
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.75),
      inset -1px -1px 0 rgba(255, 255, 255, 0.20),
      inset 0 6px 12px rgba(255, 255, 255, 0.30),
      0 10px 28px rgba(0, 0, 0, 0.22) !important;
}

.nav-active-indicator__lens.is-arrival::before,
.nav-active-indicator__lens.is-wobbling::before {
    opacity: 0.95 !important;
}

.nav-item {
    position: relative !important;
    z-index: 2 !important;
    flex-grow: 1;
    height: 100% !important; /* Выравнивание строго по центру */
    border-radius: 18px;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: rgba(255, 255, 255, 0.62) !important; /* Неактивные пункты */
    cursor: pointer;
    padding: 0;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
    transition:
      transform 200ms var(--ios-ease),
      opacity 200ms var(--ios-ease),
      color 240ms var(--ios-ease) !important;
    font-family: inherit;
    box-shadow: none !important;
}

.nav-item::before,
.nav-item::after {
    display: none !important;
    content: none !important;
}

/* Мгновенная тактильная реакция на зажатие пальцем */
.nav-item.is-pressed {
    transform: scale(0.97) !important;
    transition: transform 60ms var(--ios-ease) !important;
}

.nav-item:active {
    transform: scale(0.97) !important;
}

.nav-item svg,
.nav-item .apple-nav-icon {
    width: 26px !important; /* Крупные и читаемые иконки */
    height: 26px !important;
    stroke-width: 2.2px !important; /* Слегка утолщенный контур для SF Symbols */
    transition: transform 280ms var(--ios-spring), filter 280ms var(--ios-ease) !important;
}

.nav-item span {
    font-size: 13px !important; /* Крупные и разборчивые подписи */
    font-weight: 600 !important;
    color: inherit !important;
    transition: transform 280ms var(--ios-ease), opacity 280ms var(--ios-ease) !important;
}

/* Активное состояние кнопки: полностью белая иконка и текст */
.nav-item.is-active {
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.nav-item.is-active svg,
.nav-item.is-active .apple-nav-icon {
    transform: translateY(-4px) scale(1.15) !important;
    filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.45)) !important;
}

/* Анимации легкого подпрыгивания иконки и подписи при повторном клике */
.nav-item.is-wobbling svg {
    animation: navIconPop 220ms var(--ios-spring);
}

.nav-item.is-wobbling span {
    animation: navLabelPop 220ms var(--ios-ease);
}

@keyframes navIconPop {
    0%, 100% { transform: translateY(-2px) scale(1); }
    50% { transform: translateY(-5px) scale(1.04); }
}

@keyframes navLabelPop {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}

.nav-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-badge {
    position: absolute;
    top: -5px !important;
    right: -7px !important;
    background: #ff3b30 !important;
    color: #ffffff !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    min-width: 15px !important;
    height: 15px !important;
    border-radius: 7.5px !important;
    padding: 0 4.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
}

/* Микроанимации кнопок быстрых действий */
.quick-action-card:not(.is-dragging), .glass-card-appointment {
    transition: transform 240ms var(--ios-ease), filter 240ms var(--ios-ease) !important;
    cursor: pointer;
}

.quick-action-card:not(.is-dragging):active, .glass-card-appointment:active,
.quick-action-card:not(.is-dragging).is-pressed, .glass-card-appointment.is-pressed {
    transform: scale(0.98) translateY(1px) !important;
    filter: brightness(0.92) !important;
    transition: transform 100ms var(--ios-ease), filter 100ms var(--ios-ease) !important;
    will-change: transform, filter;
}

.quick-action-card .action-card-icon-wrapper svg {
    transition: transform 240ms var(--ios-ease) !important;
}

.quick-action-card:not(.is-dragging):active .action-card-icon-wrapper svg,
.quick-action-card:not(.is-dragging).is-pressed .action-card-icon-wrapper svg {
    transform: translateY(-1px) scale(1.03);
    transition: transform 100ms var(--ios-ease) !important;
}

/* Стили часов при нажатии */
.glass-card-time {
    transition: transform 240ms var(--ios-ease), filter 240ms var(--ios-ease) !important;
    cursor: pointer;
}

.glass-card-time.is-pressed {
    transform: scale(0.985) translateY(0.5px) !important;
    filter: brightness(0.95) !important;
    transition: transform 80ms var(--ios-ease), filter 80ms var(--ios-ease) !important;
}

/* Анимация кнопки уведомлений и настроек */
.icon-button-bell,
.icon-button-settings {
    transition: transform 200ms var(--ios-ease), filter 200ms var(--ios-ease) !important;
    will-change: transform;
}

.icon-button-bell:active,
.icon-button-bell.is-pressed,
.icon-button-settings:active,
.icon-button-settings.is-pressed {
    transform: scale(0.94) !important;
    transition: transform 80ms var(--ios-ease) !important;
}

.icon-button-bell:active svg,
.icon-button-bell.is-pressed svg {
    animation: bellSwing 220ms ease-in-out;
}

.icon-button-settings:active svg,
.icon-button-settings.is-pressed svg {
    animation: settingsSpin 320ms var(--ios-ease);
}

@keyframes settingsSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(45deg); }
}

@keyframes bellSwing {
    0% { transform: rotate(0); }
    25% { transform: rotate(2.5deg); }
    50% { transform: rotate(-2.5deg); }
    75% { transform: rotate(1.5deg); }
    100% { transform: rotate(0); }
}

.icon-button-bell:hover,
.icon-button-settings:hover {
    filter: brightness(1.1);
}

/* Анимации каскадного появления при первой загрузке */
@keyframes homeItemEntrance {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-app.first-load .home-header,
.mobile-app.first-load .glass-card-time,
.mobile-app.first-load .section-title,
.mobile-app.first-load .glass-card-appointment,
.mobile-app.first-load .quick-actions-grid .quick-action-card,
.mobile-app.first-load .bottom-nav {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Однократная анимация блика активного индикатора */
.mobile-app.first-load .nav-active-indicator__lens::before {
    animation: highlightMove 600ms var(--ios-ease) 350ms forwards;
    opacity: 0;
    transform: translateX(-6px);
}

@keyframes highlightMove {
    to {
        opacity: 0.85;
        transform: translateX(0);
    }
}

/* ==========================================================================
   Apple iOS 26 Liquid Glass Notifications Styles
   ========================================================================== */

.notifications-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms cubic-bezier(0.2, 0.9, 0.2, 1.05);
    will-change: opacity;
}

.notifications-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.notifications-overlay.is-closing {
    opacity: 0;
    transition: opacity 250ms cubic-bezier(0.32, 0, 0.67, 0);
}

.notifications-sheet {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2001;
    height: 90dvh;
    max-height: 90dvh;
    width: min(100%, 430px);
    margin: 0 auto;
    border-radius: 36px 36px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translate3d(0, 105%, 0);
    will-change: transform;
    transition: transform 320ms cubic-bezier(0.2, 0.9, 0.2, 1.05);
    
    /* Liquid Glass default styles */
    backdrop-filter: blur(45px) saturate(140%);
    -webkit-backdrop-filter: blur(45px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 20px 40px rgba(255, 255, 255, 0.05),
        0 15px 50px rgba(0, 0, 0, 0.25);
}

.notifications-sheet.is-open {
    transform: translate3d(0, 0, 0);
}

.notifications-sheet.is-closing {
    transform: translate3d(0, 105%, 0);
    transition: transform 260ms cubic-bezier(0.32, 0, 0.67, 0);
}

/* Time of day adaptations (Liquid Glass tints) */
.notifications-sheet.time-morning {
    background: linear-gradient(135deg, rgba(215, 235, 255, 0.16) 0%, rgba(195, 220, 255, 0.12) 100%);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 20px 40px rgba(180, 215, 255, 0.08),
        0 15px 50px rgba(5, 20, 40, 0.25);
}

.notifications-sheet.time-day {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.11) 100%);
}

.notifications-sheet.time-evening {
    background: linear-gradient(135deg, rgba(255, 232, 215, 0.18) 0%, rgba(255, 220, 195, 0.12) 100%);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 20px 40px rgba(255, 200, 175, 0.08),
        0 15px 50px rgba(25, 15, 5, 0.25);
}

.notifications-sheet.time-night {
    background: linear-gradient(135deg, rgba(12, 22, 38, 0.5) 0%, rgba(9, 14, 24, 0.45) 100%);
    backdrop-filter: blur(60px) saturate(125%);
    border-top-color: rgba(255, 255, 255, 0.16);
    border-left-color: rgba(255, 255, 255, 0.08);
    border-right-color: rgba(255, 255, 255, 0.08);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 25px 50px rgba(255, 255, 255, 0.02),
        0 20px 60px rgba(0, 0, 0, 0.45);
}

/* Drag Handle */
.notifications-drag-handle {
    width: 100%;
    padding: 10px 0 6px;
    display: flex;
    justify-content: center;
    cursor: grab;
    user-select: none;
    z-index: 10;
}

.notifications-drag-handle:active {
    cursor: grabbing;
}

.notifications-drag-handle .sheet-handle {
    width: 36px;
    height: 5px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    transition: background 0.2s;
}

.notifications-drag-handle:hover .sheet-handle {
    background: rgba(255, 255, 255, 0.5);
}

/* Header */
.notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 16px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
    z-index: 10;
}

.notifications-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.5px;
}

.notifications-header-actions {
    display: flex;
    gap: 16px;
}

.notif-header-btn {
    background: transparent;
    border: none;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: color 0.2s, transform 0.1s var(--ios-ease);
}

.notif-header-btn:active {
    transform: scale(0.95);
    color: #ffffff;
}

/* Scroll Area */
.notifications-scroll-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}

/* Pull to Refresh */
.notif-pull-to-refresh {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translateY(0);
    will-change: transform;
}

.pull-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
}

.pull-spinner {
    width: 20px;
    height: 20px;
    transform: rotate(0deg);
    transition: transform 0.1s linear;
}

.pull-spinner circle {
    stroke: currentColor;
    stroke-width: 3.5px;
    stroke-linecap: round;
    transform-origin: center;
}

.pull-spinner.is-refreshing {
    animation: spinnerRotation 1s linear infinite;
}

@keyframes spinnerRotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Groups and List */
.notif-group {
    margin-top: 24px;
}

.notif-group-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0 20px 8px;
}

.notif-items {
    display: flex;
    flex-direction: column;
}

/* Notification Item Wrapper (Swipe & Anim container) */
.notif-item-wrapper {
    position: relative;
    overflow: hidden;
    background: transparent;
    transition: height 320ms var(--ios-ease), margin-bottom 320ms var(--ios-ease), opacity 250ms ease;
    will-change: height, margin-bottom, opacity;
}

.notif-item-wrapper.is-deleted {
    height: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0 !important;
    border-bottom: none !important;
}

/* Red Delete Action Zone */
.notif-delete-action {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100px;
    background: #ff453a;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 36px;
    color: #ffffff;
    cursor: pointer;
    z-index: 1;
    transform: translateX(100%);
    transition: transform 0.2s var(--ios-ease);
}

.notif-delete-action svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.2px;
}

/* Card Row */
.notif-card {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    cursor: pointer;
    z-index: 2;
    transform: translateX(0);
    will-change: transform;
    transition: transform 0.2s var(--ios-ease), background-color 0.2s;
    user-select: none;
}

.notif-card.is-pressed {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Icon Wrapper */
.notif-icon-wrapper {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 14px;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.notif-icon-wrapper svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2px;
}

/* Categories Colors */
.notif-icon-wrapper.cat-appointment { background: #007aff; }
.notif-icon-wrapper.cat-client { background: #34c759; }
.notif-icon-wrapper.cat-report { background: #ff9500; }
.notif-icon-wrapper.cat-stats { background: #af52de; }
.notif-icon-wrapper.cat-system { background: #8e8e93; }
.notif-icon-wrapper.cat-birthday { background: #ff2d55; }

/* Body Content */
.notif-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* Ensures text truncation works */
}

.notif-title {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.notif-desc {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Meta info */
.notif-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    flex-shrink: 0;
}

.notif-time {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
}

.unread-dot {
    width: 7px;
    height: 7px;
    background: #007aff;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px #007aff;
    transition: opacity 0.3s var(--ios-ease), transform 0.3s var(--ios-ease);
}

.unread-dot.is-read {
    opacity: 0;
    transform: scale(0);
}

/* Empty State */
.notifications-empty-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 120px 40px 60px;
    text-align: center;
    animation: fadeInEmpty 0.3s ease;
}

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

.empty-state-bell {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.empty-state-bell svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.8px;
}

.notifications-empty-state h3 {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 6px;
}

.notifications-empty-state p {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
}

/* iOS 26 Context Menu */
.ios-context-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ios-ease);
}

.ios-context-menu-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.ios-context-menu {
    position: fixed;
    z-index: 1002;
    width: 250px;
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(30px);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 10px 30px rgba(0, 0, 0, 0.3);
    transform: scale(0.85);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s var(--ios-ease);
    transform-origin: top center;
}

.ios-context-menu.is-visible {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

.context-menu-item {
    width: 100%;
    background: transparent;
    border: none;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    text-align: left;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.15s;
}

.context-menu-item:last-child {
    border-bottom: none;
}

.context-menu-item:active {
    background-color: rgba(255, 255, 255, 0.12);
}

.context-menu-item.action-danger {
    color: #ff453a;
}

.context-menu-item svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2px;
}

/* Active floating card during context menu */
.notif-card.is-floating-context {
    z-index: 1003 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    border-bottom: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    transform: scale(1.02) !important;
    transition: transform 0.25s var(--ios-ease), box-shadow 0.25s !important;
}

/* ==========================================================================
   Apple iOS 26 Liquid Glass Toast Notification Styles
   ========================================================================== */

.toast-container {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 12px);
    left: var(--page-x);
    right: var(--page-x);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 12px 16px;
    border-radius: 20px;
    font-size: 14px;
    color: #ffffff;
    pointer-events: auto;
    
    /* Liquid Glass default styling */
    backdrop-filter: blur(18px) saturate(155%);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
    border: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.15);
    
    /* Animation initial state */
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 350ms var(--ios-ease), opacity 300ms ease, height 300ms ease;
    will-change: transform, opacity;
    user-select: none;
    touch-action: pan-y;
}

/* Glass highlight reflection */
.toast::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

/* Animation active state */
.toast.toast-visible {
    transform: translateY(0);
    opacity: 1;
}

.toast.toast-hiding {
    transform: translateY(-15px) !important;
    opacity: 0 !important;
    transition: transform 300ms var(--ios-ease), opacity 250ms ease !important;
}

/* Error Toast Tint */
.toast.toast-error {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 120, 120, 0.08) 55%, rgba(255, 255, 255, 0.05));
    border-color: rgba(255, 130, 130, 0.35);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 8px 24px rgba(35, 5, 5, 0.2);
}

/* Success Toast Tint (Green Glass) */
.toast:not(.toast-error) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(120, 255, 120, 0.05) 55%, rgba(255, 255, 255, 0.05));
    border-color: rgba(130, 255, 130, 0.3);
}

/* Content layout */
.toast-main {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.toast-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.toast-error .toast-icon {
    background: rgba(255, 69, 58, 0.15);
    border-color: rgba(255, 69, 58, 0.3);
    color: #ff453a;
}

.toast-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.2px;
}

.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.toast-title {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.toast-desc {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Close Button */
.toast-close-btn {
    background: transparent;
    border: none;
    padding: 6px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
}

.toast-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.toast-close-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.2px;
}

/* Grouped details list */
.toast-details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    animation: slideDownToast 0.25s var(--ios-ease);
}

.toast-details-item {
    font-size: 11px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.toast-details-item::before {
    content: "•";
    color: #ff453a;
}

@keyframes slideDownToast {
    from { opacity: 0; transform: translateY(-5px); max-height: 0; }
    to { opacity: 1; transform: translateY(0); max-height: 200px; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
        transform: none !important;
        will-change: auto !important;
    }
}

/* Стили отладочной панели эмуляции времени суток */
.time-emulator {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px auto 0 auto;
    padding: 4px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: fit-content;
    opacity: 0.38;
    transition: opacity 0.25s var(--ios-ease), background-color 0.25s var(--ios-ease);
    z-index: 100;
    position: relative;
    user-select: none;
}

.time-emulator:hover,
.time-emulator:active {
    opacity: 0.95;
    background: rgba(255, 255, 255, 0.09);
}

.time-emulator button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.time-emulator button:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
}

.time-emulator button:active {
    transform: scale(0.9);
}

.time-emulator button.is-active {
    background-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.time-emulator button.is-current {
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35) !important;
}




/* ==========================================================================
   Appointments Screen Styles (Liquid Glass Redesign)
   ========================================================================== */

.appointments-screen {
    box-sizing: border-box;
    min-height: -webkit-fill-available !important;
    min-height: var(--app-vh-safe, 100dvh) !important;
    height: var(--app-vh-safe, 100dvh) !important;
    max-height: var(--app-vh-safe, 100dvh) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    display: none;
    flex-direction: column;
    padding: calc(16px + env(safe-area-inset-top)) var(--page-x) 0 var(--page-x) !important;
}

.appointments-screen.is-active {
    display: flex !important;
}

.icon-button-add, 
.appointments-screen .icon-button-bell {
    transition: transform 0.22s var(--ios-ease), background-color 0.22s var(--ios-ease), box-shadow 0.22s var(--ios-ease) !important;
}

.icon-button-add svg {
    width: 20px !important;
    height: 20px !important;
}

.icon-button-add:active {
    transform: scale(0.90) !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
}

.appointments-screen .icon-button-bell:active {
    transform: scale(0.90) !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
}

.appointments-control-row {
    display: flex;
    justify-content: flex-start !important;
    align-items: center;
    margin-bottom: 10px !important;
    padding-left: 4px;
}

.segmented-control {
    position: relative !important;
    display: flex;
    gap: 4px;
    padding: 4px;
    --segmented-indicator-left: 4px;
    --segmented-indicator-width: calc((100% - 16px) / 3);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.segmented-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: var(--segmented-indicator-left);
    width: var(--segmented-indicator-width);
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        rgba(67, 148, 220, 0.35) 0%,
        rgba(151, 205, 244, 0.15) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px rgba(3, 25, 55, 0.15);
    transform: translateZ(0);
    transition: left 320ms var(--ios-ease), width 320ms var(--ios-ease) !important;
    will-change: left, width;
    pointer-events: none;
    z-index: 1;
}

.segmented-control.is-view-day .segmented-indicator {
    transform: translateZ(0) !important;
}

.segmented-control.is-view-week .segmented-indicator {
    transform: translateZ(0) !important;
}

.segmented-control.is-view-month .segmented-indicator {
    transform: translateZ(0) !important;
}

.segmented-item {
    position: relative;
    z-index: 2;
    flex: 1;
    border: none;
    background: transparent !important;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 8px 16px;
    cursor: pointer;
    transition: color 0.25s var(--ios-ease), transform 0.15s var(--ios-ease) !important;
    outline: none;
    text-align: center;
}

.segmented-item:active {
    transform: scale(0.94) !important;
}

.segmented-item.is-active {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.week-calendar {
    position: relative !important;
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: 10px !important;
    padding: 8px 12px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 100%
    ) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 8px 24px rgba(0, 0, 0, 0.1) !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;
    scrollbar-width: none;
    box-sizing: border-box;
}

.week-calendar::-webkit-scrollbar {
    display: none;
}

.calendar-indicator {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 46px;
    border-radius: 22px;
    background: linear-gradient(
        135deg,
        rgba(67, 148, 220, 0.20) 0%,
        rgba(151, 205, 244, 0.08) 52%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 8px 20px rgba(255, 255, 255, 0.04),
      0 10px 24px rgba(3, 24, 53, 0.12);
    transition: transform 300ms var(--ios-ease), width 300ms var(--ios-ease) !important;
    will-change: transform, width;
    pointer-events: none;
    z-index: 1;
}

/* .calendar-indicator::after удален по запросу пользователя, чтобы скрыть синюю черточку */

.calendar-day {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 2px;
    min-width: calc((100% - 60px) / 7);
    flex: 0 0 calc((100% - 60px) / 7);
    min-height: 68px;
    box-sizing: border-box;
    cursor: pointer;
    touch-action: pan-x !important;
    transition: transform 0.2s var(--ios-ease), background 0.25s var(--ios-ease), border-color 0.25s var(--ios-ease) !important;
    user-select: none;
    color: inherit;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font: inherit;
}

.calendar-day:active {
    transform: scale(0.91) !important;
}

.calendar-day-name {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.calendar-day-num {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calendar-day.is-active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.calendar-day.is-active::after {
    display: none !important;
}

.calendar-day.has-appointments:not(.is-active) {
    border-color: rgba(255, 255, 255, 0.18);
}

.calendar-day.has-appointments .calendar-day-num::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 4px;
    height: 4px;
    background: #4394dc;
    border-radius: 50%;
    box-shadow: 0 0 6px #4394dc;
}

.calendar-day.is-active.has-appointments .calendar-day-num::after {
    background: #97cdf4;
    box-shadow: 0 0 6px #97cdf4;
}

/* Выходной день в календаре записей */
.calendar-day.is-day-off .calendar-day-name {
    color: rgba(255, 255, 255, 0.25);
}

/* Текущий день в календаре записей (Сегодня) */
.calendar-day.is-today .calendar-day-name {
    color: #38bdf8 !important;
    font-weight: 800 !important;
}

.calendar-day.is-today .calendar-day-num {
    color: #38bdf8 !important;
    font-weight: 800 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.calendar-day.is-today .calendar-day-month {
    color: #38bdf8 !important;
    opacity: 0.95;
    font-weight: 800 !important;
}

.calendar-day.is-day-off .calendar-day-num {
    color: rgba(255, 255, 255, 0.5);
}

.day-lock-icon {
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    color: rgba(255, 255, 255, 0.45);
    stroke-width: 2.5;
    transition: color 0.25s ease, margin-left 0.25s ease;
}

.calendar-day.is-active .day-lock-icon {
    color: #ffffff;
}

/* Если есть и записи, и замочек — раздвигаем их по бокам */
.calendar-day.has-appointments.is-day-off .calendar-day-num::after {
    margin-left: -6px;
}

.calendar-day.has-appointments.is-day-off .day-lock-icon {
    margin-left: 6px;
}

.appointments-status-card {
    padding: 10px 14px !important;
    border-radius: 20px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px !important;
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.03) 100%
      ) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 8px 20px rgba(255, 255, 255, 0.04),
      0 10px 24px rgba(3, 24, 53, 0.12) !important;
    transition: transform 180ms var(--ios-ease), background-color 0.22s var(--ios-ease), border-color 0.22s var(--ios-ease) !important;
}

.appointments-status-card.is-pressed:not(.is-wobbling) {
    transform: scale(0.94) !important;
    transition: transform 80ms var(--ios-ease) !important;
}

.status-card-icon-wrapper {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #ffffff;
    flex-shrink: 0 !important;
}

.status-card-icon-wrapper svg {
    width: 18px !important;
    height: 18px !important;
}

.status-card-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0 !important;
    overflow: hidden !important;
}

.status-card-info h3, 
.status-card-title {
    font-size: 14.5px !important;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.status-card-info p, 
.status-card-subtitle {
    font-size: 11.5px !important;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.status-card-action-btn {
    display: flex;
    align-items: center;
    gap: 3px !important;
    padding: 6px 10px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 11px !important;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.22s var(--ios-ease), background-color 0.22s var(--ios-ease), border-color 0.22s var(--ios-ease) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.status-card-action-btn:active {
    transform: scale(0.94) !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

.status-card-action-btn svg {
    width: 14px;
    height: 14px;
}

.appointments-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 14px 0 8px 4px !important;
    letter-spacing: -0.010em;
}

.new-appointment-card {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: var(--appointment-card-padding);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.085);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px) saturate(120%);
    -webkit-backdrop-filter: blur(22px) saturate(120%);
    margin-bottom: 12px;
    cursor: pointer;
    transition: transform 0.25s var(--ios-ease), background-color 0.2s var(--ios-ease), border-color 0.2s var(--ios-ease) !important;
    animation: appointmentsFadeIn 0.35s var(--ios-ease) forwards;
}

.new-appointment-card:active {
    transform: scale(0.965) !important;
    background-color: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

@keyframes cardPop {
    0% { transform: scale(1); }
    35% { transform: scale(0.94); }
    65% { transform: scale(1.015); }
    100% { transform: scale(1); }
}

.is-wobbling {
    animation: cardPop 300ms cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.appointments-status-card.is-wobbling {
    transition: none !important;
}

.appointments-list-container {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding-bottom: calc(var(--tabbar-height) + 24px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
}

.appointments-list-container::-webkit-scrollbar {
    display: none !important;
}

.appointments-moon-deco {
    display: none !important;
}

.appointments-empty {
    flex: 0 0 auto !important;
    max-height: 340px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px !important;
    border-radius: 28px !important;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 8px 20px rgba(255, 255, 255, 0.02),
      0 12px 32px rgba(0, 0, 0, 0.15) !important;
    text-align: center;
    box-sizing: border-box !important;
    margin-bottom: calc(var(--tabbar-height) + 28px + env(safe-area-inset-bottom)) !important;
    animation: appointmentsFadeIn 0.35s var(--ios-ease) forwards;
}

.appointments-empty::-webkit-scrollbar {
    display: none !important;
}

.appointments-empty h2 {
    margin: 0 0 6px !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.appointments-empty p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

@keyframes appointmentsFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.empty-state-visual {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 10px;
}

.glass-calendar-icon {
    width: 76px;
    height: 76px;
    margin: 7px auto;
    filter: drop-shadow(0 12px 24px rgba(3, 24, 53, 0.25));
}

.glass-calendar-icon svg {
    width: 100%;
    height: 100%;
}

.sparkle {
    position: absolute;
    color: #5d87ff;
    font-size: 16px;
    filter: drop-shadow(0 0 6px rgba(93, 135, 255, 0.8));
    animation: empty-sparkle-pulse 3s infinite ease-in-out;
}

.sparkle-1 {
    top: 15%;
    left: 10%;
    font-size: 18px;
    animation-delay: 0s;
}

.sparkle-2 {
    top: 25%;
    right: 5%;
    font-size: 14px;
    animation-delay: 0.8s;
}

.sparkle-3 {
    bottom: 20%;
    left: 5%;
    font-size: 15px;
    animation-delay: 1.5s;
}

.sparkle-4 {
    bottom: 25%;
    right: 12%;
    font-size: 17px;
    animation-delay: 2.2s;
}

@keyframes empty-sparkle-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(15deg);
    }
}

.empty-state-add-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(67, 148, 220, 0.25) 0%, rgba(151, 205, 244, 0.10) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 20px;
    cursor: pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 
        0 8px 20px rgba(3, 24, 53, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    transition: transform 0.2s var(--ios-ease), box-shadow 0.2s !important;
    outline: none;
}

.empty-state-add-btn:active {
    transform: scale(0.96) !important;
    box-shadow: 
        0 4px 10px rgba(3, 24, 53, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Размытый фон и Новая шторка добавления записи (New Manual Appointment Sheet)
   ────────────────────────────────────────────────────────────────────────── */
.history-overlay {
    background: rgba(10, 24, 46, 0.65) !important;
    backdrop-filter: blur(25px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(120%) !important;
    opacity: 0 !important;
    transition: opacity 0.26s var(--ios-ease) !important;
    will-change: opacity;
    overscroll-behavior: none !important;
    touch-action: none !important;
    pointer-events: none !important;
}

.history-overlay.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.history-overlay.is-closing {
    opacity: 0 !important;
    pointer-events: none !important;
}

.manual-appointment-new-sheet[hidden] {
    display: none !important;
}

.manual-appointment-new-sheet .sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.manual-appointment-new-sheet .sheet-head h2 {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.02em;
}

.new-sheet-scroll-container {
    flex: 1;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding-right: 2px;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
}

.new-sheet-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Стили полей ввода */
.sheet-input-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.075) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin-bottom: 12px;
    box-sizing: border-box;
    transition: border-color 0.22s, background-color 0.22s;
}

.sheet-input-group:focus-within {
    border-color: rgba(67, 148, 220, 0.4) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.sheet-input-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.sheet-input-icon-box svg {
    width: 18px;
    height: 18px;
}

.sheet-input-group input,
.sheet-input-group select,
.sheet-input-group textarea {
    flex: 1;
    border: none !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    outline: none !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
}

.sheet-input-group input::placeholder,
.sheet-input-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Кликабельные поля */
.sheet-input-group.is-clickable {
    cursor: pointer;
}

.sheet-input-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 42px;
    position: relative;
}

.sheet-input-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 2px 0;
    line-height: 1.2;
    text-transform: none;
}

.sheet-input-content input {
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    height: 20px !important;
    line-height: 20px !important;
}

.sheet-input-content select {
    cursor: pointer;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    height: 20px !important;
    line-height: 20px !important;
    color: #ffffff !important;
    appearance: none;
    -webkit-appearance: none;
}

.sheet-input-arrow {
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    pointer-events: none;
}

.sheet-input-arrow svg {
    width: 16px;
    height: 16px;
}

/* Поле Дополнительные услуги */
.sheet-input-group.is-column {
    flex-direction: column;
    align-items: stretch !important;
    padding: 12px 14px;
}

.sheet-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    position: relative;
    cursor: pointer;
}

.sheet-input-row .sheet-input-content {
    min-height: auto;
}

.sheet-input-value-placeholder {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
}

.additional-services-picker {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-height: 218px !important;
    margin-top: 12px !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
        rgba(7, 28, 42, 0.28) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
}

.manual-appointment-new-sheet .additional-services-picker::-webkit-scrollbar {
    display: none !important;
}

/* Стилизация дополнительных услуг под темное стекло (Liquid Glass) */
.manual-appointment-new-sheet .additional-service-option {
    box-sizing: border-box !important;
    position: relative !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)),
        rgba(3, 33, 42, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: background-color 0.22s ease, border-color 0.22s ease !important;
}

.manual-appointment-new-sheet .additional-service-option:has(input:checked) {
    background:
        linear-gradient(135deg, rgba(98, 180, 242, 0.38), rgba(22, 144, 112, 0.20)),
        rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(180, 226, 255, 0.54) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}

.manual-appointment-new-sheet .additional-service-check {
    width: 20px !important;
    height: 20px !important;
    display: grid !important;
    place-items: center !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.manual-appointment-new-sheet .additional-service-option input:checked + .additional-service-check {
    background: rgba(111, 184, 242, 0.75) !important;
    border-color: rgba(221, 244, 255, 0.9) !important;
    box-shadow: 0 0 14px rgba(111, 184, 242, 0.28) !important;
}

.manual-appointment-new-sheet .additional-service-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18) !important;
}

.manual-appointment-new-sheet .additional-service-duration {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

.sheet-hint-text {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    margin: -6px 0 16px 4px;
}

/* Сетка 2x2 переверстана в 1 колонку */
.sheet-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
    margin-bottom: 12px;
}

.sheet-grid-2x2 .sheet-input-group {
    margin-bottom: 0 !important;
}

.sheet-grid-2x2 .sheet-input-content {
    min-height: 38px;
}

.manual-appointment-new-sheet .sheet-grid-2x2 .sheet-input-arrow {
    display: none !important;
}

/* Текстовое поле */
.sheet-input-group.is-textarea {
    align-items: flex-start !important;
    padding: 12px 14px;
    position: relative;
}

.sheet-input-group.is-textarea textarea {
    resize: none;
    height: 64px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.textarea-counter {
    position: absolute;
    bottom: 8px;
    right: 14px;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.3);
}

/* Кнопка закрытия */
.sheet-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s, transform 0.2s;
}

.sheet-close-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.16) !important;
}

.sheet-close-btn svg {
    width: 16px;
    height: 16px;
}

/* Кнопка Сохранить */
.sheet-actions {
    padding: 16px 0 calc(12px + env(safe-area-inset-bottom)) 0;
}

.sheet-save-btn {
    width: 100%;
    padding: 16px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0f35b5 0%, #153fc5 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 
        0 8px 20px rgba(15, 53, 181, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s !important;
    outline: none;
}

.sheet-save-btn:active {
    transform: scale(0.975) !important;
    box-shadow: 
        0 4px 10px rgba(15, 53, 181, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    filter: brightness(0.9);
}

/* Стандартные календарные инпуты подгонка */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/* Выравнивание по левому краю для полей ввода */
.sheet-input-content input,
.sheet-input-content select {
    text-align: left !important;
}

/* Выравнивание даты и времени по левому краю на iOS Safari */
.manual-appointment-new-sheet input[type="date"]::-webkit-date-and-time-value,
.manual-appointment-new-sheet input[type="time"]::-webkit-date-and-time-value {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: center !important;
    display: flex !important;
}

/* Предотвращение авто-зума на iOS (шрифт не менее 16px) */
.manual-appointment-new-sheet input,
.manual-appointment-new-sheet select,
.manual-appointment-new-sheet textarea {
    font-size: 16px !important;
}

/* Адаптивное позиционирование модального окна для корректной работы с клавиатурой на iOS */
.manual-appointment-new-sheet {
    top: 76px !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Новые стили подсказки длительности */
.manual-appointment-new-sheet .manual-duration-hint {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 8px 12px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 0 12px 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Принудительное скрытие подсказки длительности, когда она скрыта JS */
.manual-appointment-new-sheet .manual-duration-hint[hidden] {
    display: none !important;
}

.manual-appointment-new-sheet .manual-duration-hint-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: rgba(236, 127, 19, 0.2) !important;
    color: #ff9f43 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    display: grid !important;
    place-items: center !important;
}

.manual-appointment-new-sheet .manual-duration-hint strong {
    color: #ffffff !important;
    font-size: 12px !important;
    display: block !important;
    line-height: 1.25 !important;
}

.manual-appointment-new-sheet .manual-duration-hint small {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 9.5px !important;
    margin-top: 1px !important;
    display: block !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

/* Плавная анимация шторок и оверлея (GPU Accelerate 60-120 FPS) */
.history-sheet {
    transform: translate3d(0, 105%, 0) !important;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
    contain: layout style;
}

.history-sheet.is-open {
    transform: translate3d(0, 0, 0) !important;
}

.history-sheet.is-closing {
    transform: translate3d(0, 105%, 0) !important;
    transition: transform 190ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    pointer-events: none !important;
}

.history-overlay {
    opacity: 0 !important;
    backdrop-filter: blur(25px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(120%) !important;
    background: rgba(12, 16, 26, 0.78) !important;
    transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: opacity;
    pointer-events: none;
}

.history-overlay.is-visible {
    opacity: 0.85 !important;
    pointer-events: auto !important;
}

.history-overlay.is-closing {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Дополнительные услуги по умолчанию свернуты */
.sheet-input-group.is-column .additional-services-picker {
    max-height: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transition: max-height 350ms cubic-bezier(0.22, 1, 0.36, 1), 
                margin-top 350ms cubic-bezier(0.22, 1, 0.36, 1), 
                padding 350ms cubic-bezier(0.22, 1, 0.36, 1), 
                opacity 300ms ease, 
                border-width 350ms ease !important;
}

/* Когда блок развернут */
.sheet-input-group.is-column.is-expanded .additional-services-picker {
    max-height: 218px !important;
    margin-top: 12px !important;
    padding: 10px !important;
    border-width: 1px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
}

/* Поворот стрелочки при раскрытии */
.sheet-input-group.is-column .sheet-input-arrow svg {
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.sheet-input-group.is-column.is-expanded .sheet-input-arrow svg {
    transform: rotate(90deg) !important;
}

/* Анимация бульканья для кликабельной строки дополнительных услуг */
.sheet-input-group.is-column .sheet-input-row {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer;
    width: 100%;
}

.sheet-input-group.is-column .sheet-input-row:active {
    transform: scale(0.965);
}

/* Обновленный компактный дизайн карточек записей */
.new-appointment-card {
    padding: 14px 18px !important;
    border-radius: 20px !important;
    gap: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.085) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(22px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(120%) !important;
}

.new-appointment-card .card-date-label {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #6fb8f2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 3.5px !important;
    display: block !important;
    line-height: 1.1 !important;
}

.new-appointment-card .card-time-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 90px !important;
    flex-shrink: 0 !important;
}

.new-appointment-card .card-time-val {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
}

.new-appointment-card .card-duration {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11.5px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 500 !important;
    margin-top: 5px !important;
}

.new-appointment-card .card-duration svg {
    width: 12px !important;
    height: 12px !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

.new-appointment-card .card-main-col {
    flex: 1 !important;
    padding-left: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.new-appointment-card .card-main-col h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
}

.new-appointment-card .card-main-col .card-service-desc {
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 500 !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.3 !important;
}

.new-appointment-card .card-tag,
.history-card .card-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11.5px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.new-appointment-card .card-tag svg,
.history-card .card-tag svg {
    width: 13px !important;
    height: 13px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    flex-shrink: 0 !important;
}

.new-appointment-card .card-arrow-col {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    color: rgba(255, 255, 255, 0.35) !important;
    width: 24px !important;
    flex-shrink: 0 !important;
}

.new-appointment-card .card-arrow-col svg {
    width: 16px !important;
    height: 16px !important;
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Стилизация заголовков дат (сегодня, 22 июня и др.) в списках недели и месяца */
.appointments-group-header {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 28px 0 14px 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.appointments-group-header::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    margin-right: 8px !important;
}

.appointments-group-header, .appointments-group-header * {
    font-weight: 800 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.appointments-group-header a {
    color: inherit !important;
    font-weight: inherit !important;
    text-decoration: none !important;
}

/* Прошедшие записи - полупрозрачные и приглушенные */
.new-appointment-card.is-past {
    opacity: 0.58 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(22px) saturate(95%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(95%) !important;
    filter: none !important;
}

.new-appointment-card.is-past .card-time-val {
    color: rgba(255, 255, 255, 0.85) !important;
}

.new-appointment-card.is-past .card-main-col h3 {
    color: rgba(255, 255, 255, 0.9) !important;
}

.new-appointment-card.is-past .card-service-desc {
    color: rgba(255, 255, 255, 0.5) !important;
}

.new-appointment-card.is-past .card-arrow-col {
    opacity: 0.45 !important;
}

/* Мягкий клик по карточкам записей */
.new-appointment-card.is-clicked {
    transform: scale(0.96) !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transition: transform 120ms cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    animation: none !important;
}

/* Скругленный тег «Завершена» */
.new-appointment-card .card-tag.is-past-tag {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 3px 8px !important;
    margin-top: 4px !important;
    display: inline-flex !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.new-appointment-card .card-tag.is-past-tag svg {
    color: rgba(255, 255, 255, 0.5) !important;
    width: 11px !important;
    height: 11px !important;
    margin-right: 4px !important;
}

/* Кнопка-спойлер для завершенных записей */
.toggle-new-btn {
    margin-top: 0px !important;
}

.toggle-past-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 12px 18px !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin: 20px 0 10px 0 !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
    box-sizing: border-box !important;
}

.toggle-past-btn:active {
    transform: scale(0.985) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.toggle-past-btn .toggle-past-arrow {
    width: 16px !important;
    height: 16px !important;
    transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    opacity: 0.6;
}

.toggle-past-btn.is-expanded .toggle-past-arrow {
    transform: rotate(180deg) !important;
}

.past-appointments-wrapper {
    margin-top: 10px !important;
    display: flex;
    flex-direction: column !important;
    gap: 10px !important;
}

/* ==========================================
   Liquid Glass Bottom Sheets & Detail Redesign
   ========================================== */

.history-sheet {
    box-sizing: border-box !important;
    bottom: calc(-1 * env(safe-area-inset-bottom) - 2px) !important;
    isolation: isolate !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.11) 100%) !important;
    backdrop-filter: blur(45px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(45px) saturate(140%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: none !important;
    border-radius: 32px 32px 0 0 !important;
    padding: 16px 20px calc(34px + env(safe-area-inset-bottom)) 20px !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 20px 40px rgba(255, 255, 255, 0.05),
        0 15px 50px rgba(0, 0, 0, 0.25) !important;
    color: #ffffff !important;
    overscroll-behavior: contain !important;
}

#appointmentDetailSheet,
#clientDetailSheet,
#clientFormSheet,
#historyDetailSheet,
#historyEditSheet,
#manualAppointmentSheet {
    display: flex !important;
    flex-direction: column !important;
    max-height: 88vh !important;
}

.history-sheet::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 -45px 0 !important; /* Уменьшаем с 150px до 45px для баланса скролла */
    z-index: -2 !important;
    border-radius: inherit !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.history-sheet::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px 1px auto 1px !important;
    height: 45% !important;
    z-index: -1 !important;
    border-radius: 31px 31px 0 0 !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 52%) !important;
    pointer-events: none !important;
}

.history-sheet .sheet-handle {
    background: rgba(255, 255, 255, 0.3) !important;
}

.history-sheet .sheet-head h2,
.history-sheet.confirm-sheet h2,
.history-sheet h2 {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    letter-spacing: -0.02em !important;
}

.history-sheet.confirm-sheet p {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    margin-top: 4px !important;
    margin-bottom: 20px !important;
}

.history-sheet .history-icon-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s, transform 0.1s !important;
}

.history-sheet .history-icon-btn:active {
    transform: scale(0.92) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Стеклянные плашки для строк деталей */
.history-sheet .detail-row {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    padding: 11px 15px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.history-sheet .detail-row strong {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
}

.history-sheet .detail-row .phone-link {
    color: #6fb8f2 !important;
    text-decoration: none !important;
    border-bottom: 1px dashed rgba(111, 184, 242, 0.4) !important;
    padding-bottom: 1px !important;
    font-weight: 700 !important;
}

/* Светящиеся статус-бейджи */
.history-sheet .status-badge {
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    flex: none !important; /* Убираем растягивание от родительского flex */
    margin-left: auto !important; /* Прижимаем к правому краю */
    text-align: center !important;
}

.history-sheet .status-badge.status-new,
.history-sheet .status-badge.status-pending-new {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.15) !important;
}

.history-sheet .status-badge.status-confirmed,
.history-sheet .status-badge.status-done,
.history-sheet .status-badge.status-saved {
    background: rgba(13, 148, 136, 0.15) !important;
    border: 1px solid rgba(13, 148, 136, 0.3) !important;
    color: #2dd4bf !important;
    box-shadow: 0 0 12px rgba(13, 148, 136, 0.15) !important;
}

.history-sheet .status-badge.status-completed {
    background: rgba(34, 197, 94, 0.15) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: #4ade80 !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.15) !important;
}

.history-sheet .status-badge.status-cancelled,
.history-sheet .status-badge.status-no_show,
.history-sheet .status-badge.status-draft {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.15) !important;
}

/* Комментарии клиентов */
.history-sheet .detail-comment {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    padding: 12px 16px !important;
    margin-top: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.history-sheet .detail-comment h4 {
    margin: 0 0 6px 0 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.history-sheet .detail-comment p {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

/* Кнопки действий */
.history-sheet .primary-action {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 20px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #0f35b5 0%, #153fc5 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: 
        0 8px 22px rgba(15, 53, 181, 0.35), 
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}

.history-sheet .primary-action:active {
    transform: scale(0.975) !important;
    box-shadow: 
        0 4px 10px rgba(15, 53, 181, 0.2), 
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.history-sheet .primary-action.appointment-complete-action {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
        0 8px 22px rgba(16, 185, 129, 0.3), 
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.history-sheet .primary-action.appointment-complete-action:active {
    box-shadow: 
        0 4px 10px rgba(16, 185, 129, 0.15), 
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.history-sheet .secondary-action {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: transform 0.15s ease, background-color 0.15s ease !important;
}

.history-sheet .secondary-action:active {
    transform: scale(0.98) !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

.history-sheet .danger-action-link {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
    transition: transform 0.15s ease, background-color 0.15s ease !important;
    margin-top: 10px !important;
}

.history-sheet .danger-action-link:active {
    transform: scale(0.98) !important;
    background: rgba(239, 68, 68, 0.15) !important;
}

.history-sheet .danger-action {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    transition: transform 0.15s ease, background-color 0.15s ease !important;
}

.history-sheet .danger-action:active {
    transform: scale(0.98) !important;
    background: rgba(239, 68, 68, 0.18) !important;
}

/* Формы с полями ввода внутри шторок */
.history-sheet .field-line {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.history-sheet .field-line input,
.history-sheet .field-line select,
.history-sheet .field-line textarea {
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.075) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    outline: none !important;
    transition: border-color 0.22s, background-color 0.22s !important;
    font-family: inherit !important;
}

.history-sheet .field-line input:focus,
.history-sheet .field-line select:focus,
.history-sheet .field-line textarea:focus {
    border-color: rgba(67, 148, 220, 0.4) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.history-sheet .field-line select option {
    background: #0d2948 !important;
    color: #ffffff !important;
}

/* Кнопки в ряд */
.detail-row-buttons {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 2px !important;
}

.detail-row-buttons button {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Белый контрастный текст в окне Завершить визит */
#completeAppointmentSummary {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    margin-top: -4px !important;
    margin-bottom: 16px !important;
}

/* Теги подтверждения записей в основном расписании */
.card-tags-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
}

.card-tag.is-pending-tag,
.card-tag.is-confirmed-tag,
.card-tag.is-completed-tag {
    border-radius: 8px !important;
    padding: 3px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.card-tag.is-pending-tag svg,
.card-tag.is-confirmed-tag svg,
.card-tag.is-completed-tag svg {
    width: 12px !important;
    height: 12px !important;
    color: inherit !important;
    margin-right: 0 !important;
}

.card-tag.is-pending-tag {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}

.card-tag.is-confirmed-tag {
    background: rgba(13, 148, 136, 0.15) !important;
    border: 1px solid rgba(13, 148, 136, 0.3) !important;
    color: #2dd4bf !important;
}

.card-tag.is-completed-tag {
    background: rgba(34, 197, 94, 0.12) !important;
    border: 1px solid rgba(34, 197, 94, 0.25) !important;
    color: #4ade80 !important;
}

.card-tag.is-cancelled-tag,
.card-tag.is-no_show-tag {
    border-radius: 8px !important;
    padding: 3px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.card-tag.is-cancelled-tag svg,
.card-tag.is-no_show-tag svg {
    width: 12px !important;
    height: 12px !important;
    color: inherit !important;
    margin-right: 0 !important;
}

.card-tag.is-cancelled-tag {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #fca5a5 !important;
}

.card-tag.is-no_show-tag {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #fca5a5 !important;
}

.quick-actions-grid.is-editing {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.quick-actions-grid.is-editing .quick-action-card {
    cursor: grab;
    animation: quickActionEditWiggle 760ms ease-in-out infinite;
    transform-origin: 50% 72%;
    box-shadow:
        0 14px 34px rgba(3, 24, 53, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
    transition:
        box-shadow 220ms var(--ios-ease),
        filter 220ms var(--ios-ease),
        opacity 220ms var(--ios-ease);
    -webkit-tap-highlight-color: transparent;
}

.quick-actions-grid.is-editing .quick-action-card:nth-child(2n) {
    animation-delay: -180ms;
}

.quick-actions-grid.is-editing .quick-action-card:nth-child(3n) {
    animation-delay: -360ms;
}

.quick-actions-grid.is-sorting .quick-action-card:not(.is-dragging) {
    animation: none;
    transition: filter 200ms var(--ios-ease), opacity 200ms var(--ios-ease);
}

.quick-actions-grid.is-sorting .quick-action-card:not(.is-dragging) {
    filter: saturate(0.92) brightness(0.96);
}

.quick-action-card.is-dragging {
    cursor: grabbing;
    animation: none !important;
    transition: none !important; /* Отключаем CSS-переходы во время перетаскивания для мгновенной реакции на палец */
    box-shadow:
        0 28px 62px rgba(3, 13, 30, 0.46),
        0 10px 24px rgba(59, 130, 246, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
    opacity: 1;
    filter: saturate(1.14) brightness(1.08);
    will-change: transform;
    backdrop-filter: none !important; /* Убираем размытие во время перетаскивания, чтобы исправить баг отслоения контента в Chrome */
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.22) !important; /* Плотный стеклянный фон для читаемости */
}

.quick-action-card.is-lifted {
    outline: 1px solid rgba(255, 255, 255, 0.34);
    outline-offset: -1px;
}

.quick-action-placeholder {
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(15, 28, 48, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 999px rgba(255, 255, 255, 0.015);
    transform: scale(0.965);
    pointer-events: none;
    will-change: transform;
}

.quick-actions-edit-hint {
    position: fixed;
    left: max(18px, env(safe-area-inset-left));
    right: max(18px, env(safe-area-inset-right));
    bottom: calc(var(--tabbar-height) + 24px + env(safe-area-inset-bottom));
    z-index: 1300;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
    padding: 12px 14px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(18, 34, 58, 0.54);
    color: #ffffff;
    box-shadow:
        0 18px 44px rgba(3, 18, 38, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.98);
    pointer-events: none;
    transition: opacity 260ms var(--ios-ease), transform 320ms var(--ios-ease);
}

.quick-actions-edit-hint.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
}

.quick-actions-edit-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6fb8f2;
    box-shadow: 0 0 0 5px rgba(111, 184, 242, 0.15), 0 0 14px rgba(111, 184, 242, 0.9);
    flex: 0 0 auto;
}

.quick-actions-edit-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.quick-actions-edit-copy strong {
    font-size: 13.5px;
    line-height: 1.15;
    font-weight: 800;
}

.quick-actions-edit-copy small {
    font-size: 11.5px;
    line-height: 1.2;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.64);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-actions-edit-done {
    border: none;
    border-radius: 16px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms var(--ios-ease), background-color 160ms var(--ios-ease);
}

.quick-actions-edit-done:active {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.24);
}

@keyframes quickActionEditWiggle {
    0% {
        transform: rotate(-0.85deg) translate3d(-0.3px, 0.2px, 0);
    }
    25% {
        transform: rotate(0.65deg) translate3d(0.2px, -0.8px, 0);
    }
    50% {
        transform: rotate(0.95deg) translate3d(0.4px, 0.2px, 0);
    }
    75% {
        transform: rotate(-0.55deg) translate3d(-0.2px, -0.6px, 0);
    }
    100% {
        transform: rotate(-0.85deg) translate3d(-0.3px, 0.2px, 0);
    }
}

/* Appointment detail sheet stability */
.history-sheet[hidden] {
    display: none !important;
}

#appointmentDetailSheet {
    max-height: calc(var(--app-vh-safe, 100dvh) - env(safe-area-inset-top) - 22px) !important;
    overflow: hidden !important;
}

#appointmentDetailSheet::before {
    inset: 0 0 calc(-1 * env(safe-area-inset-bottom) - 96px) 0 !important;
}

#appointmentDetailSheet .sheet-head {
    flex: 0 0 auto !important;
}

#appointmentDetailSheet .new-sheet-scroll-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ==========================================================================
   Clients Screen Styles (Liquid Glass Redesign)
   ========================================================================== */

.clients-screen {
    box-sizing: border-box;
    min-height: -webkit-fill-available !important;
    min-height: var(--app-vh-safe, 100dvh) !important;
    height: var(--app-vh-safe, 100dvh) !important;
    max-height: var(--app-vh-safe, 100dvh) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    display: none;
    flex-direction: column;
    padding: calc(16px + env(safe-area-inset-top)) var(--page-x) 0 var(--page-x) !important;
}

.clients-screen.is-active {
    display: flex !important;
}

/* Scrollable container for clients content */
.clients-list-container {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding-bottom: calc(var(--tabbar-height) + 24px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
}

.clients-list-container::-webkit-scrollbar {
    display: none !important;
}

/* Translucent premium glass search bar */
.clients-search {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(20px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: background-color 0.22s var(--ios-ease), border-color 0.22s var(--ios-ease) !important;
}

.clients-search:focus-within {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.clients-search svg {
    color: rgba(255, 255, 255, 0.6) !important;
}

.clients-search input {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.clients-search input::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 500 !important;
}

/* Secondary Action Button (Frosted glass style) */
.clients-list-container .secondary-action {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: transform 0.2s var(--ios-ease), background-color 0.2s var(--ios-ease), border-color 0.2s var(--ios-ease) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clients-list-container .secondary-action:active {
    transform: scale(0.975) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Client list grid */
.clients-list {
    display: grid !important;
    gap: 12px !important;
    padding-bottom: 24px !important;
}

/* Premium Glass Client Card */
.client-card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 86px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) auto 28px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
    color: #ffffff !important;
    text-align: left !important;
    box-shadow: 0 4px 14px rgba(3, 25, 55, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    cursor: pointer !important;
    transition: transform 0.25s var(--ios-ease), background-color 0.2s var(--ios-ease), border-color 0.2s var(--ios-ease) !important;
}

.client-card:active {
    transform: scale(0.965) !important;
    background-color: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Circular Avatar for Initials */
.client-avatar {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    flex-shrink: 0 !important;
}

.client-main {
    min-width: 0 !important;
}

.client-main h3 {
    margin: 0 0 3px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.client-phone {
    display: block !important;
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.client-meta {
    display: block !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.client-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 6px !important;
}

/* Premium pills/badges */
.client-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

.client-badge::before {
    content: "" !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #ffffff !important; /* White point default */
    flex-shrink: 0 !important;
}

/* Новый клиент — золото/желтый */
.client-badge-new {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.1) !important;
}
.client-badge-new::before {
    background: #fbbf24 !important;
}

/* Постоянный клиент — бирюза/зеленый */
.client-badge-regular {
    background: rgba(13, 148, 136, 0.12) !important;
    border: 1px solid rgba(13, 148, 136, 0.25) !important;
    color: #2dd4bf !important;
    box-shadow: 0 0 8px rgba(13, 148, 136, 0.1) !important;
}
.client-badge-regular::before {
    background: #2dd4bf !important;
}

/* VIP клиент — пурпурный */
.client-badge-vip {
    background: rgba(168, 85, 247, 0.12) !important;
    border: 1px solid rgba(168, 85, 247, 0.25) !important;
    color: #c084fc !important;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.1) !important;
}
.client-badge-vip::before {
    background: #c084fc !important;
}

/* Модель — синий */
.client-badge-model {
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    color: #60a5fa !important;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.1) !important;
}
.client-badge-model::before {
    background: #60a5fa !important;
}

/* Архив — серый */
.client-badge-archive {
    color: rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.client-badge-archive::before {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Right stats block */
.client-side {
    display: grid !important;
    justify-items: end !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    gap: 2px !important;
}

.client-side strong {
    color: #ffffff !important; /* Changed from orange to white */
    font-size: 14.5px !important;
    font-weight: 800 !important;
}

/* Chevron Circle */
.client-arrow {
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.client-card:active .client-arrow {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.client-arrow::before {
    content: "" !important;
    position: absolute !important;
    top: 9px !important;
    left: 9px !important;
    width: 6px !important;
    height: 6px !important;
    border-top: 2px solid rgba(255, 255, 255, 0.7) !important;
    border-right: 2px solid rgba(255, 255, 255, 0.7) !important;
    transform: rotate(45deg) !important;
}

/* Empty database screen */
.clients-empty {
    margin-top: 24px !important;
    padding: 24px 16px !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

.clients-empty h2 {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

.clients-empty p {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 18px !important;
}

/* Placeholder style for input fields inside history sheets */
.history-sheet .field-line input::placeholder,
.history-sheet .field-line textarea::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Override Client Detail Sheet Analytics & Preferences styling */
.client-detail-appointments-section h4 {
    color: #ffffff !important;
    font-family: inherit !important;
    font-weight: 700 !important;
}

.client-detail-appointments-section p[style*="color: var(--muted)"] {
    color: rgba(255, 255, 255, 0.5) !important;
}

.client-analytics-grid span {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
    border-radius: 20px !important;
    padding: 12px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(3, 25, 55, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.client-analytics-grid strong {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 16px !important;
}

.client-analytics-grid small {
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 600 !important;
}

/* Glass styling for Calculation History cards */
.client-calculation-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    padding: 12px 14px !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    transition: transform 0.2s var(--ios-ease), background-color 0.2s !important;
}

.client-calculation-card:active {
    transform: scale(0.98) !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.client-calculation-card div span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.client-calculation-card strong[style*="color: var(--accent)"] {
    color: #ff9f0a !important; /* Keep gold accent for values */
}

.client-calculation-card span[style*="color: var(--muted)"] {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Glass styling for Online Bookings rows */
.client-detail-appointments-section div[style*="background"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.client-detail-appointments-section div[style*="background"] span[style*="color: var(--text)"] {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.client-detail-appointments-section div[style*="background"] span[style*="color: var(--muted)"] {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Allow detail rows with long text (e.g. Master comments) to display cleanly */
.history-sheet .detail-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.history-sheet .detail-row span {
    flex: 1 0 120px !important;
}

.history-sheet .detail-row strong {
    flex: 2 1 180px !important;
    text-align: right !important;
    word-break: break-word !important;
}

.history-sheet .detail-row strong.status-badge {
    flex: none !important;
    width: auto !important;
    margin-left: auto !important;
}


/* ==========================================================================
   More and Settings Screens Styles (Liquid Glass Redesign)
   ========================================================================== */

.more-scroll-container {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding-top: 12px !important; /* Слегка опускаем блок управления вниз */
    padding-bottom: calc(var(--tabbar-height) + 32px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
}

.more-scroll-container::-webkit-scrollbar {
    display: none !important;
}

.more-section {
    margin-bottom: var(--section-gap) !important;
}

.more-section-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important; /* Красим текст в белый цвет */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 14px 4px !important; /* Увеличили расстояние до менюшки */
}

/* Glass menu list (Apple iOS Settings Style) */
.glass-list {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
}

.glass-list-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px 16px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background-color 0.2s var(--ios-ease), transform 0.1s var(--ios-ease) !important;
}

.glass-list-item:last-child {
    border-bottom: none !important;
}

.glass-list-item:active {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.glass-list-item-icon-wrapper {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 14px !important;
    flex-shrink: 0 !important;
    color: #ffffff !important; /* Делаем иконки белыми */
}

.glass-list-item-icon-wrapper svg {
    width: 18px !important;
    height: 18px !important;
}

.glass-list-item-label {
    flex: 1 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}

.glass-list-item-chevron {
    color: rgba(255, 255, 255, 0.25) !important;
    width: 18px !important;
    height: 18px !important;
}

.wallpapers-scroll-container {
    padding-top: 4px !important;
}

.wallpaper-hero-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 14px !important;
    margin-bottom: 24px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 34px rgba(3, 24, 53, 0.18) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

.wallpaper-current-preview,
.wallpaper-tile-preview,
.wallpaper-custom-preview {
    background-image: var(--wallpaper-preview-url, linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04))) !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.wallpaper-current-preview {
    position: relative !important;
    width: 88px !important;
    aspect-ratio: 9 / 16 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 24px rgba(3, 24, 53, 0.24) !important;
}

.wallpaper-current-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.wallpaper-current-copy span,
.wallpaper-custom-copy span {
    color: rgba(255, 255, 255, 0.58) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.wallpaper-current-copy strong,
.wallpaper-custom-copy strong {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.wallpaper-section {
    margin-bottom: 24px !important;
}

.wallpaper-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.wallpaper-tile {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 10px !important;
    min-width: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    text-align: left !important;
    backdrop-filter: blur(16px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
    transition: transform 0.18s var(--ios-ease), border-color 0.18s var(--ios-ease), background-color 0.18s var(--ios-ease) !important;
}

.wallpaper-tile:active {
    transform: scale(0.975) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.wallpaper-tile.is-selected {
    border-color: rgba(96, 165, 250, 0.7) !important;
    background: rgba(59, 130, 246, 0.16) !important;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.18), 0 10px 28px rgba(15, 53, 181, 0.2) !important;
}

.wallpaper-tile-preview {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.wallpaper-tile-preview::after,
.wallpaper-current-preview::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(5, 34, 67, 0.08), rgba(5, 34, 67, 0.18)) !important;
}

.wallpaper-preview-video {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
}

.wallpaper-tile-preview.is-live-preview,
.wallpaper-current-preview.is-live-preview {
    background: #141219 !important;
}

.wallpaper-tile-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.wallpaper-tile-check {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    background: rgba(255, 255, 255, 0.13) !important;
    color: transparent !important;
}

.wallpaper-tile.is-selected .wallpaper-tile-check {
    background: #0e75f5 !important;
    color: #ffffff !important;
}

.wallpaper-tile-check svg {
    width: 14px !important;
    height: 14px !important;
}

.wallpaper-custom-card {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) 42px !important;
    gap: 13px !important;
    align-items: center !important;
    padding: 12px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(16px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
}

.wallpaper-custom-card.is-selected {
    border-color: rgba(96, 165, 250, 0.7) !important;
    background: rgba(59, 130, 246, 0.16) !important;
}

.wallpaper-custom-preview {
    width: 62px !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

.wallpaper-custom-preview svg {
    width: 24px !important;
    height: 24px !important;
}

.wallpaper-custom-copy {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.wallpaper-custom-copy strong {
    font-size: 15px !important;
}

.wallpaper-upload-button {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

.wallpaper-upload-button svg {
    width: 19px !important;
    height: 19px !important;
}

.wallpaper-reset-button {
    width: 100% !important;
    min-height: 48px !important;
    margin-top: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* Analytics dashboard grid */
.analytics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}

.analytics-widget {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 14px !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.analytics-widget-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

.analytics-widget-title {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.analytics-widget-icon {
    width: 14px !important;
    height: 14px !important;
}

.analytics-widget-value {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    margin-top: 2px !important;
}

.analytics-widget-sub {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Glass Settings Cards */
.glass-settings-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    padding: 16px !important;
    margin-bottom: var(--card-to-section-gap) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 24px rgba(3, 24, 53, 0.1) !important;
}

.glass-settings-card h2 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 12px 0 !important;
    letter-spacing: -0.01em !important;
}

.settings-card-desc {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    line-height: 1.4 !important;
    margin: -8px 0 14px 0 !important;
}

.settings-card-hint {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    line-height: 1.4 !important;
    margin: 8px 0 0 0 !important;
}

.settings-card-subtitle {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 18px 0 8px 0 !important;
}

/* Checkbox Row list for schedule days */
.schedule-workdays-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 10px !important;
}

.glass-checkbox-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    cursor: pointer !important;
}

.glass-checkbox-row:last-child {
    border-bottom: none !important;
}

.glass-checkbox-row span {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}

.glass-checkbox-row input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    background: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.15s, border-color 0.15s !important;
}

.glass-checkbox-row input[type="checkbox"]:checked {
    background-color: #30d158 !important;
    border-color: #30d158 !important;
}

.glass-checkbox-row input[type="checkbox"]:checked::after {
    content: "✓" !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* Add break form dashed container styling */
.add-break-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 10px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 14px !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(255, 255, 255, 0.15) !important;
}

/* Glass input fields & selects general style overrides */
.glass-settings-card .field-line {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 14px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
}

.glass-settings-card .field-line.full {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
}

.glass-settings-card .field-line input,
.glass-settings-card .field-line select {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: right !important;
    width: 100px !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, background-color 0.2s !important;
}

.glass-settings-card .field-line input[type="date"],
.glass-settings-card .field-line input[type="time"] {
    text-align: center !important;
    width: 130px !important;
}

.glass-settings-card .field-line select {
    text-align: left !important;
    width: 150px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    padding-right: 28px !important;
}

.glass-settings-card .field-line.full select {
    width: 100% !important;
}

.glass-settings-card .field-line input:focus,
.glass-settings-card .field-line select:focus {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.glass-settings-card select option {
    background-color: #1c2635 !important;
    color: #ffffff !important;
}

/* Material Settings Block */
.glass-settings-card .material-setting {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 18px !important;
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.glass-settings-card .material-setting strong {
    font-size: 15px !important;
    color: #ffffff !important;
}

.glass-settings-card .material-setting .field-line {
    background: rgba(255, 255, 255, 0.02) !important;
    padding: 8px 10px !important;
    margin-top: 0 !important;
    border-radius: 12px !important;
}

.glass-settings-card .material-setting span {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    align-self: flex-end !important;
    margin-top: 2px !important;
}

.glass-settings-card .material-setting span strong {
    color: #ff9f0a !important;
}

/* Service durations inputs row styling */
.glass-service-duration-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.glass-service-duration-row:last-child {
    border-bottom: none !important;
}

.glass-service-duration-row span {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    max-width: 50% !important;
}

.glass-service-duration-row .inputs-container {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

.glass-service-duration-row .inputs-container input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    outline: none !important;
    width: 72px !important;
    transition: border-color 0.2s, background-color 0.2s !important;
}

.glass-service-duration-row .inputs-container input.service-price-input {
    width: 86px !important;
}

.glass-service-duration-row .inputs-container input:focus {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.glass-service-duration-row .unit-label {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Breaks list and break items */
.breaks-empty-text {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    text-align: center !important;
    margin: 12px 0 !important;
}

.glass-break-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
    margin-bottom: 8px !important;
}

.glass-break-item strong {
    font-size: 14px !important;
    color: #ffffff !important;
    display: block !important;
}

.glass-break-item span {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

.glass-break-item .danger-action.compact {
    padding: 6px 12px !important;
    font-size: 11px !important;
    height: auto !important;
    line-height: 1 !important;
}

.settings-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 16px 12px !important;
    height: 48px !important;
    margin-bottom: 16px !important;
    position: relative !important;
}

.settings-topbar h1 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-align: center !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

.settings-back-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.33) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), 0 6px 16px rgba(3, 24, 53, 0.15) !important;
    z-index: 10 !important;
}

.settings-back-btn:active {
    transform: scale(0.96) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.settings-back-btn svg {
    width: 22px !important;
    height: 22px !important;
}

/* Редизайн экрана калькулятора под Liquid Glass */
.screen-calculator {
    box-sizing: border-box !important;
    min-height: -webkit-fill-available !important;
    min-height: var(--app-vh-safe, 100dvh) !important;
    height: var(--app-vh-safe, 100dvh) !important;
    max-height: var(--app-vh-safe, 100dvh) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    display: none;
    flex-direction: column;
    padding: calc(16px + env(safe-area-inset-top)) var(--page-x) 0 var(--page-x) !important;
}

.screen-calculator.is-active {
    display: flex !important;
}

.screen-calculator .card,
.screen-calculator .accordion-item {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(20px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 8px 32px rgba(4, 24, 52, 0.15) !important;
    color: #ffffff !important;
    margin-bottom: 16px !important;
}

.screen-calculator .card h2,
.screen-calculator .accordion-item h2,
.screen-calculator .accordion-head span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Опции выбора услуг */
.screen-calculator .service-option {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: none !important;
    transition: transform 0.2s, background-color 0.2s, border-color 0.2s !important;
}

.screen-calculator .service-option:active {
    transform: scale(0.985) !important;
}

.screen-calculator .service-option .service-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.screen-calculator .service-option .service-description {
    color: rgba(255, 255, 255, 0.45) !important;
}

.screen-calculator .service-option .service-price {
    color: #ff9f0a !important;
    font-weight: 700 !important;
}

/* Выбранная услуга */
.screen-calculator .service-option.is-selected {
    transform: scale(1.025) !important;
    background: rgba(255, 255, 255, 0.22) !important; /* Более плотный белый полупрозрачный фон */
    background-image: none !important; /* Гарантированно отключаем градиент */
    border: 2.5px solid #ffffff !important; /* Контрастная белая обводка */
    backdrop-filter: blur(45px) brightness(1.12) saturate(100%) !important; /* Мощный блюр без синего оттенка */
    -webkit-backdrop-filter: blur(45px) brightness(1.12) saturate(100%) !important;
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 12px 32px rgba(0, 0, 0, 0.15) !important;
    color: #ffffff !important;
}

.screen-calculator .service-option.is-selected .service-title {
    color: #ffffff !important;
}

.screen-calculator .service-option.is-selected .service-description {
    color: rgba(255, 255, 255, 0.9) !important;
}

.screen-calculator .service-option.is-selected .service-price {
    color: #ffffff !important;
}

.screen-calculator .service-image {
    border-radius: 12px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.screen-calculator .service-image img {
    opacity: 0.85 !important;
    mix-blend-mode: normal !important;
}

/* Кнопки выбора длины и густоты */
.screen-calculator .choice-option,
.screen-calculator .choice-chip {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    transition: transform 0.2s, background-color 0.2s, border-color 0.2s !important;
}

.screen-calculator .choice-option.is-selected,
.screen-calculator .choice-chip.is-selected {
    transform: scale(1.025) !important;
    background: rgba(255, 255, 255, 0.25) !important; /* Белый полупрозрачный фон */
    background-image: none !important;
    border: 2px solid #ffffff !important; /* Контрастная белая обводка */
    backdrop-filter: blur(25px) brightness(1.1) saturate(100%) !important; /* Матовое размытие */
    -webkit-backdrop-filter: blur(25px) brightness(1.1) saturate(100%) !important;
    color: #ffffff !important;
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 8px 24px rgba(0, 0, 0, 0.12) !important; /* Нейтральная тень */
}

/* Поля ввода и селекты */
.screen-calculator input[type="number"],
.screen-calculator input[type="text"],
.screen-calculator select {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    outline: none !important;
    transition: border-color 0.2s, background-color 0.2s !important;
}

.screen-calculator input[type="number"]:focus,
.screen-calculator input[type="text"]:focus,
.screen-calculator select:focus {
    border-color: rgba(14, 117, 245, 0.6) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Аккордеоны */
.screen-calculator .accordion-head {
    background: transparent !important;
    color: #ffffff !important;
    padding: 16px 14px !important;
}

.screen-calculator .accordion-body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Карта результатов Итого */
.screen-calculator .total-card {
    background: rgba(255, 255, 255, 0.18) !important; /* Чистый Liquid Glass без синего градиента */
    background-image: none !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(40px) brightness(1.05) saturate(100%) !important; /* Сильное матовое размытие */
    -webkit-backdrop-filter: blur(40px) brightness(1.05) saturate(100%) !important;
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 12px 36px rgba(0, 0, 0, 0.15) !important; /* Нейтральная тень */
    color: #ffffff !important;
}

.screen-calculator .total-card .total-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

.screen-calculator .total-card .total-value-input {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.screen-calculator .total-card .total-value-input:focus {
    border-bottom-style: solid !important;
    border-bottom-color: #ff9f0a !important;
}

.screen-calculator .markup-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.screen-calculator .breakdown-row {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.screen-calculator .breakdown-row-note {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin: 8px 0 !important;
}

.screen-calculator .breakdown-total {
    border-top-color: rgba(255, 255, 255, 0.2) !important;
}

/* Стили контрастности текстов, иконок и кнопок в калькуляторе */
.screen-calculator .line-icon,
.screen-calculator .accordion-title svg,
.screen-calculator h2 i,
.screen-calculator h2 svg {
    color: #ffffff !important;
}

.screen-calculator .hair-section-title,
.screen-calculator h3,
.screen-calculator h4 {
    color: #ffffff !important;
    opacity: 0.95 !important;
    font-weight: 600 !important;
}

.screen-calculator .field-line,
.screen-calculator label,
.screen-calculator .accordion-meta {
    color: rgba(255, 255, 255, 0.75) !important;
}

.screen-calculator input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Стилизация кнопок расчета и сохранения по ID */
#calculateButton {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 20px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #0e75f5 0%, #0056c6 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: 
        0 8px 22px rgba(14, 117, 245, 0.35), 
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
    margin-bottom: 12px !important;
}

#calculateButton:active {
    transform: scale(0.975) !important;
    box-shadow: 
        0 4px 10px rgba(14, 117, 245, 0.2), 
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#saveButton {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: transform 0.15s ease, background-color 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

#saveButton:active {
    transform: scale(0.98) !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

#saveButton svg {
    width: 18px !important;
    height: 18px !important;
}

/* ==========================================================================
   Premium UI Overrides: Layout Alignment, Color Accents & Contrast
   ========================================================================== */

/* 1. Исправление вёрстки списка длительности услуг */
.glass-service-duration-row {
    flex-wrap: nowrap !important;
    gap: 12px !important;
}

.glass-service-duration-row span {
    max-width: none !important;
    flex: 1 !important;
    line-height: 1.25 !important;
    margin-right: 8px !important;
}

.glass-service-duration-row .inputs-container {
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
    width: auto !important;
}

.glass-service-duration-row .inputs-container input {
    text-align: left !important; /* Цифры по левому краю */
    width: 52px !important;
    padding: 6px 8px !important;
}

.glass-service-duration-row .inputs-container input.service-price-input {
    width: 72px !important;
}

/* 2. Выравнивание цифр по левому краю в карточках настроек */
.glass-settings-card .field-line input {
    text-align: left !important;
}

/* 3. Синие акцентные кнопки в настройках */
#addBreakButton,
#saveScheduleButton,
.glass-settings-card .primary-action,
.add-break-form .primary-action,
.screen[data-screen="settings"] .primary-action,
.screen[data-screen="scheduleSettings"] .primary-action {
    background: linear-gradient(135deg, #0e75f5 0%, #0056c6 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: 
        0 8px 22px rgba(14, 117, 245, 0.35), 
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}

#addBreakButton:active,
#saveScheduleButton:active,
.glass-settings-card .primary-action:active,
.add-break-form .primary-action:active,
.screen[data-screen="settings"] .primary-action:active,
.screen[data-screen="scheduleSettings"] .primary-action:active {
    transform: scale(0.975) !important;
    box-shadow: 
        0 4px 10px rgba(14, 117, 245, 0.2), 
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* 4. Замена золотого/оранжевого цвета цены за 1 г на белый */
.glass-settings-card .material-setting span strong {
    color: #ffffff !important;
}

/* 5. Выбор услуги ("Что делаем") */
.screen-calculator .service-option {
    background: rgba(255, 255, 255, 0.03) !important; /* Еще более бледный/прозрачный фон для невыбранных */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.22s var(--ios-ease), background-color 0.22s var(--ios-ease), border-color 0.22s var(--ios-ease), box-shadow 0.22s var(--ios-ease) !important;
}

.screen-calculator .service-option .service-price {
    color: rgba(255, 255, 255, 0.85) !important; /* Белый с легкой прозрачностью для невыбранных */
    font-weight: 700 !important;
}

.screen-calculator .service-option.is-selected {
    transform: scale(1.025) !important; /* Увеличение выбранной карточки */
    background: rgba(255, 255, 255, 0.22) !important; /* Чистый полупрозрачный белый фон (без синего оттенка) */
    background-image: none !important; /* Гарантированно отключаем градиент */
    border: 2.5px solid #ffffff !important; /* Белая рамка для контраста */
    backdrop-filter: blur(45px) brightness(1.12) saturate(100%) !important; /* Сильный блюр Liquid Glass */
    -webkit-backdrop-filter: blur(45px) brightness(1.12) saturate(100%) !important;
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 12px 32px rgba(0, 0, 0, 0.15) !important;
}

.screen-calculator .service-option.is-selected .service-price {
    color: #ffffff !important; /* Чисто белый для цены выбранной услуги */
    font-weight: 800 !important;
}

.screen-calculator .service-option.is-selected .check-circle {
    border-color: #ffffff !important;
    background: #ffffff !important; /* Белый круг */
    color: #0e75f5 !important;
}

.screen-calculator .service-option.is-selected .check-circle svg {
    stroke: #0e75f5 !important; /* Ярко-синяя галочка */
}

/* 6. Кнопки выбора длины и густоты волос */
.screen-calculator .choice-option.is-selected,
.screen-calculator .choice-chip.is-selected {
    transform: scale(1.025) !important;
    background: rgba(255, 255, 255, 0.25) !important; /* Белый полупрозрачный фон */
    background-image: none !important;
    border: 2px solid #ffffff !important; /* Контрастная белая обводка */
    backdrop-filter: blur(25px) brightness(1.1) saturate(100%) !important; /* Матовое размытие */
    -webkit-backdrop-filter: blur(25px) brightness(1.1) saturate(100%) !important;
    color: #ffffff !important;
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 8px 24px rgba(0, 0, 0, 0.12) !important; /* Нейтральная тень */
}

/* 7. Рекомендуемая цена (Исправление высоты шрифта инпута) */
.screen-calculator .total-card .total-value-wrapper {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important; /* Увеличиваем расстояние (пробел) между инпутом и знаком рубля */
}

.screen-calculator .total-card .total-value-input {
    font-size: 32px !important;
    font-weight: 800 !important;
    /* Убран width: 140px !important, чтобы JS-функция adjustTotalInputWidth сама подстраивала ширину */
    min-width: 50px !important;
    max-width: 200px !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.4) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 2px 0 0 !important; /* Внутренний отступ справа, чтобы не обрезался нолик */
    margin: 0 !important;
    color: #ffffff !important;
}

.screen-calculator .total-card .total-value-input:focus {
    border-bottom-style: solid !important;
    border-bottom-color: #0e75f5 !important;
}

.screen-calculator .total-card .total-value-currency {
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

.screen-calculator .total-card .calc-icon {
    background: #0e75f5 !important; /* Заменяем оранжевую кнопку калькулятора на синюю */
    color: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(14, 117, 245, 0.25) !important;
}

/* 8. Дополнительно (Цены доп. услуг, чекбоксы) */
.screen-calculator .check-row {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.screen-calculator .check-row strong {
    color: #ffffff !important; /* Цены доп. услуг теперь белые по просьбе пользователя */
    font-size: 15px !important;
    font-weight: 700 !important;
}

.screen-calculator .check-row input[type="checkbox"] {
    accent-color: #0e75f5 !important; /* Синие чекбоксы */
    width: 18px !important;
    height: 18px !important;
}

/* 9. Смесь, оксид, регулярность и прогресс */
.screen-calculator .hint-button {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    margin-top: 12px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: background-color 0.2s, color 0.2s !important;
}

.screen-calculator .hint-button:active {
    background: rgba(255, 255, 255, 0.1) !important;
}

.screen-calculator .hint-button.mix-apply {
    background: #0e75f5 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(14, 117, 245, 0.25) !important;
}

.screen-calculator .hint-button.mix-apply:active {
    background: #0056c6 !important;
}

.screen-calculator .mix-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    padding: 16px !important;
    margin-top: 14px !important;
}

.screen-calculator .mix-head strong {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.screen-calculator .mix-head span,
.screen-calculator .mix-result span {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.screen-calculator .regularity-result {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    margin-top: 14px !important;
}

.screen-calculator .regularity-result strong {
    background: #0e75f5 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    border-radius: 12px !important;
    padding: 8px 14px !important;
}

.screen-calculator #regularityText {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
}

/* 10. Прогресс-бар шагов (калькулятор) */
.screen-calculator .progress-step {
    color: rgba(255, 255, 255, 0.45) !important;
}

.screen-calculator .progress-step.is-active,
.screen-calculator .progress-step.is-complete {
    color: #ffffff !important;
}

.screen-calculator .progress-step.is-active .step-dot,
.screen-calculator .progress-step.is-complete .step-dot {
    background: #0e75f5 !important;
    border-color: #0e75f5 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(14, 117, 245, 0.3) !important;
}

.screen-calculator .progress-track::after {
    background: #0e75f5 !important;
}

.screen-calculator .progress-track::before {
    background: rgba(255, 255, 255, 0.15) !important;
}

.screen-calculator .progress-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 22px 0 18px !important;
}

/* 11. Калькулятор: Контрастные белые тексты и инпуты */
.screen-calculator .mini-label {
    color: #ffffff !important;
    opacity: 0.95 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.screen-calculator .field-line {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.screen-calculator .field-line input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Единый матовый стеклянный фон для всех внутренних экранов */
.screen[data-screen="calculator"],
.screen[data-screen="settings"],
.screen[data-screen="scheduleSettings"],
.screen[data-screen="wallpapers"],
.screen[data-screen="more"],
.screen[data-screen="history"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    z-index: 990 !important;
    
    backdrop-filter: blur(45px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(45px) saturate(140%) !important;
    background: rgba(8, 20, 42, 0.65) !important;
    border-radius: 0 !important;
    border: none !important;
    overscroll-behavior: none !important;
}

/* Настройки тем времени суток для внутренних экранов на основе классов body */
body.theme-morning .screen[data-screen="calculator"],
body.theme-morning .screen[data-screen="settings"],
body.theme-morning .screen[data-screen="scheduleSettings"],
body.theme-morning .screen[data-screen="wallpapers"],
body.theme-morning .screen[data-screen="more"],
body.theme-morning .screen[data-screen="history"] {
    background: linear-gradient(135deg, rgba(215, 235, 255, 0.16) 0%, rgba(195, 220, 255, 0.12) 100%) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 20px 40px rgba(180, 215, 255, 0.08),
        0 15px 50px rgba(5, 20, 40, 0.25) !important;
}

body.theme-day .screen[data-screen="calculator"],
body.theme-day .screen[data-screen="settings"],
body.theme-day .screen[data-screen="scheduleSettings"],
body.theme-day .screen[data-screen="wallpapers"],
body.theme-day .screen[data-screen="more"],
body.theme-day .screen[data-screen="history"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.11) 100%) !important;
}

body.theme-evening .screen[data-screen="calculator"],
body.theme-evening .screen[data-screen="settings"],
body.theme-evening .screen[data-screen="scheduleSettings"],
body.theme-evening .screen[data-screen="wallpapers"],
body.theme-evening .screen[data-screen="more"],
body.theme-evening .screen[data-screen="history"] {
    background: linear-gradient(135deg, rgba(255, 232, 215, 0.18) 0%, rgba(255, 220, 195, 0.12) 100%) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 20px 40px rgba(255, 200, 175, 0.08),
        0 15px 50px rgba(25, 15, 5, 0.25) !important;
}

body.theme-night .screen[data-screen="calculator"],
body.theme-night .screen[data-screen="settings"],
body.theme-night .screen[data-screen="scheduleSettings"],
body.theme-night .screen[data-screen="wallpapers"],
body.theme-night .screen[data-screen="more"],
body.theme-night .screen[data-screen="history"] {
    background: linear-gradient(135deg, rgba(12, 22, 38, 0.5) 0%, rgba(9, 14, 24, 0.45) 100%) !important;
    backdrop-filter: blur(60px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(60px) saturate(125%) !important;
}

body.theme-dark-glass .screen[data-screen="calculator"],
body.theme-dark-glass .screen[data-screen="settings"],
body.theme-dark-glass .screen[data-screen="scheduleSettings"],
body.theme-dark-glass .screen[data-screen="wallpapers"],
body.theme-dark-glass .screen[data-screen="more"],
body.theme-dark-glass .screen[data-screen="history"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    backdrop-filter: blur(40px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(140%) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 15px 50px rgba(0, 0, 0, 0.25) !important;
}


.client-calculation-card strong[style*="color: var(--accent)"] {
    color: #0a84ff !important;
}

/* Плавная CSS-анимация перехода для вкладок */
.screen-entry-anim {
    animation: screenFadeIn 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes screenFadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, 2px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ==========================================================================
   NEW STYLES FOR PREMIUM GLASS HISTORY SCREEN
   ========================================================================== */

/* Корректировка z-index для листов истории и оверлея */
.history-overlay {
    z-index: 1010 !important;
}

.history-sheet {
    z-index: 1020 !important;
}

/* Отключение вращения иконки фильтра в истории при клике */
#openHistoryFilters:active svg,
#openHistoryFilters.is-pressed svg {
    animation: none !important;
}

/* Уменьшение высоты и Liquid glass эффект для полей поиска на экранах клиентов и истории */
.clients-search,
.history-search {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 18px !important;
    padding: 0 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    margin-bottom: 12px !important;
}

.clients-search svg,
.history-search svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

.clients-search input,
.history-search input {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

.clients-search input::placeholder,
.history-search input::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 500 !important;
}

/* Premium Glass History Stats Card - Уменьшенная */
.history-stats-card {
    min-height: 72px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
    border-radius: 20px !important;
    padding: 10px 14px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    display: grid !important;
    grid-template-columns: 44px 1fr 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
}

.history-stat-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.history-stat-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.history-stats-card h2 {
    margin: 0 0 3px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}

.history-stats-card strong {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.history-stat-total {
    padding-left: 10px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.history-stat-total span {
    display: block !important;
    margin-bottom: 3px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}

#historyMonthTotal {
    color: #ffffff !important; /* Исправлено: Общая сумма белым цветом */
}

/* Скроллящийся контейнер для списка расчетов истории */
.history-list {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding-bottom: calc(var(--tabbar-height) + 24px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
}

.history-list::-webkit-scrollbar {
    display: none !important;
}

/* Premium Glass History Card (Aligned with new-appointment-card style) */
.history-card {
    box-sizing: border-box !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: var(--appointment-card-padding) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.085) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(22px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(120%) !important;
    color: #ffffff !important;
    text-align: left !important;
    box-shadow: 0 4px 14px rgba(3, 25, 55, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    cursor: pointer !important;
    transition: transform 0.25s var(--ios-ease), background-color 0.2s var(--ios-ease), border-color 0.2s var(--ios-ease) !important;
    margin-bottom: 12px !important;
}

.history-card:active {
    transform: scale(0.965) !important;
    background-color: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.history-avatar-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.history-avatar {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

.history-main-col {
    flex: 1 !important;
    padding-left: 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.history-main-col h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

.history-main-col .history-service-desc {
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 500 !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.3 !important;
}

.history-tags-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 4px !important;
}

.history-side-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.history-date-label {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
}

.history-price-val {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
}

.history-arrow-col {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    color: rgba(255, 255, 255, 0.3) !important;
    width: 24px !important;
    flex-shrink: 0 !important;
}

.history-arrow-col svg {
    width: 16px !important;
    height: 16px !important;
    color: rgba(255, 255, 255, 0.3) !important;
}

.status-badge {
    border-radius: 8px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

.status-done {
    background: rgba(46, 204, 113, 0.12) !important;
    border: 1px solid rgba(46, 204, 113, 0.22) !important;
    color: #2ecc71 !important;
}

.status-draft {
    background: rgba(241, 196, 15, 0.12) !important;
    border: 1px solid rgba(241, 196, 15, 0.22) !important;
    color: #f1c40f !important;
}

/* Экран Истории (явно задаем флекс и высоту) */
.history-screen {
    display: none;
    min-height: var(--app-vh-safe, 100dvh) !important;
    height: var(--app-vh-safe, 100dvh) !important;
    max-height: var(--app-vh-safe, 100dvh) !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.history-screen.is-active {
    display: flex !important;
}

/* Когда история пустая, добавляем паддинг снизу для родительского экрана, чтобы контент не уходил под таббар */
.history-screen:has(#historyEmpty:not([hidden])) {
    padding-bottom: calc(var(--tabbar-height) + 16px + env(safe-area-inset-bottom)) !important;
}

/* Premium Glass Empty State - Centered vertically when active */
.history-empty {
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(20px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
    border-radius: 20px !important;
    padding: 20px 16px !important;
    text-align: center !important;
    box-shadow: 0 4px 14px rgba(3, 25, 55, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    margin: auto 0 !important; /* Centering vertically inside the flex parent */
    align-self: stretch !important;
}

.history-empty h2 {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
}

.history-empty p {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 12.5px !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.4 !important;
}

/* Матовая Liquid Glass кнопка "Создать первый расчет" */
.history-empty .primary-action {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 18px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s var(--ios-ease), background-color 0.2s var(--ios-ease), border-color 0.2s var(--ios-ease) !important;
}

.history-empty .primary-action:active {
    transform: scale(0.97) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.history-list[hidden] {
    display: none !important;
}

/* ─── Wallpaper Multi-Select & Header styles ─── */
.wallpaper-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 14px 4px !important;
}

.wallpaper-section-header .more-section-title {
    margin: 0 !important;
}

.wallpaper-select-all-btn {
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
    backdrop-filter: blur(12px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
    transition: background-color 0.18s var(--ios-ease), transform 0.18s var(--ios-ease), border-color 0.18s var(--ios-ease) !important;
}

.wallpaper-select-all-btn:active {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: scale(0.97) !important;
}

/* Тема Dark Glass для новых системных фото-обоев */
body.theme-dark-glass {
    background-color: #0b0f19 !important;
}
body.is-home-active.theme-dark-glass,
body.is-appointments-active.theme-dark-glass {
    background-color: #0b0f19 !important;
}

.mobile-app.theme-dark-glass::before {
    background-image:
        linear-gradient(
          180deg,
          rgba(11, 15, 25, 0.2) 0%,
          rgba(11, 15, 25, 0.1) 40%,
          rgba(11, 15, 25, 0.25) 100%
        ),
        var(--app-wallpaper-url, none);
    background-position: var(--app-wallpaper-position, center center);
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* LiquidGlass Alert Overlay */
.liquid-alert-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    background: rgba(10, 15, 30, 0.45) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    pointer-events: auto !important;
}

.liquid-alert-overlay.is-visible {
    opacity: 1 !important;
}

.liquid-alert-overlay.is-hiding {
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
}

.liquid-alert-card {
    position: relative !important;
    width: 100% !important;
    max-width: 300px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 28px !important;
    padding: 28px 24px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(25px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(140%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.liquid-alert-overlay.is-visible .liquid-alert-card {
    transform: scale(1) translateY(0) !important;
}

.liquid-alert-overlay.is-hiding .liquid-alert-card {
    transform: scale(0.92) translateY(10px) !important;
    transition: transform 0.25s ease !important;
}

.liquid-alert-glow {
    position: absolute !important;
    top: -50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 160px !important;
    height: 160px !important;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.25) 0%, rgba(96, 165, 250, 0) 70%) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

.liquid-alert-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 20px !important;
    background: rgba(96, 165, 250, 0.12) !important;
    border: 1px solid rgba(96, 165, 250, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.15) !important;
}

.liquid-alert-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    letter-spacing: -0.02em !important;
}

.liquid-alert-message {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.45 !important;
    margin: 0 0 24px 0 !important;
}

.liquid-alert-btn {
    width: 100% !important;
    height: 48px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.3) 0%, rgba(59, 130, 246, 0.1) 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background-color 0.2s, transform 0.15s, border-color 0.2s !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
}

.liquid-alert-btn:active {
    transform: scale(0.97) !important;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.4) 0%, rgba(59, 130, 246, 0.2) 100%) !important;
}

/* Time Emulator Styling */
.time-emulator {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 24px auto 16px auto !important;
    padding: 8px 16px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 24px !important;
    width: fit-content !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    z-index: 10 !important;
    position: relative !important;
}

.time-emulator button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.time-emulator button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.06) !important;
}

.time-emulator button.is-active {
    background: linear-gradient(135deg, rgba(236, 127, 19, 0.85) 0%, rgba(219, 56, 56, 0.85) 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 14px rgba(219, 56, 56, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.1) !important;
}


/* Autocomplete container and input group rules */
.autocomplete-container {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

.autocomplete-container .sheet-input-group {
    margin-bottom: 0 !important;
}

/* Autocomplete Suggestions for Booking Name Input */
.autocomplete-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(30, 30, 35, 0.75) !important;
    backdrop-filter: blur(25px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(120%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px;
    margin-top: 6px;
    max-height: 180px;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.autocomplete-suggestion-item {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text, #ffffff) !important;
    transition: background-color 0.2s ease;
}

.autocomplete-suggestion-item:last-child {
    border-bottom: none !important;
}

.autocomplete-suggestion-item:hover,
.autocomplete-suggestion-item.is-active {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.autocomplete-suggestion-item strong {
    font-weight: 700;
    font-size: 14.5px;
    color: #ffffff !important;
}

.autocomplete-suggestion-item span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 500;
}

/* Offline write locks */
.is-offline-locked {
    cursor: not-allowed !important;
}

button.is-offline-locked,
.quick-action-card.is-offline-locked {
    opacity: 0.78;
}

.quick-action-card.is-offline-locked {
    position: relative;
}

.quick-action-card.is-offline-locked::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(10, 14, 22, 0.22), rgba(10, 14, 22, 0.04));
    pointer-events: none;
}

.offline-lock-mark {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 8;
    width: 30px;
    height: 30px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.94);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 24px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(16px) saturate(165%);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    pointer-events: none;
}

.offline-lock-mark svg {
    width: 15px;
    height: 15px;
}

button.is-offline-locked {
    position: relative;
}

button.is-offline-locked .offline-lock-mark {
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 10px;
}

button.is-offline-locked .offline-lock-mark svg {
    width: 12px;
    height: 12px;
}

.liquid-alert-overlay .liquid-alert-card {
    overflow: hidden !important;
}

/* ==========================================================================
   Smooth Liquid Glass Tactile Touch Feedback Physics
   ========================================================================== */
.primary-action,
.secondary-action,
.danger-action,
.quick-action-card,
.glass-card-appointment,
.appointment-card,
.client-card,
.history-icon-btn,
.notif-header-btn {
    will-change: transform, opacity;
    transition: transform 140ms cubic-bezier(0.2, 0.9, 0.2, 1.05), opacity 140ms cubic-bezier(0.2, 0.9, 0.2, 1.05), background-color 180ms ease !important;
}

.primary-action:active,
.secondary-action:active,
.danger-action:active,
.quick-action-card:active,
.glass-card-appointment:active,
.appointment-card:active,
.client-card:active,
.history-icon-btn:active,
.notif-header-btn:active {
    transform: scale(0.97) translate3d(0, 0, 0) !important;
    opacity: 0.92 !important;
}

body.is-offline-mode .quick-action-card[data-action="new-appointment"]:active,
button.is-offline-locked:active {
    transform: none !important;
}

/* Premium Highlight for New Online Appointments */
.new-appointment-card.is-new-status {
    border-left: 4px solid #f59e0b !important;
    background: rgba(245, 158, 11, 0.08) !important;
}

/* ==========================================================================
   iOS Glass Privacy Data Blur
   ========================================================================== */
.ios-switch-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
}

.ios-switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ios-switch-slider {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 34px;
    transition: background-color 0.26s cubic-bezier(0.2, 0.9, 0.2, 1.05), border-color 0.26s ease;
    backdrop-filter: blur(10px);
}

.ios-switch-slider::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.2, 1.05);
}

.ios-switch-toggle input:checked + .ios-switch-slider {
    background-color: #34c759 !important;
    border-color: #34c759 !important;
}

.ios-switch-toggle input:checked + .ios-switch-slider::before {
    transform: translateX(20px);
}

/* ==========================================================================
   iOS Glass Privacy Data Blur (Phone Numbers & Client Names)
   ========================================================================== */

/* 1. Client Phone Numbers Privacy Blur */
body.privacy-blur-active .client-phone,
body.privacy-blur-active .phone-number,
body.privacy-blur-active .phone-link,
body.privacy-blur-active .client-card-phone,
body.privacy-blur-active .detail-row .phone-number,
body.privacy-blur-active .detail-row a[href^="tel:"] {
    filter: blur(6px) !important;
    -webkit-filter: blur(6px) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    opacity: 0.7 !important;
    letter-spacing: 2px !important;
    transition: filter 0.25s var(--ios-ease), opacity 0.25s var(--ios-ease) !important;
    pointer-events: none !important;
}

/* 2. Client Names Privacy Blur (Cards, Widgets, Lists, Modals, Headers & Inputs) */
body.privacy-blur-active .appointment-main h3,
body.privacy-blur-active .glass-card-appointment .appointment-main h3,
body.privacy-blur-active .card-main-col h3,
body.privacy-blur-active .appointment-card .card-main-col h3,
body.privacy-blur-active .client-main h3,
body.privacy-blur-active .client-card .client-main h3,
body.privacy-blur-active .history-main-col h3,
body.privacy-blur-active .history-card .history-main-col h3,
body.privacy-blur-active #detailClientName,
body.privacy-blur-active #appointmentDetailClientName,
body.privacy-blur-active #clientDetailName,
body.privacy-blur-active .stats-forecast-client-name,
body.privacy-blur-active .client-name,
body.privacy-blur-active .client-title,
body.privacy-blur-active .client-item-name,
body.privacy-blur-active .client-profile-name,
body.privacy-blur-active .autocomplete-suggestion-item strong,
body.privacy-blur-active input#editClientName,
body.privacy-blur-active input#clientNameInput,
body.privacy-blur-active input#saveClientName,
body.privacy-blur-active input#manualAppointmentClientName,
body.privacy-blur-active input#editClientPhone,
body.privacy-blur-active input#clientPhoneInput,
body.privacy-blur-active input#saveClientPhone,
body.privacy-blur-active input#manualAppointmentPhone,
body.privacy-blur-active .client-name-input,
body.privacy-blur-active .client-phone-input {
    filter: blur(6px) !important;
    -webkit-filter: blur(6px) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    opacity: 0.65 !important;
    letter-spacing: 0.5px !important;
    transition: filter 0.25s var(--ios-ease), opacity 0.25s var(--ios-ease) !important;
    pointer-events: none !important;
}

/* Also support formatted name parts if present */
body.privacy-blur-active .name-blurred-part {
    filter: blur(6px) !important;
    -webkit-filter: blur(6px) !important;
    opacity: 0.35 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    pointer-events: none !important;
    display: inline-block !important;
}


/* ==========================================================================
   Ultra-Smooth PWA UI & Button Hardware Acceleration (60-120 FPS)
   ========================================================================== */

/* Eliminate 300ms tap delay & gray tap flash across all mobile browsers */
button,
a,
input,
select,
textarea,
.button,
.nav-item,
.liquid-nav-item,
.client-card,
.glass-card-appointment,
.quick-action-card,
.history-card,
.new-appointment-card,
.segmented-item,
.sheet-close-btn,
.sheet-save-btn,
.primary-action,
.secondary-action,
.danger-action,
.danger-action-link,
.liquid-alert-btn,
.wallpaper-tile,
.service-option,
.status-card-action-btn,
.icon-button-bell,
.icon-button-settings,
.icon-button-add,
.history-icon-btn {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: pan-x pan-y manipulation;
}

/* GPU hardware accelerate transform transitions on button tap states */
button:active,
.button:active,
.client-card:active,
.glass-card-appointment:active,
.quick-action-card:active,
.history-card:active,
.new-appointment-card:active,
.segmented-item:active,
.sheet-close-btn:active,
.sheet-save-btn:active,
.primary-action:active,
.secondary-action:active,
.danger-action:active,
.danger-action-link:active,
.liquid-alert-btn:active,
.wallpaper-tile:active,
.service-option:active,
.status-card-action-btn:active,
.icon-button-bell:active,
.icon-button-settings:active,
.icon-button-add:active,
.history-icon-btn:active {
    will-change: transform;
}

/* Smooth scroll behavior on all scroll containers */
.screen,
.history-sheet,
.notifications-sheet,
.new-sheet-scroll-container,
.stats-modal-container,
.client-analytics-grid,
.client-detail-appointments-section {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}


/* ==========================================================================
   Ultra-Smooth Apple iOS Spring Physics for All Modals & Sheets (120 FPS)
   ========================================================================== */

/* GPU Compositor Layer Isolation */
.history-sheet,
.history-overlay,
.notifications-sheet,
.notifications-overlay,
.stats-modal-container,
.stats-modal-overlay,
.liquid-alert-card,
.liquid-alert-overlay,
#clientDetailSheet,
#appointmentDetailSheet,
#newAppointmentSheet,
#quickActionsSheet {
    will-change: transform, opacity !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    contain: layout style paint !important;
}

/* Master Spring Bézier Curve for Liquid Bottom Sheet Opening & Closing */
.history-sheet {
    transform: translate3d(0, 105%, 0) !important;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.history-sheet.is-open {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
}

.history-sheet.is-closing {
    transform: translate3d(0, 105%, 0) !important;
    transition: transform 280ms cubic-bezier(0.32, 0, 0.67, 0), opacity 220ms ease !important;
    pointer-events: none !important;
}

/* Overlay Backdrop Fade */
.history-overlay {
    opacity: 0 !important;
    transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.history-overlay.is-visible {
    opacity: 1 !important;
}

.history-overlay.is-closing {
    opacity: 0 !important;
    transition: opacity 240ms ease !important;
}

/* Liquid Alert & Card Pop Physics */
.liquid-alert-card {
    transform: scale(0.92) translate3d(0, 14px, 0) !important;
    opacity: 0 !important;
    transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.liquid-alert-overlay.is-visible .liquid-alert-card {
    transform: scale(1) translate3d(0, 0, 0) !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Master Liquid Nav Indicator Fluid Slide Physics (120 FPS Always Enabled)
   ========================================================================== */
.liquid-nav-indicator {
    position: absolute !important;
    top: 0 !important;
    left: 6px !important;
    width: calc((100% - 12px) / 3) !important;
    height: 100% !important;
    z-index: 1 !important;
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    transition-duration: 420ms !important;
    transform: translate3d(0, 0, 0);
    will-change: transform !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    overflow: visible !important;
    pointer-events: none !important;
}

.liquid-nav-indicator::after {
    content: '' !important;
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    right: 5px !important;
    bottom: 5px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.12) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1),
        0 6px 20px rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), background 300ms ease !important;
    will-change: transform !important;
    transform-origin: center center !important;
}

.liquid-nav-indicator.is-moving::after {
    transform: scaleX(1.18) scaleY(0.86) !important;
}

.liquid-nav-indicator.is-pulsing::after {
    transform: scale(0.94) !important;
}