/* Сброс 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;
    font-size: 16px;
}

/* Переменные для быстрой подстройки 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: 13px 16px 14px 16px;
    --quick-card-height: 132px;
    --tabbar-height: 80px;
    --tabbar-item-height: 60px;
    
    --glass-blur: 14px;
    --glass-saturate: 140%;
    
    --bg-position-x: 54%;
    --bg-position-y: 6%; /* Сдвинуто выше и левее для идеального попадания солнца в часы */

    /* Unified Emil Kowalski / iOS 26 Motion Tokens */
    --motion-duration-instant: 100ms;
    --motion-duration-micro: 140ms;
    --motion-duration-fast: 180ms;
    --motion-duration-normal: 240ms;
    --motion-duration-deliberate: 280ms;

    --motion-ease-press: cubic-bezier(0.23, 1, 0.32, 1);
    --motion-ease-enter: cubic-bezier(0.23, 1, 0.32, 1);
    --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --motion-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --motion-ease-move: cubic-bezier(0.77, 0, 0.175, 1);

    --motion-scale-press: 0.96;
    --motion-scale-press-card: 0.98;
    --motion-scale-enter: 0.96;

    --ios-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --ios-spring: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Медиа-запрос для адаптивной плотности на экранах мобильных устройств (iPhone / Android) */
@media (max-height: 890px) {
    :root {
        --page-x: 16px;
        --header-gap: 8px;
        --section-gap: 8px;
        --heading-to-card-gap: 6px;
        --card-to-section-gap: 8px;
        
        --time-card-height: 136px;
        --appointment-avatar-size: 48px;
        --appointment-card-padding: 12px 15px 13px 15px;
        --quick-card-height: 122px;
        --tabbar-height: 72px;
        --tabbar-item-height: 54px;
        --bg-position-x: 54%;
        --bg-position-y: 4%;
    }
    .glass-card-today-metrics {
        padding: 14px 18px 14px 18px !important;
        margin-bottom: var(--card-to-section-gap) !important;
    }
    .today-metrics-grid {
        margin: 8px 0 10px 0 !important;
        gap: 8px !important;
    }
    .today-metric-value {
        font-size: 28px !important;
    }
    .today-metric-label {
        font-size: 12px !important;
        margin-top: 2px !important;
    }
    .today-metrics-divider {
        margin: 0 0 10px 0 !important;
    }
    .today-metrics-revenue-val {
        font-size: 18px !important;
    }
    .today-metrics-footer-label {
        font-size: 14px !important;
    }
    .time-card-val {
        font-size: 44px !important;
    }
    .home-title {
        font-size: 24px !important;
    }
    .home-kicker {
        font-size: 13px !important;
    }
    .section-title {
        font-size: 15px !important;
    }
    .quick-actions-grid {
        gap: 11px !important;
    }
    .bottom-nav {
        padding: 0 6px !important;
    }
}

html.is-loading-app,
html.is-loading-app.theme-dark-glass {
    background-color: #141219 !important;
    /* html keeps background-image — it is the wallpaper carrier */
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
    transition: none !important;
}
body.is-loading-app,
body.is-loading-app.theme-dark-glass {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
    transition: none !important;
}

html.is-loading-app.theme-morning,
html.is-loading-app.theme-day,
html.is-loading-app.theme-evening {
    background-color: #1b2f22 !important;
    background: #1b2f22 !important;
}
body.is-loading-app.theme-morning,
body.is-loading-app.theme-day,
body.is-loading-app.theme-evening {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
}

html.no-theme-transition,
body.no-theme-transition,
html.no-theme-transition *,
body.no-theme-transition * {
    transition: none !important;
}

html {
    width: 100% !important;
    height: 100% !important;
    height: 100lvh !important;
    min-height: 100% !important;
    min-height: 100lvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #141219 !important;
}

html,
body {
    overscroll-behavior-x: none !important;
}

html.is-home-active,
html.is-appointments-active,
html.is-clients-active {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    scrollbar-width: none !important;
}

html.is-sheet-open,
html.is-scroll-locked {
    width: 100% !important;
    height: 100% !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;
    height: 100% !important;
    height: 100lvh !important;
    min-height: 100% !important;
    min-height: 100lvh !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
}

body.is-home-active,
body.is-appointments-active,
body.is-clients-active,
body.is-more-active {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    height: 100lvh !important;
    min-height: 100% !important;
    min-height: 100lvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !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-more-active.is-scroll-locked,
body.is-sheet-open.is-scroll-locked {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    height: 100% !important;
    height: 100lvh !important;
    min-height: 100% !important;
    min-height: 100lvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}



/* Корневой контейнер приложения */
.app-shell {
    width: 100% !important;
    height: 100% !important;
    height: 100lvh !important;
    min-height: 100% !important;
    min-height: 100lvh !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* Слой обоев: аппаратный канвас WebKit с запасом под Safe Area */
.pwa-wallpaper-layer {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -60px !important;
    width: 100% !important;
    height: calc(100% + 60px) !important;
    min-height: calc(100% + 60px) !important;
    min-height: calc(100lvh + 60px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-color: #141219 !important;
    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, url("fon/photo_1_2026-06-24_18-19-58.webp")) !important;
    background-position: var(--app-wallpaper-position, center center) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    transform: translateZ(0) !important;
}

.mobile-app::before {
    display: none !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;
    overscroll-behavior-x: none !important;
    padding-bottom: calc(var(--tabbar-height, 80px) + max(env(safe-area-inset-bottom), 24px) + 36px) !important;
    transition: none !important;
}

.screen:not(.is-active):not(.is-swipe-prev):not(.is-swiping-back) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.screen.is-active:not(.is-swiping-back) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Exempt all screens from fading opacity / scaling crossfade to preserve glass backdrop-filter without flickering */
.screen[data-screen="home"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="appointments"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="clients"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="more"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="salonSettings"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="staffSettings"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="servicesSettings"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="materialsSettings"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="calculatorSettings"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="dataSettings"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="appSettings"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="quickActionsSettings"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="scheduleSettings"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="wallpapers"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="accountSettings"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="masterProfile"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="editProfile"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="support"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="stats"].is-active:not(.is-swiping-back):not(.is-swipe-prev),
.screen[data-screen="calculator"].is-active:not(.is-swiping-back):not(.is-swipe-prev) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.bottom-nav {
    display: none !important;
}

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

/* Темы оформления: применяются непосредственно к аппаратному корневому слою html */
html.theme-morning {
    background-color: #1b2f22 !important;
    background-image:
        linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.12) 0%,
          rgba(0, 0, 0, 0.04) 45%,
          rgba(0, 0, 0, 0.10) 100%
        ),
        var(--app-wallpaper-url, url("fon/bg.webp")) !important;
    background-position: var(--app-wallpaper-position, center center) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

html.theme-day {
    background-color: #1b2f22 !important;
    background-image:
        linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.12) 0%,
          rgba(0, 0, 0, 0.04) 45%,
          rgba(0, 0, 0, 0.10) 100%
        ),
        var(--app-wallpaper-url, url("fon/day_bg.webp")) !important;
    background-position: var(--app-wallpaper-position, center center) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

html.theme-evening {
    background-color: #1b2f22 !important;
    background-image:
        linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.12) 0%,
          rgba(0, 0, 0, 0.04) 45%,
          rgba(0, 0, 0, 0.10) 100%
        ),
        var(--app-wallpaper-url, url("fon/evening_bg.webp")) !important;
    background-position: var(--app-wallpaper-position, center center) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

html.theme-night {
    background-color: #141219 !important;
    background-image:
        linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.12) 0%,
          rgba(0, 0, 0, 0.04) 45%,
          rgba(0, 0, 0, 0.10) 100%
        ),
        var(--app-wallpaper-url, url("fon/night_bg.webp")) !important;
    background-position: var(--app-wallpaper-position, 62% 2%) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

html.theme-dark-glass {
    background-color: #141219 !important;
    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, url("fon/photo_1_2026-06-24_18-19-58.webp")) !important;
    background-position: var(--app-wallpaper-position, center center) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* Гарантируем, что body прозрачен и не имеет своего background-image */
body.theme-morning,
body.theme-day,
body.theme-evening,
body.theme-night,
body.theme-dark-glass {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    background-attachment: scroll !important;
}

.mobile-app {
    width: 100% !important;
    height: 100% !important;
    height: 100lvh !important;
    min-height: 100% !important;
    min-height: 100lvh !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    box-sizing: border-box !important;
    overscroll-behavior-x: none !important;
}

.screen-home,
.screen[data-screen="home"] {
    box-sizing: border-box !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: calc(env(safe-area-inset-top, 20px) + 24px) var(--page-x) calc(62px + max(calc(env(safe-area-inset-bottom) - 8px), 14px) + 12px) var(--page-x) !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-x !important;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Manrope", sans-serif;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1 !important;
}

/* Скрываем скроллбар */
.screen-home::-webkit-scrollbar,
.screen[data-screen="home"]::-webkit-scrollbar {
    display: none !important;
}

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

.home-header:has(.settings-back-btn),
.home-header.has-back-btn,
.screen[data-screen="more"] .home-header,
.screen[data-screen="calculator"] .home-header,
.screen[data-screen="history"] .home-header {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: left !important;
}

.screen[data-screen="more"] .home-welcome,
.screen[data-screen="calculator"] .home-welcome,
.screen[data-screen="history"] .home-welcome {
    align-items: flex-start !important;
    text-align: left !important;
    margin-right: auto !important;
}

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

.home-kicker {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    opacity: 0.95 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    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,
.icon-button-sms-history {
    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 var(--motion-duration-micro, 140ms) var(--motion-ease-press), background-color var(--motion-duration-micro, 140ms) ease;
    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,
.icon-button-sms-history:active {
    transform: scale(var(--motion-scale-press, 0.96));
    background: rgba(255, 255, 255, 0.15);
}

.icon-button-bell svg,
.icon-button-settings svg,
.icon-button-sms-history 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);
}


/* Карточка сегодняшних показателей (В стиле Liquid Glass PWA по референсу) */
.glass-card-today-metrics {
    position: relative;
    min-height: max-content !important;
    height: auto !important;
    flex-shrink: 0 !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.07) 50%,
        rgba(255, 255, 255, 0.03) 100%
      ) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        inset 0 8px 22px rgba(255, 255, 255, 0.04),
        0 14px 32px rgba(3, 25, 55, 0.2) !important;
    overflow: hidden;
    margin-bottom: var(--card-to-section-gap);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 20px 15px 20px !important;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0.95, 0.22, 1), background-color 0.2s ease, border-color 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.glass-card-today-metrics:active,
.glass-card-today-metrics.is-pressed {
    transform: scale(0.985);
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
}

.glass-card-today-metrics::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.today-metrics-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.today-metrics-title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.today-metrics-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 12px 0 14px 0;
}

.today-metric-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: pointer;
    border-radius: 12px;
    transition: opacity 0.15s ease;
}

.today-metric-col:active {
    opacity: 0.8;
}

.today-metric-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.08;
    color: #ffffff;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

.today-metric-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 3px;
    letter-spacing: -0.01em;
}

.today-metrics-divider {
    position: relative;
    z-index: 2;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 0 12px 0;
}

.today-metrics-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    border-radius: 12px;
    transition: opacity 0.15s ease;
}

.today-metrics-footer:active {
    opacity: 0.85;
}

.today-metrics-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.today-metrics-wallet-icon {
    width: 17px;
    height: 17px;
    color: rgba(255, 255, 255, 0.88) !important;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-1.5px);
}

.today-metrics-wallet-icon svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    display: block;
}

.today-metrics-footer-label {
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: -0.01em;
}

.today-metrics-revenue-val {
    font-size: 19.5px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

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

/* Карточка ближайшей записи */
.glass-card-appointment {
    position: relative;
    display: grid;
    grid-template-columns: var(--appointment-avatar-size) minmax(0, 1fr) auto;
    align-items: center;
    min-height: max-content !important;
    height: auto !important;
    flex-shrink: 0 !important;
    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 var(--ios-ease), 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(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.5),
      inset 0 8px 20px rgba(255, 255, 255, 0.04),
      0 10px 24px rgba(3, 24, 53, 0.12) !important;
    color: #ffffff !important;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    isolation: isolate;
}

.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.2) 0%,
        rgba(255, 255, 255, 0.04) 30%,
        transparent 55%
      );
    border-radius: inherit;
    z-index: 2;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.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: 14px 16px 13px 16px;
    height: var(--quick-card-height);
    min-height: 112px;
    border-radius: 26px;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.25s var(--ios-ease), 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(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.5),
      inset 0 8px 20px rgba(255, 255, 255, 0.04),
      0 10px 24px rgba(3, 24, 53, 0.12) !important;
    color: #ffffff !important;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    isolation: isolate;
}

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

/* Строго квадратные контейнеры иконок с глянцевым внутренним бликом */
.action-card-icon-wrapper {
    width: 44px !important;
    height: 44px !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
    border-radius: 13px !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, #9333ea 0%, #7e22ce 100%);
}

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

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

.action-card-text h3 {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.2 !important;
}

.action-card-text p {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

/* Для мобильных экранов, когда одновременно видна карточка ближайшей записи */
@media (max-height: 890px) {
    .screen-home:has(.glass-card-appointment:not([style*="display: none"])) .quick-action-card {
        height: 120px;
        min-height: 112px;
        padding: 13px 15px 12px 15px;
    }
    .screen-home:has(.glass-card-appointment:not([style*="display: none"])) .action-card-icon-wrapper {
        width: 42px !important;
        height: 42px !important;
        border-radius: 13px !important;
    }
    .screen-home:has(.glass-card-appointment:not([style*="display: none"])) .action-card-icon-wrapper svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Только для компактных экранов, когда одновременно видна карточка ближайшей записи */
@media (max-height: 780px) {
    .screen-home:has(.glass-card-appointment:not([style*="display: none"])) .quick-action-card {
        height: 114px;
        min-height: 108px;
        padding: 12px 14px;
    }
    .screen-home:has(.glass-card-appointment:not([style*="display: none"])) .action-card-icon-wrapper {
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
    }
    .screen-home:has(.glass-card-appointment:not([style*="display: none"])) .action-card-icon-wrapper svg {
        width: 19px !important;
        height: 19px !important;
    }
}

#react-bottom-nav-root {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) translateZ(0) !important;
    width: calc(100% - 64px) !important;
    max-width: 320px !important;
    min-width: 270px !important;
    margin-left: 0 !important;
    bottom: max(calc(env(safe-area-inset-bottom) - 8px), 14px) !important;
    z-index: 1000 !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: auto !important;
    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms ease, filter 200ms ease !important;
    will-change: opacity, transform;
    
    /* High-Fidelity Liquid Glass Capsule - Emil / Apple Design */
    height: 62px !important;
    box-sizing: border-box !important;
    border-radius: 31px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow: 
        inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.06),
        0 12px 32px -4px rgba(0, 0, 0, 0.28) !important;
}

.mobile-app.first-load #react-bottom-nav-root,
.mobile-app.first-load .liquid-nav-indicator,
.mobile-app.no-transition #react-bottom-nav-root,
.mobile-app.no-transition .liquid-nav-indicator,
html.is-loading-app #react-bottom-nav-root,
html.is-loading-app .liquid-nav-indicator,
body.is-loading-app #react-bottom-nav-root,
body.is-loading-app .liquid-nav-indicator {
    transition: none !important;
}

#react-bottom-nav-root > div {
    pointer-events: auto !important;
    width: 100% !important;
    height: 100% !important;
}

/* Скрываем док при открытом листе и при активной клавиатуре только при наличии реально открытой шторки или фокуса */
body.is-sheet-open:has(.history-sheet:not([hidden]):not(.is-closing), .notifications-sheet.is-open) #react-bottom-nav-root,
html.is-sheet-open:has(.history-sheet:not([hidden]):not(.is-closing), .notifications-sheet.is-open) #react-bottom-nav-root,
body.is-keyboard-visible:has(input:focus, textarea:focus, select:focus) #react-bottom-nav-root,
html.is-keyboard-visible:has(input:focus, textarea:focus, select:focus) #react-bottom-nav-root {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, 250%) scale(0.9) translateZ(0) !important;
    filter: none !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: 4px;
    box-sizing: border-box;
    border-radius: 31px;
    --active-index: 0;
    --indicator-x: 0px;
    --liquid-indicator-left: 4px;
    --liquid-indicator-width: calc((100% - 8px) / 3);
    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(225, 242, 255, 0.18) 0%, rgba(200, 228, 255, 0.08) 100%) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
}

body.theme-day #react-bottom-nav-root {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

body.theme-evening #react-bottom-nav-root {
    background: linear-gradient(135deg, rgba(255, 238, 225, 0.18) 0%, rgba(255, 218, 195, 0.08) 100%) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
}

body.theme-night #react-bottom-nav-root,
body.theme-dark-glass #react-bottom-nav-root {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Высокоточный и шелковисто-плавный индикатор (GPU Compositor Transform, Zero Layout Thrashing, Zero Blurriness) */
.liquid-nav-indicator {
    position: absolute !important;
    top: 4px !important;
    bottom: 4px !important;
    left: 4px !important;
    width: calc((100% - 8px) / 3) !important;
    height: calc(100% - 8px) !important;
    z-index: 1 !important;
    border-radius: 26px !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 1.5px rgba(255, 255, 255, 0.7),
        inset 0 -1px 1px rgba(0, 0, 0, 0.06),
        0 4px 14px rgba(0, 0, 0, 0.14) !important;
    transform: translate3d(0%, 0, 0);
    transition: transform 260ms cubic-bezier(0.25, 1, 0.35, 1) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    pointer-events: none !important;
    contain: layout style paint !important;
}

/* Надежные аппаратные позиции для каждого таба */
.liquid-nav-wrapper[data-active-index="0"] .liquid-nav-indicator,
.liquid-nav-wrapper[data-active-tab="home"] .liquid-nav-indicator,
.liquid-nav-indicator[data-active-index="0"],
.liquid-nav-indicator[data-active-target="home"] {
    transform: translate3d(0%, 0, 0) !important;
}

.liquid-nav-wrapper[data-active-index="1"] .liquid-nav-indicator,
.liquid-nav-wrapper[data-active-tab="appointments"] .liquid-nav-indicator,
.liquid-nav-indicator[data-active-index="1"],
.liquid-nav-indicator[data-active-target="appointments"] {
    transform: translate3d(100%, 0, 0) !important;
}

.liquid-nav-wrapper[data-active-index="2"] .liquid-nav-indicator,
.liquid-nav-wrapper[data-active-tab="clients"] .liquid-nav-indicator,
.liquid-nav-indicator[data-active-index="2"],
.liquid-nav-indicator[data-active-target="clients"] {
    transform: translate3d(200%, 0, 0) !important;
}

/* Адаптивная кинематика и геометрия Liquid Glass таббара для 2 вкладок */
.liquid-nav-wrapper[data-visible-tabs="2"],
.liquid-nav-wrapper.has-2-tabs {
    --liquid-indicator-width: calc((100% - 8px) / 2);
}

.liquid-nav-wrapper[data-visible-tabs="2"] .liquid-nav-indicator,
.liquid-nav-wrapper.has-2-tabs .liquid-nav-indicator,
.liquid-nav-indicator[data-visible-tabs="2"] {
    width: calc((100% - 8px) / 2) !important;
}

.liquid-nav-wrapper[data-visible-tabs="2"] .liquid-nav-item,
.liquid-nav-wrapper.has-2-tabs .liquid-nav-item {
    flex: 1 1 50% !important;
    max-width: 50% !important;
}

.liquid-nav-wrapper[data-visible-tabs="2"][data-active-index="0"] .liquid-nav-indicator,
.liquid-nav-wrapper[data-visible-tabs="2"][data-active-tab="home"] .liquid-nav-indicator,
.liquid-nav-wrapper.has-2-tabs[data-active-index="0"] .liquid-nav-indicator,
.liquid-nav-wrapper.has-2-tabs[data-active-tab="home"] .liquid-nav-indicator {
    transform: translate3d(0%, 0, 0) !important;
}

.liquid-nav-wrapper[data-visible-tabs="2"][data-active-index="1"] .liquid-nav-indicator,
.liquid-nav-wrapper[data-visible-tabs="2"][data-active-tab="appointments"] .liquid-nav-indicator,
.liquid-nav-wrapper.has-2-tabs[data-active-index="1"] .liquid-nav-indicator,
.liquid-nav-wrapper.has-2-tabs[data-active-tab="appointments"] .liquid-nav-indicator {
    transform: translate3d(100%, 0, 0) !important;
}

.liquid-nav-wrapper.is-jumping-tabs .liquid-nav-indicator {
    transition: transform 300ms cubic-bezier(0.25, 1, 0.35, 1) !important;
}

.liquid-nav-indicator::after {
    display: none !important;
    content: none !important;
}

/* Изоляция уходящего экрана при свайпе назад: монолитный GPU-слой поверх всего UI с сохранением Liquid Glass blur */
.screen.is-swiping-back,
.clients-screen.is-swiping-back,
.screen-stats.is-swiping-back,
#statsModal.is-swiping-back,
.screen[data-screen].is-swiping-back {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
    z-index: 2000 !important; /* Гарантированно выше глобального таббара (1000) и подложки (900) */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: -18px 0 42px rgba(0, 0, 0, 0.65) !important;
    will-change: transform !important;
}

.screen.is-swiping-back .stats-modal-container {
    background: transparent !important;
}

/* Стабилизация внутренних контейнеров при свайпе: предотвращаем рефлоу и клиппинг */
.screen.is-swiping-back .clients-list-container,
.screen.is-swiping-back .more-scroll-container,
.screen.is-swiping-back .appointments-content,
.screen.is-swiping-back .history-scroll-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Предыдущий экран подложки при свайпе назад: монолитный GPU-слой строго под уходящим экраном */
.screen.is-swipe-prev,
.clients-screen.is-swipe-prev,
.screen[data-screen].is-swipe-prev {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
    z-index: 900 !important; /* Строго ниже таббара (1000) и уходящего экрана (2000) */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    will-change: transform !important;
}

.screen-home.is-swipe-prev,
.screen[data-screen="home"].is-swipe-prev {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
}

.screen.is-active {
    pointer-events: auto !important;
}

.mobile-app.theme-day .screen.is-swiping-back,
.mobile-app.theme-day .clients-screen.is-swiping-back,
.mobile-app.theme-day .screen-stats.is-swiping-back,
.mobile-app.theme-day #statsModal.is-swiping-back {
    box-shadow: -18px 0 42px rgba(0, 0, 0, 0.3) !important;
}

.mobile-app.theme-dark-glass .screen.is-swiping-back,
.mobile-app.theme-dark-glass .clients-screen.is-swiping-back,
.mobile-app.theme-dark-glass .screen-stats.is-swiping-back,
.mobile-app.theme-dark-glass #statsModal.is-swiping-back {
    box-shadow: -18px 0 42px rgba(0, 0, 0, 0.75) !important;
    will-change: transform !important;
}

/* Вкладка: тактильный отклик, повышенный контраст и четкие кривые */
.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.68);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.01em;
    gap: 2px;
    z-index: 2;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: color 180ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1), opacity 140ms ease;
    overflow: visible !important;
    touch-action: manipulation;
}

.liquid-nav-item:active,
.liquid-nav-item.is-pressed {
    transform: scale(0.94) translateZ(0);
    opacity: 0.88;
}

.liquid-nav-item.is-active {
    color: #ffffff;
}

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

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

.liquid-nav-item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2.1px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), filter 220ms ease;
    will-change: transform;
}

@keyframes tabIconPop {
    0% {
        transform: scale(0.96) translateZ(0);
    }
    50% {
        transform: scale(1.08) translateY(-1px) translateZ(0);
    }
    100% {
        transform: scale(1) translateY(0) translateZ(0);
    }
}

.liquid-nav-item.is-active svg {
    stroke: #ffffff;
    filter: none;
    animation: tabIconPop 220ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.liquid-nav-item span {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: currentColor;
    opacity: 0.85;
    transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 180ms ease, color 180ms ease;
}

.liquid-nav-item.is-active span {
    opacity: 1;
    transform: scale(1.02) translateZ(0);
    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(-3px) scale(1.05); }
}

@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,
.icon-button-bell:active,
.icon-button-bell.is-pressed {
    transform: scale(var(--motion-scale-press, 0.96)) !important;
    transition: transform var(--motion-duration-instant, 100ms) var(--motion-ease-press) !important;
}

.icon-button-bell svg,
.icon-button-settings svg {
    transition: transform var(--motion-duration-fast, 180ms) var(--motion-ease-press);
    will-change: transform;
}

.icon-button-bell:active svg,
.icon-button-bell.is-pressed svg {
    transform: rotate(-12deg) scale(0.95);
}

.icon-button-settings:active svg,
.icon-button-settings.is-pressed svg {
    transform: rotate(30deg) scale(0.95);
}

.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 var(--motion-duration-normal, 240ms) var(--motion-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));
    will-change: opacity;
}

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

.notifications-overlay.is-closing {
    opacity: 0;
    transition: opacity var(--motion-duration-fast, 180ms) var(--motion-ease-exit, cubic-bezier(0.4, 0, 1, 1));
}

.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;
    isolation: isolate;
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden;
    transform: translate3d(0, 105%, 0);
    will-change: transform;
    transition: transform var(--motion-duration-normal, 240ms) var(--motion-ease-drawer, cubic-bezier(0.32, 0.72, 0, 1));
    
    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),
        0 15px 50px rgba(0, 0, 0, 0.45);
}

.notifications-sheet::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -45px !important;
    z-index: 0 !important;
    background-color: #141219 !important;
    background-image:
        linear-gradient(180deg, rgba(20, 18, 25, 0.58) 0%, rgba(20, 18, 25, 0.74) 100%),
        var(--app-wallpaper-url, url("fon/photo_1_2026-06-24_18-19-58.webp")) !important;
    background-position: var(--app-wallpaper-position, center center) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    filter: blur(48px) saturate(135%) !important;
    -webkit-filter: blur(48px) saturate(135%) !important;
    transform: scale(1.12) translateZ(0) !important;
    -webkit-transform: scale(1.12) translateZ(0) !important;
    pointer-events: none !important;
}

html.theme-morning .notifications-sheet::before,
html.theme-day .notifications-sheet::before,
html.theme-evening .notifications-sheet::before {
    background-color: #1b2f22 !important;
    background-image:
        linear-gradient(180deg, rgba(27, 47, 34, 0.58) 0%, rgba(27, 47, 34, 0.74) 100%),
        var(--app-wallpaper-url, url("fon/day_bg.webp")) !important;
}

html.theme-night .notifications-sheet::before,
html.theme-dark-glass .notifications-sheet::before {
    background-color: #141219 !important;
    background-image:
        linear-gradient(180deg, rgba(20, 18, 25, 0.58) 0%, rgba(20, 18, 25, 0.74) 100%),
        var(--app-wallpaper-url, url("fon/photo_1_2026-06-24_18-19-58.webp")) !important;
}

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

.notifications-sheet.is-closing {
    transform: translate3d(0, 105%, 0);
    transition: transform var(--motion-duration-fast, 180ms) var(--motion-ease-exit, cubic-bezier(0.4, 0, 1, 1));
}

/* 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; }
.notif-icon-wrapper.cat-support { background: #007aff; }

/* 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(var(--motion-scale-enter, 0.96));
    opacity: 0;
    pointer-events: none;
    transition: transform var(--motion-duration-fast, 180ms) var(--motion-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)), opacity var(--motion-duration-fast, 180ms) 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(-100%);
    opacity: 0;
    transition: transform var(--motion-duration-fast, 180ms) var(--motion-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)), opacity var(--motion-duration-fast, 180ms) 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(-100%) !important;
    opacity: 0 !important;
    transition: transform var(--motion-duration-micro, 140ms) var(--motion-ease-exit, cubic-bezier(0.4, 0, 1, 1)), opacity var(--motion-duration-micro, 140ms) 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.4;
    word-break: break-word;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast.is-expanded .toast-desc {
    -webkit-line-clamp: unset;
    display: block;
}

/* 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(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Reduced Motion: reduce motion durations safely without breaking positioning transforms */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: 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: 100% !important;
    height: 100% !important;
    max-height: 100% !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 var(--motion-duration-micro, 140ms) var(--motion-ease-press), background-color var(--motion-duration-micro, 140ms) ease, box-shadow var(--motion-duration-micro, 140ms) ease !important;
}

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

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

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

.appointments-control-row {
    display: flex;
    justify-content: space-between !important;
    align-items: center;
    margin-bottom: 10px !important;
    padding-left: 2px;
    padding-right: 2px;
    gap: 8px;
}

.calendar-expand-toggle-btn {
    width: 44px;
    height: 44px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform var(--motion-duration-micro, 140ms) var(--motion-ease-press),
                background-color 200ms ease,
                border-color 200ms ease,
                color 200ms ease,
                box-shadow 200ms ease;
    flex-shrink: 0;
    box-sizing: border-box;
}

.calendar-expand-toggle-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.15);
}

.calendar-expand-toggle-btn.is-active {
    background: rgba(67, 148, 220, 0.28);
    border-color: rgba(151, 205, 244, 0.5);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 16px rgba(67, 148, 220, 0.35);
}

.calendar-expand-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    transition: transform 250ms var(--ios-ease);
}

.segmented-control {
    position: relative !important;
    display: flex;
    align-items: center;
    height: 44px;
    gap: 4px;
    padding: 4px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.segmented-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: var(--segmented-indicator-width, calc((100% - 16px) / 3));
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.10) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translate3d(var(--segmented-indicator-x, 4px), 0, 0);
    transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), width 220ms cubic-bezier(0.23, 1, 0.32, 1) !important;
    will-change: transform, width;
    pointer-events: none;
    z-index: 1;
}

.segmented-item {
    position: relative;
    z-index: 2;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent !important;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 0 12px;
    cursor: pointer;
    transition: color 180ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1) !important;
    outline: none;
    text-align: center;
    box-sizing: border-box;
}

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

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

/* ─── Multi-Master Filter Bar (Variant D: Chips / Quick Switch) ─── */
.master-filter-container {
    width: 100%;
    margin-bottom: 10px !important;
    position: relative;
}

.master-filter-container.is-hidden,
.master-filter-container:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.master-filter-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 4px 2px;
}

.master-filter-scroll::-webkit-scrollbar {
    display: none;
}

.master-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    outline: none;
    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, color 160ms ease, border-color 160ms ease;
    user-select: none;
    -webkit-user-select: none;
}

.master-filter-chip:active {
    transform: scale(0.96) !important;
}

.master-filter-chip.is-active {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.master-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}

.master-chip-name {
    white-space: nowrap;
}

/* Master Scope Badge for Employee */
.master-scope-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.07);
    border: 0.5px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.master-badge-icon {
    width: 16px;
    height: 16px;
    color: #60a5fa;
    flex-shrink: 0;
}

.master-badge-text strong {
    color: #ffffff;
    font-weight: 600;
}

/* Light Mode Overrides */
body.light-theme .master-filter-chip {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.72);
}

body.light-theme .master-filter-chip.is-active {
    background: rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.22);
    color: #000000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.light-theme .master-scope-badge {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.85);
}

body.light-theme .master-badge-text strong {
    color: #000000;
}

/* Развернутый единый календарь на месяц (Apple iOS 27 Liquid Glass) */
.week-calendar.is-expanded {
    flex-shrink: 0 !important;
    min-height: max-content !important;
    border-radius: 26px !important;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.03) 100%
    ) !important;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 12px 30px rgba(3, 24, 53, 0.2) !important;
}

.calendar-week-strip {
    position: relative;
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 12px;
    width: 100%;
    flex-shrink: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;
    scrollbar-width: none;
    box-sizing: border-box;
    will-change: transform, opacity;
}

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

.calendar-month-expanded {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-shrink: 0 !important;
    min-height: max-content !important;
    padding: 12px 12px 14px 12px;
    box-sizing: border-box;
    will-change: transform, opacity;
}

/* Защита от паразитного скролла контента под развернутым календарем */
body.calendar-expanded-active .appointments-list-container {
    overflow-y: hidden !important;
    overscroll-behavior: none !important;
}

body.calendar-expanded-active .appointments-empty {
    padding: 10px 12px !important;
    margin-bottom: calc(var(--tabbar-height) + 12px + env(safe-area-inset-bottom)) !important;
}

body.calendar-expanded-active .appointments-empty .empty-state-visual {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 4px !important;
}

body.calendar-expanded-active .appointments-empty .glass-calendar-icon {
    width: 40px !important;
    height: 40px !important;
    margin: 4px auto !important;
}

/* Шапка месяца */
.calendar-month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}

.calendar-month-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.015em;
    text-transform: capitalize;
}

.calendar-month-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform 120ms var(--motion-ease-press), background 150ms ease;
}

.calendar-month-nav-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.16);
}

.calendar-month-nav-btn svg {
    width: 16px;
    height: 16px;
}

/* Дни недели */
.calendar-month-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
    text-align: center;
}

.calendar-month-weekdays span {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    padding: 2px 0;
}

/* Сетка дней месяца (7 колонок) */
.calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px 4px;
    will-change: transform, opacity;
}

.calendar-month-grid.slide-from-right {
    animation: monthSlideRight 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-month-grid.slide-from-left {
    animation: monthSlideLeft 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes monthSlideRight {
    0% {
        opacity: 0.15;
        transform: translate3d(36px, 0, 0) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes monthSlideLeft {
    0% {
        opacity: 0.15;
        transform: translate3d(-36px, 0, 0) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.month-day-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 35px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    user-select: none;
    transition: background 180ms ease, border-color 180ms ease, transform 120ms var(--motion-ease-press), color 180ms ease;
    box-sizing: border-box;
}

.month-day-cell:active {
    transform: scale(0.91);
}

/* Пустые клетки-распорки до 1 числа месяца */
.month-day-cell.is-empty {
    visibility: hidden;
    pointer-events: none;
    border: none;
    background: transparent;
}

/* Выходной день в месячной сетке — приглушенный только если НЕ активен и НЕ сегодня */
.month-day-cell.is-day-off:not(.is-today):not(.is-active),
.month-day-cell.is-day-off:not(.is-today):not(.is-active):hover,
.month-day-cell.is-day-off:not(.is-today):not(.is-active):focus {
    opacity: 0.38 !important;
    color: rgba(255, 255, 255, 0.4) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Сегодня в месячной сетке, когда выбрана другая дата (как в Google Календаре: кружок подсвечен нежно-голубым) */
.month-day-cell.is-today:not(.is-active) {
    opacity: 1 !important;
    color: #38bdf8 !important;
    font-weight: 800 !important;
    border: 1.5px solid #38bdf8 !important;
    background: rgba(56, 189, 248, 0.20) !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.7) !important;
}

/* Сегодня в месячной сетке, если выбрано пользователем (яркий акцент) */
.month-day-cell.is-today.is-active {
    opacity: 1 !important;
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 
        0 4px 16px rgba(56, 189, 248, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Выбранный активный день (не сегодня) — чуть другого цвета (насыщенный глубокий сапфировый/океанический синий, как на фото 2 из Google) */
.month-day-cell.is-active:not(.is-today) {
    opacity: 1 !important;
    background: linear-gradient(
        135deg,
        #0369a1 0%,
        #0284c7 100%
    ) !important;
    border: 1.5px solid rgba(186, 230, 253, 0.85) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 
        0 4px 16px rgba(2, 132, 199, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Точка записи в ячейке месяца */
.month-day-cell.has-appointments::after {
    content: "";
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #4394dc;
    box-shadow: 0 0 5px #4394dc;
}

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

.month-day-cell.is-day-off.has-appointments::after {
    opacity: 0.8;
}

.month-day-cell.is-today.has-appointments::after {
    background: #38bdf8 !important;
    box-shadow: 0 0 6px #38bdf8 !important;
}

.month-day-cell.is-today.is-active.has-appointments::after {
    background: #ffffff !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9) !important;
}

.week-calendar {
    position: relative !important;
    display: flex;
    flex-direction: column !important;
    justify-content: flex-start;
    flex-shrink: 0 !important;
    gap: 0 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    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: hidden;
    box-sizing: border-box;
    transition: border-radius 260ms cubic-bezier(0.16, 1, 0.3, 1), background 260ms ease, box-shadow 260ms ease;
}

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

.calendar-indicator {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 46px;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.08) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -1px 0 rgba(0, 0, 0, 0.08),
      0 4px 16px rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transition: transform 300ms var(--ios-ease), width 300ms var(--ios-ease) !important;
    will-change: transform, width;
    pointer-events: none;
    z-index: 1;
}

/* Индикатор выбранного дня — чистый Liquid Glass (без синего цвета) */
.calendar-indicator.is-today-selected,
.calendar-indicator.is-other-selected {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.08) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -1px 0 rgba(0, 0, 0, 0.08),
      0 4px 16px rgba(0, 0, 0, 0.16) !important;
}


/* .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-month {
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 2px;
    line-height: 1;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease, opacity 0.2s ease;
}

.calendar-day.is-active .calendar-day-month {
    color: #ffffff !important;
}

.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: -8px;
    left: 50%;
    transform: translateX(-50%);
    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;
}

/* Текущий день в календаре записей (Сегодня) — аккуратный круглый бейдж на числе дня (Apple iOS standard) */
.calendar-day.is-today {
    opacity: 1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.calendar-day.is-today::before {
    display: none !important;
}

.calendar-day.is-today .calendar-day-num {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    border-radius: 50% !important;
    background: #38bdf8 !important;
    color: #0b1329 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4) !important;
    text-shadow: none !important;
    margin: 1px 0 !important;
}

.calendar-day.is-today:not(.is-active) .calendar-day-name {
    color: #38bdf8 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.calendar-day.is-today:not(.is-active) .calendar-day-month {
    color: rgba(255, 255, 255, 0.55) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Сегодня, когда выбран пользователем — внутри Liquid Glass индикатора */
.calendar-day.is-today.is-active,
.calendar-day.is-today.is-active.is-day-off {
    opacity: 1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.calendar-day.is-today.is-active .calendar-day-name {
    color: #ffffff !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.calendar-day.is-today.is-active .calendar-day-month {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Выбранный активный день (не сегодня) — чистый Liquid Glass контрастный белый текст */
.calendar-day.is-active:not(.is-today) .calendar-day-name {
    color: #ffffff !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.calendar-day.is-active:not(.is-today) .calendar-day-num {
    color: #ffffff !important;
    font-weight: 800 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.calendar-day.is-active:not(.is-today) .calendar-day-month {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Выходной / нерабочий день в календаре записей */
.calendar-day.is-day-off:not(.is-today):not(.is-active),
.calendar-day.is-day-off:not(.is-today):not(.is-active):hover,
.calendar-day.is-day-off:not(.is-today):not(.is-active):focus {
    opacity: 0.38 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.calendar-day.is-day-off:not(.is-today):not(.is-active) .calendar-day-name,
.calendar-day.is-day-off:not(.is-today):not(.is-active):hover .calendar-day-name,
.calendar-day.is-day-off:not(.is-today):not(.is-active):focus .calendar-day-name {
    color: rgba(255, 255, 255, 0.35) !important;
}

.calendar-day.is-day-off:not(.is-today):not(.is-active) .calendar-day-num,
.calendar-day.is-day-off:not(.is-today):not(.is-active):hover .calendar-day-num,
.calendar-day.is-day-off:not(.is-today):not(.is-active):focus .calendar-day-num {
    color: rgba(255, 255, 255, 0.45) !important;
    text-shadow: none !important;
}

.calendar-day.is-day-off:not(.is-today):not(.is-active) .calendar-day-month,
.calendar-day.is-day-off:not(.is-today):not(.is-active):hover .calendar-day-month,
.calendar-day.is-day-off:not(.is-today):not(.is-active):focus .calendar-day-month {
    color: rgba(255, 255, 255, 0.3) !important;
    opacity: 0.8 !important;
}

/* Если текущий день — выходной, оставляем четкую подсветку сегодняшнего дня */
.calendar-day.is-day-off.is-today,
.calendar-day.is-day-off.is-today:hover,
.calendar-day.is-day-off.is-today:focus,
.calendar-day.is-day-off.is-today:active,
.calendar-day.is-active.is-day-off.is-today {
    opacity: 1 !important;
}

.calendar-day.is-day-off.is-today .calendar-day-name,
.calendar-day.is-day-off.is-today .calendar-day-month {
    color: #38bdf8 !important;
    opacity: 1 !important;
}

.calendar-day.is-day-off.is-today .calendar-day-num {
    color: #0b1329 !important;
    opacity: 1 !important;
}

/* Если в выходной день есть запись (мастер вышел) — точка записи светится */
.calendar-day.is-day-off.has-appointments .calendar-day-num::after {
    display: block !important;
    opacity: 0.85;
}

/* Специальная адаптация для iPhone 6/7/8 (<= 380px ширина и <= 670px высота) — предотвращает сплющивание календаря */
@media (max-width: 380px) and (max-height: 670px) {
    .appointments-screen {
        padding: calc(10px + env(safe-area-inset-top)) 12px 0 12px !important;
    }
    .appointments-screen .home-header {
        margin-bottom: 6px !important;
        flex-shrink: 0 !important;
    }
    .appointments-screen .home-title {
        font-size: 22px !important;
    }
    .appointments-screen .home-date {
        font-size: 11.5px !important;
    }
    .appointments-control-row {
        margin-bottom: 6px !important;
        flex-shrink: 0 !important;
    }
    .segmented-control {
        padding: 3px !important;
        border-radius: 16px !important;
    }
    .segmented-item {
        padding: 5px 10px !important;
        font-size: 12.5px !important;
    }
    .master-filter-container {
        margin-bottom: 6px !important;
        flex-shrink: 0 !important;
    }
    .week-calendar {
        flex-shrink: 0 !important;
        margin-bottom: 6px !important;
        padding: 0 !important;
        border-radius: 20px !important;
        gap: 0 !important;
    }
    .calendar-week-strip {
        padding: 5px 8px !important;
        gap: 4px !important;
    }
    .calendar-day {
        min-height: 56px !important;
        min-width: calc((100% - 24px) / 7) !important;
        flex: 0 0 calc((100% - 24px) / 7) !important;
        padding: 5px 2px !important;
    }
    .calendar-day-name {
        font-size: 9.5px !important;
        margin-bottom: 3px !important;
    }
    .calendar-day-num {
        font-size: 14px !important;
    }
    .calendar-day-month {
        font-size: 7px !important;
    }
    .calendar-indicator {
        top: 5px !important;
        bottom: 5px !important;
        border-radius: 16px !important;
    }
    .appointments-status-card {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
        margin-bottom: 6px !important;
        border-radius: 18px !important;
    }
    .status-card-icon-wrapper {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
    }
    .status-card-icon-wrapper svg {
        width: 15px !important;
        height: 15px !important;
    }
    .status-card-info h3,
    .status-card-title {
        font-size: 13px !important;
    }
    .status-card-info p,
    .status-card-subtitle {
        font-size: 10.5px !important;
    }
    .status-card-action-btn {
        padding: 5px 8px !important;
        font-size: 10px !important;
        border-radius: 10px !important;
    }
    .appointments-section-title {
        font-size: 16px !important;
        margin: 4px 0 6px 4px !important;
        flex-shrink: 0 !important;
    }
    .appointments-list-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding-bottom: calc(var(--tabbar-height) + 16px + env(safe-area-inset-bottom)) !important;
    }
    .appointments-empty {
        padding: 12px 10px !important;
        border-radius: 20px !important;
        margin-bottom: calc(var(--tabbar-height) + 16px + env(safe-area-inset-bottom)) !important;
    }
    .empty-state-visual {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 6px !important;
    }
    .glass-calendar-icon {
        width: 50px !important;
        height: 50px !important;
    }
    .appointments-empty h2 {
        font-size: 15px !important;
        margin-bottom: 4px !important;
    }
    .appointments-empty p {
        font-size: 11px !important;
    }
    .empty-state-add-btn {
        margin-top: 6px !important;
        padding: 7px 18px !important;
        font-size: 13px !important;
    }
}

.appointments-status-card {
    flex-shrink: 0 !important;
    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, 28px)) saturate(var(--glass-saturate, 180%)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(var(--glass-saturate, 180%)) !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 1 0% !important;
    min-height: 0 !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 1 auto !important;
    min-height: 0 !important;
    max-height: 340px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 20px 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: max(calc(env(safe-area-inset-bottom) + 12px), 20px) !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    box-sizing: border-box !important;
}

.new-sheet-scroll-container::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.is-keyboard-visible .new-sheet-scroll-container {
    padding-bottom: calc(var(--keyboard-height, 0px) + max(calc(env(safe-area-inset-bottom) + 12px), 20px)) !important;
    scroll-padding-bottom: var(--keyboard-height, 0px) !important;
    scroll-padding-top: 16px !important;
    scroll-behavior: auto !important;
}

.is-keyboard-visible .history-sheet {
    scroll-behavior: auto !important;
}

/* Стили полей ввода */
.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 0 0 !important;
}

.sheet-save-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
    cursor: pointer;
    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms ease, box-shadow 140ms ease !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.sheet-save-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.12)) !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
}

.sheet-save-btn:active {
    transform: scale(0.975) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Стандартные календарные инпуты подгонка */
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,
#clientFormSheet,
#historyEditSheet,
#historyRescheduleSheet,
#saveCalculationSheet,
#sendSmsSheet,
#inviteStaffSheet,
#staffMemberDetailSheet,
#changePasswordSheet,
#serviceEditSheet {
    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;
}

/* Phase 6.3: Collision & Day-off Warning Banner */
.sheet-collision-warning {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    margin: 4px 0 12px 0 !important;
    border-radius: 14px !important;
    background: rgba(245, 158, 11, 0.12) !important;
    border: 0.5px solid rgba(245, 158, 11, 0.35) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-sizing: border-box !important;
    transition: opacity 200ms ease, transform 200ms ease !important;
}

.sheet-collision-warning[hidden] {
    display: none !important;
}

.sheet-collision-warning-icon {
    width: 18px !important;
    height: 18px !important;
    color: #f59e0b !important;
    flex-shrink: 0 !important;
}

.sheet-collision-warning-text {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #fbbf24 !important;
}

body.theme-light .sheet-collision-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

body.theme-light .sheet-collision-warning-text {
    color: #b45309 !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 var(--motion-duration-micro, 140ms) var(--motion-ease-press) !important;
    cursor: pointer;
    width: 100%;
}

.sheet-input-group.is-column .sheet-input-row:active {
    transform: scale(var(--motion-scale-press, 0.96));
}

/* Обновленный компактный дизайн карточек записей */
.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;
}

/* Phase 6.2: Multi-Master Schedule & Break Visualization */
.new-appointment-card.is-break-card {
    background: rgba(245, 158, 11, 0.07) !important;
    border: 1px dashed rgba(245, 158, 11, 0.35) !important;
    cursor: default !important;
}

.new-appointment-card.is-break-card:active {
    transform: none !important;
}

.new-appointment-card.is-break-card .card-time-val {
    color: #f59e0b !important;
}

.new-appointment-card.is-break-card .card-break-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 0 0 3px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.new-appointment-card.is-break-card .card-break-title svg {
    width: 15px !important;
    height: 15px !important;
    color: #f59e0b !important;
    flex-shrink: 0 !important;
}

.new-appointment-card.is-break-card .card-break-desc {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

.new-appointment-card.is-break-card .card-break-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 0.5px solid rgba(245, 158, 11, 0.3) !important;
}

.schedule-day-off-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 28px 20px !important;
    margin: 8px 0 16px 0 !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.schedule-day-off-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    color: #f59e0b !important;
}

.schedule-day-off-icon svg {
    width: 22px !important;
    height: 22px !important;
}

.schedule-day-off-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: -0.01em !important;
}

.schedule-day-off-desc {
    font-size: 13.5px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    max-width: 320px !important;
}

.schedule-day-off-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 12px !important;
    padding: 4px 10px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.12) !important;
}

body.theme-light .new-appointment-card.is-break-card {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}
body.theme-light .new-appointment-card.is-break-card .card-break-title {
    color: #1c1c1e !important;
}
body.theme-light .new-appointment-card.is-break-card .card-break-desc {
    color: rgba(0, 0, 0, 0.6) !important;
}
body.theme-light .schedule-day-off-card {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
body.theme-light .schedule-day-off-title {
    color: #1c1c1e !important;
}
body.theme-light .schedule-day-off-desc {
    color: rgba(0, 0, 0, 0.6) !important;
}
body.theme-light .schedule-day-off-badge {
    background: rgba(0, 0, 0, 0.05) !important;
    color: rgba(0, 0, 0, 0.7) !important;
    border-color: rgba(0, 0, 0, 0.1) !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,
.manual-appointment-new-sheet,
#manualAppointmentSheet,
#appointmentDetailSheet,
#clientDetailSheet,
#clientFormSheet,
#historyDetailSheet,
#historyEditSheet,
#historyRescheduleSheet,
#completeAppointmentSheet,
#inviteStaffSheet,
#staffMemberDetailSheet,
#acceptInviteSheet,
#changePasswordSheet,
#serviceEditSheet,
#notificationsSheet {
    position: fixed !important;
    box-sizing: border-box !important;
    bottom: calc(-1 * env(safe-area-inset-bottom) - 2px) !important;
    isolation: isolate !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    overflow: hidden !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 0 20px !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 15px 50px rgba(0, 0, 0, 0.45) !important;
    color: #ffffff !important;
    overscroll-behavior: contain !important;
}

.history-sheet[hidden],
.history-sheet:not(.is-open):not(.is-closing),
.manual-appointment-new-sheet[hidden],
.manual-appointment-new-sheet:not(.is-open):not(.is-closing) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.history-sheet.is-open,
.history-sheet.is-closing,
.manual-appointment-new-sheet.is-open,
.manual-appointment-new-sheet.is-closing,
#appointmentDetailSheet.is-open,
#appointmentDetailSheet.is-closing,
#clientDetailSheet.is-open,
#clientDetailSheet.is-closing,
#clientFormSheet.is-open,
#clientFormSheet.is-closing,
#historyDetailSheet.is-open,
#historyDetailSheet.is-closing,
#historyEditSheet.is-open,
#historyEditSheet.is-closing,
#historyRescheduleSheet.is-open,
#historyRescheduleSheet.is-closing,
#saveCalculationSheet.is-open,
#saveCalculationSheet.is-closing,
#sendSmsSheet.is-open,
#sendSmsSheet.is-closing,
#inviteStaffSheet.is-open,
#inviteStaffSheet.is-closing,
#staffMemberDetailSheet.is-open,
#staffMemberDetailSheet.is-closing,
#changePasswordSheet.is-open,
#changePasswordSheet.is-closing,
#serviceEditSheet.is-open,
#serviceEditSheet.is-closing,
#completeAppointmentSheet.is-open,
#completeAppointmentSheet.is-closing,
#manualAppointmentSheet.is-open,
#manualAppointmentSheet.is-closing {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(var(--visual-viewport-height, 100dvh) - 16px) !important;
    scroll-behavior: smooth !important;
}

/* Формы ввода с клавиатурой на iOS должны непрерывно занимать пространство от top: 76px до bottom: 0,
   чтобы исключить появление зазоров или прослоек между модалкой и клавиатурой */
.manual-appointment-new-sheet.is-open,
#manualAppointmentSheet.is-open,
#clientFormSheet.is-open,
#historyEditSheet.is-open,
#historyRescheduleSheet.is-open,
#saveCalculationSheet.is-open,
#sendSmsSheet.is-open,
#inviteStaffSheet.is-open,
#staffMemberDetailSheet.is-open,
#changePasswordSheet.is-open,
#serviceEditSheet.is-open {
    top: 76px !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Компактные шторки подтверждения (например, Завершить визит):
   сохраняют естественную высоту контента над безопасной зоной iPhone */
#completeAppointmentSheet,
#completeAppointmentSheet.is-open,
.history-sheet.confirm-sheet,
.history-sheet.confirm-sheet.is-open {
    top: auto !important;
    bottom: calc(-1 * env(safe-area-inset-bottom) - 2px) !important;
    height: auto !important;
    min-height: auto !important;
    max-height: calc(var(--visual-viewport-height, 100dvh) - 16px) !important;
}

#completeAppointmentSheet .new-sheet-scroll-container,
.history-sheet.confirm-sheet .new-sheet-scroll-container {
    padding-bottom: calc(max(env(safe-area-inset-bottom), 24px) + 28px) !important;
}

.is-keyboard-visible #completeAppointmentSheet,
.is-keyboard-visible #completeAppointmentSheet.is-open,
.is-keyboard-visible .history-sheet.confirm-sheet,
.is-keyboard-visible .history-sheet.confirm-sheet.is-open {
    bottom: var(--keyboard-height, 0px) !important;
    max-height: calc(var(--visual-viewport-height, 100dvh) - 8px) !important;
    transition: bottom 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.is-keyboard-visible #completeAppointmentSheet .new-sheet-scroll-container,
.is-keyboard-visible .history-sheet.confirm-sheet .new-sheet-scroll-container {
    padding-bottom: 20px !important;
    scroll-padding-bottom: 0 !important;
}

.history-sheet::before,
.manual-appointment-new-sheet::before,
#manualAppointmentSheet::before,
#appointmentDetailSheet::before,
#clientDetailSheet::before,
#clientFormSheet::before,
#historyDetailSheet::before,
#historyEditSheet::before,
#historyRescheduleSheet::before,
#completeAppointmentSheet::before,
#inviteStaffSheet::before,
#staffMemberDetailSheet::before,
#acceptInviteSheet::before,
#changePasswordSheet::before,
#serviceEditSheet::before,
#notificationsSheet::before,
#pwaPhoneActionModal .pwa-phone-action-sheet::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -45px !important;
    z-index: 0 !important;
    background-color: #141219 !important;
    background-image:
        linear-gradient(180deg, rgba(20, 18, 25, 0.58) 0%, rgba(20, 18, 25, 0.74) 100%),
        var(--app-wallpaper-url, url("fon/photo_1_2026-06-24_18-19-58.webp")) !important;
    background-position: var(--app-wallpaper-position, center center) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    filter: blur(48px) saturate(135%) !important;
    -webkit-filter: blur(48px) saturate(135%) !important;
    transform: scale(1.12) translateZ(0) !important;
    -webkit-transform: scale(1.12) translateZ(0) !important;
    pointer-events: none !important;
}

html.theme-morning .history-sheet::before,
html.theme-morning .manual-appointment-new-sheet::before,
html.theme-morning #manualAppointmentSheet::before,
html.theme-morning #appointmentDetailSheet::before,
html.theme-morning #clientDetailSheet::before,
html.theme-morning #clientFormSheet::before,
html.theme-morning #historyDetailSheet::before,
html.theme-morning #historyEditSheet::before,
html.theme-morning #historyRescheduleSheet::before,
html.theme-morning #completeAppointmentSheet::before,
html.theme-morning #inviteStaffSheet::before,
html.theme-morning #staffMemberDetailSheet::before,
html.theme-morning #acceptInviteSheet::before,
html.theme-morning #changePasswordSheet::before,
html.theme-morning #serviceEditSheet::before,
html.theme-morning #notificationsSheet::before,
html.theme-morning #pwaPhoneActionModal .pwa-phone-action-sheet::before,
html.theme-day .history-sheet::before,
html.theme-day .manual-appointment-new-sheet::before,
html.theme-day #manualAppointmentSheet::before,
html.theme-day #appointmentDetailSheet::before,
html.theme-day #clientDetailSheet::before,
html.theme-day #clientFormSheet::before,
html.theme-day #historyDetailSheet::before,
html.theme-day #historyEditSheet::before,
html.theme-day #historyRescheduleSheet::before,
html.theme-day #completeAppointmentSheet::before,
html.theme-day #inviteStaffSheet::before,
html.theme-day #staffMemberDetailSheet::before,
html.theme-day #acceptInviteSheet::before,
html.theme-day #changePasswordSheet::before,
html.theme-day #serviceEditSheet::before,
html.theme-day #notificationsSheet::before,
html.theme-day #pwaPhoneActionModal .pwa-phone-action-sheet::before,
html.theme-evening .history-sheet::before,
html.theme-evening .manual-appointment-new-sheet::before,
html.theme-evening #manualAppointmentSheet::before,
html.theme-evening #appointmentDetailSheet::before,
html.theme-evening #clientDetailSheet::before,
html.theme-evening #clientFormSheet::before,
html.theme-evening #historyDetailSheet::before,
html.theme-evening #historyEditSheet::before,
html.theme-evening #historyRescheduleSheet::before,
html.theme-evening #completeAppointmentSheet::before,
html.theme-evening #inviteStaffSheet::before,
html.theme-evening #staffMemberDetailSheet::before,
html.theme-evening #acceptInviteSheet::before,
html.theme-evening #changePasswordSheet::before,
html.theme-evening #serviceEditSheet::before,
html.theme-evening #notificationsSheet::before,
html.theme-evening #pwaPhoneActionModal .pwa-phone-action-sheet::before {
    background-color: #1b2f22 !important;
    background-image:
        linear-gradient(180deg, rgba(27, 47, 34, 0.58) 0%, rgba(27, 47, 34, 0.74) 100%),
        var(--app-wallpaper-url, url("fon/day_bg.webp")) !important;
}

html.theme-night .history-sheet::before,
html.theme-night .manual-appointment-new-sheet::before,
html.theme-night #manualAppointmentSheet::before,
html.theme-night #appointmentDetailSheet::before,
html.theme-night #clientDetailSheet::before,
html.theme-night #clientFormSheet::before,
html.theme-night #historyDetailSheet::before,
html.theme-night #historyEditSheet::before,
html.theme-night #historyRescheduleSheet::before,
html.theme-night #completeAppointmentSheet::before,
html.theme-night #inviteStaffSheet::before,
html.theme-night #staffMemberDetailSheet::before,
html.theme-night #acceptInviteSheet::before,
html.theme-night #changePasswordSheet::before,
html.theme-night #serviceEditSheet::before,
html.theme-night #notificationsSheet::before,
html.theme-night #pwaPhoneActionModal .pwa-phone-action-sheet::before,
html.theme-dark-glass .history-sheet::before,
html.theme-dark-glass .manual-appointment-new-sheet::before,
html.theme-dark-glass #manualAppointmentSheet::before,
html.theme-dark-glass #appointmentDetailSheet::before,
html.theme-dark-glass #clientDetailSheet::before,
html.theme-dark-glass #clientFormSheet::before,
html.theme-dark-glass #historyDetailSheet::before,
html.theme-dark-glass #historyEditSheet::before,
html.theme-dark-glass #historyRescheduleSheet::before,
html.theme-dark-glass #completeAppointmentSheet::before,
html.theme-dark-glass #inviteStaffSheet::before,
html.theme-dark-glass #staffMemberDetailSheet::before,
html.theme-dark-glass #acceptInviteSheet::before,
html.theme-dark-glass #changePasswordSheet::before,
html.theme-dark-glass #serviceEditSheet::before,
html.theme-dark-glass #notificationsSheet::before,
html.theme-dark-glass #pwaPhoneActionModal .pwa-phone-action-sheet::before {
    background-color: #141219 !important;
    background-image:
        linear-gradient(180deg, rgba(20, 18, 25, 0.58) 0%, rgba(20, 18, 25, 0.74) 100%),
        var(--app-wallpaper-url, url("fon/photo_1_2026-06-24_18-19-58.webp")) !important;
}

.history-sheet::after,
.manual-appointment-new-sheet::after,
#manualAppointmentSheet::after,
#appointmentDetailSheet::after,
#clientDetailSheet::after,
#clientFormSheet::after,
#historyDetailSheet::after,
#historyEditSheet::after,
#historyRescheduleSheet::after,
#completeAppointmentSheet::after,
#inviteStaffSheet::after,
#staffMemberDetailSheet::after,
#acceptInviteSheet::after,
#changePasswordSheet::after,
#serviceEditSheet::after,
#notificationsSheet::after,
#pwaPhoneActionModal .pwa-phone-action-sheet::after {
    display: none !important;
    content: none !important;
}

.history-sheet > *,
.manual-appointment-new-sheet > *,
#manualAppointmentSheet > *,
#appointmentDetailSheet > *,
#clientDetailSheet > *,
#clientFormSheet > *,
#historyDetailSheet > *,
#historyEditSheet > *,
#historyRescheduleSheet > *,
#completeAppointmentSheet > *,
#inviteStaffSheet > *,
#staffMemberDetailSheet > *,
#acceptInviteSheet > *,
#changePasswordSheet > *,
#serviceEditSheet > *,
#notificationsSheet > *,
#pwaPhoneActionModal .pwa-phone-action-sheet > *,
.history-sheet .sheet-head,
.history-sheet .sheet-actions,
.history-sheet .new-sheet-scroll-container,
.manual-appointment-new-sheet .sheet-head,
.manual-appointment-new-sheet .sheet-actions,
.manual-appointment-new-sheet .new-sheet-scroll-container,
#manualAppointmentSheet .sheet-head,
#manualAppointmentSheet .sheet-actions,
#manualAppointmentSheet .new-sheet-scroll-container {
    position: relative !important;
    z-index: 2 !important;
}

.history-sheet .sheet-handle,
.manual-appointment-new-sheet .sheet-handle,
#manualAppointmentSheet .sheet-handle,
#pwaPhoneActionModal .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 14px !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;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !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;
    min-width: 0 !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;
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !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;
}

/* SMS строка в деталях записи */
#detailAppointmentSmsRow {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
}

#detailAppointmentSmsRow .detail-sms-actions,
.history-sheet .detail-row > .detail-sms-actions,
.history-sheet .detail-row > div.detail-sms-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.history-sheet .detail-row #detailAppointmentSmsBadge,
.history-sheet .detail-row strong.appointment-sms-status-pill,
.appointment-sms-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: fit-content !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
    text-align: center !important;
}

.sms-send-btn,
.sms-send-icon-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 5px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: 12px !important;
    background: rgba(56, 189, 248, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #38bdf8 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease, transform 0.15s ease !important;
}

.sms-send-btn svg,
.sms-send-btn i,
.sms-send-icon-btn svg,
.sms-send-icon-btn i {
    display: none !important;
}

.sms-send-btn:active,
.sms-send-icon-btn:active {
    transform: scale(0.96) !important;
    background: rgba(56, 189, 248, 0.28) !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: 100% !important;
    height: 100% !important;
    max-height: 100% !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;
    content-visibility: auto !important;
    contain-intrinsic-size: 86px !important;
    contain: layout style paint !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 & Photos */
.client-avatar {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    overflow: hidden !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;
    box-sizing: border-box !important;
}

.client-avatar img,
.client-avatar-img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !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: 500 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", sans-serif !important;
    white-space: nowrap !important;
    gap: 2px !important;
    font-variant-numeric: tabular-nums lining-nums !important;
}

.client-side strong {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif !important;
    font-variant-numeric: tabular-nums lining-nums !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;
}

/* Чистые и аккуратные плашки строк деталей в модалках/листах */
.history-sheet .detail-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    min-height: 44px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.history-sheet .detail-row > span:first-child,
.history-sheet .detail-row > .detail-label {
    flex: 0 0 auto !important;
    max-width: 42% !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.history-sheet .detail-row > strong:not(.appointment-sms-status-pill),
.history-sheet .detail-row > .detail-value,
.history-sheet .detail-row > div:last-child:not(.detail-sms-actions) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: right !important;
    gap: 6px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.history-sheet .detail-row strong span,
.history-sheet .detail-row .master-color-dot {
    flex: 0 0 auto !important;
    max-width: 100% !important;
}

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

/* Единая динамическая рамочка для нескольких услуг (iOS 27 Liquid Glass) */
.history-sheet .detail-row.detail-row-services-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 12px 14px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

.history-sheet .detail-row.detail-row-services-group .detail-services-group-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
}

.history-sheet .detail-row.detail-row-services-group .detail-services-group-item {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 5px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-sizing: border-box !important;
}

.history-sheet .detail-row.detail-row-services-group .detail-services-group-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.history-sheet .detail-row.detail-row-services-group .detail-services-counter {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 22px !important;
    max-width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.history-sheet .detail-row.detail-row-services-group .detail-service-type-label {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    white-space: nowrap !important;
}

.history-sheet .detail-row.detail-row-services-group .detail-service-type-label.is-add {
    color: rgba(255, 255, 255, 0.55) !important;
}

.history-sheet .detail-row.detail-row-services-group .detail-service-name-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-align: right !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

#appointmentDetailSheet .detail-content,
#appointmentDetailSheet .detail-block {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

#appointmentDetailSheet .detail-actions {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !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-rotation-card {
    margin-bottom: 16px !important;
    padding: 14px 16px !important;
}

.wallpaper-toggle-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.wallpaper-toggle-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.wallpaper-toggle-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
}

.wallpaper-toggle-sub {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.58) !important;
    line-height: 1.35 !important;
}

.wallpaper-section-counter,
.wallpaper-section-hint {
    display: block !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
}

.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-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), box-shadow 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-in-pool {
    border-color: rgba(255, 255, 255, 0.42) !important;
    background: rgba(255, 255, 255, 0.11) !important;
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.25), 0 4px 18px rgba(0, 0, 0, 0.25) !important;
}

.wallpaper-tile.is-single-active {
    border-color: rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.13) !important;
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3), 0 8px 26px rgba(0, 0, 0, 0.35) !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 {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12)) !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: 24px !important;
    height: 24px !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;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: transparent !important;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease !important;
}

.wallpaper-tile.is-in-pool .wallpaper-tile-check {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.wallpaper-tile.is-single-active .wallpaper-tile-check {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #0b0f19 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

.wallpaper-tile-check svg {
    width: 14px !important;
    height: 14px !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 (Matching Master Profile Liquid Glass) */
.glass-settings-card,
.service-card-liquid,
.profile-user-card {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 24px !important;
    padding: 18px 16px !important;
    margin-bottom: var(--card-to-section-gap, 16px) !important;
    backdrop-filter: blur(35px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(35px) saturate(180%) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Unified Inset Group for Settings (iOS / Liquid Glass Style) */
.settings-categories-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 6px !important;
    margin-bottom: 24px !important;
}

.settings-cat-subgroup {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(35px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(35px) saturate(180%) !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.settings-cat-subgroup .settings-cat-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 68px !important;
    height: 68px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background-color 140ms ease !important;
}

.settings-cat-subgroup .settings-cat-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.settings-cat-subgroup .settings-cat-card:active {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: none !important;
}

/* Hairline Divider between items (indented after icon) */
.settings-cat-subgroup .settings-cat-card:not(:last-child)::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 68px !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.09) !important;
    pointer-events: none !important;
}

.settings-cat-subgroup .settings-cat-card .glass-list-item-icon-wrapper {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

.settings-cat-text-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.settings-cat-title {
    font-size: 15.5px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
}

.settings-cat-desc {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Distinct Top Profile Card (Hero Style) */
.settings-cat-profile-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 82px !important;
    padding: 16px 18px !important;
    margin-bottom: 16px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(35px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(35px) saturate(180%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    gap: 15px !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 140ms ease, border-color 140ms ease !important;
}

.settings-cat-profile-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
}

.settings-cat-profile-card:active {
    transform: scale(0.98) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
}

.settings-cat-profile-card .settings-profile-name {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.2px !important;
}

.settings-profile-avatar-wrapper {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    background: linear-gradient(135deg, #0a84ff, #5e5ce6) !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.55) !important;
    line-height: 1.4 !important;
    margin: -6px 0 14px 0 !important;
}

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

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

/* Grouped lists inside settings cards */
.glass-list,
.schedule-workdays-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.glass-checkbox-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 13px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !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: 100% !important;
    height: 100% !important;
    max-height: 100% !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,
.btn-liquid-action,
#addBreakButton,
#saveScheduleButton {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.09)) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    cursor: pointer !important;
    border-radius: 14px !important;
    min-height: 48px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms ease, box-shadow 140ms ease !important;
}

#addBreakButton:hover,
#saveScheduleButton:hover,
.glass-settings-card .primary-action:hover,
.add-break-form .primary-action:hover,
.screen[data-screen="settings"] .primary-action:hover,
.screen[data-screen="scheduleSettings"] .primary-action:hover,
.btn-liquid-action:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.13)) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35) !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,
.btn-liquid-action:active {
    transform: scale(0.975) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25) !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:not([data-screen="home"]).is-active,
.screen:not([data-screen="home"]).is-swipe-prev,
.screen:not([data-screen="home"]).is-swiping-back {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-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(20, 18, 25, 0.72) !important;
    border-radius: 0 !important;
    border: none !important;
    overscroll-behavior: none !important;
}

/* Настройки тем времени суток для внутренних экранов на основе классов body */
body.theme-morning .screen:not([data-screen="home"]) {
    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:not([data-screen="home"]) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.11) 100%) !important;
}

body.theme-evening .screen:not([data-screen="home"]) {
    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:not([data-screen="home"]) {
    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:not([data-screen="home"]) {
    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: 100% !important;
    height: 100% !important;
    max-height: 100% !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 прозрачен */
body.theme-dark-glass,
body.is-home-active.theme-dark-glass,
body.is-appointments-active.theme-dark-glass,
body.is-clients-active.theme-dark-glass {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    background-attachment: scroll !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, url("fon/photo_1_2026-06-24_18-19-58.webp"));
    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 var(--motion-duration-normal, 240ms) var(--motion-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)) !important;
    pointer-events: auto !important;
}

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

.liquid-alert-overlay.is-hiding {
    opacity: 0 !important;
    transition: opacity var(--motion-duration-fast, 180ms) var(--motion-ease-exit, cubic-bezier(0.4, 0, 1, 1)) !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(var(--motion-scale-enter, 0.96)) translateY(8px);
    transition: transform var(--motion-duration-normal, 240ms) var(--motion-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)), opacity var(--motion-duration-normal, 240ms) var(--motion-ease-enter, cubic-bezier(0.23, 1, 0.32, 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(var(--motion-scale-enter, 0.96)) translateY(8px) !important;
    transition: transform var(--motion-duration-fast, 180ms) var(--motion-ease-exit, cubic-bezier(0.4, 0, 1, 1)) !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: background var(--motion-duration-fast, 180ms) ease, border-color var(--motion-duration-fast, 180ms) ease, transform var(--motion-duration-micro, 140ms) var(--motion-ease-press) !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: 200px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    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;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.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,
.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;
}

.quick-action-card,
.glass-card-appointment {
    transition: transform 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-overlay,
.notifications-overlay,
.stats-modal-container,
.stats-modal-overlay,
.liquid-alert-card,
.liquid-alert-overlay,
#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;
}

.history-sheet,
.manual-appointment-new-sheet,
#manualAppointmentSheet,
#clientDetailSheet,
#appointmentDetailSheet,
#newAppointmentSheet,
#clientFormSheet,
#historyDetailSheet,
#historyEditSheet,
#historyRescheduleSheet,
#completeAppointmentSheet,
#inviteStaffSheet,
#staffMemberDetailSheet,
#acceptInviteSheet,
#changePasswordSheet,
#serviceEditSheet,
#notificationsSheet {
    will-change: transform, opacity !important;
    transform-style: flat !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    contain: layout style !important;
}

.history-sheet.is-open,
.manual-appointment-new-sheet.is-open,
#manualAppointmentSheet.is-open,
#clientDetailSheet.is-open,
#appointmentDetailSheet.is-open,
#newAppointmentSheet.is-open,
#clientFormSheet.is-open,
#historyDetailSheet.is-open,
#historyEditSheet.is-open,
#historyRescheduleSheet.is-open,
#completeAppointmentSheet.is-open,
#inviteStaffSheet.is-open,
#staffMemberDetailSheet.is-open,
#acceptInviteSheet.is-open,
#changePasswordSheet.is-open,
#serviceEditSheet.is-open,
#notificationsSheet.is-open {
    will-change: auto !important;
}

/* Master Spring Bézier Curve for Liquid Bottom Sheet Opening & Closing */
.history-sheet {
    transform: translate3d(0, 105%, 0) !important;
    transition: transform var(--motion-duration-normal, 240ms) var(--motion-ease-drawer, cubic-bezier(0.32, 0.72, 0, 1)), opacity var(--motion-duration-normal, 240ms) var(--motion-ease-drawer, cubic-bezier(0.32, 0.72, 0, 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 var(--motion-duration-fast, 180ms) var(--motion-ease-exit, cubic-bezier(0.4, 0, 1, 1)), opacity var(--motion-duration-fast, 180ms) ease !important;
    pointer-events: none !important;
}

/* Overlay Backdrop Fade */
.history-overlay {
    opacity: 0 !important;
    transition: opacity var(--motion-duration-normal, 240ms) var(--motion-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)) !important;
}

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

.history-overlay.is-closing {
    opacity: 0 !important;
    transition: opacity var(--motion-duration-fast, 180ms) var(--motion-ease-exit, cubic-bezier(0.4, 0, 1, 1)) !important;
}

/* Liquid Alert & Card Pop Physics */
.liquid-alert-card {
    transform: scale(0.96) translate3d(0, 10px, 0) !important;
    opacity: 0 !important;
    transition: transform var(--motion-duration-normal, 240ms) var(--motion-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)), opacity var(--motion-duration-normal, 240ms) var(--motion-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)) !important;
}

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

/* ==========================================================================
   PWA Modern Phone Action Button (Paste / Clear with physics animation)
   ========================================================================== */
.pwa-phone-field-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.pwa-phone-field-wrapper input,
.pwa-phone-field-wrapper input[type="tel"] {
    width: 100% !important;
    padding-right: 42px !important;
    box-sizing: border-box !important;
}

.pwa-phone-action-btn {
    position: absolute !important;
    right: 7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    z-index: 5 !important;
    transition: background var(--motion-duration-fast, 180ms) ease, border-color var(--motion-duration-fast, 180ms) ease, color var(--motion-duration-fast, 180ms) ease, transform var(--motion-duration-micro, 140ms) var(--motion-ease-press) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
}

.pwa-phone-action-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-50%) scale(1.05) !important;
}

.pwa-phone-action-btn:active {
    transform: translateY(-50%) scale(0.92) !important;
    background: rgba(255, 255, 255, 0.24) !important;
}

.pwa-phone-action-btn .pwa-phone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: transform var(--motion-duration-fast, 180ms) var(--motion-ease-press, cubic-bezier(0.23, 1, 0.32, 1)), opacity var(--motion-duration-fast, 180ms) ease;
}

.pwa-phone-action-btn .pwa-phone-icon-paste svg {
    width: 16px;
    height: 16px;
}

.pwa-phone-action-btn.is-clear {
    background: rgba(239, 68, 68, 0.16) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

.pwa-phone-action-btn.is-clear:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    border-color: rgba(239, 68, 68, 0.55) !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3) !important;
}

/* ==========================================================================
   Phone Action Menu Modal (Liquid Glass + Backdrop Blur)
   ========================================================================== */
#pwaPhoneActionModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: none;
    align-items: flex-end !important;
    justify-content: center !important;
    background: rgba(12, 16, 26, 0.72) !important;
    backdrop-filter: blur(25px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(120%) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#pwaPhoneActionModal:not(.is-visible):not(.is-closing) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#pwaPhoneActionModal.is-visible {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#pwaPhoneActionModal.is-closing {
    display: flex !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1) !important;
}

#pwaPhoneActionModal .pwa-phone-action-sheet {
    position: relative !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    bottom: 0 !important;
    box-sizing: border-box !important;
    isolation: isolate !important;
    background: rgba(20, 23, 30, 0.88) !important;
    background-color: rgba(20, 23, 30, 0.88) !important;
    backdrop-filter: blur(35px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(35px) saturate(160%) !important;
    overflow: hidden !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: 14px 20px calc(24px + env(safe-area-inset-bottom)) 20px !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 -15px 50px rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
    overscroll-behavior: contain !important;
    transform: translate3d(0, 105%, 0) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
    pointer-events: auto !important;
}

#pwaPhoneActionModal.is-visible .pwa-phone-action-sheet {
    transform: translate3d(0, 0, 0) !important;
}

#pwaPhoneActionModal.is-closing .pwa-phone-action-sheet {
    transform: translate3d(0, 105%, 0) !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1) !important;
}

#pwaPhoneActionModal .sheet-handle {
    width: 44px;
    height: 5px;
    margin: 0 auto 16px auto;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#pwaPhoneActionModal .sheet-handle:active {
    opacity: 0.6;
    transform: scale(0.96);
}

.phone-action-header {
    text-align: center;
    margin-bottom: 18px;
}

.phone-action-name {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.phone-action-number {
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.68);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.phone-action-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.phone-action-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    padding: 10px 16px;
    min-height: 54px;
    box-sizing: border-box;
    color: #ffffff;
    text-decoration: none;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 3px 12px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 140ms ease, border-color 140ms ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    cursor: pointer;
}

.phone-action-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.phone-action-item:active {
    transform: scale(0.978);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.24);
}

.phone-action-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.phone-action-item:active .phone-action-icon-badge {
    transform: scale(0.94);
}

.phone-action-icon-badge.call-badge {
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.28), rgba(40, 167, 69, 0.18));
    border: 1px solid rgba(52, 199, 89, 0.4);
    color: #34c759;
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.phone-action-icon-badge.wa-badge {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.28), rgba(18, 140, 126, 0.18));
    border: 1px solid rgba(37, 211, 102, 0.4);
    color: #25d366;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.phone-action-icon-badge.tg-badge {
    background: linear-gradient(135deg, rgba(42, 171, 238, 0.28), rgba(34, 158, 217, 0.18));
    border: 1px solid rgba(42, 171, 238, 0.4);
    color: #2aabee;
    box-shadow: 0 2px 8px rgba(42, 171, 238, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.phone-action-icon-badge.sms-badge {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(2, 132, 199, 0.18));
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.phone-action-icon-badge.copy-badge {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.phone-action-chevron {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    transition: transform 140ms ease, color 140ms ease;
}

.phone-action-item:hover .phone-action-chevron {
    color: rgba(255, 255, 255, 0.6);
}

.phone-action-item:active .phone-action-chevron {
    transform: translateX(2px);
    color: rgba(255, 255, 255, 0.75);
}

.btn-cancel-phone-action {
    width: 100%;
    min-height: 52px;
    margin-top: 14px;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 16px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 140ms ease, border-color 140ms ease;
    -webkit-tap-highlight-color: transparent;
}

.btn-cancel-phone-action:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.btn-cancel-phone-action:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.18);
}

/* Segmented Control Fallbacks and View Classes */
.segmented-control.is-view-day .segmented-indicator {
    transform: translateX(var(--segmented-indicator-x, 0%)) translateZ(0);
}
.segmented-control.is-view-week .segmented-indicator {
    transform: translateX(var(--segmented-indicator-x, 100%)) translateZ(0);
}
.segmented-control.is-view-month .segmented-indicator {
    transform: translateX(var(--segmented-indicator-x, 200%)) translateZ(0);
}

/* ==========================================================================
   Phase 7: Staff & Team Management UI (iOS 27 Liquid Glass)
   ========================================================================== */

.invite-staff-sheet,
.staff-detail-sheet,
.accept-invite-sheet {
    z-index: 1020 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    bottom: 0 !important;
    max-height: 88vh !important;
    height: auto !important;
    padding: 14px 18px 0 18px !important;
}

.invite-staff-sheet::-webkit-scrollbar,
.staff-detail-sheet::-webkit-scrollbar,
.accept-invite-sheet::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.invite-staff-sheet .sheet-handle,
.staff-detail-sheet .sheet-handle,
.accept-invite-sheet .sheet-handle {
    margin: 0 auto 10px auto !important;
}

.invite-staff-sheet .sheet-head,
.staff-detail-sheet .sheet-head,
.accept-invite-sheet .sheet-head {
    margin-bottom: 12px !important;
    padding: 0 2px 4px !important;
}

.invite-staff-sheet .sheet-section-subtitle {
    margin: 0 0 12px 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.invite-staff-sheet .sheet-input-group,
.staff-detail-sheet .sheet-input-group {
    margin-bottom: 8px !important;
    padding: 5px 12px !important;
}

.invite-staff-sheet .sheet-field-title {
    margin-bottom: 6px !important;
    font-size: 13px !important;
}

.invite-staff-sheet .staff-role-picker {
    gap: 8px !important;
}

.invite-staff-sheet .role-picker-option {
    padding: 10px 14px !important;
    border-radius: 16px !important;
}

.invite-staff-sheet .role-picker-badge-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
}

.invite-staff-sheet .sheet-actions,
.staff-detail-sheet .sheet-actions,
.accept-invite-sheet .sheet-actions {
    padding: 10px 0 0 0 !important;
    margin-top: 6px !important;
}

.invite-staff-sheet .sheet-save-btn,
.staff-detail-sheet .sheet-save-btn,
.accept-invite-sheet .sheet-save-btn {
    padding: 13px 18px !important;
    font-size: 15px !important;
    border-radius: 18px !important;
}

.color-dot-btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.color-dot-btn:active {
    transform: scale(0.92);
}
.color-dot-btn.is-selected {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.staff-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 600;
}

/* Staff Member Card */
.staff-member-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    cursor: pointer;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background 160ms ease, border-color 160ms ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.staff-member-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

.staff-member-card:active {
    transform: scale(0.985);
    background: rgba(255, 255, 255, 0.1);
}

.staff-avatar-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: #ffffff;
    overflow: hidden;
    flex-shrink: 0;
}

.staff-avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.staff-info-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 2px;
}

.staff-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.staff-member-name {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-member-email {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Role Badges */
.staff-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.2px;
    flex-shrink: 0;
}

.staff-role-badge.badge-owner {
    background: rgba(255, 159, 10, 0.18);
    color: #ff9f0a;
    border: 1px solid rgba(255, 159, 10, 0.32);
}

.staff-role-badge.badge-admin {
    background: rgba(10, 132, 255, 0.18);
    color: #0a84ff;
    border: 1px solid rgba(10, 132, 255, 0.32);
}

.staff-role-badge.badge-employee {
    background: rgba(50, 215, 75, 0.18);
    color: #32d74b;
    border: 1px solid rgba(50, 215, 75, 0.32);
}

/* Pending Invitations Card */
.staff-invite-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    gap: 12px;
}

.staff-invite-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.staff-invite-token {
    font-family: monospace;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-invite-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.staff-invite-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn-invite-action-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.btn-invite-action-mini:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
}

.btn-invite-action-mini:active {
    transform: scale(0.92);
}

.btn-invite-action-mini.is-danger {
    color: #ff453a;
    background: rgba(255, 69, 58, 0.1);
    border-color: rgba(255, 69, 58, 0.25);
}

.btn-invite-action-mini.is-danger:hover {
    background: rgba(255, 69, 58, 0.2);
    border-color: rgba(255, 69, 58, 0.4);
}

/* Role Selector Radio Cards in Sheets (Apple Monochrome Liquid Glass) */
.staff-role-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.role-picker-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.role-picker-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

.role-picker-option:active {
    transform: scale(0.98);
}

.role-picker-option.is-selected {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 4px 20px rgba(0, 0, 0, 0.16);
}

.role-picker-badge-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.role-picker-badge-icon svg {
    width: 18px;
    height: 18px;
}

.role-picker-option.is-selected .role-picker-badge-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
}

.role-picker-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 3px;
}

.role-picker-title {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.role-picker-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.35;
}

.role-picker-radio-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.28);
    flex-shrink: 0;
    position: relative;
    transition: border-color 140ms ease, background 140ms ease;
}

.role-picker-option.is-selected .role-picker-radio-circle {
    border-color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.2);
}

.role-picker-option.is-selected .role-picker-radio-circle::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Subtitles and Section Headers in Sheets */
.sheet-section-subtitle {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    margin: 0 0 16px;
    line-height: 1.45;
}

.sheet-field-title {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
}

/* Success Card & Link Sharing in Invite Sheet */
.invite-success-card {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 22px 18px;
    margin-bottom: 18px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.invite-success-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.invite-success-icon-box svg {
    width: 24px;
    height: 24px;
}

.invite-success-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
}

.invite-success-desc {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.45;
}

.invite-copy-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.invite-link-input {
    flex: 1;
    min-width: 0;
    font-family: monospace;
    font-size: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    outline: none;
    box-sizing: border-box;
}

.invite-link-input:focus {
    border-color: rgba(255, 255, 255, 0.28);
}

.btn-invite-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 140ms ease, transform 120ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.btn-invite-action:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
}

.btn-invite-action:active {
    transform: scale(0.96);
}

.btn-invite-action.is-accent {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Staff Detail Profile Card Polish */
.staff-detail-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    margin-bottom: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.staff-detail-avatar-wrapper {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 22px;
    color: #ffffff;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.staff-detail-info {
    flex: 1;
    min-width: 0;
}

/* Accept Invite Sheet Body */
.accept-invite-body {
    text-align: center;
    padding: 12px 8px 20px;
}

.accept-invite-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    margin-bottom: 16px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22);
}

.accept-invite-icon-box svg {
    width: 28px;
    height: 28px;
}

.accept-invite-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.accept-invite-desc {
    margin: 0 0 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* =============================================================================
   #clientDetailSheet & #appointmentDetailSheet — Edge-to-Edge Banner Overrides
   ============================================================================= */

/* Убираем все padding с листа — фото должно идти от края до края.
   Фон карточки клиента/записи: глубоко и эстетично размытые фото-обои (Apple Liquid Glass Bokeh) */
#clientDetailSheet,
#appointmentDetailSheet {
    padding: 0 !important;
    position: fixed !important;
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

#clientDetailSheet::before,
#appointmentDetailSheet::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -45px !important;
    z-index: 1 !important;
    background-color: #141219 !important;
    background-image:
        linear-gradient(180deg, rgba(20, 18, 25, 0.58) 0%, rgba(20, 18, 25, 0.74) 100%),
        var(--app-wallpaper-url, url("fon/photo_1_2026-06-24_18-19-58.webp")) !important;
    background-position: var(--app-wallpaper-position, center center) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    filter: blur(48px) saturate(135%) !important;
    -webkit-filter: blur(48px) saturate(135%) !important;
    transform: scale(1.12) translateZ(0) !important;
    -webkit-transform: scale(1.12) translateZ(0) !important;
    pointer-events: none !important;
}

html.theme-morning #clientDetailSheet::before,
html.theme-day #clientDetailSheet::before,
html.theme-evening #clientDetailSheet::before,
html.theme-morning #appointmentDetailSheet::before,
html.theme-day #appointmentDetailSheet::before,
html.theme-evening #appointmentDetailSheet::before {
    background-color: #1b2f22 !important;
    background-image:
        linear-gradient(180deg, rgba(27, 47, 34, 0.58) 0%, rgba(27, 47, 34, 0.74) 100%),
        var(--app-wallpaper-url, url("fon/day_bg.webp")) !important;
}

html.theme-night #clientDetailSheet::before,
html.theme-dark-glass #clientDetailSheet::before,
html.theme-night #appointmentDetailSheet::before,
html.theme-dark-glass #appointmentDetailSheet::before {
    background-color: #141219 !important;
    background-image:
        linear-gradient(180deg, rgba(20, 18, 25, 0.58) 0%, rgba(20, 18, 25, 0.74) 100%),
        var(--app-wallpaper-url, url("fon/photo_1_2026-06-24_18-19-58.webp")) !important;
}

#clientDetailSheet::after,
#appointmentDetailSheet::after {
    display: none !important;
}

/* Скрываем стандартный sheet-head (заголовок + крестик) — они заменены overlay внутри фото */
#clientDetailSheet .sheet-head,
#appointmentDetailSheet .sheet-head {
    display: none !important;
}

/* Убираем padding у scroll-контейнера */
#clientDetailSheet .new-sheet-scroll-container,
#appointmentDetailSheet .new-sheet-scroll-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    flex: 1 !important;
    min-height: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
}

/* Кнопки действий внизу — добавляем нормальный padding */
#clientDetailSheet .detail-actions,
#appointmentDetailSheet .detail-actions {
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom)) 16px !important;
}

/* Контент внутри scroll-контейнера — без отступов */
#clientDetailSheet #clientDetailContent,
#appointmentDetailSheet #appointmentDetailContent {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* sheet-handle — абсолютно поверх фото, не занимает места в потоке */
#clientDetailSheet .sheet-handle,
#appointmentDetailSheet .sheet-handle {
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    background: rgba(255, 255, 255, 0.45) !important;
}

/* Карточка профиля внутри — полная ширина, без отступов */
#clientDetailSheet .client-detail-profile-card,
#appointmentDetailSheet .client-detail-profile-card {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Кнопки под фото — отступы */
#clientDetailSheet .client-avatar-actions,
#appointmentDetailSheet .client-avatar-actions {
    padding: 14px 16px 0 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Аватар-контейнер — растягиваем на всю ширину включая border листа */
#clientDetailSheet .client-detail-avatar-container,
#appointmentDetailSheet .client-detail-avatar-container {
    margin: 0 -1px !important;
    width: calc(100% + 2px) !important;
    box-sizing: border-box !important;
}

/* Инфо-строки — горизонтальные отступы */
#clientDetailSheet .detail-row {
    margin: 0 16px !important;
}

#appointmentDetailSheet .detail-block {
    padding: 0 16px 6px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#appointmentDetailSheet .detail-block .detail-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#appointmentDetailSheet .detail-comment,
#appointmentDetailSheet .appointment-conflict-banner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* =============================================================================
   Client Detail Profile Card & Banner Avatar (1-in-1 Design System)
   ============================================================================= */
.client-detail-profile-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 14px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    position: relative !important;
}

.client-detail-avatar-container {
    position: relative !important;
    width: 100% !important;
    height: 260px !important;
    border-radius: 30px 30px 0 0 !important;
    overflow: hidden !important;
    background: #1c1c1e !important;
    box-shadow: none !important;
    border: none !important;
    box-sizing: border-box !important;
    isolation: isolate !important;
    cursor: pointer !important;
}

.client-detail-avatar-wrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 56px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    z-index: 1 !important;
    cursor: pointer !important;
}

.client-detail-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
    display: block !important;
    border: none !important;
    image-rendering: auto !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    cursor: pointer !important;
}

.client-detail-avatar-gradient {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.0) 25%, rgba(0, 0, 0, 0.0) 55%, rgba(0, 0, 0, 0.65) 100%) !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.client-detail-header-overlay {
    position: absolute !important;
    bottom: 16px !important;
    left: 18px !important;
    right: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 20 !important;
    transform: translateZ(20px) !important;
    -webkit-transform: translateZ(20px) !important;
    pointer-events: none !important;
}

.client-detail-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.client-detail-header-name {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.95) !important;
}

.client-detail-header-phone {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.95) !important;
    pointer-events: auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
}

.client-detail-header-phone svg {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
    flex: 0 0 12px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.client-detail-avatar-badge {
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #007aff !important;
    border: 2.5px solid rgba(255, 255, 255, 0.95) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
    padding: 0 !important;
    outline: none !important;
    transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1), background 0.16s ease !important;
    z-index: 25 !important;
    transform: translateZ(25px) !important;
    -webkit-transform: translateZ(25px) !important;
}

.client-detail-avatar-badge:active {
    transform: scale(0.9) !important;
    background: #0062cc !important;
}

.client-detail-avatar-badge svg {
    width: 22px !important;
    height: 22px !important;
}

/* Кнопка закрытия листа — поверх фото, правый верхний угол */
.client-detail-close-btn {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(60, 60, 67, 0.75) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    outline: none !important;
    z-index: 30 !important;
    transform: translateZ(30px) !important;
    -webkit-transform: translateZ(30px) !important;
    transition: transform 0.12s cubic-bezier(0.23, 1, 0.32, 1), background 0.14s ease !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.client-detail-close-btn:active {
    transform: scale(0.88) !important;
    background: rgba(60, 60, 67, 0.9) !important;
}

.client-avatar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.client-avatar-action-btn {
    flex: 1 !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    padding: 0 16px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1), background 0.16s ease !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.client-avatar-action-btn:active {
    transform: scale(0.97) !important;
}

.client-avatar-action-btn.btn-choose {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.client-avatar-action-btn.btn-choose:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

.client-avatar-action-btn.btn-delete {
    color: #ff5b5b !important;
    background: rgba(140, 45, 45, 0.3) !important;
    border: 1px solid rgba(255, 80, 80, 0.25) !important;
    box-shadow: 0 4px 12px rgba(40, 0, 0, 0.2) !important;
}

.client-avatar-action-btn.btn-delete:hover {
    background: rgba(160, 50, 50, 0.4) !important;
}

@keyframes clientAvatarSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =============================================================================
   Client Avatar Fullscreen Lightbox (Apple Liquid Glass)
   ============================================================================= */
.client-avatar-lightbox {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    opacity: 0;
    touch-action: none !important;
    transition: opacity 0.28s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.client-avatar-lightbox.is-open {
    display: flex !important;
    opacity: 1 !important;
}

.client-avatar-lightbox-topbar {
    position: absolute !important;
    top: max(calc(env(safe-area-inset-top) + 16px), 20px) !important;
    left: max(calc(env(safe-area-inset-left) + 16px), 20px) !important;
    right: max(calc(env(safe-area-inset-right) + 16px), 20px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 10002 !important;
    pointer-events: none !important;
}

.client-avatar-lightbox-zoom-controls {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    pointer-events: auto !important;
    background: rgba(28, 28, 30, 0.72) !important;
    padding: 4px 6px !important;
    border-radius: 40px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

.client-avatar-lightbox-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.16s ease !important;
    outline: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    pointer-events: auto !important;
}

.client-avatar-lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}

.client-avatar-lightbox-btn:active {
    transform: scale(0.92) !important;
    background: rgba(255, 255, 255, 0.3) !important;
}

.client-avatar-lightbox-zoom-pill {
    width: auto !important;
    min-width: 54px !important;
    padding: 0 10px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    font-variant-numeric: tabular-nums !important;
}

.client-avatar-lightbox-close {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(28, 28, 30, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

.client-avatar-lightbox-viewport {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    touch-action: none !important;
    z-index: 10001 !important;
}

.client-avatar-lightbox-stage {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: none !important;
}

.client-avatar-lightbox-img {
    max-width: min(92vw, 860px) !important;
    max-height: min(80vh, 860px) !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 24px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.75), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
    cursor: zoom-in;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    touch-action: none !important;
    will-change: transform !important;
    transform-origin: center center !important;
}

.client-avatar-lightbox-caption {
    position: absolute !important;
    bottom: max(calc(env(safe-area-inset-bottom) + 20px), 24px) !important;
    left: 20px !important;
    right: 20px !important;
    margin: 0 auto !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.95) !important;
    letter-spacing: -0.01em !important;
    text-align: center !important;
    pointer-events: none !important;
    z-index: 10002 !important;
}

/* =============================================================================
   Client Detail Restructured Card (Apple iOS 27 / Liquid Glass System)
   ============================================================================= */
.client-detail-section {
    margin-top: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.client-detail-section:first-of-type {
    margin-top: 14px !important;
}

.client-section-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin: 0 18px 8px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Блок №1: Основная информация (Что происходит сейчас 2x2) */
.client-primary-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 16px !important;
    box-sizing: border-box !important;
}

.client-primary-info-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    border-radius: 16px !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    box-sizing: border-box !important;
    min-height: 56px !important;
}

.client-info-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.client-info-value {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
}

.client-info-value.is-empty {
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 500 !important;
    font-size: 12.5px !important;
}

/* Блок №2: Аналитика (Сетка 2x2) */
.client-analytics-section .client-analytics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 16px !important;
    box-sizing: border-box !important;
}

.client-analytics-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    border-radius: 16px !important;
    padding: 11px 13px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    box-sizing: border-box !important;
}

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

.client-analytics-card small {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

/* Блок №3: Профиль и предпочтения (Grouped cell card) */
.client-grouped-card {
    margin: 0 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.client-cell-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    min-height: 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-sizing: border-box !important;
}

.client-cell-row:last-child {
    border-bottom: none !important;
}

.client-cell-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    flex: 0 0 auto !important;
    max-width: 45% !important;
    white-space: nowrap !important;
}

.client-cell-value {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-align: right !important;
    flex: 1 1 auto !important;
    word-break: break-word !important;
}

.client-cell-value.is-empty {
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 500 !important;
}

/* Отдельный блок: Комментарий мастера */
.client-comment-card {
    margin: 0 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    box-sizing: border-box !important;
}

.client-comment-text {
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
}

.client-comment-text.is-empty {
    color: rgba(255, 255, 255, 0.4) !important;
    font-style: italic !important;
}

/* Блок №4: История онлайн-записей */
.client-history-list {
    margin: 0 16px !important;
    display: grid !important;
    gap: 8px !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
    box-sizing: border-box !important;
}

.client-appointment-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    box-sizing: border-box !important;
}

.client-appointment-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.client-appointment-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
}

.client-appointment-meta {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.client-empty-text {
    margin: 0 16px !important;
    padding: 12px 14px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px dashed rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-style: italic !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Блок №5: История расчётов */
.client-calculations-section .client-calculation-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 11px 13px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    text-align: left !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.16s ease !important;
}

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

.client-calc-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
}

.client-calc-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
}

.client-calc-price {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ff9f0a !important;
    white-space: nowrap !important;
}

.client-calc-meta {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-items: center !important;
}

.client-calc-status {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Кнопки действий карточки клиента внизу */
#clientDetailSheet .detail-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom)) 16px !important;
    box-sizing: border-box !important;
}

#clientDetailSheet .detail-actions .detail-actions-secondary-row {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
}

#clientDetailSheet .detail-actions .detail-actions-secondary-row button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#clientDetailSheet .detail-actions .danger-action {
    background: rgba(255, 69, 58, 0.12) !important;
    border: 1px solid rgba(255, 69, 58, 0.28) !important;
    color: #ff453a !important;
    margin-top: 2px !important;
    box-shadow: 0 4px 12px rgba(255, 69, 58, 0.1) !important;
}

#clientDetailSheet .detail-actions .danger-action:active {
    background: rgba(255, 69, 58, 0.22) !important;
    transform: scale(0.98) !important;
}

/* ─────────────────────────────────────────────────────────────
   SMS HISTORY MODAL - LIQUID GLASS & APPLE DESIGN SYSTEM
   ───────────────────────────────────────────────────────────── */
#smsHistorySheet,
.sms-history-sheet {
    height: 85dvh !important;
    max-height: 85dvh !important;
    display: flex !important;
    flex-direction: column !important;
}

#smsHistorySheet .new-sheet-scroll-container {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
}

.sms-filter-chips-container {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 6px 2px 14px 2px !important;
    margin-bottom: 8px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
}

.sms-filter-chips-container::-webkit-scrollbar {
    display: none !important;
}

.sms-filter-chip {
    flex: 0 0 auto !important;
    padding: 8px 16px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 140ms ease !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.sms-filter-chip:active {
    transform: scale(0.96) !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

.sms-filter-chip.is-active {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

.sms-history-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.sms-history-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 16px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    transition: transform 180ms ease !important;
}

.sms-history-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.sms-phone-tag {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #ffffff !important;
    letter-spacing: 0.2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.sms-history-card-body {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    word-break: break-word !important;
    font-weight: 400 !important;
}

.sms-history-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 11.5px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.sms-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.sms-status-pill.status-delivered {
    background: rgba(52, 199, 89, 0.18) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(52, 199, 89, 0.3) !important;
}

.sms-status-pill.status-sent {
    background: rgba(0, 122, 255, 0.18) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(0, 122, 255, 0.3) !important;
}

.sms-status-pill.status-pending,
.sms-status-pill.status-processing {
    background: rgba(255, 159, 10, 0.18) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(255, 159, 10, 0.3) !important;
}

.sms-status-pill.status-failed_temporary {
    background: rgba(255, 149, 0, 0.18) !important;
    color: #fb923c !important;
    border: 1px solid rgba(255, 149, 0, 0.3) !important;
}

.sms-status-pill.status-failed_permanent,
.sms-status-pill.status-error {
    background: rgba(255, 59, 48, 0.18) !important;
    color: #f87171 !important;
    border: 1px solid rgba(255, 59, 48, 0.3) !important;
}

.sms-status-pill.status-cancelled {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Liquid Alert Error State & Enhanced Readability */
.liquid-alert-card.is-error .liquid-alert-glow {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.35) 0%, rgba(239, 68, 68, 0) 70%) !important;
}

.liquid-alert-card.is-error .liquid-alert-icon {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.2) !important;
}

.liquid-alert-card.is-error .liquid-alert-btn {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.35) 0%, rgba(220, 38, 38, 0.15) 100%) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.liquid-alert-message {
    user-select: text !important;
    -webkit-user-select: text !important;
    word-break: break-word !important;
    white-space: pre-line !important;
}

/* ─────────────────────────────────────────────────────────────
   SEND CUSTOM SMS SHEET - LIQUID GLASS & APPLE DESIGN
   ───────────────────────────────────────────────────────────── */
#sendSmsSheet,
.send-sms-sheet {
    height: auto !important;
    min-height: 520px !important;
    max-height: 85dvh !important;
    display: flex !important;
    flex-direction: column !important;
}

#sendSmsSheet .new-sheet-scroll-container {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
}

.sms-template-chips {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding: 2px 0 6px 0 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
}

.sms-template-chips::-webkit-scrollbar {
    display: none !important;
}

.sms-template-chip {
    flex: 0 0 auto !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: background-color 140ms ease, transform 120ms ease, border-color 140ms ease !important;
}

.sms-template-chip:active {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: scale(0.96) !important;
}

.sms-template-chip.is-selected {
    background: rgba(56, 189, 248, 0.22) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #38bdf8 !important;
}

.sms-send-icon-btn {
    transition: background-color 140ms ease, transform 120ms ease !important;
}

.sms-send-icon-btn:active {
    transform: scale(0.96) !important;
    background: rgba(56, 189, 248, 0.28) !important;
}

/* ==========================================================================
   QUICK APPOINTMENT MODAL (FOCUS SWIPE FLOW - PIXEL PERFECT)
   ========================================================================== */

#quickAppointmentSheet {
    position: fixed !important;
    top: max(calc(env(safe-area-inset-top, 0px) + 16px), 56px) !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: min(100%, 460px) !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background: transparent !important;
    isolation: isolate !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-bottom: none !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6) !important;
    z-index: 1020 !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
    display: none !important;
    flex-direction: column !important;
    transform: translate3d(0, 105%, 0) !important;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
}

#quickAppointmentSheet::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -45px !important;
    z-index: 0 !important;
    background-color: #141219 !important;
    background-image:
        linear-gradient(180deg, rgba(20, 18, 25, 0.62) 0%, rgba(20, 18, 25, 0.78) 100%),
        var(--app-wallpaper-url, url("fon/photo_1_2026-06-24_18-19-58.webp")) !important;
    background-position: var(--app-wallpaper-position, center center) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    filter: blur(48px) saturate(140%) !important;
    -webkit-filter: blur(48px) saturate(140%) !important;
    transform: scale(1.12) translateZ(0) !important;
    -webkit-transform: scale(1.12) translateZ(0) !important;
    pointer-events: none !important;
}

#quickAppointmentSheet.is-open {
    display: flex !important;
    transform: translate3d(0, 0, 0) !important;
}

#quickAppointmentSheet.is-closing {
    display: flex !important;
    transform: translate3d(0, 105%, 0) !important;
    transition: transform 200ms cubic-bezier(0.4, 0, 1, 1) !important;
}

#quickAppointmentSheet[hidden],
#quickAppointmentSheet:not(.is-open):not(.is-closing) {
    display: none !important;
    pointer-events: none !important;
}

/* History overlay safety */
.history-overlay[hidden],
.history-overlay:not(.is-visible) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Top Navigation Bar: pinned to top of sheet */
.quick-top-nav {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 18px !important;
    box-sizing: border-box !important;
    z-index: 50 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
}

.quick-nav-icon-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: transform 140ms ease, background-color 140ms ease !important;
    flex-shrink: 0 !important;
}

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

.quick-nav-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
}

.quick-nav-icon-btn.is-hidden {
    visibility: hidden !important;
    pointer-events: none !important;
}

.quick-flow-progress {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
}

.quick-progress-track {
    width: 100% !important;
    max-width: 140px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
}

.quick-progress-bar {
    height: 100% !important;
    background: #3b82f6 !important;
    border-radius: 9999px !important;
    transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.quick-step-indicator {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    letter-spacing: 0.04em !important;
}

/* Slider Viewport & Horizontal Track: 100% per slide */
.quick-slider-viewport {
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    margin-top: 56px !important;
    height: calc(100% - 56px) !important;
}

.quick-slider-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform !important;
}

.quick-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 18px 4px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Field Container */
.quick-field-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-width: 100% !important;
    position: relative !important;
}

.quick-field-label {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.02em !important;
}

.quick-field-hint {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin-top: 8px !important;
}

/* Large Input Box with Action Button */
.quick-input-box {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 16px !important;
    padding: 4px 6px 4px 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: border-color 180ms ease, box-shadow 180ms ease !important;
}

.quick-input-box:focus-within {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    background: rgba(255, 255, 255, 0.11) !important;
}

.quick-large-input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    padding: 12px 0 !important;
    outline: none !important;
}

.quick-large-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    font-weight: 400 !important;
}

.quick-input-clear-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    transition: transform 140ms ease, opacity 140ms ease, background-color 140ms ease !important;
}

.quick-input-clear-btn:active {
    transform: scale(0.9) !important;
    background: rgba(255, 255, 255, 0.22) !important;
}

.quick-input-clear-btn.is-hidden {
    display: none !important;
}

.quick-input-clear-btn svg {
    width: 15px !important;
    height: 15px !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
}

.quick-input-action-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #3b82f6 !important;
    border: none !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4) !important;
    transition: transform 140ms ease !important;
    flex-shrink: 0 !important;
}

.quick-input-action-btn:active {
    transform: scale(0.92) !important;
}

.quick-input-action-btn svg {
    width: 18px !important;
    height: 18px !important;
}

/* Autocomplete Suggestions Box */
.quick-suggestions-box {
    margin-top: 10px !important;
    background: rgba(28, 25, 36, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    z-index: 20 !important;
}

.quick-suggestions-box.is-hidden {
    display: none !important;
}

.quick-suggestion-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    transition: background-color 140ms ease !important;
}

.quick-suggestion-item:last-child {
    border-bottom: none !important;
}

.quick-suggestion-item:active,
.quick-suggestion-item.is-selected {
    background: rgba(59, 130, 246, 0.25) !important;
}

.quick-sugg-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

.quick-sugg-phone {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Service Search & List */
.quick-search-box {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    margin-bottom: 12px !important;
}

.quick-search-box svg {
    width: 16px !important;
    height: 16px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    flex-shrink: 0 !important;
}

.quick-compact-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 14px !important;
}

.quick-compact-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.quick-services-scroll {
    flex: 1 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-right: 2px !important;
    padding-bottom: 8px !important;
}

.quick-service-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease !important;
}

.quick-service-row:active {
    transform: scale(0.98) !important;
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: #3b82f6 !important;
}

.quick-service-row.is-selected {
    background: rgba(59, 130, 246, 0.25) !important;
    border-color: #3b82f6 !important;
}

.quick-service-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.quick-srv-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

.quick-srv-dur {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.quick-srv-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #38bdf8 !important;
}

/* Date Pills & Time Grid */
.quick-date-row {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}

.quick-date-pill {
    padding: 8px 14px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 140ms ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.quick-date-pill.is-active {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35) !important;
}

.quick-date-picker-wrap {
    position: relative !important;
    display: inline-flex !important;
}

.quick-native-date-hidden {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    width: 100% !important;
    cursor: pointer !important;
}

.quick-time-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    max-height: 220px !important;
    overflow-y: auto !important;
}

.quick-time-btn {
    padding: 10px 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: transform 140ms ease, background-color 140ms ease !important;
}

.quick-time-btn:active {
    transform: scale(0.95) !important;
}

.quick-time-btn.is-selected {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35) !important;
}

/* Summary Card */
.quick-summary-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

.quick-summary-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 14px !important;
}

.quick-summary-title {
    color: rgba(255, 255, 255, 0.5) !important;
}

.quick-summary-val {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-align: right !important;
}

.quick-summary-divider {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    margin: 4px 0 !important;
}

.quick-summary-item.is-total {
    font-size: 16px !important;
}

.quick-summary-price {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #38bdf8 !important;
}

.quick-confirm-btn {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background: #3b82f6 !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4) !important;
    transition: transform 140ms ease !important;
}

.quick-confirm-btn:active {
    transform: scale(0.98) !important;
}

/* ==========================================================================
   Clean iOS Native Time Picker (Liquid Glass)
   ========================================================================== */
.quick-time-selection-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 4px !important;
}

.quick-time-pill-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 1 !important;
    cursor: pointer !important;
}

.quick-native-time-hidden {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 5 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.quick-time-pill {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    transition: background-color 140ms ease, border-color 140ms ease !important;
    box-sizing: border-box !important;
}

.quick-time-pill i,
.quick-time-pill svg {
    width: 18px !important;
    height: 18px !important;
    color: #38bdf8 !important;
    flex-shrink: 0 !important;
}

#quickTimeDisplay {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    color: #ffffff !important;
    font-variant-numeric: tabular-nums !important;
}

.quick-time-pill-hint {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-left: auto !important;
}

.quick-time-pill:hover,
.quick-time-pill:active {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

.quick-time-next-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px 18px !important;
    border-radius: 14px !important;
    background: #3b82f6 !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4) !important;
    transition: transform 120ms ease !important;
    flex-shrink: 0 !important;
}

.quick-time-next-btn:active {
    transform: scale(0.95) !important;
}

.quick-time-next-btn svg {
    width: 16px !important;
    height: 16px !important;
}

/* Quick Appointment Services Multi-Select */
.quick-srv-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.quick-srv-checkbox {
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.32) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 140ms ease !important;
}

.quick-service-row.is-selected .quick-srv-checkbox {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

.quick-srv-checkbox-icon {
    display: none !important;
    width: 14px !important;
    height: 14px !important;
    color: #ffffff !important;
    stroke-width: 2.5 !important;
}

.quick-service-row.is-selected .quick-srv-checkbox-icon {
    display: block !important;
}

.quick-services-footer-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 4px 6px 4px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

.quick-services-summary-pill {
    flex: 1 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.quick-services-next-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border-radius: 14px !important;
    background: #3b82f6 !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
    transition: transform 140ms ease, opacity 140ms ease !important;
    flex-shrink: 0 !important;
}

.quick-services-next-btn.is-disabled {
    opacity: 0.35 !important;
    pointer-events: none !important;
}

.quick-services-next-btn:active {
    transform: scale(0.96) !important;
}

.quick-services-next-btn svg {
    width: 16px !important;
    height: 16px !important;
}

/* ==========================================================================
   APPOINTMENT ADD ACTION POPOVER (LIQUID GLASS iOS 27)
   ========================================================================== */

.appointment-add-menu-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.icon-button-add {
    position: relative !important;
    transition: transform var(--motion-duration-micro, 140ms) var(--motion-ease-press), background-color var(--motion-duration-micro, 140ms) ease, border-color 180ms ease !important;
}

.icon-button-add svg,
.icon-button-add i {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.icon-button-add.is-menu-open {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.icon-button-add.is-menu-open svg,
.icon-button-add.is-menu-open i {
    transform: rotate(45deg) !important;
}

.appointment-add-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1040 !important;
    background: rgba(0, 0, 0, 0.25) !important;
    opacity: 0 !important;
    transition: opacity 180ms ease !important;
    pointer-events: none !important;
}

.appointment-add-backdrop.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.appointment-add-popover {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    width: 250px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 8px !important;
    border-radius: 20px !important;
    background: rgba(22, 19, 29, 0.94) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    z-index: 1050 !important;
    display: flex !important;
    flex-direction: column !important;
    transform-origin: top right !important;
    transform: scale(0.9) translate3d(0, -6px, 0) !important;
    opacity: 0 !important;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}

.appointment-add-popover.is-open {
    transform: scale(1) translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.appointment-add-popover.is-closing {
    transform: scale(0.94) translate3d(0, -4px, 0) !important;
    opacity: 0 !important;
    transition: transform 160ms cubic-bezier(0.4, 0, 1, 1), opacity 140ms ease !important;
    pointer-events: none !important;
}

.appointment-add-popover[hidden] {
    display: none !important;
}

.appointment-add-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background-color 140ms ease, transform 140ms ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    user-select: none !important;
}

.appointment-add-menu-item:active {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: scale(0.98) !important;
}

.appointment-add-item-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.08) !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.9) !important;
    flex-shrink: 0 !important;
}

.appointment-add-item-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
}

.appointment-add-item-icon.is-quick-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.4) 100%) !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
    color: #60a5fa !important;
}

.appointment-add-item-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.appointment-add-item-title {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

.appointment-add-item-sub {
    font-size: 11.5px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    line-height: 1.2 !important;
}

.appointment-add-menu-divider {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    margin: 4px 6px !important;
}

/* Quick Appointment Enhancements: Collision Warning & Editable Summary */
@keyframes quickInputShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.quick-input-box.is-error-shake {
    animation: quickInputShake 360ms ease-in-out !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

.quick-time-collision-notice {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    background: rgba(245, 158, 11, 0.14) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    border-radius: 12px !important;
    margin-top: 14px !important;
    transition: all 180ms ease !important;
}

.quick-time-collision-notice.is-hidden {
    display: none !important;
}

.quick-collision-icon {
    color: #f59e0b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.quick-collision-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.quick-collision-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.quick-collision-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fbbf24 !important;
}

.quick-collision-desc {
    font-size: 11.5px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.quick-summary-price-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(56, 189, 248, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 10px !important;
    padding: 2px 8px !important;
}

.quick-summary-price-input {
    width: 80px !important;
    background: transparent !important;
    border: none !important;
    color: #38bdf8 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-align: right !important;
    outline: none !important;
    padding: 2px 0 !important;
    font-family: inherit !important;
}

.quick-summary-currency {
    color: #38bdf8 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.quick-summary-comment-wrap {
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.quick-summary-comment-wrap .quick-compact-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.quick-summary-comment-wrap .quick-compact-input:focus {
    border-color: #3b82f6 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}